feat: update Multiselect padding, add xs sizing (#561)

* fix(MultiSelect): use flex gap over margins

* feat(MultiSelect): update sm and md padding to design sysem

* fix: run npm i

* feat(MultiSelect): add xs sizing variant

* feat(MultiSelect): add `isStretchLayout` prop to follow Figma

* fix: set focus to false when blur

* feat: correct padding on multiselect input field

* feat: revert blur on input blur

* fix: remove input width when unfocused and in stretch mode

react/src/MultiSelect/MultiSelect.stories.tsx

@@ -122,23 +122,38 @@ WithFixedItemHeight.args = {
   ],
 }
 
+export const WithIsStretchLayoutProp = Template.bind({})
+WithIsStretchLayoutProp.args = {
+  isStretchLayout: true,
+  values: ['What happens when the label is fairly long', 'Bat'],
+}
+WithIsStretchLayoutProp.storyName = 'With isStretchLayout Prop'
+
 export const Sizes = () => {
-  const items = ['sm', 'md']
-  const [first, setFirst] = useState(['sm'])
-  const [second, setSecond] = useState(['md'])
+  const items = ['xs', 'sm', 'md']
+  const [xs, setXs] = useState(['xs'])
+  const [sm, setSm] = useState(['sm'])
+  const [md, setMd] = useState(['md'])
 
   return (
     <Stack>
       <MultiSelect
-        values={first}
-        onChange={setFirst}
+        values={xs}
+        onChange={setXs}
+        size="xs"
+        items={items}
+        name="xs"
+      />
+      <MultiSelect
+        values={sm}
+        onChange={setSm}
         size="sm"
         items={items}
         name="sm"
       />
       <MultiSelect
-        values={second}
-        onChange={setSecond}
+        values={md}
+        onChange={setMd}
         size="md"
         items={items}
         name="md"

react/src/MultiSelect/MultiSelectContext.tsx

@@ -18,6 +18,10 @@ interface MultiSelectContextReturn<Item extends ComboboxItem = ComboboxItem>
     > {
   maxItems: number | null
   colorScheme?: ThemingProps<'MultiSelect'>['colorScheme']
+  /**
+   * If `true`, the selected items will take up the full width of the input container. Defaults to `false`.
+   */
+  isStretchLayout?: boolean
 }
 
 export const MultiSelectContext = createContext<

react/src/MultiSelect/MultiSelectProvider.tsx

@@ -66,6 +66,10 @@ export interface MultiSelectProviderProps<
   downshiftMultiSelectProps?: Partial<UseMultipleSelectionProps<Item>>
   colorScheme?: ThemingProps<'MultiSelect'>['colorScheme']
   fixedItemHeight?: number
+  /**
+   * If `true`, the selected items will take up the full width of the input container. Defaults to `false`.
+   */
+  isStretchLayout?: boolean
 }
 export const MultiSelectProvider = ({
   items: rawItems,
@@ -90,6 +94,7 @@ export const MultiSelectProvider = ({
   size: _size,
   colorScheme,
   fixedItemHeight,
+  isStretchLayout,
 }: MultiSelectProviderProps): JSX.Element => {
   const theme = useTheme()
   // Required in case size is set in theme, we should respect the one set in theme.
@@ -351,6 +356,7 @@ export const MultiSelectProvider = ({
           activeIndex,
           setActiveIndex,
           colorScheme,
+          isStretchLayout,
         }}
       >
         {children}

react/src/MultiSelect/components/MultiSelectCombobox/MultiSelectCombobox.tsx

@@ -1,5 +1,12 @@
-import { forwardRef, PropsWithChildren, useCallback } from 'react'
-import { Box, chakra, Flex, Icon, useMergeRefs } from '@chakra-ui/react'
+import { forwardRef, PropsWithChildren, useCallback, useMemo } from 'react'
+import {
+  Box,
+  chakra,
+  Flex,
+  Icon,
+  SystemStyleObject,
+  useMergeRefs,
+} from '@chakra-ui/react'
 
 import { BxsChevronDown, BxsChevronUp } from '~/icons'
 import { useSelectContext } from '~/SingleSelect'
@@ -10,7 +17,21 @@ import { SelectedItems } from './SelectedItems'
 
 const MultiItemsContainer = ({ children }: PropsWithChildren) => {
   const { styles } = useSelectContext()
-  return <Box sx={styles.itemContainer}>{children}</Box>
+  const { isStretchLayout } = useMultiSelectContext()
+
+  const containerStyles = useMemo(() => {
+    if (isStretchLayout)
+      return {
+        columnGap: '0',
+      }
+    return {}
+  }, [isStretchLayout])
+
+  return (
+    <Box __css={styles.itemContainer} {...containerStyles}>
+      {children}
+    </Box>
+  )
 }
 
 export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
@@ -23,6 +44,7 @@ export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
       isRequired,
       placeholder,
       setIsFocused,
+      isFocused,
       isOpen,
       toggleMenu,
       isInvalid,
@@ -31,7 +53,7 @@ export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
       getToggleButtonProps,
     } = useSelectContext()
 
-    const { getDropdownProps } = useMultiSelectContext()
+    const { getDropdownProps, selectedItems } = useMultiSelectContext()
 
     const mergedRefs = useMergeRefs(inputRef, ref)
 
@@ -56,6 +78,15 @@ export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
       [setIsFocused],
     )
 
+    const focusInputStyles: SystemStyleObject = useMemo(() => {
+      if (isFocused || selectedItems.length === 0) return {}
+      return {
+        width: 0,
+        padding: 0,
+        flex: 0,
+      }
+    }, [isFocused, selectedItems.length])
+
     return (
       <Flex
         aria-disabled={isDisabled}
@@ -69,9 +100,12 @@ export const MultiSelectCombobox = forwardRef<HTMLInputElement>(
           <chakra.input
             placeholder={placeholder}
             __css={styles.field}
+            {...focusInputStyles}
             {...getInputProps({
               ...getDropdownProps({
                 ref: mergedRefs,
+                // We do not remove focus on blur since the focus state
+                // refers to the entire field and not just this input.
                 onFocus: () => setIsFocused(true),
                 onKeyDown: handleInputTabKeydown,
                 readOnly: isReadOnly || !isSearchable,

react/src/MultiSelect/components/MultiSelectItem/MultiSelectItem.tsx

@@ -27,8 +27,12 @@ export const MultiSelectItem = ({
     styles,
     size,
   } = useSelectContext()
-  const { getSelectedItemProps, removeSelectedItem, colorScheme } =
-    useMultiSelectContext()
+  const {
+    getSelectedItemProps,
+    removeSelectedItem,
+    colorScheme,
+    isStretchLayout,
+  } = useMultiSelectContext()
 
   const itemMeta = useMemo(() => {
     return {
@@ -62,10 +66,18 @@ export const MultiSelectItem = ({
     [closeMenu, isDisabled, isOpen, isReadOnly, setIsFocused],
   )
 
+  const tagStyles = useMemo(() => {
+    if (!isStretchLayout) return styles.tag
+    return {
+      ...styles.tag,
+      width: '100%',
+    }
+  }, [isStretchLayout, styles.tag])
+
   return (
     <Tag
       title={itemMeta.label}
-      sx={styles.tag}
+      sx={tagStyles}
       size={size}
       colorScheme={colorScheme}
       {...getSelectedItemProps({

react/src/theme/components/MultiSelect.ts

@@ -31,15 +31,18 @@ const baseStyle = definePartsStyle((props) => {
 
   return {
     ...comboboxBaseStyle,
+    chevron: {
+      display: 'flex',
+    },
     itemContainer: {
       display: 'inline-flex',
       flexWrap: 'wrap',
       flexGrow: 1,
-      // Margin difference for selected items.
-      my: '-3px',
+      gap: '4px',
     },
     fieldwrapper: {
       display: 'flex',
+      justifyContent: 'space-between',
       flexWrap: 'wrap',
       cursor: 'pointer',
       _disabled: {
@@ -69,6 +72,8 @@ const baseStyle = definePartsStyle((props) => {
       flexGrow: 1,
       width: 0,
       bg: 'transparent',
+      minW: '3.75rem',
+      px: '0.25rem',
       _disabled: {
         cursor: 'not-allowed',
       },
@@ -117,15 +122,37 @@ const variants = {
 }
 
 const sizes = {
+  xs: definePartsStyle(
+    mergeThemeOverride(omit(SingleSelect.sizes?.xs, ['field', 'icon']), {
+      itemContainer: {
+        // Padding for dropdown toggle.
+        maxW: 'calc(100% - 2.5rem)',
+      },
+      tagIcon: {
+        fontSize: '0.875rem',
+        mr: '0.25rem',
+      },
+      icon: {
+        fontSize: '0.875rem',
+      },
+      chevron: {
+        py: '0.125rem',
+        fontSize: '1rem',
+        px: '0.5rem',
+      },
+      fieldwrapper: {
+        ...SingleSelect.sizes?.xs.field,
+        p: '0.5rem',
+        minH: SingleSelect.sizes?.xs.field?.h,
+        h: 'auto',
+      },
+    }),
+  ),
   sm: definePartsStyle(
     mergeThemeOverride(omit(SingleSelect.sizes?.sm, ['field', 'icon']), {
       itemContainer: {
         // Padding for dropdown toggle.
-        maxW: 'calc(100% - 2rem)',
-      },
-      tag: {
-        my: '6px',
-        mx: '2px',
+        maxW: 'calc(100% - 2.5rem)',
       },
       tagIcon: {
         fontSize: '1rem',
@@ -135,58 +162,42 @@ const sizes = {
         fontSize: '1rem',
       },
       chevron: {
-        pt: '0.5rem',
+        py: '0.25rem',
         fontSize: '1rem',
         px: '0.5rem',
       },
       fieldwrapper: {
         ...SingleSelect.sizes?.sm.field,
-        p: '0.25rem',
+        p: '0.5rem',
         minH: SingleSelect.sizes?.sm.field?.h,
         h: 'auto',
       },
-      field: {
-        minW: '3.75rem',
-        px: '2px',
-        my: '2px',
-        pl: '0.5rem',
-      },
     }),
   ),
   md: definePartsStyle(
     mergeThemeOverride(omit(SingleSelect.sizes?.md, ['field', 'icon']), {
       itemContainer: {
         // Padding for dropdown toggle.
-        maxW: 'calc(100% - 2.5rem)',
+        maxW: 'calc(100% - 2.75rem)',
       },
       icon: {
         fontSize: '1.25rem',
       },
-      tag: {
-        my: '4px',
-        mx: '2px',
-      },
       tagIcon: {
         fontSize: '1.25rem',
         mr: '0.25rem',
       },
       chevron: {
-        pt: '0.25rem',
+        py: '0.25rem',
         px: '0.5rem',
         fontSize: '1.25rem',
       },
       fieldwrapper: {
         ...SingleSelect.sizes?.md.field,
-        p: '0.375rem',
+        p: '0.5rem',
         minH: SingleSelect.sizes?.md.field?.h,
         h: 'auto',
       },
-      field: {
-        minW: '3.75rem',
-        px: '2px',
-        my: '2px',
-        pl: '0.5rem',
-      },
     }),
   ),
 }