feat: Inline multiselect tokens (#3185)

Co-authored-by: Katie George <[email protected]>

pages/multiselect/constants.ts

@@ -11,3 +11,25 @@ export const deselectAriaLabel = (option: MultiselectProps.Option) => {
   const label = option?.value || option?.label;
   return label ? `Deselect ${label}` : 'no label';
 };
+
+export const getInlineAriaLabel = (selectedOptions: MultiselectProps.Options) => {
+  let label;
+
+  if (selectedOptions.length === 0) {
+    label = 0;
+  }
+
+  if (selectedOptions.length === 1) {
+    label = selectedOptions[0].label;
+  }
+
+  if (selectedOptions.length === 2) {
+    label = `${selectedOptions[0].label} and ${selectedOptions[1].label}`;
+  }
+
+  if (selectedOptions.length > 2) {
+    label = `${selectedOptions[0].label}, ${selectedOptions[1].label}, and ${selectedOptions.length - 2} more`;
+  }
+
+  return label + ' selected';
+};

pages/multiselect/multiselect.test.page.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import Box from '~components/box';
 import Multiselect, { MultiselectProps } from '~components/multiselect';
 
-import { deselectAriaLabel, i18nStrings } from './constants';
+import { deselectAriaLabel, getInlineAriaLabel, i18nStrings } from './constants';
 
 const _selectedOptions1 = [
   {
@@ -113,6 +113,7 @@ const options2 = [
     ],
   },
 ];
+
 export default function MultiselectPage() {
   const [selectedOptions1, setSelectedOptions1] = React.useState<MultiselectProps.Options>(_selectedOptions1);
   const [selectedOptions2, setSelectedOptions2] = React.useState<MultiselectProps.Options>(_selectedOptions1);
@@ -235,14 +236,14 @@ export default function MultiselectPage() {
           <Box variant="h1">Test: Inline tokens</Box>
           <div style={{ width: 200 }}>
             <Multiselect
-              {...{ inlineTokens: true }}
+              inlineTokens={true}
               statusType="pending"
               filteringType="none"
               options={options1}
               placeholder={'Choose option'}
               selectedOptions={selectedOptions7}
               i18nStrings={i18nStrings}
-              ariaLabel={`${selectedOptions7.length} accounts selected`}
+              ariaLabel={getInlineAriaLabel(selectedOptions7)}
               onChange={event => {
                 setSelectedOptions7(event.detail.selectedOptions);
               }}

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -11259,6 +11259,12 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
       "optional": true,
       "type": "string",
     },
+    {
+      "description": "Shows tokens inside the trigger instead of below it.",
+      "name": "inlineTokens",
+      "optional": true,
+      "type": "boolean",
+    },
     {
       "description": "Overrides the invalidation state. Usually the invalid state
 comes from the parent \`FormField\`component,

src/multiselect/__tests__/multiselect.test.tsx

@@ -650,10 +650,10 @@ test('Trigger receives focus when autofocus is true', () => {
   expect(document.activeElement).toBe(wrapper.findTrigger().getElement());
 });
 
-describe('With inline tokens (private API)', () => {
+describe('With inline tokens', () => {
   it('can render inline tokens', () => {
     const { wrapper } = renderMultiselect(
-      <Multiselect {...{ inlineTokens: true }} options={defaultOptions} selectedOptions={[defaultOptions[0]]} />
+      <Multiselect inlineTokens={true} options={defaultOptions} selectedOptions={[defaultOptions[0]]} />
     );
 
     // Trigger contains token labels and the number of selected items
@@ -666,7 +666,7 @@ describe('With inline tokens (private API)', () => {
 
   it('shows placeholder when no items are selected', () => {
     const { wrapper } = renderMultiselect(
-      <Multiselect {...{ inlineTokens: true }} selectedOptions={[]} placeholder="Choose something" />
+      <Multiselect inlineTokens={true} selectedOptions={[]} placeholder="Choose something" />
     );
 
     expect(wrapper.findTrigger().getElement()).toHaveTextContent('Choose something');
@@ -677,7 +677,7 @@ describe('With inline tokens (private API)', () => {
       { value: '1', label: 'First', description: 'description', tags: ['tag'], labelTag: 'label' },
     ];
     const { wrapper } = renderMultiselect(
-      <Multiselect {...{ inlineTokens: true }} options={extendedOptions} selectedOptions={[extendedOptions[0]]} />
+      <Multiselect inlineTokens={true} options={extendedOptions} selectedOptions={[extendedOptions[0]]} />
     );
 
     expect(wrapper.findTrigger().getElement()).toHaveTextContent('First');
@@ -689,7 +689,7 @@ describe('With inline tokens (private API)', () => {
   it('shows multiple selected options inline', () => {
     const { wrapper } = renderMultiselect(
       <Multiselect
-        {...{ inlineTokens: true }}
+        inlineTokens={true}
         options={defaultOptions}
         selectedOptions={[defaultOptions[0], defaultOptions[1], defaultOptions[2]]}
       />

src/multiselect/interfaces.ts

@@ -23,6 +23,10 @@ export interface MultiselectProps extends BaseSelectProps {
    * Only use this if the selected options are displayed elsewhere on the page.
    */
   hideTokens?: boolean;
+  /**
+   * Shows tokens inside the trigger instead of below it.
+   */
+  inlineTokens?: boolean;
   /**
    * Specifies an `aria-label` for the token deselection button.
    * @i18n

src/multiselect/internal.tsx

@@ -28,7 +28,7 @@ type InternalMultiselectProps = SomeRequired<
   MultiselectProps,
   'options' | 'selectedOptions' | 'filteringType' | 'statusType' | 'keepOpen' | 'hideTokens'
 > &
-  InternalBaseComponentProps & { inlineTokens?: boolean };
+  InternalBaseComponentProps;
 
 const InternalMultiselect = React.forwardRef(
   (