fix(MultiSelect): add filter tag class to <ListBoxSelection /> (#2936)

* fix(MultiSelect): add filter tag class to <ListBoxSelection /> * chore: update snapshots * feat(tag): add distinct focus state * chore: update snapshots * fix(tag): change hover bgc token
carbon-design-system · Jun 11, 2019 · 92e7221 · 92e7221
1 parent 41b6669
commit 92e7221
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/packages/components/src/components/multi-select/multi-select.hbs b/packages/components/src/components/multi-select/multi-select.hbs
@@ -37,7 +37,8 @@
       class="{{@root.prefix}}--multi-select {{@root.prefix}}--list-box {{@root.prefix}}--list-box--expanded {{@root.prefix}}--multi-select--selected{{#if inline}} {{@root.prefix}}--list-box--inline{{/if}}{{#if light}} {{@root.prefix}}--list-box--light{{/if}}{{#if filterable}} {{@root.prefix}}--combo-box {{@root.prefix}}--multi-select--filterable{{/if}}">
       <div role="button" class="{{@root.prefix}}--list-box__field" tabindex="0" aria-label="close menu"
         aria-expanded="true" aria-haspopup="true">
-        <div role="button" class="{{@root.prefix}}--list-box__selection {{@root.prefix}}--list-box__selection--multi"
+        <div role="button"
+          class="{{@root.prefix}}--list-box__selection {{@root.prefix}}--list-box__selection--multi {{@root.prefix}}--tag--filter"
           tabindex="0" title="Clear all selected items">
           1
           {{ carbon-icon 'Close16' aria-label='Clear selection' }}

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -96,17 +96,21 @@
     height: rem(20px);
   }
 
-  .#{$prefix}--tag--filter:focus > svg,
   .#{$prefix}--tag--filter > svg:hover {
     border-radius: 50%;
-    background-color: $icon-02;
+    background-color: $hover-secondary;
   }
 
   .#{$prefix}--tag--filter:focus,
   .#{$prefix}--tag--filter:hover {
     outline: none;
   }
 
+  .#{$prefix}--tag--filter:focus > svg {
+    border: 2px solid $inverse-01;
+    border-radius: 50%;
+  }
+
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     width: rem(60px);

diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
@@ -23,10 +23,13 @@ const ListBoxSelection = ({
   selectionCount,
   translateWithId: t,
 }) => {
-  const className = cx({
-    [`${prefix}--list-box__selection`]: true,
-    [`${prefix}--list-box__selection--multi`]: selectionCount,
-  });
+  const className = cx(
+    `${prefix}--tag--filter`,
+    `${prefix}--list-box__selection`,
+    {
+      [`${prefix}--list-box__selection--multi`]: selectionCount,
+    }
+  );
   const handleOnClick = event => {
     event.stopPropagation();
     clearSelection(event);

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
@@ -17,7 +17,7 @@ exports[`ListBoxField should render 1`] = `
       translateWithId={[Function]}
     >
       <div
-        className="bx--list-box__selection"
+        className="bx--tag--filter bx--list-box__selection"
         onClick={[Function]}
         onKeyDown={[Function]}
         role="button"

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
@@ -27,7 +27,7 @@ exports[`ListBoxSelection should render 1`] = `
   }
 >
   <div
-    className="bx--list-box__selection"
+    className="bx--tag--filter bx--list-box__selection"
     onClick={[Function]}
     onKeyDown={[Function]}
     role="button"
@@ -94,7 +94,7 @@ exports[`ListBoxSelection should render 2`] = `
   }
 >
   <div
-    className="bx--list-box__selection bx--list-box__selection--multi"
+    className="bx--tag--filter bx--list-box__selection bx--list-box__selection--multi"
     onClick={[Function]}
     onKeyDown={[Function]}
     role="button"