feat(combobox): Add example to show listbox options with right icon a…

…nd/or metatext, options with drill in (#3091)
salesforce-ux · Feb 23, 2018 · 3d4af71 · 3d4af71
1 parent 9407709
commit 3d4af71
Show file tree

Hide file tree

Showing 6 changed files with 280 additions and 4 deletions.
diff --git a/...s__/__snapshots__/render_combobox_renders_different_styles_of_options_in_the_listbox.json b/...s__/__snapshots__/render_combobox_renders_different_styles_of_options_in_the_listbox.json
diff --git a/...s__/render_combobox_renders_different_styles_of_options_in_the_listbox_with_drill_in.json b/...s__/render_combobox_renders_different_styles_of_options_in_the_listbox_with_drill_in.json
diff --git a/ui/components/combobox/__tests__/index.spec.js b/ui/components/combobox/__tests__/index.spec.js
@@ -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

diff --git a/ui/components/combobox/docs.mdx b/ui/components/combobox/docs.mdx
@@ -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:

diff --git a/ui/components/combobox/listbox/index.jsx b/ui/components/combobox/listbox/index.jsx
@@ -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>
     );

diff --git a/ui/components/combobox/snapshots.data.js b/ui/components/combobox/snapshots.data.js
@@ -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'
+  }
+};