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 <[email protected]>
carbon-design-system · Feb 1, 2021 · 5a01d8c · 5a01d8c
1 parent e93b5b8
commit 5a01d8c
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 ? (
+    <div className={tagClasses}>
+      <span className={`${prefix}--tag__label`} title={selectionCount}>
+        {selectionCount}
+      </span>
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        className={`${prefix}--tag__close-icon`}
+        onClick={handleOnClick}
+        onKeyDown={handleOnKeyDown}
+        disabled={disabled}
+        aria-label={t('clear.all')}
+        title={description}>
+        <Close16 />
+      </div>
+    </div>
+  ) : (
     <div
       role="button"
       className={className}
       tabIndex={disabled ? -1 : 0}
       onClick={handleOnClick}
       onKeyDown={handleOnKeyDown}
-      aria-label="Clear Selection"
+      aria-label={description}
       title={description}>
       {selectionCount}
       <Close16 />

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
@@ -14,7 +14,7 @@ exports[`ListBoxField should render 1`] = `
       translateWithId={[Function]}
     >
       <div
-        aria-label="Clear Selection"
+        aria-label="Clear selected item"
         className="bx--list-box__selection"
         onClick={[Function]}
         onKeyDown={[Function]}

diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap
@@ -12,6 +12,9 @@ exports[`ListBoxSelection should render 1`] = `
         Array [
           "clear.all",
         ],
+        Array [
+          "clear.all",
+        ],
       ],
       "results": Array [
         Object {
@@ -22,12 +25,16 @@ exports[`ListBoxSelection should render 1`] = `
           "type": "return",
           "value": "translation",
         },
+        Object {
+          "type": "return",
+          "value": "translation",
+        },
       ],
     }
   }
 >
   <div
-    aria-label="Clear Selection"
+    aria-label="translation"
     className="bx--list-box__selection"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -77,6 +84,9 @@ exports[`ListBoxSelection should render 2`] = `
         Array [
           "clear.all",
         ],
+        Array [
+          "clear.all",
+        ],
       ],
       "results": Array [
         Object {
@@ -87,45 +97,58 @@ exports[`ListBoxSelection should render 2`] = `
           "type": "return",
           "value": "translation",
         },
+        Object {
+          "type": "return",
+          "value": "translation",
+        },
       ],
     }
   }
 >
   <div
-    aria-label="Clear Selection"
-    className="bx--list-box__selection bx--tag--filter bx--list-box__selection--multi"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    role="button"
-    tabIndex={0}
-    title="translation"
+    className="bx--tag bx--tag--filter bx--tag--high-contrast"
   >
-    3
-    <ForwardRef(Close16)>
-      <Icon
-        fill="currentColor"
-        height={16}
-        preserveAspectRatio="xMidYMid meet"
-        viewBox="0 0 32 32"
-        width={16}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <svg
-          aria-hidden={true}
+    <span
+      className="bx--tag__label"
+      title={3}
+    >
+      3
+    </span>
+    <div
+      aria-label="translation"
+      className="bx--tag__close-icon"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      tabIndex={0}
+      title="translation"
+    >
+      <ForwardRef(Close16)>
+        <Icon
           fill="currentColor"
-          focusable="false"
           height={16}
           preserveAspectRatio="xMidYMid meet"
           viewBox="0 0 32 32"
           width={16}
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            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"
-          />
-        </svg>
-      </Icon>
-    </ForwardRef(Close16)>
+          <svg
+            aria-hidden={true}
+            fill="currentColor"
+            focusable="false"
+            height={16}
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 32 32"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              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"
+            />
+          </svg>
+        </Icon>
+      </ForwardRef(Close16)>
+    </div>
   </div>
 </ListBoxSelection>
 `;
diff --git 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);