Skip to content

Commit 5a01d8c

Browse files
emyarodandreancardona
emyarod
and
andreancardona
authored
fix(ListBox): update listbox components to match spec (#7518)
* fix(dropdown): use light hover background token * docs(Dropdown): add type knob * fix(list-box): add light hover color for menu options * fix(combo-box): remove hover background on input * fix(MultiSelect): reduce clickable area for filter tag * fix(ListBoxSelection): pass translations through * test(MultiSelect): update label assertions * chore: update snapshots * fix(MultiSelect): adjust padding for filterable component * fix(multi-select): remove hover color on combobox * fix(multi-select): fix filterable tag spacing * fix(dropdown): increase inline dropdown grid gap * fix(combo-box): remove light variant hover background change * fix(list-box): update close icon fill Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
1 parent e93b5b8 commit 5a01d8c

File tree

9 files changed

+121
-44
lines changed

9 files changed

+121
-44
lines changed

‎packages/components/src/components/combo-box/_combo-box.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@
1818
/// @access private
1919
/// @group combo-box
2020
@mixin combo-box {
21+
.#{$prefix}--combo-box:hover {
22+
background-color: $field-01;
23+
}
24+
25+
.#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
26+
background-color: $field-02;
27+
}
28+
2129
.#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear {
2230
display: none;
2331
}

‎packages/components/src/components/dropdown/_dropdown.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
@mixin dropdown {
2424
.#{$prefix}--dropdown__wrapper--inline {
2525
display: inline-grid;
26-
grid-gap: rem(4px);
26+
grid-gap: rem(24px);
2727
grid-template: auto auto / auto min-content;
2828
align-items: center;
2929

@@ -140,6 +140,10 @@
140140

141141
.#{$prefix}--dropdown--light {
142142
background-color: $field-02;
143+
144+
&:hover {
145+
background-color: $hover-light-ui;
146+
}
143147
}
144148

145149
.#{$prefix}--dropdown--up .#{$prefix}--dropdown-list {

‎packages/components/src/components/list-box/_list-box.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,10 @@ $list-box-menu-width: rem(300px);
147147
// Light variation for 'list-box'
148148
.#{$prefix}--list-box--light {
149149
background-color: $field-02;
150+
151+
&:hover {
152+
background-color: $hover-light-ui;
153+
}
150154
}
151155

152156
.#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
@@ -440,7 +444,7 @@ $list-box-menu-width: rem(300px);
440444
}
441445

442446
.#{$prefix}--list-box__selection > svg {
443-
fill: $icon-02;
447+
fill: $icon-01;
444448

445449
// Windows, Firefox HCM Fix
446450
@media screen and (-ms-high-contrast: active),
@@ -587,6 +591,10 @@ $list-box-menu-width: rem(300px);
587591
}
588592
}
589593

594+
.#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
595+
background-color: $hover-light-ui;
596+
}
597+
590598
.#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
591599
height: rem(32px);
592600
}

‎packages/components/src/components/multi-select/_multi-select.scss‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,15 @@
1818
/// @access private
1919
/// @group multi-select
2020
@mixin multiselect {
21+
.#{$prefix}--multi-select .#{$prefix}--tag {
22+
min-width: auto;
23+
margin: 0 $carbon--spacing-03 0 0;
24+
}
25+
26+
.#{$prefix}--multi-select--filterable .#{$prefix}--tag {
27+
margin: 0 $carbon--spacing-03 0 $carbon--spacing-05;
28+
}
29+
2130
.#{$prefix}--multi-select .#{$prefix}--list-box__menu {
2231
min-width: auto;
2332
}
@@ -56,14 +65,6 @@
5665
color: $text-01;
5766
}
5867

59-
.#{$prefix}--multi-select--filterable .#{$prefix}--text-input {
60-
padding-left: $spacing-03;
61-
}
62-
63-
.#{$prefix}--multi-select--filterable:hover .#{$prefix}--text-input {
64-
background-color: $hover-ui;
65-
}
66-
6768
.#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover
6869
.#{$prefix}--text-input {
6970
background-color: $field-01;

‎packages/react/src/components/Dropdown/Dropdown-story.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,11 @@ const directions = {
5151
'Top ': 'top',
5252
};
5353

54+
const types = {
55+
Default: '',
56+
Inline: 'inline',
57+
};
58+
5459
const props = () => ({
5560
id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
5661
size: select('Field size (size)', sizes, undefined) || undefined,
@@ -67,6 +72,7 @@ const props = () => ({
6772
'Form validation UI content (invalidText)',
6873
'A valid value is required'
6974
),
75+
type: select('Type (type)', types, ''),
7076
warn: boolean('Show warning state (warn)', false),
7177
warnText: text(
7278
'Warning state text (warnText)',

‎packages/react/src/components/ListBox/ListBoxSelection.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,39 @@ const ListBoxSelection = ({
5555
}
5656
};
5757
const description = selectionCount ? t('clear.all') : t('clear.selection');
58-
return (
58+
const tagClasses = cx(
59+
`${prefix}--tag`,
60+
`${prefix}--tag--filter`,
61+
`${prefix}--tag--high-contrast`,
62+
{
63+
[`${prefix}--tag--disabled`]: disabled,
64+
}
65+
);
66+
return selectionCount ? (
67+
<div className={tagClasses}>
68+
<span className={`${prefix}--tag__label`} title={selectionCount}>
69+
{selectionCount}
70+
</span>
71+
<div
72+
role="button"
73+
tabIndex={disabled ? -1 : 0}
74+
className={`${prefix}--tag__close-icon`}
75+
onClick={handleOnClick}
76+
onKeyDown={handleOnKeyDown}
77+
disabled={disabled}
78+
aria-label={t('clear.all')}
79+
title={description}>
80+
<Close16 />
81+
</div>
82+
</div>
83+
) : (
5984
<div
6085
role="button"
6186
className={className}
6287
tabIndex={disabled ? -1 : 0}
6388
onClick={handleOnClick}
6489
onKeyDown={handleOnKeyDown}
65-
aria-label="Clear Selection"
90+
aria-label={description}
6691
title={description}>
6792
{selectionCount}
6893
<Close16 />

‎packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ exports[`ListBoxField should render 1`] = `
1414
translateWithId={[Function]}
1515
>
1616
<div
17-
aria-label="Clear Selection"
17+
aria-label="Clear selected item"
1818
className="bx--list-box__selection"
1919
onClick={[Function]}
2020
onKeyDown={[Function]}

‎packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap‎

Lines changed: 50 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ exports[`ListBoxSelection should render 1`] = `
1212
Array [
1313
"clear.all",
1414
],
15+
Array [
16+
"clear.all",
17+
],
1518
],
1619
"results": Array [
1720
Object {
@@ -22,12 +25,16 @@ exports[`ListBoxSelection should render 1`] = `
2225
"type": "return",
2326
"value": "translation",
2427
},
28+
Object {
29+
"type": "return",
30+
"value": "translation",
31+
},
2532
],
2633
}
2734
}
2835
>
2936
<div
30-
aria-label="Clear Selection"
37+
aria-label="translation"
3138
className="bx--list-box__selection"
3239
onClick={[Function]}
3340
onKeyDown={[Function]}
@@ -77,6 +84,9 @@ exports[`ListBoxSelection should render 2`] = `
7784
Array [
7885
"clear.all",
7986
],
87+
Array [
88+
"clear.all",
89+
],
8090
],
8191
"results": Array [
8292
Object {
@@ -87,45 +97,58 @@ exports[`ListBoxSelection should render 2`] = `
8797
"type": "return",
8898
"value": "translation",
8999
},
100+
Object {
101+
"type": "return",
102+
"value": "translation",
103+
},
90104
],
91105
}
92106
}
93107
>
94108
<div
95-
aria-label="Clear Selection"
96-
className="bx--list-box__selection bx--tag--filter bx--list-box__selection--multi"
97-
onClick={[Function]}
98-
onKeyDown={[Function]}
99-
role="button"
100-
tabIndex={0}
101-
title="translation"
109+
className="bx--tag bx--tag--filter bx--tag--high-contrast"
102110
>
103-
3
104-
<ForwardRef(Close16)>
105-
<Icon
106-
fill="currentColor"
107-
height={16}
108-
preserveAspectRatio="xMidYMid meet"
109-
viewBox="0 0 32 32"
110-
width={16}
111-
xmlns="http://www.w3.org/2000/svg"
112-
>
113-
<svg
114-
aria-hidden={true}
111+
<span
112+
className="bx--tag__label"
113+
title={3}
114+
>
115+
3
116+
</span>
117+
<div
118+
aria-label="translation"
119+
className="bx--tag__close-icon"
120+
onClick={[Function]}
121+
onKeyDown={[Function]}
122+
role="button"
123+
tabIndex={0}
124+
title="translation"
125+
>
126+
<ForwardRef(Close16)>
127+
<Icon
115128
fill="currentColor"
116-
focusable="false"
117129
height={16}
118130
preserveAspectRatio="xMidYMid meet"
119131
viewBox="0 0 32 32"
120132
width={16}
121133
xmlns="http://www.w3.org/2000/svg"
122134
>
123-
<path
124-
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
125-
/>
126-
</svg>
127-
</Icon>
128-
</ForwardRef(Close16)>
135+
<svg
136+
aria-hidden={true}
137+
fill="currentColor"
138+
focusable="false"
139+
height={16}
140+
preserveAspectRatio="xMidYMid meet"
141+
viewBox="0 0 32 32"
142+
width={16}
143+
xmlns="http://www.w3.org/2000/svg"
144+
>
145+
<path
146+
d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
147+
/>
148+
</svg>
149+
</Icon>
150+
</ForwardRef(Close16)>
151+
</div>
129152
</div>
130153
</ListBoxSelection>
131154
`;

‎packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -212,13 +212,15 @@ describe('MultiSelect', () => {
212212
Simulate.click(itemNode);
213213

214214
expect(
215-
document.querySelector('[aria-label="Clear Selection"]')
215+
document.querySelector('[aria-label="Clear all selected items"]')
216216
).toBeTruthy();
217217

218-
Simulate.click(document.querySelector('[aria-label="Clear Selection"]'));
218+
Simulate.click(
219+
document.querySelector('[aria-label="Clear all selected items"]')
220+
);
219221

220222
expect(
221-
document.querySelector('[aria-label="Clear Selection"]')
223+
document.querySelector('[aria-label="Clear all selected items"]')
222224
).toBeFalsy();
223225
});
224226

@@ -250,7 +252,7 @@ describe('MultiSelect', () => {
250252
);
251253

252254
expect(
253-
document.querySelector('[aria-label="Clear Selection"]')
255+
document.querySelector('[aria-label="Clear all selected items"]')
254256
).toBeTruthy();
255257

256258
const labelNode = getByText(container, label);

0 commit comments

Comments
 (0)