From 74220439cea347f1201cf5481aad49696ec278b6 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Tue, 3 Mar 2020 12:14:34 -0600
Subject: [PATCH] refactor(tag): move interactivity styles to close button

---
 packages/components/src/components/tag/_tag.scss | 16 ++++++++++------
 packages/components/src/components/tag/tag.hbs   |  8 +++++---
 packages/react/src/components/Tag/Tag.js         |  8 +++++---
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index 218e6928f20d..0c44bdd2aa61 100644
--- 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
index 7b413dc22b00..75336ce92c62 100644
--- 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/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 02d26ccbe09c..8fa584c08cab 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -46,7 +46,7 @@ const Tag = ({
     onClose(event);
   };
   return filter ? (
-    <button
+    <div
       className={tagClasses}
       aria-label={
         title !== undefined
@@ -58,8 +58,10 @@ const Tag = ({
       <span className={`${prefix}--tag__label`}>
         {children !== null && children !== undefined ? children : TYPES[type]}
       </span>
-      <Close16 onClick={handleClose} />
-    </button>
+      <button className={`${prefix}--tag__close-icon`} onClick={handleClose}>
+        <Close16 />
+      </button>
+    </div>
   ) : (
     <span className={tagClasses} {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}