Merge pull request #1732 from adevinta/dropdown-styles-figma-sync

Dropdown styles figma sync

packages/components/dropdown/package.json

@@ -31,6 +31,7 @@
     "@radix-ui/react-id": "1.0.1",
     "@spark-ui/form-field": "^1.4.1",
     "@spark-ui/icon": "^2.1.1",
+    "@spark-ui/icons": "^1.21.4",
     "@spark-ui/popover": "^1.4.2",
     "@spark-ui/visually-hidden": "^1.2.0",
     "class-variance-authority": "0.7.0",

packages/components/dropdown/src/Dropdown.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 import { Button } from '@spark-ui/button'
 import { FormField } from '@spark-ui/form-field'
-import { Book } from '@spark-ui/icons/dist/icons/Book'
+import { BookmarkFill } from '@spark-ui/icons/dist/icons/BookmarkFill'
 import { Tag } from '@spark-ui/tag'
 import { Meta, StoryFn } from '@storybook/react'
 import { useState } from 'react'
@@ -20,6 +20,9 @@ export const Default: StoryFn = _args => {
     <div className="pb-[300px]">
       <Dropdown>
         <Dropdown.Trigger aria-label="Book">
+          <Dropdown.LeadingIcon>
+            <BookmarkFill />
+          </Dropdown.LeadingIcon>
           <Dropdown.Value placeholder="Pick a book" />
         </Dropdown.Trigger>
 
@@ -202,7 +205,7 @@ export const LeadingIcon: StoryFn = _args => {
       <Dropdown>
         <Dropdown.Trigger aria-label="Book">
           <Dropdown.LeadingIcon>
-            <Book />
+            <BookmarkFill />
           </Dropdown.LeadingIcon>
           <Dropdown.Value placeholder="Pick a book" />
         </Dropdown.Trigger>
@@ -224,7 +227,7 @@ export const LeadingIcon: StoryFn = _args => {
 
 export const ItemIndicator: StoryFn = _args => {
   return (
-    <div className="w-sz-480 pb-[300px]">
+    <div className="pb-[300px]">
       <Dropdown multiple defaultValue={['book-1', 'book-2']}>
         <Dropdown.Trigger aria-label="Book">
           <Dropdown.Value placeholder="Pick a book" />
@@ -291,7 +294,7 @@ export const FormFieldLabel: StoryFn = _args => {
 export const MultipleSelection: StoryFn = _args => {
   return (
     <div className="pb-[300px]">
-      <Dropdown multiple>
+      <Dropdown multiple defaultValue={['book-1', 'book-2']}>
         <Dropdown.Trigger aria-label="Book">
           <Dropdown.Value placeholder="Pick a book" />
         </Dropdown.Trigger>
@@ -312,7 +315,7 @@ export const MultipleSelection: StoryFn = _args => {
 }
 
 export const MultipleSelectionControlled: StoryFn = () => {
-  const [values, setValues] = useState(['book-1'])
+  const [values, setValues] = useState(['book-1', 'book-2'])
 
   return (
     <div className="pb-[300px]">

packages/components/dropdown/src/Dropdown.test.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable max-lines */
+import { BookmarkFill } from '@spark-ui/icons/dist/icons/BookmarkFill'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { useState } from 'react'
@@ -27,6 +28,9 @@ describe('Dropdown', () => {
     render(
       <Dropdown>
         <Dropdown.Trigger aria-label="Book">
+          <Dropdown.LeadingIcon>
+            <BookmarkFill />
+          </Dropdown.LeadingIcon>
           <Dropdown.Value placeholder="Pick a book" />
         </Dropdown.Trigger>
         <Dropdown.Popover>

packages/components/dropdown/src/DropdownItem.tsx

@@ -29,10 +29,10 @@ const ItemContent = ({ className, disabled = false, value, children }: ItemProps
   return (
     <li
       className={cx(
-        highlightedItem?.value === value && 'bg-basic-container',
+        highlightedItem?.value === value && 'bg-surface-hovered',
         isSelected && 'font-bold',
         disabled && 'opacity-dim-3',
-        'rounded-sm px-md py-sm text-body-1',
+        'px-lg py-md text-body-1',
         className
       )}
       key={value}

packages/components/dropdown/src/DropdownItems.tsx

@@ -1,3 +1,4 @@
+import { cx } from 'class-variance-authority'
 import { ReactNode } from 'react'
 
 import { useDropdownContext } from './DropdownContext'
@@ -7,14 +8,16 @@ interface ItemsProps {
 }
 
 export const Items = ({ children }: ItemsProps) => {
-  const { isOpen, getMenuProps } = useDropdownContext()
+  const { isOpen, getMenuProps, hasPopover } = useDropdownContext()
 
   return (
     <ul
       {...getMenuProps()}
-      className={`flex max-h-sz-320 flex-col overflow-auto ${
-        isOpen ? 'block' : 'pointer-events-none opacity-0'
-      }`}
+      className={cx(
+        'flex  flex-col',
+        isOpen ? 'block' : 'pointer-events-none opacity-0',
+        hasPopover ? 'max-h-sz-320 overflow-y-auto p-lg' : ''
+      )}
     >
       {children}
     </ul>

packages/components/dropdown/src/DropdownLeadingIcon.tsx

@@ -2,7 +2,11 @@ import { Icon } from '@spark-ui/icon'
 import { ReactElement } from 'react'
 
 export const LeadingIcon = ({ children }: { children: ReactElement }) => {
-  return <Icon>{children}</Icon>
+  return (
+    <Icon size={'sm'} className="shrink-0">
+      {children}
+    </Icon>
+  )
 }
 
 LeadingIcon.id = 'LeadingIcon'

packages/components/dropdown/src/DropdownPopover.tsx

@@ -17,6 +17,7 @@ export const Popover = ({ children }: PropsWithChildren) => {
 
   return (
     <SparkPopover.Content
+      inset
       matchTriggerWidth
       onOpenAutoFocus={e => e.preventDefault()}
       className={cx(!isOpen && 'hidden', '!z-dropdown')}

packages/components/dropdown/src/DropdownTrigger.tsx

@@ -1,3 +1,5 @@
+import { Icon } from '@spark-ui/icon'
+import { ArrowHorizontalDown } from '@spark-ui/icons/dist/icons/ArrowHorizontalDown'
 import { Popover } from '@spark-ui/popover'
 import { VisuallyHidden } from '@spark-ui/visually-hidden'
 import { cx } from 'class-variance-authority'
@@ -12,8 +14,7 @@ interface TriggerProps {
 }
 
 export const Trigger = ({ 'aria-label': ariaLabel, children, className }: TriggerProps) => {
-  const { isOpen, getToggleButtonProps, getDropdownProps, getLabelProps, hasPopover } =
-    useDropdownContext()
+  const { getToggleButtonProps, getDropdownProps, getLabelProps, hasPopover } = useDropdownContext()
 
   const [WrapperComponent, wrapperProps] = hasPopover
     ? [Popover.Trigger, { asChild: true }]
@@ -30,13 +31,17 @@ export const Trigger = ({ 'aria-label': ariaLabel, children, className }: Trigge
         <button
           type="button"
           className={cx(
-            'flex w-full cursor-pointer justify-between rounded-sm border-sm border-outline bg-surface p-sm',
+            'flex w-full cursor-pointer items-center justify-between',
+            'min-h-sz-44 rounded-lg border-sm border-outline bg-surface px-lg',
             className
           )}
           {...getToggleButtonProps(getDropdownProps())}
         >
-          <span className="flex items-center justify-start gap-sm">{children}</span>
-          <span className="px-sm">{isOpen ? <>&#8593;</> : <>&#8595;</>}</span>
+          <span className="flex items-center justify-start gap-md">{children}</span>
+
+          <Icon className="ml-md shrink-0" size="sm">
+            <ArrowHorizontalDown />
+          </Icon>
         </button>
       </WrapperComponent>
     </>

packages/components/dropdown/src/DropdownValue.tsx

@@ -17,8 +17,11 @@ export const Value = ({ children, className, placeholder }: ValueProps) => {
   const suffix = selectedItems.length > 1 ? `, +${selectedItems.length - 1}` : ''
 
   return (
-    <span className={cx('text-neutral', className)}>
-      {!hasSelectedItems ? placeholder : children || text + suffix}
+    <span className={cx('flex shrink items-center text-left', className)}>
+      <span className="line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all">
+        {!hasSelectedItems ? placeholder : children || text}
+      </span>
+      {suffix && <span>{suffix}</span>}
     </span>
   )
 }