Skip to content
Permalink
Browse files

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

…nd/or metatext, options with drill in (#3091)
  • Loading branch information...
Ayesha Mazumdar
Ayesha Mazumdar committed Feb 23, 2018
1 parent 9407709 commit 3d4af71dd1ce294420bb780b321931ef2627b184

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

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

0 comments on commit 3d4af71

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