feat(Tag): add pointer on hover if component is interactive (#7839)

* feat(Tag): add pointer on hover if component is interactive * docs(Tag): add interactive tag example * fix(tag): add disabled interactive cursor * feat(tag): dynamically apply hover color for interactive tags * feat(tag): add interactive tag focus outline * fix(Tag): render button when nonfilter tag is interactive * fix(Tag): make interactive and filter tags mutually exclusive * fix(tag): add transitions to interactive tag
carbon-design-system · Mar 3, 2021 · d944ac5 · d944ac5
1 parent 8b207f1
commit d944ac5
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 32 deletions.
diff --git a/packages/components/src/components/tag/_mixins.scss b/packages/components/src/components/tag/_mixins.scss
@@ -11,6 +11,7 @@
   color: $text-color;
   background-color: $bg-color;
 
+  &.#{$prefix}--tag--interactive,
   .#{$prefix}--tag__close-icon {
     &:hover {
       background-color: $filter-hover-color;

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -131,7 +131,8 @@
   }
 
   .#{$prefix}--tag--disabled,
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
     @include tag-theme($disabled-01, $disabled-02);
 
     &:hover {
@@ -146,6 +147,15 @@
     text-overflow: ellipsis;
   }
 
+  .#{$prefix}--tag--interactive:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 1px $focus;
+  }
+
+  .#{$prefix}--tag--interactive:hover {
+    cursor: pointer;
+  }
+
   // tags used for filtering
   .#{$prefix}--tag--filter {
     padding-top: 0;
@@ -158,6 +168,10 @@
     }
   }
 
+  .#{$prefix}--tag--interactive {
+    transition: background-color $duration--fast-01 motion(entrance, productive);
+  }
+
   .#{$prefix}--tag__close-icon {
     display: flex;
     flex-shrink: 0;

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
@@ -79,9 +79,17 @@ export default {
 };
 
 export const _Default = () => (
-  <Tag className="some-class" {...props.regular()}>
-    {text('Content (children)', 'This is a tag')}
-  </Tag>
+  <>
+    <Tag className="some-class" {...props.regular()}>
+      {text('Content (children)', 'This is a tag')}
+    </Tag>
+    <Tag
+      className="some-class"
+      {...props.regular()}
+      onClick={action('onClick')}>
+      This is an interactive tag
+    </Tag>
+  </>
 );
 
 _Default.parameters = {

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
@@ -47,6 +47,7 @@ const Tag = ({
     [`${prefix}--tag--filter`]: filter,
     [`${prefix}--tag--${size}`]: size,
     [`${prefix}--tag--${type}`]: type,
+    [`${prefix}--tag--interactive`]: other.onClick && !filter,
   });
   const handleClose = (event) => {
     if (onClose) {
@@ -55,33 +56,39 @@ const Tag = ({
     }
   };
 
-  return filter ? (
-    <div
-      className={tagClasses}
-      aria-label={
-        title !== undefined
-          ? `${title} ${children}`
-          : `Clear filter ${children}`
-      }
-      id={tagId}
-      {...other}>
-      <span
-        className={`${prefix}--tag__label`}
-        title={typeof children === 'string' ? children : null}>
-        {children !== null && children !== undefined ? children : TYPES[type]}
-      </span>
-      <button
-        type="button"
-        className={`${prefix}--tag__close-icon`}
-        onClick={handleClose}
-        disabled={disabled}
-        aria-labelledby={tagId}
-        title={title}>
-        <Close16 />
-      </button>
-    </div>
-  ) : (
-    <div className={tagClasses} id={tagId} {...other}>
+  if (filter) {
+    return (
+      <div
+        className={tagClasses}
+        aria-label={
+          title !== undefined
+            ? `${title} ${children}`
+            : `Clear filter ${children}`
+        }
+        id={tagId}
+        {...other}>
+        <span
+          className={`${prefix}--tag__label`}
+          title={typeof children === 'string' ? children : null}>
+          {children !== null && children !== undefined ? children : TYPES[type]}
+        </span>
+        <button
+          type="button"
+          className={`${prefix}--tag__close-icon`}
+          onClick={handleClose}
+          disabled={disabled}
+          aria-labelledby={tagId}
+          title={title}>
+          <Close16 />
+        </button>
+      </div>
+    );
+  }
+
+  const ComponentTag = other.onClick ? 'button' : 'div';
+
+  return (
+    <ComponentTag className={tagClasses} id={tagId} {...other}>
       {CustomIconElement ? (
         <div className={`${prefix}--tag__custom-icon`}>
           <CustomIconElement />
@@ -92,7 +99,7 @@ const Tag = ({
       <span title={typeof children === 'string' ? children : null}>
         {children !== null && children !== undefined ? children : TYPES[type]}
       </span>
-    </div>
+    </ComponentTag>
   );
 };