Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(combo-box): support v10 input controls #2241

Merged
merged 23 commits into from
Apr 2, 2019
Merged

fix(combo-box): support v10 input controls #2241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
9183f2e
refactor(list-box): nest warning icon
emyarod Mar 29, 2019
23d88d4
docs(combo-box): add examples with selected option
emyarod Mar 29, 2019
d441eb5
fix(combo-box): support v10 input controls
emyarod Mar 29, 2019
d0b6c65
Revert "refactor(list-box): nest warning icon"
emyarod Mar 29, 2019
fd29d18
refactor(combo-box): nest warning icons
emyarod Mar 29, 2019
26e3618
fix(list-box): style invalid icon for empty input value
emyarod Apr 1, 2019
e24006f
docs(combo-box): add examples for populated inputs
emyarod Apr 1, 2019
e3ebe21
fix(list-box): add style for populated input
emyarod Apr 1, 2019
0614684
fix(combo-box): fix a11y attributes
emyarod Apr 2, 2019
cc8f6f7
fix(combo-box): remove chevron button tabindex
emyarod Apr 2, 2019
e4163f7
fix(combo-box): remove input field role
emyarod Apr 2, 2019
8084ff8
fix(combo-box): add role to menu
emyarod Apr 2, 2019
785538c
fix(combo-box): add role and aria-label to menu
emyarod Apr 2, 2019
5e1ccb1
fix(combo-box): add aria-owns and IDs
emyarod Apr 2, 2019
79a8742
fix(list-box): ignore text-input bottom border
emyarod Apr 2, 2019
b3a7451
refactor(list-box): use new icon color tokens
emyarod Apr 2, 2019
832e79a
fix(form): target invalid combo box text inputs
emyarod Apr 2, 2019
bc90b17
docs(combo-box): add spacer divs for FF overlap
emyarod Apr 2, 2019
93ababa
fix(list-box): change menu icon svg token
emyarod Apr 2, 2019
44d24b2
fix(combo-box): override text input defaults
emyarod Apr 2, 2019
f462e8d
Revert "docs(combo-box): add spacer divs for FF overlap"
emyarod Apr 2, 2019
e004d8e
docs(combo-box): remove spacer line breaks
emyarod Apr 2, 2019
a5ffad8
docs(combo-box): add dev env specific spacing
emyarod Apr 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 16 additions & 12 deletions demo/js/components/ComponentExample/component-overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,29 @@
width: 100%;
max-width: 1000px;

& > .primary-button button,
& > .secondary-button button {
&>.primary-button button,
&>.secondary-button button {
margin: 0.5rem;
}

& > .detail-page-header--no-tabs > .bx--detail-page-header--no-tabs {
&>.detail-page-header--no-tabs>.bx--detail-page-header--no-tabs {
width: 100%;
left: 0;
top: 206px;
}

& > .detail-page-header--with-tabs > .bx--detail-page-header--with-tabs {
&>.detail-page-header--with-tabs>.bx--detail-page-header--with-tabs {
width: 100%;
left: 0;
top: 206px;
}

& > .inline-notification .bx--inline-notification {
&>.inline-notification .bx--inline-notification {
display: inline-flex;
margin-right: 10rem;
}

& > .overflow-menu .bx--overflow-menu {
&>.overflow-menu .bx--overflow-menu {
position: absolute;
left: 3rem;

Expand Down Expand Up @@ -67,7 +67,7 @@
margin-bottom: 0.5rem;
}

.data-table > div {
.data-table>div {
width: 100%;
}

Expand All @@ -90,7 +90,7 @@
}
}

& .notification > div {
& .notification>div {
max-width: 700px;
}

Expand Down Expand Up @@ -121,7 +121,7 @@
}
}

& > .dropdown > div {
&>.dropdown>div {
width: 100%;
max-width: 502px;
}
Expand Down Expand Up @@ -151,15 +151,15 @@
}

& .tabs {
& > div {
&>div {
min-width: 100%;

@include breakpoint(if(not feature-flag-enabled('components-x'), '768px', '42rem')) {
min-width: 570px;
}
}

.bx--tabs + div {
.bx--tabs+div {
padding: 0 !important;
margin-top: 2rem;
}
Expand All @@ -174,9 +174,13 @@
}
}
}

.combo-box .bx--form-item:nth-last-of-type(-n + 3) {
margin-bottom: 10rem;
}
}

.page-header + div > .bx--tabs {
.page-header+div>.bx--tabs {
background-color: $field-01;

@include breakpoint(if(not feature-flag-enabled('components-x'), '768px', '42rem')) {
Expand Down
6 changes: 2 additions & 4 deletions src/components/combo-box/_combo-box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@

@mixin combo-box--x {
.#{$prefix}--combo-box .#{$prefix}--text-input {
padding-right: $carbon--spacing-09;

&::placeholder {
color: $text-02;
opacity: 1;
Expand All @@ -34,8 +32,8 @@
}
}

.#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid] .#{$prefix}--text-input {
padding-right: carbon--mini-units(8);
.#{$prefix}--combo-box.#{$prefix}--list-box--expanded .#{$prefix}--text-input {
border-bottom-color: $ui-03;
}

.#{$prefix}--combo-box .#{$prefix}--list-box__field,
Expand Down
206 changes: 182 additions & 24 deletions src/components/combo-box/combo-box.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
{{/unless}}
<div
class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
<div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
aria-expanded="false" aria-haspopup="true">
<input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
autocomplete="off" value="" id="downshift-input-2" placeholder="Filter...">
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
aria-haspopup="listbox">
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="" id="downshift-input-2" placeholder="Filter..." aria-label="Filter...">
<div class="{{@root.prefix}}--list-box__menu-icon">
{{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
</div>
Expand All @@ -26,6 +26,54 @@
</div>
</div>

<div class="{{@root.prefix}}--form-item">
<div class="{{@root.prefix}}--list-box__wrapper{{#if inline}} {{@root.prefix}}--list-box__wrapper--inline{{/if}}">
<label class="{{@root.prefix}}--label">Combo box label</label>
{{#unless inline}}
<div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
{{/unless}}
<div
class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
aria-haspopup="listbox">
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="This is not a value." id="downshift-input-2" placeholder="Filter..." aria-label="Filter...">
<div class="{{@root.prefix}}--list-box__selection" role="button">
{{ carbon-icon "Close16" aria-label="Clear all" title="Clear all" }}
</div>
<div class="{{@root.prefix}}--list-box__menu-icon">
{{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
</div>
</div>
</div>
</div>
</div>

<div class="{{@root.prefix}}--form-item">
<div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
<label class="{{@root.prefix}}--label">Combo box label</label>
{{#unless inline}}
<div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
{{/unless}}
<div
class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
data-invalid>
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
aria-haspopup="listbox">
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="" id="downshift-input-2" placeholder="Filter..." aria-label="Filter...">
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
<div class="{{@root.prefix}}--list-box__menu-icon">
{{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
</div>
</div>
</div>
<div class="{{@root.prefix}}--form-requirement">
Validation message here
</div>
</div>
</div>

<div class="{{@root.prefix}}--form-item">
<div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
<label class="{{@root.prefix}}--label">Combo box label</label>
Expand All @@ -35,11 +83,40 @@
<div
class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
data-invalid>
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
<div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
aria-expanded="false" aria-haspopup="true">
<input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
autocomplete="off" value="" id="downshift-input-2" placeholder="Filter...">
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
aria-haspopup="listbox">
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="This is not a value." id="downshift-input-2" placeholder="Filter..." aria-label="Filter...">
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
<div class="{{@root.prefix}}--list-box__selection" role="button">
{{ carbon-icon "Close16" aria-label="Clear all" title="Clear all" }}
</div>
<div class="{{@root.prefix}}--list-box__menu-icon">
{{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
</div>
</div>
</div>
<div class="{{@root.prefix}}--form-requirement">
Validation message here
</div>
</div>
</div>

<div class="{{@root.prefix}}--form-item">
<div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
<label class="{{@root.prefix}}--label {{@root.prefix}}--label--disabled">Combo box label</label>
{{#unless inline}}
<div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">Optional helper text
here</div>
{{/unless}}
<div
class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
data-invalid>
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
aria-haspopup="true" disabled>
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="" id="downshift-input-2" placeholder="Filter..." disabled>
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
<div class="{{@root.prefix}}--list-box__menu-icon">
{{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
</div>
Expand All @@ -61,10 +138,14 @@
<div
class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
data-invalid>
<div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
aria-expanded="false" aria-haspopup="true" disabled>
<input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." disabled>
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
aria-haspopup="true" disabled>
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="This is not a value" id="downshift-input-2" placeholder="Filter..." disabled>
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
<div class="{{@root.prefix}}--list-box__selection" role="button">
{{ carbon-icon "Close16" aria-label="Clear all" title="Clear all" }}
</div>
<div class="{{@root.prefix}}--list-box__menu-icon">
{{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
</div>
Expand All @@ -85,10 +166,10 @@
{{/unless}}
<div
class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box {{@root.prefix}}--list-box--disabled{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}">
<div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="open menu"
aria-expanded="false" aria-haspopup="true" disabled>
<input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." disabled>
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
aria-haspopup="true" disabled>
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="" id="downshift-input-2" placeholder="Filter..." disabled>
<div class="{{@root.prefix}}--list-box__menu-icon">
{{ carbon-icon 'ChevronDown16' aria-label='Open menu' }}
</div>
Expand All @@ -107,15 +188,15 @@
{{/unless}}
<div
class="{{@root.prefix}}--combo-box {{@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}}">
<div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
aria-expanded="true" aria-haspopup="true">
<input class="{{@root.prefix}}--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false"
autocomplete="off" value="" id="downshift-input-2" placeholder="Filter...">
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
aria-haspopup="listbox">
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="" id="downshift-input-2" placeholder="Filter..." aria-label="Filter..." aria-owns="list-box__menu-0">
<div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
{{ carbon-icon 'ChevronDown16' aria-label='Close menu' }}
</div>
</div>
<ul class="{{@root.prefix}}--list-box__menu">
<ul class="{{@root.prefix}}--list-box__menu" role="listbox" id="list-box__menu-0" aria-label="Filter...">
{{#each items}}
<li
class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
Expand All @@ -129,10 +210,87 @@
</div>
</div>
</div>

<div class="{{@root.prefix}}--form-item">
<div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
<label class="{{@root.prefix}}--label">Combo box label</label>
{{#unless inline}}
<div class="{{@root.prefix}}--form__helper-text">Optional helper text
here
</div>
{{/unless}}
<div
class="{{@root.prefix}}--combo-box {{@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}}">
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
aria-haspopup="listbox">
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="Option 3" id="downshift-input-2" placeholder="Filter..." aria-label="Filter..."
aria-owns="list-box__menu-1">
<div role="button" class="{{@root.prefix}}--list-box__selection" title="Clear selected item">
{{ carbon-icon 'Close16' aria-label="Clear text input" }}
</div>
<div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
{{ carbon-icon 'ChevronDown16' aria-label='Close menu' }}
</div>
</div>
<ul class="{{@root.prefix}}--list-box__menu" role="listbox" id="list-box__menu-1" aria-label="Filter...">
{{#each items}}
<li
class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
id="{{id}}">
<div class="{{@root.prefix}}--list-box__menu-item__option" tabindex="0">
{{label}}
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>

<div class="{{@root.prefix}}--form-item">
<div class="{{@root.prefix}}--list-box__wrapper {{#if inline}}{{@root.prefix}}--list-box__wrapper--inline{{/if}}">
<label class="{{@root.prefix}}--label">Combo box label</label>
{{#unless inline}}
<div class="{{@root.prefix}}--form__helper-text">Optional helper text here</div>
{{/unless}}
<div
class="{{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}"
data-invalid>
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
aria-haspopup="listbox">
<input class="{{@root.prefix}}--text-input" aria-autocomplete="list" aria-expanded="false" autocomplete="off"
value="Option 3" id="downshift-input-2" placeholder="Filter..." aria-label="Filter..."
aria-owns="list-box__menu-2">
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--list-box__invalid-icon')}}
<div role="button" class="{{@root.prefix}}--list-box__selection" title="Clear selected item">
{{ carbon-icon 'Close16' aria-label="Clear text input" }}
</div>
<div class="{{@root.prefix}}--list-box__menu-icon {{@root.prefix}}--list-box__menu-icon--open">
{{ carbon-icon 'ChevronDown16' aria-label='Close menu' }}
</div>
</div>
<ul class="{{@root.prefix}}--list-box__menu" role="listbox" id="list-box__menu-2" aria-label="Filter...">
{{#each items}}
<li
class="{{@root.prefix}}--list-box__menu-item{{#if selected}} {{@root.prefix}}--list-box__menu-item--highlighted{{/if}}"
id="{{id}}">
<div class="{{@root.prefix}}--list-box__menu-item__option" tabindex="0">
{{label}}
</div>
</li>
{{/each}}
</ul>
</div>
<div class="{{@root.prefix}}--form-requirement">
Validation message here
</div>
</div>
</div>
{{else}}
<div
class="{{@root.prefix}}--form-item {{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if disabled}} {{@root.prefix}}--list-box--disabled{{/if}}">
<div role="button" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="open menu" aria-expanded="false"
aria-haspopup="true" {{#if disabled}} disabled{{/if}}> <input class="{{@root.prefix}}--text-input" role="combobox"
aria-autocomplete="list" aria-expanded="false" autocomplete="off" value="" id="downshift-input-2"
placeholder="Filter..." {{#if disabled}} disabled{{/if}}>
Expand All @@ -146,7 +304,7 @@
</div>
<div
class="{{@root.prefix}}--form-item {{@root.prefix}}--combo-box {{@root.prefix}}--list-box{{#if disabled}} {{@root.prefix}}--list-box--disabled{{/if}}">
<div role="button" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
<div role="combobox" class="{{@root.prefix}}--list-box__field" aria-label="close menu" aria-expanded="true"
aria-haspopup="true" {{#if disabled}} disabled{{/if}}> <input class="{{@root.prefix}}--text-input" role="combobox"
aria-autocomplete="list" aria-expanded="true" autocomplete="off" value="" id="downshift-input-2"
placeholder="Filter..." aria-activedescendant="downshift-1-item-2" {{#if disabled}} disabled{{/if}}>
Expand Down
Loading