Skip to content

Commit ad5a788

Browse files
jeff-phillips-18jeff-phillips-18
committed
feat(select): Allow count badge to be hidden in checkbox select
1 parent 84a682b commit ad5a788

File tree

6 files changed

+1064
-241
lines changed

6 files changed

+1064
-241
lines changed

‎packages/react-core/src/components/Select/Select.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ export interface SelectProps
4444
noResultsFoundText?: string;
4545
/** Selected item for single select variant. Array of selected items for multi select variants. */
4646
selections?: string | SelectOptionObject | (string | SelectOptionObject)[];
47+
/** Flag indicating if selection badge should be hidden for checkbox variant,default false */
48+
isCheckboxSelectionBadgeHidden?: boolean;
4749
/** Id for select toggle element */
4850
toggleId?: string;
4951
/** Adds accessible text to Select */
@@ -362,6 +364,7 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
362364
isDisabled,
363365
isCreatable,
364366
selections,
367+
isCheckboxSelectionBadgeHidden,
365368
ariaLabelledBy,
366369
ariaLabelTypeAhead,
367370
ariaLabelClear,
@@ -514,11 +517,13 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
514517
<div className={css(styles.selectToggleWrapper)}>
515518
{toggleIcon && <span className={css(styles.selectToggleIcon)}>{toggleIcon}</span>}
516519
<span className={css(styles.selectToggleText)}>{placeholderText}</span>
517-
{selections && (Array.isArray(selections) && selections.length > 0) && (
518-
<div className={css(styles.selectToggleBadge)}>
519-
<span className={css(badgeStyles.badge, badgeStyles.modifiers.read)}>{selections.length}</span>
520-
</div>
521-
)}
520+
{!isCheckboxSelectionBadgeHidden &&
521+
selections &&
522+
(Array.isArray(selections) && selections.length > 0) && (
523+
<div className={css(styles.selectToggleBadge)}>
524+
<span className={css(badgeStyles.badge, badgeStyles.modifiers.read)}>{selections.length}</span>
525+
</div>
526+
)}
522527
</div>
523528
{hasOnClear && hasAnySelections && clearBtn}
524529
</React.Fragment>

‎packages/react-core/src/components/Select/__tests__/Select.test.tsx‎

Lines changed: 57 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ describe('select', () => {
4646
describe('single select', () => {
4747
test('renders closed successfully', () => {
4848
const view = mount(
49-
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()}>
49+
<Select toggleId="single-select-closed" variant={SelectVariant.single} onSelect={jest.fn()}
50+
onToggle={jest.fn()}>
5051
{selectOptions}
5152
</Select>
5253
);
@@ -55,7 +56,8 @@ describe('select', () => {
5556

5657
test('renders disabled successfully', () => {
5758
const view = mount(
58-
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isDisabled>
59+
<Select toggleId="single-select-disabled" variant={SelectVariant.single}
60+
onSelect={jest.fn()} onToggle={jest.fn()} isDisabled>
5961
{selectOptions}
6062
</Select>
6163
);
@@ -64,25 +66,28 @@ describe('select', () => {
6466

6567
test('renders expanded successfully', () => {
6668
const view = mount(
67-
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
69+
<Select toggleId="single-select-expanded" variant={SelectVariant.single}
70+
onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
6871
{selectOptions}
6972
</Select>
7073
);
7174
expect(view).toMatchSnapshot();
7275
});
7376
test('renders expanded successfully with custom objects', () => {
7477
const view = mount(
75-
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
78+
<Select toggleId="single-select-custom" variant={SelectVariant.single} onSelect={jest.fn()}
79+
onToggle={jest.fn()} isExpanded>
7680
{selectOptionsCustom}
7781
</Select>
7882
);
7983
expect(view).toMatchSnapshot();
8084
});
8185
});
8286

83-
test('renders up drection successfully', () => {
87+
test('renders up direction successfully', () => {
8488
const view = mount(
85-
<Select variant={SelectVariant.single} direction={SelectDirection.up} onSelect={jest.fn()} onToggle={jest.fn()}>
89+
<Select toggleId="select-up" variant={SelectVariant.single} direction={SelectDirection.up}
90+
onSelect={jest.fn()} onToggle={jest.fn()}>
8691
{selectOptions}
8792
</Select>
8893
);
@@ -106,6 +111,7 @@ describe('select', () => {
106111
};
107112
const view = mount(
108113
<Select
114+
toggleId="custom-select-filters"
109115
variant={SelectVariant.typeahead}
110116
onSelect={jest.fn()}
111117
onToggle={jest.fn()}
@@ -124,7 +130,7 @@ describe('select', () => {
124130

125131
test('renders select groups successfully', () => {
126132
const view = mount(
127-
<Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
133+
<Select toggleId="single-select-groups" variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
128134
<SelectGroup label="group 1">{selectOptions}</SelectGroup>
129135
<SelectGroup label="group 2">{selectOptions}</SelectGroup>
130136
</Select>
@@ -136,7 +142,25 @@ describe('select', () => {
136142
describe('checkbox select', () => {
137143
test('renders closed successfully', () => {
138144
const view = mount(
139-
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
145+
<Select toggleId="checkbox-select-closed" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
146+
{selectOptions}
147+
</Select>
148+
);
149+
expect(view).toMatchSnapshot();
150+
});
151+
152+
test('renders checkbox select selections properly', () => {
153+
const view = mount(
154+
<Select toggleId="checkbox-select-selections" variant={SelectVariant.checkbox} onToggle={jest.fn()} selections={[selectOptions[0]]}>
155+
{selectOptions}
156+
</Select>
157+
);
158+
expect(view).toMatchSnapshot();
159+
});
160+
161+
test('renders checkbox select selections properly when isCheckboxSelectionBadgeHidden is true', () => {
162+
const view = mount(
163+
<Select toggleId="checkbox-select-hidden-badge" variant={SelectVariant.checkbox} onToggle={jest.fn()} isCheckboxSelectionBadgeHidden selections={[selectOptions[0]]}>
140164
{selectOptions}
141165
</Select>
142166
);
@@ -145,7 +169,7 @@ describe('checkbox select', () => {
145169

146170
test('renders closed successfully - old classes', () => {
147171
const view = mount(
148-
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
172+
<Select toggleId="checkbox-select-closed-old" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
149173
{checkboxSelectOptions}
150174
</Select>
151175
);
@@ -154,7 +178,7 @@ describe('checkbox select', () => {
154178

155179
test('renders expanded successfully', () => {
156180
const view = mount(
157-
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
181+
<Select toggleId="checkbox-select-expanded" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
158182
{selectOptions}
159183
</Select>
160184
);
@@ -163,7 +187,7 @@ describe('checkbox select', () => {
163187

164188
test('renders expanded successfully - old classes', () => {
165189
const view = mount(
166-
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
190+
<Select toggleId="checkbox-select-expanded-old" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
167191
{checkboxSelectOptions}
168192
</Select>
169193
);
@@ -173,6 +197,7 @@ describe('checkbox select', () => {
173197
test('renders expanded with filtering successfully', () => {
174198
const view = mount(
175199
<Select
200+
toggleId="checkbox-select-expanded-filtered"
176201
variant={SelectVariant.checkbox}
177202
onSelect={jest.fn()}
178203
onToggle={jest.fn()}
@@ -188,7 +213,7 @@ describe('checkbox select', () => {
188213

189214
test('renders expanded successfully with custom objects', () => {
190215
const view = mount(
191-
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
216+
<Select toggleId="checkbox-select-expanded-custom" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
192217
{selectOptionsCustom}
193218
</Select>
194219
);
@@ -197,7 +222,7 @@ describe('checkbox select', () => {
197222

198223
test('renders checkbox select groups successfully', () => {
199224
const view = mount(
200-
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
225+
<Select toggleId="checkbox-select-expanded-groups" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
201226
<SelectGroup label="group 1">{selectOptions}</SelectGroup>
202227
<SelectGroup label="group 2">{selectOptions}</SelectGroup>
203228
</Select>
@@ -207,7 +232,7 @@ describe('checkbox select', () => {
207232

208233
test('renders checkbox select groups successfully - old classes', () => {
209234
const view = mount(
210-
<Select variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
235+
<Select toggleId="checkbox-select-expanded-groups-old" variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>
211236
<CheckboxSelectGroup label="group 1">{checkboxSelectOptions}</CheckboxSelectGroup>
212237
<CheckboxSelectGroup label="group 2">{checkboxSelectOptions}</CheckboxSelectGroup>
213238
</Select>
@@ -219,7 +244,7 @@ describe('checkbox select', () => {
219244
describe('typeahead select', () => {
220245
test('renders closed successfully', () => {
221246
const view = mount(
222-
<Select variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()}>
247+
<Select toggleId="typeahead-select-closed" variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()}>
223248
{selectOptions}
224249
</Select>
225250
);
@@ -228,7 +253,7 @@ describe('typeahead select', () => {
228253

229254
test('renders expanded successfully', () => {
230255
const view = mount(
231-
<Select variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
256+
<Select toggleId="typeahead-select-expanded" variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
232257
{selectOptions}
233258
</Select>
234259
);
@@ -237,7 +262,7 @@ describe('typeahead select', () => {
237262

238263
test('renders selected successfully', () => {
239264
const view = mount(
240-
<Select variant={SelectVariant.typeahead} selections="Mr" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
265+
<Select toggleId="typeahead-select-selected" variant={SelectVariant.typeahead} selections="Mr" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
241266
{selectOptions}
242267
</Select>
243268
);
@@ -248,6 +273,7 @@ describe('typeahead select', () => {
248273
const mockEvent = { target: { value: 'test' } } as React.ChangeEvent<HTMLInputElement>;
249274
const view = mount(
250275
<Select
276+
toggleId="typeahead-select-onchange"
251277
variant={SelectVariant.typeahead}
252278
onSelect={jest.fn()}
253279
onToggle={jest.fn()}
@@ -266,7 +292,7 @@ describe('typeahead select', () => {
266292
test('test creatable option', () => {
267293
const mockEvent = { target: { value: 'test' } } as React.ChangeEvent<HTMLInputElement>;
268294
const view = mount(
269-
<Select variant={SelectVariant.typeahead} onToggle={jest.fn()} isExpanded isCreatable>
295+
<Select toggleId="typeahead-select-creatable" variant={SelectVariant.typeahead} onToggle={jest.fn()} isExpanded isCreatable>
270296
{selectOptions}
271297
</Select>
272298
);
@@ -280,7 +306,7 @@ describe('typeahead select', () => {
280306
describe('typeahead multi select', () => {
281307
test('renders closed successfully', () => {
282308
const view = mount(
283-
<Select variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()}>
309+
<Select toggleId="typeahead-multi-select-closed" variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()}>
284310
{selectOptions}
285311
</Select>
286312
);
@@ -289,7 +315,7 @@ describe('typeahead multi select', () => {
289315

290316
test('renders expanded successfully', () => {
291317
const view = mount(
292-
<Select variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
318+
<Select toggleId="typeahead-multi-select-expanded" variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
293319
{selectOptions}
294320
</Select>
295321
);
@@ -299,6 +325,7 @@ describe('typeahead multi select', () => {
299325
test('renders selected successfully', () => {
300326
const view = mount(
301327
<Select
328+
toggleId="typeahead-multi-select-selected"
302329
variant={SelectVariant.typeaheadMulti}
303330
selections={['Mr', 'Mrs']}
304331
onSelect={jest.fn()}
@@ -315,7 +342,8 @@ describe('typeahead multi select', () => {
315342
const mockEvent = { target: { value: 'test' } } as React.ChangeEvent<HTMLInputElement>;
316343
const view = mount(
317344
<Select
318-
variant={SelectVariant.typeahead}
345+
toggleId="typeahead-multi-select-onchange"
346+
variant={SelectVariant.typeaheadMulti}
319347
onSelect={jest.fn()}
320348
onToggle={jest.fn()}
321349
onClear={jest.fn()}
@@ -336,7 +364,7 @@ describe('API', () => {
336364
const mockToggle = jest.fn();
337365
const mockSelect = jest.fn();
338366
const view = mount(
339-
<Select variant="single" onToggle={mockToggle} onSelect={mockSelect} isExpanded>
367+
<Select toggleId="select-api-click" variant="single" onToggle={mockToggle} onSelect={mockSelect} isExpanded>
340368
{selectOptions}
341369
</Select>
342370
);
@@ -352,7 +380,7 @@ describe('API', () => {
352380
const myMock = jest.fn();
353381
global.console = { ...global.console, error: myMock };
354382
mount(
355-
<Select variant="single" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
383+
<Select toggleId="select-api-no-console" variant="single" onSelect={jest.fn()} onToggle={jest.fn()} isExpanded>
356384
{selectOptions}
357385
</Select>
358386
);
@@ -364,7 +392,7 @@ describe('toggle icon', () => {
364392
const ToggleIcon = <div>Icon</div>;
365393
test('select single', () => {
366394
const view = mount(
367-
<Select toggleIcon={ToggleIcon} variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()}>
395+
<Select toggleId="select-toggle-icon-single" toggleIcon={ToggleIcon} variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()}>
368396
{selectOptions}
369397
</Select>
370398
);
@@ -373,7 +401,7 @@ describe('toggle icon', () => {
373401

374402
test('select checkbox', () => {
375403
const view = mount(
376-
<Select toggleIcon={ToggleIcon} variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
404+
<Select toggleId="checkbox-select-toggle-icon" toggleIcon={ToggleIcon} variant={SelectVariant.checkbox} onSelect={jest.fn()} onToggle={jest.fn()}>
377405
{selectOptions}
378406
</Select>
379407
);
@@ -382,7 +410,7 @@ describe('toggle icon', () => {
382410

383411
test('typeahead select', () => {
384412
const view = mount(
385-
<Select toggleIcon={ToggleIcon} variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()}>
413+
<Select toggleId="typeahead-select-toggle-icon" toggleIcon={ToggleIcon} variant={SelectVariant.typeahead} onSelect={jest.fn()} onToggle={jest.fn()}>
386414
{selectOptions}
387415
</Select>
388416
);
@@ -391,7 +419,7 @@ describe('toggle icon', () => {
391419

392420
test('typeahead multi select', () => {
393421
const view = mount(
394-
<Select toggleIcon={ToggleIcon} variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()}>
422+
<Select toggleId="multi-typeahead-select-toggle-icon" toggleIcon={ToggleIcon} variant={SelectVariant.typeaheadMulti} onSelect={jest.fn()} onToggle={jest.fn()}>
395423
{selectOptions}
396424
</Select>
397425
);
@@ -401,11 +429,11 @@ describe('toggle icon', () => {
401429

402430
describe('select with custom content', () => {
403431
test('renders closed successfully', () => {
404-
const view = mount(<Select customContent="testing custom" onToggle={jest.fn()} />);
432+
const view = mount(<Select toggleId="select-custom-content" customContent="testing custom" onToggle={jest.fn()} />);
405433
expect(view).toMatchSnapshot();
406434
});
407435
test('renders expanded successfully', () => {
408-
const view = mount(<Select customContent="testing custom" onToggle={jest.fn()} isExpanded />);
436+
const view = mount(<Select toggleId="select-expanded" customContent="testing custom" onToggle={jest.fn()} isExpanded />);
409437
expect(view).toMatchSnapshot();
410438
});
411439
});

0 commit comments

Comments
 (0)