diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss index a5659e2ed004..0b7de8c49506 100644 --- a/packages/components/src/components/combo-box/_combo-box.scss +++ b/packages/components/src/components/combo-box/_combo-box.scss @@ -18,6 +18,14 @@ /// @access private /// @group combo-box @mixin combo-box { + .#{$prefix}--combo-box:hover { + background-color: $field-01; + } + + .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover { + background-color: $field-02; + } + .#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear { display: none; } diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss index 1c1e44383f7f..074c3f72897a 100644 --- a/packages/components/src/components/dropdown/_dropdown.scss +++ b/packages/components/src/components/dropdown/_dropdown.scss @@ -23,7 +23,7 @@ @mixin dropdown { .#{$prefix}--dropdown__wrapper--inline { display: inline-grid; - grid-gap: rem(4px); + grid-gap: rem(24px); grid-template: auto auto / auto min-content; align-items: center; @@ -140,6 +140,10 @@ .#{$prefix}--dropdown--light { background-color: $field-02; + + &:hover { + background-color: $hover-light-ui; + } } .#{$prefix}--dropdown--up .#{$prefix}--dropdown-list { diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss index 56ae3cd629fe..5c7d63820b73 100644 --- a/packages/components/src/components/list-box/_list-box.scss +++ b/packages/components/src/components/list-box/_list-box.scss @@ -147,6 +147,10 @@ $list-box-menu-width: rem(300px); // Light variation for 'list-box' .#{$prefix}--list-box--light { background-color: $field-02; + + &:hover { + background-color: $hover-light-ui; + } } .#{$prefix}--list-box--light .#{$prefix}--list-box__menu { @@ -440,7 +444,7 @@ $list-box-menu-width: rem(300px); } .#{$prefix}--list-box__selection > svg { - fill: $icon-02; + fill: $icon-01; // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), @@ -587,6 +591,10 @@ $list-box-menu-width: rem(300px); } } + .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover { + background-color: $hover-light-ui; + } + .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item { height: rem(32px); } diff --git a/packages/components/src/components/multi-select/_multi-select.scss b/packages/components/src/components/multi-select/_multi-select.scss index a624625db62f..725e651726a7 100644 --- a/packages/components/src/components/multi-select/_multi-select.scss +++ b/packages/components/src/components/multi-select/_multi-select.scss @@ -18,6 +18,15 @@ /// @access private /// @group multi-select @mixin multiselect { + .#{$prefix}--multi-select .#{$prefix}--tag { + min-width: auto; + margin: 0 $carbon--spacing-03 0 0; + } + + .#{$prefix}--multi-select--filterable .#{$prefix}--tag { + margin: 0 $carbon--spacing-03 0 $carbon--spacing-05; + } + .#{$prefix}--multi-select .#{$prefix}--list-box__menu { min-width: auto; } @@ -56,14 +65,6 @@ color: $text-01; } - .#{$prefix}--multi-select--filterable .#{$prefix}--text-input { - padding-left: $spacing-03; - } - - .#{$prefix}--multi-select--filterable:hover .#{$prefix}--text-input { - background-color: $hover-ui; - } - .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover .#{$prefix}--text-input { background-color: $field-01; diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js index bf55f87e8ca8..e39fcc5f3e6d 100644 --- a/packages/react/src/components/Dropdown/Dropdown-story.js +++ b/packages/react/src/components/Dropdown/Dropdown-story.js @@ -51,6 +51,11 @@ const directions = { 'Top ': 'top', }; +const types = { + Default: '', + Inline: 'inline', +}; + const props = () => ({ id: text('Dropdown ID (id)', 'carbon-dropdown-example'), size: select('Field size (size)', sizes, undefined) || undefined, @@ -67,6 +72,7 @@ const props = () => ({ 'Form validation UI content (invalidText)', 'A valid value is required' ), + type: select('Type (type)', types, ''), warn: boolean('Show warning state (warn)', false), warnText: text( 'Warning state text (warnText)', diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js index e61643b46972..b73c26cdae9e 100644 --- a/packages/react/src/components/ListBox/ListBoxSelection.js +++ b/packages/react/src/components/ListBox/ListBoxSelection.js @@ -55,14 +55,39 @@ const ListBoxSelection = ({ } }; const description = selectionCount ? t('clear.all') : t('clear.selection'); - return ( + const tagClasses = cx( + `${prefix}--tag`, + `${prefix}--tag--filter`, + `${prefix}--tag--high-contrast`, + { + [`${prefix}--tag--disabled`]: disabled, + } + ); + return selectionCount ? ( +
+ + {selectionCount} + +
+ +
+
+ ) : (
{selectionCount} diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap index d72c42efd258..a0408f6fe7b3 100644 --- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap +++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap @@ -14,7 +14,7 @@ exports[`ListBoxField should render 1`] = ` translateWithId={[Function]} >
- 3 - - - + 3 + +
+ + - - - - + + + + + +
`; diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js index 70517c2964aa..6d290f73fb5c 100644 --- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js @@ -212,13 +212,15 @@ describe('MultiSelect', () => { Simulate.click(itemNode); expect( - document.querySelector('[aria-label="Clear Selection"]') + document.querySelector('[aria-label="Clear all selected items"]') ).toBeTruthy(); - Simulate.click(document.querySelector('[aria-label="Clear Selection"]')); + Simulate.click( + document.querySelector('[aria-label="Clear all selected items"]') + ); expect( - document.querySelector('[aria-label="Clear Selection"]') + document.querySelector('[aria-label="Clear all selected items"]') ).toBeFalsy(); }); @@ -250,7 +252,7 @@ describe('MultiSelect', () => { ); expect( - document.querySelector('[aria-label="Clear Selection"]') + document.querySelector('[aria-label="Clear all selected items"]') ).toBeTruthy(); const labelNode = getByText(container, label);