Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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 9bddfde
Show file tree
Hide file tree
Showing 64 changed files with 475 additions and 354 deletions.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion ui/components/combobox/base/_index.scss
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
52 changes: 52 additions & 0 deletions ui/components/combobox/docs.mdx
Expand Up @@ -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">
Expand Down Expand Up @@ -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'}}>
Expand Down
5 changes: 4 additions & 1 deletion ui/components/combobox/index.jsx
Expand Up @@ -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
Expand Down Expand Up @@ -284,6 +285,7 @@ export class ComboboxGroup extends Component {
label,
hideLabel,
formClassName,
inputContainerClassName,
addon,
addonPosition,
comboboxPosition,
Expand Down Expand Up @@ -322,6 +324,7 @@ export class ComboboxGroup extends Component {
>
<ComboboxInput
id={id}
className={inputContainerClassName}
toggleFocus={this.toggleFocus}
onFocus={hasFocus}
placeholder={placeholder}
Expand Down
10 changes: 7 additions & 3 deletions ui/components/combobox/listbox/index.jsx
Expand Up @@ -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>
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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
)}
>
Expand Down
9 changes: 6 additions & 3 deletions ui/components/combobox/object-switcher/index.jsx
Expand Up @@ -22,7 +22,8 @@ class ObjectSwitcher extends Component {
hasFocus,
addonPosition,
comboboxAriaControls,
hasInteractions
hasInteractions,
listboxId
} = this.props;
return (
<div
Expand All @@ -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
Expand All @@ -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}
Expand Down
42 changes: 21 additions & 21 deletions ui/components/combobox/snapshots.data.js
Expand Up @@ -3,49 +3,49 @@ export const EntityOptions = {
name: 'Burlington Textiles Corp of America',