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

carbon-design-system · Feb 27, 2020 · d4d39e6 · d4d39e6
1 parent c9f7e35
commit d4d39e6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
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
@@ -33,13 +33,18 @@ const Tag = ({
   filter,
   title,
   disabled,
+  onClose,
   ...other
 }) => {
   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
       className={tagClasses}
@@ -53,7 +58,7 @@ const Tag = ({
       <span className={`${prefix}--tag__label`}>
         {children !== null && children !== undefined ? children : TYPES[type]}
       </span>
-      <Close16 />
+      <Close16 onClick={handleClose} />
     </button>
   ) : (
     <span className={tagClasses} {...other}>
@@ -92,6 +97,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);