From 07e5ecad37b6061cbbf500d0367f5394e2d0b797 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Wed, 27 Nov 2019 19:19:57 -0800
Subject: [PATCH 1/8] fix(Tag): ignore click events when disabled

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

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index d229c776185d..9a1657765d7f 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -76,7 +76,8 @@
     @include tag-theme($ibm-color__warm-gray-20, $ibm-color__warm-gray-100);
   }
 
-  .#{$prefix}--tag--disabled {
+  .#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
     @include tag-theme($ibm-color__gray-10, $ibm-color__gray-30);
 
     &:hover {
@@ -99,27 +100,46 @@
     padding-right: rem(2px);
   }
 
-  .#{$prefix}--tag--filter > svg {
-    fill: $inverse-01;
-    margin-left: rem(4px);
-    padding: rem(2px);
+  .#{$prefix}--tag--filter__close-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: rem(20px);
     height: rem(20px);
+    margin: 0 0 0 rem(4px);
+    padding: 0;
+    border: 0;
+    background-color: transparent;
+    border-radius: 50%;
+
+    &:hover {
+      background-color: $inverse-hover-ui;
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px $inverse-focus-ui;
+    }
   }
 
-  .#{$prefix}--tag--filter > svg:hover {
-    border-radius: 50%;
-    background-color: $inverse-hover-ui;
+  .#{$prefix}--tag--filter svg {
+    fill: $inverse-01;
   }
 
-  .#{$prefix}--tag--filter:focus,
-  .#{$prefix}--tag--filter:hover {
-    outline: none;
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
+    .#{$prefix}--tag--filter__close-button:hover {
+    background-color: transparent;
+    cursor: not-allowed;
   }
 
-  .#{$prefix}--tag--filter:focus > svg {
-    box-shadow: inset 0 0 0 2px $inverse-focus-ui;
-    border-radius: 50%;
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
+    .#{$prefix}--tag--filter__close-button:focus {
+    box-shadow: none;
+  }
+
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
+    fill: $ibm-color__gray-30;
   }
 
   // Skeleton state
diff --git a/packages/components/src/components/tag/tag.hbs b/packages/components/src/components/tag/tag.hbs
index 51ea0bfa6b15..c72505c1068a 100644
--- a/packages/components/src/components/tag/tag.hbs
+++ b/packages/components/src/components/tag/tag.hbs
@@ -15,9 +15,11 @@
 
 <div role="list">
   {{#if filter}}
-  <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter" tabindex="0" role="listitem">
-    <span class="{{@root.prefix}}--tag__label">filter</span>
-    {{ carbon-icon 'Close16' aria-label='Clear filter' }}
+  <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter" role="listitem">
+    filter
+    <button class="{{@root.prefix}}--tag--filter__close-button">
+      {{ carbon-icon 'Close16' aria-label='Clear filter' }}
+    </button>
   </span>
   {{/if}}
 </div>
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 58f9f479b49c..36df1fee7472 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -33,6 +33,7 @@ const Tag = ({
   filter,
   title,
   disabled,
+  onClick,
   ...other
 }) => {
   const tagClass = `${prefix}--tag--${type}`;
@@ -50,7 +51,12 @@ const Tag = ({
       }
       {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
-      <Close16 />
+      <button
+        className={`${prefix}--tag--filter__close-button`}
+        disabled={disabled}
+        onClick={!disabled ? onClick : undefined}>
+        <Close16 />
+      </button>
     </button>
   ) : (
     <button className={tagClasses} {...other}>

From 4087a0dcf1c7ab004711e5d2fe6e0e1d758f6804 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Wed, 27 Nov 2019 19:20:58 -0800
Subject: [PATCH 2/8] test(Tag): remove warning

---
 packages/react/src/components/Tag/Tag-test.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index bc899d9f194e..686c0821fe10 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -49,19 +49,19 @@ describe('Tag', () => {
 
   describe('Renders as expected', () => {
     it('should render with the appropriate type', () => {
-      const tag = shallow(<Tag type="beta" />);
+      const tag = shallow(<Tag type="red" />);
       expect(tag.hasClass(`${prefix}--tag`)).toEqual(true);
-      expect(tag.hasClass(`${prefix}--tag--beta`)).toEqual(true);
+      expect(tag.hasClass(`${prefix}--tag--red`)).toEqual(true);
     });
   });
 
   it('should allow for a custom label', () => {
-    const tag = shallow(<Tag type="beta">New Version!</Tag>);
+    const tag = shallow(<Tag type="red">New Version!</Tag>);
     expect(tag.text()).toEqual('New Version!');
   });
 
   it('should support extra class names', () => {
-    const tag = shallow(<Tag type="beta" className="extra-class" />);
+    const tag = shallow(<Tag type="red" className="extra-class" />);
     expect(tag.hasClass('extra-class')).toEqual(true);
   });
 });

From be298ed2a5c3745d66672eb013d171d43a5625fc Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Mon, 2 Dec 2019 22:01:14 -0800
Subject: [PATCH 3/8] fix(tag): move aria-label to button

---
 packages/components/src/components/tag/tag.hbs | 4 ++--
 packages/react/src/components/Tag/Tag.js       | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/tag/tag.hbs b/packages/components/src/components/tag/tag.hbs
index c72505c1068a..be8cbf36445c 100644
--- a/packages/components/src/components/tag/tag.hbs
+++ b/packages/components/src/components/tag/tag.hbs
@@ -17,8 +17,8 @@
   {{#if filter}}
   <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter" role="listitem">
     filter
-    <button class="{{@root.prefix}}--tag--filter__close-button">
-      {{ carbon-icon 'Close16' aria-label='Clear filter' }}
+    <button aria-label='Clear filter' class="{{@root.prefix}}--tag--filter__close-button">
+      {{ carbon-icon 'Close16' }}
     </button>
   </span>
   {{/if}}
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 36df1fee7472..4f5d85e444b0 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -52,6 +52,7 @@ const Tag = ({
       {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
       <button
+        aria-label={title || 'Clear filter'}
         className={`${prefix}--tag--filter__close-button`}
         disabled={disabled}
         onClick={!disabled ? onClick : undefined}>

From 07ffacc5efe127b0cf1d5cad5e1ea795a1f3b517 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Mon, 6 Jan 2020 10:26:53 -0600
Subject: [PATCH 4/8] fix: add ellipses when width is constrained

---
 .../components/src/components/tag/_tag.scss   | 32 +++++++------------
 .../components/src/components/tag/tag.hbs     |  2 +-
 packages/react/src/components/Tag/Tag.js      | 14 ++++----
 3 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index 9a1657765d7f..a76b9fb58719 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -98,44 +98,36 @@
 
     cursor: pointer;
     padding-right: rem(2px);
+
+    &:focus,
+    &:hover {
+      outline: none;
+    }
   }
 
-  .#{$prefix}--tag--filter__close-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .#{$prefix}--tag--filter > svg {
+    flex-shrink: 0;
     width: rem(20px);
     height: rem(20px);
     margin: 0 0 0 rem(4px);
     padding: 0;
     border: 0;
+    fill: $inverse-01;
     background-color: transparent;
     border-radius: 50%;
 
     &:hover {
       background-color: $inverse-hover-ui;
-      cursor: pointer;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px $inverse-focus-ui;
     }
   }
 
-  .#{$prefix}--tag--filter svg {
-    fill: $inverse-01;
+  .#{$prefix}--tag--filter:focus > svg {
+    box-shadow: inset 0 0 0 2px $inverse-focus-ui;
+    border-radius: 50%;
   }
 
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
-    .#{$prefix}--tag--filter__close-button:hover {
+  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg:hover {
     background-color: transparent;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
-    .#{$prefix}--tag--filter__close-button:focus {
-    box-shadow: none;
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
diff --git a/packages/components/src/components/tag/tag.hbs b/packages/components/src/components/tag/tag.hbs
index be8cbf36445c..c4ce2cfe2e14 100644
--- a/packages/components/src/components/tag/tag.hbs
+++ b/packages/components/src/components/tag/tag.hbs
@@ -16,7 +16,7 @@
 <div role="list">
   {{#if filter}}
   <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter" role="listitem">
-    filter
+    <span class="{{@root.prefix}}--tag__label">filter</span>
     <button aria-label='Clear filter' class="{{@root.prefix}}--tag--filter__close-button">
       {{ carbon-icon 'Close16' }}
     </button>
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 4f5d85e444b0..a9cd957732c1 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -49,15 +49,13 @@ const Tag = ({
           ? `${title} ${children}`
           : `Clear filter ${children}`
       }
+      disabled={disabled}
+      onClick={!disabled ? onClick : undefined}
       {...other}>
-      {children !== null && children !== undefined ? children : TYPES[type]}
-      <button
-        aria-label={title || 'Clear filter'}
-        className={`${prefix}--tag--filter__close-button`}
-        disabled={disabled}
-        onClick={!disabled ? onClick : undefined}>
-        <Close16 />
-      </button>
+      <span className={`${prefix}--tag__label`}>
+        {children !== null && children !== undefined ? children : TYPES[type]}
+      </span>
+      <Close16 />
     </button>
   ) : (
     <button className={tagClasses} {...other}>

From 15da6943f8bd291bb174cf2f3fb25af50cdeb2c2 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Tue, 7 Jan 2020 18:39:29 -0600
Subject: [PATCH 5/8] docs: fix example markup

---
 packages/components/src/components/tag/tag.hbs | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/components/tag/tag.hbs b/packages/components/src/components/tag/tag.hbs
index c4ce2cfe2e14..7b413dc22b00 100644
--- a/packages/components/src/components/tag/tag.hbs
+++ b/packages/components/src/components/tag/tag.hbs
@@ -5,21 +5,19 @@
   LICENSE file in the root directory of this source tree.
 -->
 
-<div role="list">
+<div>
   {{#each tags}}
-  <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--{{type}}" role="listitem">
+  <button class="{{@root.prefix}}--tag {{@root.prefix}}--tag--{{type}}">
     <span class="{{@root.prefix}}--tag__label">{{label}}</span>
-  </span>
+  </button>
   {{/each}}
 </div>
 
-<div role="list">
+<div>
   {{#if filter}}
-  <span class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter" role="listitem">
+  <button class="{{@root.prefix}}--tag {{@root.prefix}}--tag--filter" title="Clear filter">
     <span class="{{@root.prefix}}--tag__label">filter</span>
-    <button aria-label='Clear filter' class="{{@root.prefix}}--tag--filter__close-button">
-      {{ carbon-icon 'Close16' }}
-    </button>
-  </span>
+    {{ carbon-icon 'Close16' }}
+  </button>
   {{/if}}
 </div>

From b1058419a6a549ae36f7eab19d45920e080f643a Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Tue, 7 Jan 2020 18:39:38 -0600
Subject: [PATCH 6/8] fix(tag): reintroduce padding due to recent markup change

---
 packages/components/src/components/tag/_tag.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index a76b9fb58719..6a9e13ce3cd2 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -110,7 +110,7 @@
     width: rem(20px);
     height: rem(20px);
     margin: 0 0 0 rem(4px);
-    padding: 0;
+    padding: rem(2px);
     border: 0;
     fill: $inverse-01;
     background-color: transparent;

From 4bd3639984663332895e3abfb6594e5c7a5452a2 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Tue, 7 Jan 2020 18:54:59 -0600
Subject: [PATCH 7/8] fix(Tag): remove unneeded click handler logic

---
 packages/react/src/components/Tag/Tag.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index a9cd957732c1..9b57e714bfb2 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -33,7 +33,6 @@ const Tag = ({
   filter,
   title,
   disabled,
-  onClick,
   ...other
 }) => {
   const tagClass = `${prefix}--tag--${type}`;
@@ -50,7 +49,6 @@ const Tag = ({
           : `Clear filter ${children}`
       }
       disabled={disabled}
-      onClick={!disabled ? onClick : undefined}
       {...other}>
       <span className={`${prefix}--tag__label`}>
         {children !== null && children !== undefined ? children : TYPES[type]}

From 371ee11320d1aea7b991640315c99e86c1d63151 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Wed, 8 Jan 2020 10:06:33 -0600
Subject: [PATCH 8/8] fix(tag): use disabled token

---
 packages/components/src/components/tag/_tag.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index 6a9e13ce3cd2..f777029d53c6 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -131,7 +131,7 @@
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
-    fill: $ibm-color__gray-30;
+    fill: $disabled-02;
   }
 
   // Skeleton state