Skip to content
Permalink
Browse files

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
  • Loading branch information...
brandonferrua committed Mar 22, 2018
1 parent d2ca8ae commit 9bddfde93099381c80b2fee45be993a613a9c2af
Showing with 475 additions and 354 deletions.
  1. +1 −1 ui/components/app-launcher/__tests__/__snapshots__/renders_a_default_app_launcher.json
  2. +1 −1 ui/components/app-launcher/__tests__/__snapshots__/renders_a_dropped_app_launcher.json
  3. +1 −1 ui/components/app-launcher/__tests__/__snapshots__/renders_a_grabbed_app_launcher.json
  4. +1 −1 ui/components/app-launcher/__tests__/__snapshots__/renders_a_moved_app_launcher.json
  5. +1 −1 ui/components/app-launcher/__tests__/__snapshots__/renders_a_search_app_launcher.json
  6. +3 −3 ..._tests__/__snapshots__/render_combobox_render_autocomplete_combobox_with_mutliple_selections.json
  7. +3 −3 ...x/__tests__/__snapshots__/render_combobox_render_autocomplete_combobox_with_single_selection.json
  8. +3 −3 ...ponents/combobox/__tests__/__snapshots__/render_combobox_render_autocomplete_entity_combobox.json
  9. +3 −3 ..._/render_combobox_render_autocomplete_entity_combobox_displaying_options_based_on_user_input.json
  10. +3 −3 ..._/__snapshots__/render_combobox_render_autocomplete_entity_combobox_with_mutliple_selections.json
  11. +3 −3 ...ts__/__snapshots__/render_combobox_render_autocomplete_entity_combobox_with_single_selection.json
  12. +1 −1 ui/components/combobox/__tests__/__snapshots__/render_combobox_render_base_combobox.json
  13. +1 −1 ...__/__snapshots__/render_combobox_render_combobox_with_displaying_options_based_on_user_input.json
  14. +8 −9 ui/components/combobox/__tests__/__snapshots__/render_combobox_render_grouped_combobox.json
  15. +4 −5 ...__snapshots__/render_combobox_render_grouped_combobox_displaying_options_based_on_user_input.json
  16. +4 −5 ..._snapshots__/render_combobox_render_grouped_combobox_with_selections_made_in_collapsed_state.json
  17. +4 −5 ...__snapshots__/render_combobox_render_grouped_combobox_with_selections_made_in_expanded_state.json
  18. +1 −1 ...obox/__tests__/__snapshots__/render_combobox_render_multiple_selections_in_a_closed_combobox.json
  19. +1 −1 ...combobox/__tests__/__snapshots__/render_combobox_render_single_selection_in_an_open_combobox.json
  20. +1 −1 ui/components/combobox/__tests__/__snapshots__/render_combobox_renders_autocomplete_combobox.json
  21. +3 −3 ...x/__tests__/__snapshots__/render_combobox_renders_different_styles_of_options_in_the_listbox.json
  22. +3 −3 ...snapshots__/render_combobox_renders_different_styles_of_options_in_the_listbox_with_drill_in.json
  23. +1 −1 ui/components/combobox/__tests__/__snapshots__/render_combobox_renders_groups_in_a_listbox.json
  24. +1 −1 ...mponents/combobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox.json
  25. +1 −1 ..._snapshots__/render_deprecated_combobox_renders_a_base_combobox_with_closed_options_selected.json
  26. +1 −1 ...mbobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox_with_focus.json
  27. +1 −1 ...ts__/__snapshots__/render_deprecated_combobox_renders_a_base_combobox_with_open_item_focused.json
  28. +1 −1 .../combobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox.json
  29. +1 −1 ..._tests__/__snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_focus.json
  30. +1 −1 ...s__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_focused_options_selected.json
  31. +1 −1 ...napshots__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_open_item_focused.json
  32. +1 −1 ...snapshots__/render_deprecated_combobox_renders_a_multi_entity_combobox_with_options_selected.json
  33. +1 −1 ...ents/combobox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox.json
  34. +1 −1 ...shots__/render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_s_selected.json
  35. +1 −1 ...apshots__/render_deprecated_combobox_renders_a_readonly_combobox_with_closed_option_selected.json
  36. +1 −1 ...ox/__tests__/__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox_with_focus.json
  37. +1 −1 .../__snapshots__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_item_focused.json
  38. +1 −1 ...apshots__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_s_selected.json
  39. +1 −1 ...snapshots__/render_deprecated_combobox_renders_a_readonly_combobox_with_open_option_selected.json
  40. +1 −1 ...ests__/__snapshots__/render_deprecated_combobox_renders_an_inline_combobox_open_item_focused.json
  41. +1 −1 ...box/__tests__/__snapshots__/render_deprecated_combobox_renders_an_inline_combobox_with_focus.json
  42. +1 −1 ...mbobox/__tests__/__snapshots__/render_deprecated_combobox_renders_an_inline_listbox_combobox.json
  43. +1 −1 ...__/render_deprecated_combobox_renders_an_inline_listbox_combobox_with_closed_option_selected.json
  44. +1 −1 .../render_deprecated_combobox_renders_an_inline_listbox_combobox_with_focused_options_selected.json
  45. +1 −1 ...pshots__/render_deprecated_combobox_renders_an_inline_listbox_combobox_with_options_selected.json
  46. +4 −1 ui/components/combobox/base/_index.scss
  47. +52 −0 ui/components/combobox/docs.mdx
  48. +4 −1 ui/components/combobox/index.jsx
  49. +7 −3 ui/components/combobox/listbox/index.jsx
  50. +6 −3 ui/components/combobox/object-switcher/index.jsx
  51. +21 −21 ui/components/combobox/snapshots.data.js
  52. +6 −6 ...mponents/global-header/__tests__/__snapshots__/render_global_header_render_the_global_header.json
  53. +14 −1 ui/components/global-header/base/_index.scss
  54. +54 −1 ui/components/global-header/base/example.jsx
  55. +159 −7 ui/components/global-header/docs.mdx
  56. +1 −5 ui/components/global-header/index.jsx
  57. +48 −56 ui/components/global-header/search/data.js
  58. +0 −158 ui/components/global-header/search/index.jsx
  59. +10 −1 ui/components/input/base/_index.scss
  60. +1 −1 ui/components/input/base/example.jsx
  61. +2 −2 ui/components/rich-text-editor/__tests__/__snapshots__/renders_an_RTE_toolbar_in_a_narrow_space.json
  62. +4 −3 ui/components/spinners/__tests__/__snapshots__/renders_delayed_spinner.json
  63. +4 −3 ui/components/spinners/__tests__/__snapshots__/renders_spinner.json
  64. +1 −0 ui/components/spinners/base/_index.scss

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -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;
@@ -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'}}>
@@ -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}
@@ -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
)}
>
@@ -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}
@@ -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'
}
Oops, something went wrong.

0 comments on commit 9bddfde

Please sign in to comment.
You can’t perform that action at this time.