Skip to content

Commit 00a74ea

Browse files
emyarodemyarod
authored
fix(multi-select): match experimental spec (#2207)
* chore: prettier * refactor(multi-select): separate legacy markup * fix(multi-select): replace glyph icons * fix(multi-select): use v10 listbox * docs(multi-select): add more menu options * fix(multi-select): reset default fieldset width * refactor(multi-select): correct aria attributes * refactor(multi-select): remove form item wrapper * fix(list-box): restore drawer color for light and inline * fix(multi-select): remove left padding from chip * fix(list-box): change hover bg for chip close icon * fix(multi-select): correct checked item text color
1 parent 11c7e57 commit 00a74ea

File tree

4 files changed

+115
-35
lines changed

4 files changed

+115
-35
lines changed

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

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -567,7 +567,7 @@ $list-box-menu-width: rem(300px);
567567
align-items: center;
568568
justify-content: space-between;
569569
padding: 0;
570-
background-color: $interactive-02;
570+
background-color: $inverse-02;
571571
height: rem(24px);
572572
color: $inverse-01;
573573
line-height: 0;
@@ -577,10 +577,6 @@ $list-box-menu-width: rem(300px);
577577
border-radius: rem(12px);
578578
}
579579

580-
.#{$prefix}--list-box--inline .#{$prefix}--list-box__selection--multi {
581-
margin-left: rem(8px);
582-
}
583-
584580
.#{$prefix}--list-box__selection--multi > svg {
585581
fill: white;
586582
margin-left: rem(4px);
@@ -591,7 +587,7 @@ $list-box-menu-width: rem(300px);
591587

592588
.#{$prefix}--list-box__selection--multi > svg:hover {
593589
border-radius: 50%;
594-
background-color: $icon-02;
590+
background-color: $hover-secondary;
595591
}
596592

597593
.#{$prefix}--list-box__selection--multi:focus,
@@ -612,11 +608,6 @@ $list-box-menu-width: rem(300px);
612608
z-index: z('dropdown');
613609
}
614610

615-
.#{$prefix}--list-box--light .#{$prefix}--list-box__menu,
616-
.#{$prefix}--list-box--inline .#{$prefix}--list-box__menu {
617-
background-color: $field-02;
618-
}
619-
620611
// Descendant of a `list-box__menu` that represents a selection for a control
621612
.#{$prefix}--list-box__menu-item {
622613
@include type-style('body-short-01');

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
@import '../../globals/scss/vars';
1414
@import '../list-box/list-box';
1515

16-
@include exports('multi-select') {
16+
@mixin multiselect {
1717
.#{$prefix}--multi-select.#{$prefix}--combo-box > .#{$prefix}--list-box__field {
1818
padding: 0 1rem;
1919
}
@@ -23,3 +23,28 @@
2323
outline: none;
2424
}
2525
}
26+
27+
@mixin multiselect--x {
28+
.#{$prefix}--multi-select .#{$prefix}--list-box__menu {
29+
min-width: auto;
30+
}
31+
32+
.#{$prefix}--multi-select .#{$prefix}--list-box__menu-item__option .#{$prefix}--checkbox-wrapper {
33+
width: 100%;
34+
height: 100%;
35+
display: flex;
36+
align-items: center;
37+
}
38+
39+
.#{$prefix}--multi-select .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox:checked ~ .#{$prefix}--checkbox-label-text {
40+
color: $text-01;
41+
}
42+
}
43+
44+
@include exports('multi-select') {
45+
@if feature-flag-enabled('components-x') {
46+
@include multiselect--x;
47+
} @else {
48+
@include multiselect;
49+
}
50+
}

‎src/components/multi-select/multi-select.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,18 @@ const items = [
2020
id: 'downshift-1-item-1',
2121
label: 'Option 2',
2222
},
23+
{
24+
id: 'downshift-1-item-2',
25+
label: 'Option 3',
26+
},
27+
{
28+
id: 'downshift-1-item-3',
29+
label: 'Option 4',
30+
},
31+
{
32+
id: 'downshift-1-item-4',
33+
label: 'An example option that is really long to show what should be done to handle long text',
34+
},
2335
];
2436

2537
module.exports = {

‎src/components/multi-select/multi-select.hbs‎

Lines changed: 75 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,102 @@
1-
<!--
1+
<!--
22
Copyright IBM Corp. 2016, 2018
33
44
This source code is licensed under the Apache-2.0 license found in the
55
LICENSE file in the root directory of this source tree.
66
-->
77

8-
<div class="{{@root.prefix}}--form-item {{@root.prefix}}--multi-select {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}">
8+
{{#if @root.featureFlags.componentsX}}
9+
<div class="{{@root.prefix}}--form-item">
10+
<div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
11+
<label class="{{@root.prefix}}--label">Multi-Select label</label>
12+
{{#unless inline}}
13+
<div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
14+
{{/unless}}
15+
<div
16+
class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
17+
<div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
18+
aria-expanded="false" aria-haspopup="true">
19+
<span class="{{@root.prefix}}--list-box__label">Multi select options</span>
20+
<div class="{{@root.prefix}}--list-box__menu-icon">
21+
{{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
<div class="{{@root.prefix}}--form-item">
28+
<div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
29+
<label class="{{@root.prefix}}--label">Multi-Select label</label>
30+
{{#unless inline}}
31+
<div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
32+
{{/unless}}
33+
<div
34+
class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
35+
<div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
36+
aria-expanded="true" aria-haspopup="true">
37+
<div role="button" class="{{@root.prefix}}--list-box__selection {{@root.prefix}}--list-box__selection--multi"
38+
tabindex="0" title="Clear all selected items">
39+
1
40+
{{ carbon-icon 'Close16' aria-label='Clear selection' }}
41+
</div>
42+
<span class="{{@root.prefix}}--list-box__label">Multi select options</span>
43+
<div class="{{@root.prefix}}--list-box__menu-icon">
44+
{{ carbon-icon 'ChevronUp16' aria-label='Close menu' }}
45+
</div>
46+
</div>
47+
<fieldset class="{{@root.prefix}}--list-box__menu">
48+
<legend class="{{@root.prefix}}--assistive-text">Description of form elements within the fieldset</legend>
49+
{{#each items}}
50+
<div class="{{@root.prefix}}--list-box__menu-item">
51+
<div class="{{@root.prefix}}--list-box__menu-item__option">
52+
<div class="{{@root.prefix}}--checkbox-wrapper">
53+
<label title="{{label}}" class="{{@root.prefix}}--checkbox-label">
54+
<input type="checkbox" name="Option 1" readonly="" class="{{@root.prefix}}--checkbox" id="{{id}}"
55+
value="on" {{#if selected}} checked{{/if}}>
56+
<span class="{{@root.prefix}}--checkbox-appearance"></span>
57+
<span class="{{@root.prefix}}--checkbox-label-text">{{label}}</span>
58+
</label>
59+
</div>
60+
</div>
61+
</div>
62+
{{/each}}
63+
</fieldset>
64+
</div>
65+
</div>
66+
</div>
67+
{{else}}
68+
<div
69+
class="{{@root.prefix}}--form-item {{@root.prefix}}--multi-select {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}">
970
<div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false"
1071
aria-haspopup="true">
1172
<span class="{{@root.prefix}}--list-box__label">Label</span>
1273
<div class="{{@root.prefix}}--list-box__menu-icon">
13-
{{#if @root.featureFlags.componentsX}}
14-
{{ carbon-icon 'ChevronDownGlyph' aria-label='Open menu' }}
15-
{{else}}
1674
<svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Open menu">
1775
<title>Open menu</title>
1876
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
1977
</svg>
20-
{{/if}}
2178
</div>
2279
</div>
2380
</div>
24-
<div class="{{@root.prefix}}--form-item {{@root.prefix}}--multi-select {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}">
81+
<div
82+
class="{{@root.prefix}}--form-item {{@root.prefix}}--multi-select {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}">
2583
<div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true"
2684
aria-haspopup="true">
27-
<div role="button" class="{{@root.prefix}}--list-box__selection {{@root.prefix}}--list-box__selection--multi" tabindex="0"
28-
title="Clear all selected items">
85+
<div role="button" class="{{@root.prefix}}--list-box__selection {{@root.prefix}}--list-box__selection--multi"
86+
tabindex="0" title="Clear all selected items">
2987
1
30-
{{#if @root.featureFlags.componentsX}}
31-
{{ carbon-icon 'Close16' aria-label='Open menu' }}
32-
{{else}}
33-
<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
34-
<title>Close Modal</title>
35-
<path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z" fill-rule="nonzero"
36-
/>
37-
</svg>
38-
{{/if}}
88+
<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
89+
<title>Close Modal</title>
90+
<path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
91+
fill-rule="nonzero" />
92+
</svg>
3993
</div>
4094
<span class="{{@root.prefix}}--list-box__label">Label</span>
4195
<div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
42-
{{#if @root.featureFlags.componentsX}}
43-
{{ carbon-icon 'ChevronDownGlyph' aria-label='Close menu' }}
44-
{{else}}
4596
<svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Close menu">
4697
<title>Close menu</title>
4798
<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
4899
</svg>
49-
{{/if}}
50100
</div>
51101
</div>
52102
<fieldset class="{{@root.prefix}}--list-box__menu">
@@ -55,7 +105,8 @@
55105
<div class="{{@root.prefix}}--list-box__menu-item">
56106
<div class="{{@root.prefix}}--form-item {{@root.prefix}}--checkbox-wrapper">
57107
<label title="{{label}}" class="{{@root.prefix}}--checkbox-label">
58-
<input type="checkbox" name="Option 1" readonly="" class="{{@root.prefix}}--checkbox" id="{{id}}" value="on"{{#if selected}} checked{{/if}}>
108+
<input type="checkbox" name="Option 1" readonly="" class="{{@root.prefix}}--checkbox" id="{{id}}" value="on"
109+
{{#if selected}} checked{{/if}}>
59110
<span class="{{@root.prefix}}--checkbox-appearance"></span>
60111
<span class="{{@root.prefix}}--checkbox-label-text">{{label}}</span>
61112
</label>
@@ -64,3 +115,4 @@
64115
{{/each}}
65116
</fieldset>
66117
</div>
118+
{{/if}}

0 commit comments

Comments
 (0)