docs: add multiselect combobox docs (#2711)

* docs: add multiselect combobox docs * fix(combobox): refine typings for multiselect * docs: fix storybook urls * docs: tiny fix to props table * docs: fix pr comments * chore: design fixes * fix: pr review * chore: small commit for CI * chore: small commit for ci
twilio-labs · Sep 29, 2022 · d068c20 · d068c20
1 parent be2ce22
commit d068c20
Show file tree

Hide file tree

Showing 8 changed files with 975 additions and 7 deletions.
diff --git a/.changeset/perfect-lobsters-beam.md b/.changeset/perfect-lobsters-beam.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/combobox': patch
+'@twilio-paste/core': patch
+---
+
+[Combobox] Refine typings and styling for group options for Multiselect Combobox.
diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx
@@ -27,8 +27,8 @@ const ComboboxListboxGroup = React.forwardRef<HTMLUListElement, ComboboxListboxG
             as="li"
             backgroundColor="colorBackground"
             role="presentation"
-            paddingY="space40"
-            paddingLeft="space70"
+            paddingY="space30"
+            paddingLeft="space50"
             paddingRight="space50"
             element={`${element}_GROUPNAME`}
           >

diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
@@ -17,7 +17,7 @@ export interface ComboboxListboxOptionProps extends Pick<BoxProps, 'element'> {
 
 const VariantStyles: {[key in ComboboxListboxOptionProps['variant']]: BoxStyleProps} = {
   groupOption: {
-    paddingLeft: 'space70',
+    paddingLeft: 'space90',
     paddingRight: 'space50',
   },
   default: {

diff --git a/packages/paste-core/components/combobox/src/types.ts b/packages/paste-core/components/combobox/src/types.ts
@@ -83,8 +83,15 @@ export interface ComboboxProps extends Omit<InputProps, 'id' | 'type' | 'value'>
 }
 
 export interface MultiselectComboboxProps
-  extends Omit<ComboboxProps, 'autocomplete' | 'initialSelectedItem' | 'selectedItem' | 'onSelectedItemChange'> {
-  filterItems?: (items: any[], inputValue: string) => any[];
+  extends Omit<
+    ComboboxProps,
+    | 'autocomplete'
+    | 'initialSelectedItem'
+    | 'selectedItem'
+    | 'onSelectedItemChange'
+    | 'getA11yStatusMessage'
+    | 'getA11ySelectionMessage'
+  > {
   initialSelectedItems?: any[];
   onSelectedItemsChange?: (newSelectedItems: any[]) => void;
   selectedItemsLabelText: string;
@@ -93,7 +100,10 @@ export interface MultiselectComboboxProps
 }
 
 export interface ComboboxItemsProps
-  extends Pick<ComboboxProps, 'groupItemsBy' | 'optionTemplate' | 'groupLabelTemplate' | 'element' | 'emptyState'> {
+  extends Pick<
+    ComboboxProps,
+    'groupItemsBy' | 'optionTemplate' | 'groupLabelTemplate' | 'element' | 'emptyState' | 'state'
+  > {
   items: Item[];
   selectedItems?: Item[];
   disabledItems?: Item[];