fix(global-search): Update global search to use new combobox group (#…

…3168) * fix(global-search): Update global search to use new combobox group * Update IDs * Update snapshots * Lint * Update snapshots * Update snapshots * Make IDs unique * Remove color property that caused regression * Update snapshots * Update snapshots... * Update snapshots * Remove title and AT from icons * Update copy to point to dynamic menu ref * Update snapshots
salesforce-ux · Mar 22, 2018 · 9bddfde · 9bddfde
1 parent d2ca8ae
commit 9bddfde
Show file tree

Hide file tree

Showing 64 changed files with 475 additions and 354 deletions.
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_default_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_default_app_launcher.json
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_dropped_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_dropped_app_launcher.json
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_grabbed_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_grabbed_app_launcher.json
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_moved_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_moved_app_launcher.json
diff --git a/ui/components/app-launcher/__tests__/__snapshots__/renders_a_search_app_launcher.json b/ui/components/app-launcher/__tests__/__snapshots__/renders_a_search_app_launcher.json
diff --git a/.../__snapshots__/render_combobox_render_autocomplete_combobox_with_mutliple_selections.json b/.../__snapshots__/render_combobox_render_autocomplete_combobox_with_mutliple_selections.json
diff --git a/...s__/__snapshots__/render_combobox_render_autocomplete_combobox_with_single_selection.json b/...s__/__snapshots__/render_combobox_render_autocomplete_combobox_with_single_selection.json
diff --git a/...combobox/__tests__/__snapshots__/render_combobox_render_autocomplete_entity_combobox.json b/...combobox/__tests__/__snapshots__/render_combobox_render_autocomplete_entity_combobox.json
diff --git a/..._combobox_render_autocomplete_entity_combobox_displaying_options_based_on_user_input.json b/..._combobox_render_autocomplete_entity_combobox_displaying_options_based_on_user_input.json
diff --git a/...shots__/render_combobox_render_autocomplete_entity_combobox_with_mutliple_selections.json b/...shots__/render_combobox_render_autocomplete_entity_combobox_with_mutliple_selections.json
diff --git a/...napshots__/render_combobox_render_autocomplete_entity_combobox_with_single_selection.json b/...napshots__/render_combobox_render_autocomplete_entity_combobox_with_single_selection.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/render_combobox_render_base_combobox.json b/ui/components/combobox/__tests__/__snapshots__/render_combobox_render_base_combobox.json
diff --git a/...pshots__/render_combobox_render_combobox_with_displaying_options_based_on_user_input.json b/...pshots__/render_combobox_render_combobox_with_displaying_options_based_on_user_input.json
diff --git a/ui/components/combobox/__tests__/__snapshots__/render_combobox_render_grouped_combobox.json b/ui/components/combobox/__tests__/__snapshots__/render_combobox_render_grouped_combobox.json
diff --git a/...ots__/render_combobox_render_grouped_combobox_displaying_options_based_on_user_input.json b/...ots__/render_combobox_render_grouped_combobox_displaying_options_based_on_user_input.json
diff --git a/...ts__/render_combobox_render_grouped_combobox_with_selections_made_in_collapsed_state.json b/...ts__/render_combobox_render_grouped_combobox_with_selections_made_in_collapsed_state.json
diff --git a/...ots__/render_combobox_render_grouped_combobox_with_selections_made_in_expanded_state.json b/...ots__/render_combobox_render_grouped_combobox_with_selections_made_in_expanded_state.json
diff --git a/...ests__/__snapshots__/render_combobox_render_multiple_selections_in_a_closed_combobox.json b/...ests__/__snapshots__/render_combobox_render_multiple_selections_in_a_closed_combobox.json
diff --git a/.../__tests__/__snapshots__/render_combobox_render_single_selection_in_an_open_combobox.json b/.../__tests__/__snapshots__/render_combobox_render_single_selection_in_an_open_combobox.json
diff --git a/...nents/combobox/__tests__/__snapshots__/render_combobox_renders_autocomplete_combobox.json b/...nents/combobox/__tests__/__snapshots__/render_combobox_renders_autocomplete_combobox.json
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/...ponents/combobox/__tests__/__snapshots__/render_combobox_renders_groups_in_a_listbox.json b/...ponents/combobox/__tests__/__snapshots__/render_combobox_renders_groups_in_a_listbox.json
diff --git a/.../combobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox.json b/.../combobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox.json
diff --git a/...ts__/render_deprecated_combobox_renders_a_base_combobox_with_closed_options_selected.json b/...ts__/render_deprecated_combobox_renders_a_base_combobox_with_closed_options_selected.json
diff --git a/..._tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox_with_focus.json b/..._tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox_with_focus.json
diff --git a/...napshots__/render_deprecated_combobox_renders_a_base_combobox_with_open_item_focused.json b/...napshots__/render_deprecated_combobox_renders_a_base_combobox_with_open_item_focused.json
diff --git a/...x/__tests__/__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox.json b/...x/__tests__/__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox.json
diff --git a/.../__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_focus.json b/.../__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_focus.json
diff --git a/...er_deprecated_combobox_renders_a_multi_entity_combobox_with_focused_options_selected.json b/...er_deprecated_combobox_renders_a_multi_entity_combobox_with_focused_options_selected.json
diff --git a/...__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_open_item_focused.json b/...__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_open_item_focused.json
diff --git a/...s__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_options_selected.json b/...s__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_options_selected.json
diff --git a/...bobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox.json b/...bobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox.json
diff --git a/...render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_s_selected.json b/...render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_s_selected.json
diff --git a/..._/render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_selected.json b/..._/render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_selected.json
diff --git a/...ts__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox_with_focus.json b/...ts__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox_with_focus.json
diff --git a/...hots__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_item_focused.json b/...hots__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_item_focused.json
diff --git a/..._/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_s_selected.json b/..._/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_s_selected.json
diff --git a/...s__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_selected.json b/...s__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_selected.json
diff --git a/..._snapshots__/render_deprecated_combobox_renders_an_inline_combobox_open_item_focused.json b/..._snapshots__/render_deprecated_combobox_renders_an_inline_combobox_open_item_focused.json
diff --git a/...sts__/__snapshots__/render_deprecated_combobox_renders_an_inline_combobox_with_focus.json b/...sts__/__snapshots__/render_deprecated_combobox_renders_an_inline_combobox_with_focus.json
diff --git a/..._tests__/__snapshots__/render_deprecated_combobox_renders_an_inline_listbox_combobox.json b/..._tests__/__snapshots__/render_deprecated_combobox_renders_an_inline_listbox_combobox.json
diff --git a/...r_deprecated_combobox_renders_an_inline_listbox_combobox_with_closed_option_selected.json b/...r_deprecated_combobox_renders_an_inline_listbox_combobox_with_closed_option_selected.json
diff --git a/...deprecated_combobox_renders_an_inline_listbox_combobox_with_focused_options_selected.json b/...deprecated_combobox_renders_an_inline_listbox_combobox_with_focused_options_selected.json
diff --git a/.../render_deprecated_combobox_renders_an_inline_listbox_combobox_with_options_selected.json b/.../render_deprecated_combobox_renders_an_inline_listbox_combobox_with_options_selected.json
diff --git a/ui/components/combobox/base/_index.scss b/ui/components/combobox/base/_index.scss
@@ -50,7 +50,6 @@
     .slds-combobox__input.slds-has-focus {
       width: 0;
       pointer-events: auto;
-      padding: 0 ($spacing-large + $spacing-xx-small);
     }
 
     .slds-input__icon {
@@ -376,6 +375,10 @@
     }
   }
 
+  .slds-input__icon {
+    margin-top: (($square-icon-small-content / 2) * -1);
+  }
+
   .slds-icon {
     width: $square-icon-small-content;
     height: $square-icon-small-content;

diff --git a/ui/components/combobox/docs.mdx b/ui/components/combobox/docs.mdx
@@ -917,6 +917,31 @@ The containing `div` of the comboboxes should have the class `slds-combobox-grou
 
 </Example>
 
+### User input (Typeahead) - Loading
+
+<Example title="Combobox - Grouped - User input - Loading">
+
+  <CodeView style={{maxWidth: '40rem', height: '15rem'}}>
+    <ComboboxGroup
+      id={_.uniqueId('combobox-id-')}
+      aria-controls="listbox-id-21"
+      comboboxID="primary-combobox-id-2"
+      autocomplete
+      listbox={<Listbox id="listbox-id-21" snapshot={Snapshot.EntityOptionsTypeahead} term="salesforce" type="entity" count={4} />}
+      value="salesforce"
+      isOpen
+      showCloseButton
+      isLoading
+      hasFocus
+      addon={ <ObjectSwitcher value="Accounts" addonPosition="start" comboboxAriaControls="primary-combobox-id-2" /> }
+      addonPosition="start"
+      comboboxPosition="end"
+      inputIconPosition="group-right"
+    />
+  </CodeView>
+
+</Example>
+
 ### Selecting options
 
 <Example title="Combobox - Grouped - Selecting options">
@@ -1086,6 +1111,33 @@ The containing element should receive the class `slds-combobox_object-switcher`
   When a selection is made, the currently selected items should be prepended with a <code className="doc">&lt;span className="slds-assistive-text"&gt;Current Selection:&lt;/span&gt;</code> to inform screen readers of its current selection.
 </Blockquote>
 
+##### Blurred
+<Example title="Combobox - Grouped - Scoping icon variant - Blurred">
+
+  <CodeView style={{maxWidth: '40rem'}}>
+    <ComboboxGroup
+    id={_.uniqueId('combobox-id-')}
+    aria-controls="listbox-id-28"
+    comboboxID="primary-combobox-id-9"
+    autocomplete
+    listbox={<Listbox id="listbox-id-28" snapshot={Snapshot.EntityOptions} type="entity" count={2} />}
+    addon={<IconObjectSwitcher id={_.uniqueId('combobox-id-')} value="Apex" filteredSymbol="apex" addonPosition="start" comboboxAriaControls="primary-combobox-id-9" />}
+    addonPosition="start"
+    comboboxPosition="end"
+    inputIconPosition="right"
+    rightInputIcon={
+      <UtilityIcon
+      symbol="search"
+      className="slds-icon slds-icon_x-small slds-icon-text-default"
+      containerClassName="slds-input__icon slds-input__icon_right"
+      />
+    }
+    />
+  </CodeView>
+
+</Example>
+
+##### Focused
 <Example title="Combobox - Grouped - Scoping icon variant">
 
   <CodeView style={{maxWidth: '40rem', height: '15rem'}}>

diff --git a/ui/components/combobox/index.jsx b/ui/components/combobox/index.jsx
@@ -89,7 +89,8 @@ const ComboboxFormElement = props => (
  * Combobox Input
  */
 const ComboboxInput = props => {
-  const hasInputIcon = props.leftInputIcon || props.rightInputIcon;
+  const hasInputIcon =
+    props.leftInputIcon || props.rightInputIcon || props.showCloseButton;
 
   return (
     <div
@@ -284,6 +285,7 @@ export class ComboboxGroup extends Component {
       label,
       hideLabel,
       formClassName,
+      inputContainerClassName,
       addon,
       addonPosition,
       comboboxPosition,
@@ -322,6 +324,7 @@ export class ComboboxGroup extends Component {
             >
               <ComboboxInput
                 id={id}
+                className={inputContainerClassName}
                 toggleFocus={this.toggleFocus}
                 onFocus={hasFocus}
                 placeholder={placeholder}

diff --git a/ui/components/combobox/listbox/index.jsx b/ui/components/combobox/listbox/index.jsx
@@ -122,7 +122,7 @@ export const EntityOption = props => (
         {props.entityMeta && (
           <span className="slds-listbox__option-meta slds-listbox__option-meta_entity">
             {props.entityType || 'Account'} &bull;{' '}
-            {props.entityLocation || ' San Francisco'}
+            {props.entityField || ' San Francisco'}
           </span>
         )}
       </span>
@@ -254,9 +254,10 @@ class Listbox extends Component {
           selected={option.selected}
           focused={option.focused}
           name={option.name}
+          label={option.label}
           entityMeta={option.entityMeta}
           entityType={option.entityType}
-          entityLocation={option.entityLocation}
+          entityField={option.entityField}
           term={option.term}
           beforeTerm={option.beforeTerm}
           afterTerm={option.afterTerm}
@@ -303,7 +304,10 @@ class Listbox extends Component {
       <ListboxWrapper
         id={id}
         className={classNames(
-          'slds-dropdown slds-dropdown_length-5',
+          'slds-dropdown',
+          type === 'entity'
+            ? 'slds-dropdown_length-with-icon-7'
+            : 'slds-dropdown_length-5',
           className
         )}
       >

diff --git a/ui/components/combobox/object-switcher/index.jsx b/ui/components/combobox/object-switcher/index.jsx
@@ -22,7 +22,8 @@ class ObjectSwitcher extends Component {
       hasFocus,
       addonPosition,
       comboboxAriaControls,
-      hasInteractions
+      hasInteractions,
+      listboxId
     } = this.props;
     return (
       <div
@@ -33,7 +34,7 @@ class ObjectSwitcher extends Component {
       >
         <Combobox
           id={id}
-          aria-controls={listboxId01}
+          aria-controls={listboxId || listboxId01}
           comboboxAriaControls={comboboxAriaControls}
           label="Filter Search by:"
           hideLabel
@@ -45,13 +46,15 @@ class ObjectSwitcher extends Component {
               symbol="down"
               className="slds-icon slds-icon_xx-small slds-icon-text-default"
               containerClassName="slds-input__icon slds-input__icon_right"
+              title={false}
+              assistiveText={false}
             />
           }
           listbox={
             <Listbox
               className="slds-dropdown_x-small slds-dropdown_left"
               aria-label="Suggested for you"
-              id={listboxId01}
+              id={listboxId || listboxId01}
               snapshot={Snapshot.Options}
               type="plain"
               count={8}

diff --git a/ui/components/combobox/snapshots.data.js b/ui/components/combobox/snapshots.data.js
@@ -3,49 +3,49 @@ export const EntityOptions = {
     name: 'Burlington Textiles Corp of America',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Burlington, NC'
+    entityField: 'Burlington, NC'
   },
   option2: {
     name: 'Dickenson plc',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Lawrence, KS'
+    entityField: 'Lawrence, KS'
   },
   option3: {
     name: 'Edge Communications',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Austin, TX'
+    entityField: 'Austin, TX'
   },
   option4: {
     name: 'Express Logistics and Transport',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Portland, OR'
+    entityField: 'Portland, OR'
   },
   option5: {
     name: 'GenePoint',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Mountain View, CA'
+    entityField: 'Mountain View, CA'
   },
   option6: {
     name: 'Grand Hotels & Resorts Ltd',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Chicago, IL'
+    entityField: 'Chicago, IL'
   },
   option7: {
     name: 'Pyramid Construction Inc.',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Paris'
+    entityField: 'Paris'
   },
   option8: {
     name: 'United Oil & Gas Corp.',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'New York, NY'
+    entityField: 'New York, NY'
   }
 };
 
@@ -54,51 +54,51 @@ export const EntityOptionsFocused = {
     name: 'Burlington Textiles Corp of America',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Burlington, NC',
+    entityField: 'Burlington, NC',
     focused: true,
     tabIndex: 0
   },
   option2: {
     name: 'Dickenson plc',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Lawrence, KS'
+    entityField: 'Lawrence, KS'
   },
   option3: {
     name: 'Edge Communications',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Austin, TX'
+    entityField: 'Austin, TX'
   },
   option4: {
     name: 'Express Logistics and Transport',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Portland, OR'
+    entityField: 'Portland, OR'
   },
   option5: {
     name: 'GenePoint',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Mountain View, CA'
+    entityField: 'Mountain View, CA'
   },
   option6: {
     name: 'Grand Hotels & Resorts Ltd',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Chicago, IL'
+    entityField: 'Chicago, IL'
   },
   option7: {
     name: 'Pyramid Construction Inc.',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Paris'
+    entityField: 'Paris'
   },
   option8: {
     name: 'United Oil & Gas Corp.',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'New York, NY'
+    entityField: 'New York, NY'
   }
 };
 
@@ -109,23 +109,23 @@ export const EntityOptionsTypeahead = {
     afterTerm: '.com',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'San Francisco, CA'
+    entityField: 'San Francisco, CA'
   },
   option2: {
     term: 'Salesforce',
     beforeTerm: '',
     afterTerm: '.org',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'New York, NY'
+    entityField: 'New York, NY'
   },
   option3: {
     term: 'Salesforce',
     beforeTerm: '',
     afterTerm: 'HQ',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'San Francisco, CA'
+    entityField: 'San Francisco, CA'
   }
 };
 
@@ -423,13 +423,13 @@ export const EntityStylingOptions = {
   option2: {
     name: 'Express Logistics and Transport',
     entityMeta: true,
-    entityLocation: 'Durham, NC'
+    entityField: 'Durham, NC'
   },
   option3: {
     name: 'Alexandria Textiles Corp of America',
     entityMeta: true,
     entityType: 'Account',
-    entityLocation: 'Alexandria, VA',
+    entityField: 'Alexandria, VA',
     rightIcon: 'chevronright',
     rightIconAssistiveText: 'Has further options'
   }