feat(Tag): support click handler for filter tag close icon (#5470)

carbon-design-system · Mar 10, 2020 · 57f48c0 · 57f48c0
1 parent b8187fa
commit 57f48c0
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 14 deletions.
diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -98,8 +98,6 @@
   // tags used for filtering
   .#{$prefix}--tag--filter {
     @include tag-theme($inverse-02, $inverse-01);
-
-    cursor: pointer;
     padding-right: rem(2px);
 
     &:focus,
@@ -108,28 +106,34 @@
     }
   }
 
-  .#{$prefix}--tag--filter > svg {
+  .#{$prefix}--tag__close-icon {
     flex-shrink: 0;
     width: rem(20px);
     height: rem(20px);
     margin: 0 0 0 rem(4px);
     padding: rem(2px);
     border: 0;
-    fill: $inverse-01;
     background-color: transparent;
     border-radius: 50%;
+    cursor: pointer;
 
     &:hover {
       background-color: $inverse-hover-ui;
     }
   }
 
-  .#{$prefix}--tag--filter:focus > svg {
+  .#{$prefix}--tag__close-icon svg {
+    fill: $inverse-01;
+  }
+
+  .#{$prefix}--tag__close-icon:focus {
+    outline: none;
     box-shadow: inset 0 0 0 2px $inverse-focus-ui;
     border-radius: 50%;
   }
 
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg:hover {
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
+    .#{$prefix}--tag__close-icon:hover {
     background-color: transparent;
   }
 

diff --git a/packages/components/src/components/tag/tag.hbs b/packages/components/src/components/tag/tag.hbs
@@ -15,9 +15,11 @@
 
 <div>
   {{#if filter}}
-  <button class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter">
+  <div class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter">
     <span class="{{@root.prefix}}--tag__label">filter</span>
-    {{ carbon-icon 'Close16' }}
-  </button>
+    <button class="{{@root.prefix}}--tag__close-icon">
+      {{ carbon-icon 'Close16' }}
+    </button>
+  </div>
   {{/if}}
 </div>
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4724,6 +4724,9 @@ Map {
       "filter": Object {
         "type": "bool",
       },
+      "onClose": Object {
+        "type": "func",
+      },
       "title": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
@@ -29,7 +29,11 @@ const props = {
     title: 'Clear Filter',
   }),
   filter() {
-    return { ...this.regular(), onClick: action('onClick') };
+    return {
+      ...this.regular(),
+      onClick: action('onClick'),
+      onClose: action('onClose'),
+    };
   },
 };
 

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
@@ -10,9 +10,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
 import { Close16 } from '@carbon/icons-react';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
-
+const getInstanceId = setupGetInstanceId();
 const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
@@ -29,32 +30,45 @@ const TYPES = {
 const Tag = ({
   children,
   className,
+  id,
   type,
   filter,
   title,
   disabled,
+  onClose,
   ...other
 }) => {
+  const tagId = id || `tag-${getInstanceId()}`;
   const tagClass = `${prefix}--tag--${type}`;
   const tagClasses = classNames(`${prefix}--tag`, tagClass, className, {
     [`${prefix}--tag--disabled`]: disabled,
     [`${prefix}--tag--filter`]: filter,
   });
+  const handleClose = event => {
+    event.stopPropagation();
+    onClose(event);
+  };
   return filter ? (
-    <button
+    <div
       className={tagClasses}
       aria-label={
         title !== undefined
           ? `${title} ${children}`
           : `Clear filter ${children}`
       }
+      id={tagId}
       disabled={disabled}
       {...other}>
       <span className={`${prefix}--tag__label`}>
         {children !== null && children !== undefined ? children : TYPES[type]}
       </span>
-      <Close16 />
-    </button>
+      <button
+        className={`${prefix}--tag__close-icon`}
+        onClick={handleClose}
+        aria-labelledby={tagId}>
+        <Close16 />
+      </button>
+    </div>
   ) : (
     <span className={tagClasses} {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
@@ -92,6 +106,11 @@ Tag.propTypes = {
    * Text to show on clear filters
    */
   title: PropTypes.string,
+
+  /**
+   * Click handler for filter tag close button.
+   */
+  onClose: PropTypes.func,
 };
 
 export const types = Object.keys(TYPES);