Skip to content

Commit 3cc7163

Browse files
DottenpixelDottenpixel
authored
chore(combobox): Organize ComboBox stories into multiple sinks (#4728)
* add deprecated demo prop to deprecated combobox examples * add sinks for deprecated examples * add autocomplete example to sink * organize all combobox examples into sinks * swap out some verbose tests with examples and update
1 parent 0235789 commit 3cc7163

File tree

10 files changed

+258
-183
lines changed

10 files changed

+258
-183
lines changed

‎ui/components/combobox/__tests__/__snapshots__/index.spec.js.snap

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ exports[`Combobox with a Dialog dropdown renders an open, readonly dialog combob
196196
</div>
197197
`;
198198

199-
exports[`render combobox render autocomplete combobox with mutliple selections 1`] = `
199+
exports[`render combobox render autocomplete combobox with multiple selections 1`] = `
200200
<div
201201
className="slds-form-element"
202202
>
@@ -5146,7 +5146,7 @@ exports[`render combobox render multiple selections in a closed combobox 1`] = `
51465146
>
51475147
<label
51485148
className="slds-form-element__label"
5149-
htmlFor="combobox-id-01"
5149+
htmlFor="combobox-id-8"
51505150
id="combobox-label-id-3"
51515151
>
51525152
Relate To
@@ -5165,12 +5165,12 @@ exports[`render combobox render multiple selections in a closed combobox 1`] = `
51655165
role="none"
51665166
>
51675167
<button
5168-
aria-controls="listbox-id-01"
5168+
aria-controls="listbox-id-8"
51695169
aria-expanded="false"
51705170
aria-haspopup="listbox"
5171-
aria-labelledby="combobox-label-id-3 combobox-id-01-selected-value"
5171+
aria-labelledby="combobox-label-id-3 combobox-id-8-selected-value"
51725172
className="slds-input_faux slds-combobox__input slds-combobox__input-value"
5173-
id="combobox-id-01-selected-value"
5173+
id="combobox-id-8-selected-value"
51745174
onBlur={[Function]}
51755175
onFocus={[Function]}
51765176
type="button"
@@ -5199,7 +5199,7 @@ exports[`render combobox render multiple selections in a closed combobox 1`] = `
51995199
<div
52005200
aria-orientation={null}
52015201
className="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid"
5202-
id="listbox-id-01"
5202+
id="listbox-id-8"
52035203
role="listbox"
52045204
>
52055205
<ul
@@ -5536,7 +5536,7 @@ exports[`render combobox render single selection in an open combobox 1`] = `
55365536
>
55375537
<label
55385538
className="slds-form-element__label"
5539-
htmlFor="combobox-id-01"
5539+
htmlFor="combobox-id-5"
55405540
id="combobox-label-id-2"
55415541
>
55425542
Relate To
@@ -5556,12 +5556,12 @@ exports[`render combobox render single selection in an open combobox 1`] = `
55565556
>
55575557
<button
55585558
aria-activedescendant="option1"
5559-
aria-controls="listbox-id-01"
5559+
aria-controls="listbox-id-6"
55605560
aria-expanded="true"
55615561
aria-haspopup="listbox"
5562-
aria-labelledby="combobox-label-id-2 combobox-id-01-selected-value"
5562+
aria-labelledby="combobox-label-id-2 combobox-id-5-selected-value"
55635563
className="slds-input_faux slds-combobox__input slds-has-focus slds-combobox__input-value"
5564-
id="combobox-id-01-selected-value"
5564+
id="combobox-id-5-selected-value"
55655565
onBlur={[Function]}
55665566
onFocus={[Function]}
55675567
type="button"
@@ -5590,7 +5590,7 @@ exports[`render combobox render single selection in an open combobox 1`] = `
55905590
<div
55915591
aria-orientation={null}
55925592
className="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid"
5593-
id="listbox-id-01"
5593+
id="listbox-id-6"
55945594
role="listbox"
55955595
>
55965596
<ul

‎ui/components/combobox/__tests__/index.spec.js

Lines changed: 17 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-env jest */
22
import React from 'react';
3-
import * as DeprecatedBaseExamples from '../base/example';
3+
import * as BaseExamples from '../base/example';
44
import * as DeprecatedInlineListboxExamples from '../deprecated-inline-listbox/example';
55
import * as DeprecatedMultiEntityExamples from '../deprecated-multi-entity/example';
66
import * as DeprecatedReadOnlyExamples from '../deprecated-readonly/example';
@@ -32,32 +32,29 @@ const popoverId = 'popover-id-01';
3232
describe('render deprecated combobox', () => {
3333
it('renders a base combobox', () =>
3434
matchesMarkup(
35-
getDisplayElementById(DeprecatedBaseExamples.states, 'deprecated-closed')
35+
getDisplayElementById(BaseExamples.states, 'deprecated-closed')
3636
));
3737

3838
it('renders a base combobox with focus', () =>
3939
matchesMarkup(
40-
getDisplayElementById(DeprecatedBaseExamples.states, 'deprecated-focused')
40+
getDisplayElementById(BaseExamples.states, 'deprecated-focused')
4141
));
4242

4343
it('renders a base combobox with open item focused', () =>
4444
matchesMarkup(
45-
getDisplayElementById(
46-
DeprecatedBaseExamples.states,
47-
'deprecated-open-item-focused'
48-
)
45+
getDisplayElementById(BaseExamples.states, 'deprecated-open-item-focused')
4946
));
5047

5148
it('renders a base combobox with closed options selected', () =>
5249
matchesMarkup(
5350
getDisplayElementById(
54-
DeprecatedBaseExamples.states,
51+
BaseExamples.states,
5552
'deprecated-closed-options-selected'
5653
)
5754
));
5855

5956
it('renders an inline listbox combobox', () =>
60-
matchesMarkup(DeprecatedInlineListboxExamples.default));
57+
matchesMarkup(DeprecatedInlineListboxExamples.default[0].element));
6158

6259
it('renders an inline combobox with focus', () =>
6360
matchesMarkup(
@@ -100,7 +97,7 @@ describe('render deprecated combobox', () => {
10097
));
10198

10299
it('renders a multi-entity combobox', () =>
103-
matchesMarkup(DeprecatedMultiEntityExamples.default));
100+
matchesMarkup(DeprecatedMultiEntityExamples.default[0].element));
104101

105102
it('renders a multi-entity combobox with focus', () =>
106103
matchesMarkup(
@@ -135,7 +132,7 @@ describe('render deprecated combobox', () => {
135132
));
136133

137134
it('renders a readonly combobox', () =>
138-
matchesMarkup(DeprecatedReadOnlyExamples.default));
135+
matchesMarkup(DeprecatedReadOnlyExamples.default[0].element));
139136

140137
it('renders a readonly combobox with focus', () =>
141138
matchesMarkup(
@@ -293,71 +290,17 @@ describe('render combobox', () => {
293290
));
294291
it('render single selection in an open combobox', () =>
295292
matchesMarkup(
296-
<Combobox
297-
id={comboboxId}
298-
aria-controls={listboxId}
299-
selectOnly
300-
value="Accounts"
301-
inputIconPosition="right"
302-
rightInputIcon={
303-
<UtilityIcon
304-
symbol="down"
305-
className="slds-icon slds-icon_x-small slds-icon-text-default"
306-
containerClassName="slds-input__icon slds-input__icon_right"
307-
assistiveText={false}
308-
title={false}
309-
/>
310-
}
311-
results={
312-
<Listbox
313-
id={listboxId}
314-
snapshot={Snapshot.ObjectOptionsSingleSelection}
315-
type="plain"
316-
count={8}
317-
visualSelection
318-
/>
319-
}
320-
resultsType="listbox"
321-
aria-activedescendant="option1"
322-
isOpen
323-
hasFocus
324-
/>
293+
getDisplayElementById(BaseExamples.states, 'selecting-a-single-option')
325294
));
295+
326296
it('render multiple selections in a closed combobox', () =>
327297
matchesMarkup(
328-
<Combobox
329-
id={comboboxId}
330-
aria-controls={listboxId}
331-
selectOnly
332-
value="2 Options Selected"
333-
inputIconPosition="right"
334-
rightInputIcon={
335-
<UtilityIcon
336-
symbol="down"
337-
className="slds-icon slds-icon_x-small slds-icon-text-default"
338-
containerClassName="slds-input__icon slds-input__icon_right"
339-
assistiveText={false}
340-
title={false}
341-
/>
342-
}
343-
results={
344-
<Listbox
345-
id={listboxId}
346-
snapshot={Snapshot.ObjectOptionsMultiSelection}
347-
type="plain"
348-
count={8}
349-
visualSelection
350-
/>
351-
}
352-
resultsType="listbox"
353-
listboxOfSelections={
354-
<ListboxOfSelections
355-
snapshot={Snapshot.ObjectOptionsSelected}
356-
count={2}
357-
/>
358-
}
359-
/>
298+
getDisplayElementById(
299+
BaseExamples.states,
300+
'selected-multiple-options-closed'
301+
)
360302
));
303+
361304
it('renders groups in a listbox', () =>
362305
matchesMarkup(
363306
<Combobox
@@ -537,6 +480,7 @@ describe('render combobox', () => {
537480
hasFocus
538481
/>
539482
));
483+
540484
it('render autocomplete combobox with single selection', () =>
541485
matchesMarkup(
542486
<Combobox
@@ -565,7 +509,7 @@ describe('render combobox', () => {
565509
value="GenePoint"
566510
/>
567511
));
568-
it('render autocomplete combobox with mutliple selections', () =>
512+
it('render autocomplete combobox with multiple selections', () =>
569513
matchesMarkup(
570514
<Combobox
571515
id={comboboxId}

‎ui/components/combobox/autocomplete/example.jsx

Lines changed: 46 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,46 @@ import { StandardIcon } from '../../icons/standard/example';
1111
import _ from '../../../shared/helpers';
1212
import * as Snapshot from '../snapshots.data';
1313

14-
export default (
15-
<Combobox
16-
id={_.uniqueId('combobox-id-')}
17-
aria-controls="listbox-id-9"
18-
autocomplete
19-
inputIconPosition="right"
20-
rightInputIcon={
21-
<UtilityIcon
22-
symbol="search"
23-
className="slds-icon slds-icon_x-small slds-icon-text-default"
24-
containerClassName="slds-input__icon slds-input__icon_right"
25-
assistiveText={false}
26-
title={false}
27-
/>
28-
}
29-
results={
30-
<Listbox
31-
id="listbox-id-9"
32-
snapshot={Snapshot.PlainOptions}
33-
type="plain"
34-
count={3}
14+
const STORY_SINK_CONTEXT = 'Autocomplete';
15+
16+
export default [
17+
{
18+
context: STORY_SINK_CONTEXT,
19+
id: `${STORY_SINK_CONTEXT.toLowerCase()}-default`,
20+
label: `${STORY_SINK_CONTEXT} default`,
21+
element: (
22+
<Combobox
23+
id={_.uniqueId('combobox-id-')}
24+
aria-controls="listbox-id-9"
25+
autocomplete
26+
inputIconPosition="right"
27+
rightInputIcon={
28+
<UtilityIcon
29+
symbol="search"
30+
className="slds-icon slds-icon_x-small slds-icon-text-default"
31+
containerClassName="slds-input__icon slds-input__icon_right"
32+
assistiveText={false}
33+
title={false}
34+
/>
35+
}
36+
results={
37+
<Listbox
38+
id="listbox-id-9"
39+
snapshot={Snapshot.PlainOptions}
40+
type="plain"
41+
count={3}
42+
/>
43+
}
44+
resultsType="listbox"
45+
hasInteractions
3546
/>
36-
}
37-
resultsType="listbox"
38-
hasInteractions
39-
/>
40-
);
47+
)
48+
}
49+
];
4150

4251
export let states = [
4352
{
53+
context: STORY_SINK_CONTEXT,
4454
id: 'focused-open',
4555
label: 'Focused - Open',
4656
element: (
@@ -73,6 +83,7 @@ export let states = [
7383
)
7484
},
7585
{
86+
context: STORY_SINK_CONTEXT,
7687
id: 'lookup-focused-open',
7788
label: 'Lookup - Focused - Open',
7889
element: (
@@ -105,6 +116,7 @@ export let states = [
105116
)
106117
},
107118
{
119+
context: STORY_SINK_CONTEXT,
108120
id: 'typeahead',
109121
label: 'Typeahead',
110122
element: (
@@ -139,6 +151,7 @@ export let states = [
139151
)
140152
},
141153
{
154+
context: STORY_SINK_CONTEXT,
142155
id: 'lookup-typeahead',
143156
label: 'Lookup - Typeahead',
144157
element: (
@@ -174,6 +187,7 @@ export let states = [
174187
)
175188
},
176189
{
190+
context: STORY_SINK_CONTEXT,
177191
id: 'highlighting-an-option',
178192
label: 'Highlighting an option',
179193
element: (
@@ -207,6 +221,7 @@ export let states = [
207221
)
208222
},
209223
{
224+
context: STORY_SINK_CONTEXT,
210225
id: 'lookup-highlighting-an-option',
211226
label: 'Lookup - Highlighting an option',
212227
element: (
@@ -240,6 +255,7 @@ export let states = [
240255
)
241256
},
242257
{
258+
context: STORY_SINK_CONTEXT,
243259
id: 'selected-an-option',
244260
label: 'Selected an option',
245261
element: (
@@ -272,6 +288,7 @@ export let states = [
272288
)
273289
},
274290
{
291+
context: STORY_SINK_CONTEXT,
275292
id: 'lookup-selected-an-option',
276293
label: 'Lookup - Selected an option',
277294
element: (
@@ -312,6 +329,7 @@ export let states = [
312329
)
313330
},
314331
{
332+
context: STORY_SINK_CONTEXT,
315333
id: 'selected-multiple-options',
316334
label: 'Selected multiple options',
317335
element: (
@@ -349,6 +367,7 @@ export let states = [
349367
)
350368
},
351369
{
370+
context: STORY_SINK_CONTEXT,
352371
id: 'lookup-multiple-options',
353372
label: 'Lookup - Selected multiple options',
354373
element: (
@@ -386,6 +405,7 @@ export let states = [
386405

387406
export let examples = [
388407
{
408+
context: STORY_SINK_CONTEXT,
389409
id: 'lookup',
390410
label: 'Lookup',
391411
element: (

0 commit comments

Comments
 (0)