feat(combobox): Add example to show listbox options with right icon and/or metatext, options with drill in (#3091)

Author: Ayesha Mazumdar

ui/components/combobox/__tests__/__snapshots__/render_combobox_renders_different_styles_of_options_in_the_listbox.json

@@ -585,6 +585,66 @@ describe('render combobox', () => {
         hasFocus
       />
     ));
+  it('renders different styles of options in the listbox', () =>
+    matchesMarkupAndStyle(
+      <Combobox
+        id={comboboxId}
+        aria-controls={listboxId}
+        readonly
+        value="Accounts"
+        inputIconPosition="right"
+        rightInputIcon={
+          <UtilityIcon
+            symbol="down"
+            className="slds-icon slds-icon_x-small slds-icon-text-default"
+            containerClassName="slds-input__icon slds-input__icon_right"
+            assistiveText={false}
+            title={false}
+          />
+        }
+        listbox={
+          <Listbox
+            id={listboxId}
+            snapshot={Snapshot.PlainStylingOptions}
+            type="entity"
+            count={4}
+            visualSelection
+          />
+        }
+        isOpen
+        hasFocus
+      />
+    ));
+  it('renders different styles of options in the listbox with drill in', () =>
+    matchesMarkupAndStyle(
+      <Combobox
+        id={comboboxId}
+        aria-controls={listboxId}
+        readonly
+        value="Accounts"
+        inputIconPosition="right"
+        rightInputIcon={
+          <UtilityIcon
+            symbol="down"
+            className="slds-icon slds-icon_x-small slds-icon-text-default"
+            containerClassName="slds-input__icon slds-input__icon_right"
+            assistiveText={false}
+            title={false}
+          />
+        }
+        listbox={
+          <Listbox
+            id={listboxId}
+            snapshot={Snapshot.EntityStylingOptions}
+            type="entity"
+            count={3}
+            visualSelection
+          />
+        }
+        isOpen
+        hasFocus
+      />
+    ));
   it('renders autocomplete combobox', () =>
     matchesMarkupAndStyle(
       <Combobox

ui/components/combobox/__tests__/__snapshots__/render_combobox_renders_different_styles_of_options_in_the_listbox_with_drill_in.json

@@ -160,6 +160,22 @@ Options within a `listbox` can be grouped together under meaningful headings. Th
   - The `ul` element in this case has `role="group"` with an `aria-label` that matches the visible label
   - Display the group label visually, but due to the way a `listbox` works it can only be marked as `role="presentation"`, as a `listbox` can only have `option` children. This allows us to communicate the group label visually and programmatically to a screen reader
 
+### Styling choices for options
+
+The options in the `listbox` can have a left icon and/or metatext.
+
+<Example title="Combobox - Styling Options">
+  <CodeView style={{position: 'relative', maxWidth: '20rem', height: '12rem'}}>
+    <Listbox
+      id="listbox-id-2"
+      snapshot={Snapshot.PlainStylingOptions}
+      type="plain"
+      count={4}
+      visualSelection
+    />
+  </CodeView>
+</Example>
+
 ### Handling focus
 
 When a combobox is clicked or focused, it is common for the options to be displayed at the same time. When you leave the combobox it is also common that the options are hidden.
@@ -495,6 +511,22 @@ Whilst typing, the highlighted option in the `listbox` should be the user's text
 
 </Example>
 
+### Drill In for Autocomplete
+
+The options in the autocomplete `listbox` can have a right icon to indicate an option that drills in for more options.
+
+<Example title="Combobox - Autocomplete DrillIn Styling">
+  <CodeView style={{position: 'relative', maxWidth: '20rem', height: '10rem'}}>
+    <Listbox
+      id="listbox-id-3"
+      snapshot={Snapshot.EntityStylingOptions}
+      type="entity"
+      count={3}
+      visualSelection
+    />
+  </CodeView>
+</Example>
+
 ### Keyboard interaction
 
 The same keyboard interactions apply from the base Combobox, but with these differences:

ui/components/combobox/__tests__/index.spec.js

@@ -127,6 +127,15 @@ const EntityOption = props => (
         )}
       </span>
     )}
+    {props.rightIcon && (
+      <UtilityIcon
+        className="slds-icon_x-small slds-icon-text-default"
+        containerClassName="slds-align-middle"
+        symbol={props.rightIcon.toLowerCase()}
+        title={props.rightIconAssistiveText}
+        assistiveText={props.rightIconAssistiveText}
+      />
+    )}
   </ListboxOption>
 );
 
@@ -176,12 +185,22 @@ export const Option = props => (
       props.className
     )}
   >
-    {!props.label && (
+    {!props.label &&
+      !props.rightIcon && (
+        <span className="slds-media__figure">
+          <SvgIcon
+            className="slds-icon slds-icon_x-small slds-listbox__icon-selected"
+            sprite="utility"
+            symbol="check"
+          />
+        </span>
+      )}
+    {props.rightIcon && (
       <span className="slds-media__figure">
         <SvgIcon
-          className="slds-icon slds-icon_x-small slds-listbox__icon-selected"
+          className="slds-icon slds-icon_x-small slds-icon-text-default"
           sprite="utility"
-          symbol="check"
+          symbol={props.rightIcon}
         />
       </span>
     )}
@@ -192,7 +211,9 @@ export const Option = props => (
     ) : (
       <span className="slds-media__body">
         <span
-          className="slds-truncate"
+          className={classNames('slds-truncate', {
+            'slds-m-bottom_xxx-small': props.plainMeta
+          })}
           title={
             props.term
               ? `${props.beforeTerm}${props.term}${props.afterTerm}`
@@ -212,6 +233,11 @@ export const Option = props => (
             props.name
           )}
         </span>
+        {props.plainMeta && (
+          <span className="slds-listbox__option-meta slds-listbox__option-meta_entity">
+            {props.plainMeta}
+          </span>
+        )}
       </span>
     )}
   </ListboxOption>
@@ -240,6 +266,8 @@ class Listbox extends Component {
           term={option.term}
           beforeTerm={option.beforeTerm}
           afterTerm={option.afterTerm}
+          rightIcon={option.rightIcon}
+          rightIconAssistiveText={option.rightIconAssistiveText}
         />
       </ListboxItem>
     );
@@ -259,6 +287,8 @@ class Listbox extends Component {
           term={option.term}
           beforeTerm={option.beforeTerm}
           afterTerm={option.afterTerm}
+          plainMeta={option.plainMeta}
+          rightIcon={option.rightIcon}
         />
       </ListboxItem>
     );
@@ -322,6 +352,7 @@ export class ListboxGroup extends Component {
           entityLocation={option.entityLocation}
           term={option.term}
           label={option.label}
+          rightIcon={option.rightIcon}
         />
       </ListboxItem>
     );

ui/components/combobox/docs.mdx

@@ -396,3 +396,41 @@ export const PlainOptionsTypeahead = {
     afterTerm: 'ortunity Pipeline'
   }
 };
+
+export const PlainStylingOptions = {
+  option1: {
+    name: 'Edge Communications'
+  },
+  option2: {
+    name: 'Alexandria Textiles Corp of America',
+    rightIcon: 'anchor'
+  },
+  option3: {
+    name: 'Express Logistics and Transport',
+    plainMeta: 'Durham, NC'
+  },
+  option4: {
+    name: 'Alexandria Textiles Corp of America',
+    plainMeta: 'Alexandria, VA',
+    rightIcon: 'anchor'
+  }
+};
+
+export const EntityStylingOptions = {
+  option1: {
+    name: 'Edge Communications'
+  },
+  option2: {
+    name: 'Express Logistics and Transport',
+    entityMeta: true,
+    entityLocation: 'Durham, NC'
+  },
+  option3: {
+    name: 'Alexandria Textiles Corp of America',
+    entityMeta: true,
+    entityType: 'Account',
+    entityLocation: 'Alexandria, VA',
+    rightIcon: 'chevronright',
+    rightIconAssistiveText: 'Has further options'
+  }
+};