From a6baba6357dcddf07c820f84e6a38d02a4d11f14 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Mon, 9 Nov 2020 14:37:04 -0800
Subject: [PATCH 01/16] feat(tag): introducing custom icon

---
 .../components/src/components/tag/_tag.scss   | 17 +++++++++
 .../react/src/components/Tag/Tag-story.js     | 24 +++++++++++++
 packages/react/src/components/Tag/Tag.js      | 35 +++++++++++++++++--
 3 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index 9d650de2ff75..f0db4e889d84 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -172,6 +172,23 @@
     }
   }
 
+  .#{$prefix}--tag__custom-icon {
+    flex-shrink: 0;
+    width: rem(16px);
+    height: rem(16px);
+    margin: 0 rem(8px) 0 rem(4px);
+    padding: 0;
+    color: currentColor;
+    background-color: transparent;
+    border: 0;
+    border-radius: 50%;
+    outline: none;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
   .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
     cursor: not-allowed;
   }
diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index a75d8add29fa..8e4197a01663 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -36,6 +36,14 @@ const props = {
       onClose: action('onClose'),
     };
   },
+  icon() {
+    return {
+      ...this.regular(),
+      onClick: action('onClick'),
+      onClose: action('onClose'),
+      customIcon: text('Custom Icon', 'Tag')
+    }
+  }
 };
 
 export default {
@@ -85,6 +93,22 @@ Filter.parameters = {
   },
 };
 
+export const CustomIcon = () => (
+  <Tag className="some-class" {...props.icon()} icon>
+    {text('Content (children)', 'This is a tag')}
+  </Tag>
+);
+
+Filter.parameters = {
+  info: {
+    text: `
+        Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.
+        The example below shows how the Tag component can be used. Each type has a default message describing the type,
+        but a custom message can also be applied.
+      `,
+  },
+};
+
 export const Skeleton = () => (
   <div>
     <TagSkeleton />
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 9d09c25bf5c4..c73afe141ea8 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -9,7 +9,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
-import { Close16 } from '@carbon/icons-react';
+import * as Icons from '@carbon/icons-react';
+import { Close16 }from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
@@ -31,9 +32,11 @@ const TYPES = {
 const Tag = ({
   children,
   className,
+  icon,
   id,
   type,
   filter,
+  customIcon,
   title,
   disabled,
   onClose,
@@ -50,7 +53,10 @@ const Tag = ({
       event.stopPropagation();
       onClose(event);
     }
-  };
+  }
+  
+  var CustomIcon = Icons[customIcon + "16"] || Icons['Tag16'];
+
   return filter ? (
     <div
       className={tagClasses}
@@ -76,6 +82,26 @@ const Tag = ({
         <Close16 />
       </button>
     </div>
+  ) : icon ? (
+    <div
+      className={tagClasses}
+      aria-label={
+        title !== undefined
+          ? `${title} ${children}`
+          : `Clear filter ${children}`
+      }
+      id={tagId}
+      {...other}>
+        <button
+          className={`${prefix}--tag__custom-icon`}>
+          <CustomIcon />
+        </button>
+      <span
+        className={`${prefix}--tag__label`}
+        title={typeof children === 'string' ? children : null}>
+        {children !== null && children !== undefined ? children : TYPES[type]}
+      </span>
+    </div>
   ) : (
     <span
       className={tagClasses}
@@ -97,6 +123,11 @@ Tag.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Provide a cusotm Icon name to be applied before the text content
+   */
+  customIcon: PropTypes.string,
+
   /**
    * Specify if the <Tag> is disabled
    */

From 23bc7b5d3de0a1b8af6253a214d6bd1f588c805f Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Mon, 9 Nov 2020 15:08:22 -0800
Subject: [PATCH 02/16] feat(tag): add test

---
 packages/react/src/components/Tag/Tag-test.js | 5 +++++
 packages/react/src/components/Tag/Tag.js      | 3 +--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 7bcb1b3a1703..570a9908aec8 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -64,6 +64,11 @@ describe('Tag', () => {
     expect(tag.text()).toEqual('New Version!');
   });
 
+  it('should allow for a custom icon', () => {
+    const tag = shallow(<Tag type="red" customIcon='Add16'>This is a tag</Tag>)
+    expect(tag.childAt(0).hasClass('bx--tag__custom-icon'));
+  })
+
   it('should support extra class names', () => {
     const tag = shallow(<Tag type="red" className="extra-class" />);
     expect(tag.hasClass('extra-class')).toEqual(true);
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index c73afe141ea8..7da82f280f54 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -32,7 +32,6 @@ const TYPES = {
 const Tag = ({
   children,
   className,
-  icon,
   id,
   type,
   filter,
@@ -82,7 +81,7 @@ const Tag = ({
         <Close16 />
       </button>
     </div>
-  ) : icon ? (
+  ) : customIcon ? (
     <div
       className={tagClasses}
       aria-label={

From 8ae8b494090d89b6183f542869552b116a27bbdb Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Tue, 10 Nov 2020 11:38:03 -0800
Subject: [PATCH 03/16] feat(tag): fixed variable name

---
 packages/react/src/components/Tag/Tag-story.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index 8e4197a01663..79bb93a2d18e 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -99,7 +99,7 @@ export const CustomIcon = () => (
   </Tag>
 );
 
-Filter.parameters = {
+CustomIcon.parameters = {
   info: {
     text: `
         Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.

From 77776bae4daf9c4bcb50c52c3062282b5c4e7a7d Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Wed, 11 Nov 2020 09:53:04 -0800
Subject: [PATCH 04/16] feat(tag): improving design based on feedback

---
 .../components/src/components/tag/_tag.scss   |  3 +-
 .../src/components/tag/_tokens.scss           | 80 +++++++++----------
 .../react/src/components/Tag/Tag-story.js     |  5 +-
 packages/react/src/components/Tag/Tag.js      | 26 +++---
 4 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index f0db4e889d84..b55907a95c88 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -176,12 +176,11 @@
     flex-shrink: 0;
     width: rem(16px);
     height: rem(16px);
-    margin: 0 rem(8px) 0 rem(4px);
+    margin-right: rem(4px);
     padding: 0;
     color: currentColor;
     background-color: transparent;
     border: 0;
-    border-radius: 50%;
     outline: none;
 
     svg {
diff --git a/packages/components/src/components/tag/_tokens.scss b/packages/components/src/components/tag/_tokens.scss
index c24e9fd62819..2400ae74033f 100644
--- a/packages/components/src/components/tag/_tokens.scss
+++ b/packages/components/src/components/tag/_tokens.scss
@@ -38,15 +38,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-red': (
-    fallback: $carbon__red-70,
+    fallback: $carbon__red-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__red-70,
+        value: $carbon__red-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__red-70,
+        value: $carbon__red-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -58,7 +58,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__red-70,
+        value: $carbon__red-80,
       ),
     ),
   ),
@@ -115,15 +115,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-magenta': (
-    fallback: $carbon__magenta-70,
+    fallback: $carbon__magenta-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__magenta-70,
+        value: $carbon__magenta-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__magenta-70,
+        value: $carbon__magenta-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -135,7 +135,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__magenta-70,
+        value: $carbon__magenta-80,
       ),
     ),
   ),
@@ -192,15 +192,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-purple': (
-    fallback: $carbon__purple-70,
+    fallback: $carbon__purple-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__purple-70,
+        value: $carbon__purple-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__purple-70,
+        value: $carbon__purple-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -212,7 +212,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__purple-70,
+        value: $carbon__purple-80,
       ),
     ),
   ),
@@ -269,15 +269,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-blue': (
-    fallback: $carbon__blue-70,
+    fallback: $carbon__blue-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__blue-70,
+        value: $carbon__blue-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__blue-70,
+        value: $carbon__blue-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -289,7 +289,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__blue-70,
+        value: $carbon__blue-80,
       ),
     ),
   ),
@@ -346,15 +346,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-cyan': (
-    fallback: $carbon__cyan-70,
+    fallback: $carbon__cyan-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__cyan-70,
+        value: $carbon__cyan-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__cyan-70,
+        value: $carbon__cyan-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -366,7 +366,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__cyan-70,
+        value: $carbon__cyan-80,
       ),
     ),
   ),
@@ -423,15 +423,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-teal': (
-    fallback: $carbon__teal-70,
+    fallback: $carbon__teal-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__teal-70,
+        value: $carbon__teal-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__teal-70,
+        value: $carbon__teal-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -443,7 +443,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__teal-70,
+        value: $carbon__teal-80,
       ),
     ),
   ),
@@ -500,15 +500,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-green': (
-    fallback: $carbon__green-70,
+    fallback: $carbon__green-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__green-70,
+        value: $carbon__green-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__green-70,
+        value: $carbon__green-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -520,7 +520,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__green-70,
+        value: $carbon__green-80,
       ),
     ),
   ),
@@ -577,15 +577,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-gray': (
-    fallback: $carbon__gray-70,
+    fallback: $carbon__gray-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__gray-70,
+        value: $carbon__gray-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__gray-70,
+        value: $carbon__gray-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -597,7 +597,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__gray-70,
+        value: $carbon__gray-80,
       ),
     ),
   ),
@@ -654,15 +654,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-cool-gray': (
-    fallback: $carbon__cool-gray-70,
+    fallback: $carbon__cool-gray-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__cool-gray-70,
+        value: $carbon__cool-gray-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__cool-gray-70,
+        value: $carbon__cool-gray-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -674,7 +674,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__cool-gray-70,
+        value: $carbon__cool-gray-80,
       ),
     ),
   ),
@@ -731,15 +731,15 @@ $tag-colors: (
     ),
   ),
   'tag-color-warm-gray': (
-    fallback: $carbon__warm-gray-70,
+    fallback: $carbon__warm-gray-80,
     values: (
       (
         theme: $carbon--theme--white,
-        value: $carbon__warm-gray-70,
+        value: $carbon__warm-gray-80,
       ),
       (
         theme: $carbon--theme--g10,
-        value: $carbon__warm-gray-70,
+        value: $carbon__warm-gray-80,
       ),
       (
         theme: $carbon--theme--g90,
@@ -751,7 +751,7 @@ $tag-colors: (
       ),
       (
         theme: $carbon--theme--v9,
-        value: $carbon__warm-gray-70,
+        value: $carbon__warm-gray-80,
       ),
     ),
   ),
diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index 79bb93a2d18e..d9ca129310e8 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
+import { Tag16, Compass16 } from '@carbon/icons-react';
 import Tag, { types as typesList } from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
 import { action } from '@storybook/addon-actions/dist/preview';
@@ -41,7 +42,7 @@ const props = {
       ...this.regular(),
       onClick: action('onClick'),
       onClose: action('onClose'),
-      customIcon: text('Custom Icon', 'Tag')
+      renderIcon: Tag16
     }
   }
 };
@@ -94,7 +95,7 @@ Filter.parameters = {
 };
 
 export const CustomIcon = () => (
-  <Tag className="some-class" {...props.icon()} icon>
+  <Tag className="some-class" {...props.icon()} hasCustomIcon>
     {text('Content (children)', 'This is a tag')}
   </Tag>
 );
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 7da82f280f54..69453f426f5b 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
-import * as Icons from '@carbon/icons-react';
 import { Close16 }from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
@@ -35,7 +34,8 @@ const Tag = ({
   id,
   type,
   filter,
-  customIcon,
+  hasCustomIcon,
+  renderIcon: CustomIconElement,
   title,
   disabled,
   onClose,
@@ -54,8 +54,6 @@ const Tag = ({
     }
   }
   
-  var CustomIcon = Icons[customIcon + "16"] || Icons['Tag16'];
-
   return filter ? (
     <div
       className={tagClasses}
@@ -81,7 +79,7 @@ const Tag = ({
         <Close16 />
       </button>
     </div>
-  ) : customIcon ? (
+  ) : hasCustomIcon ? (
     <div
       className={tagClasses}
       aria-label={
@@ -93,7 +91,7 @@ const Tag = ({
       {...other}>
         <button
           className={`${prefix}--tag__custom-icon`}>
-          <CustomIcon />
+          <CustomIconElement />
         </button>
       <span
         className={`${prefix}--tag__label`}
@@ -122,11 +120,6 @@ Tag.propTypes = {
    */
   className: PropTypes.string,
 
-  /**
-   * Provide a cusotm Icon name to be applied before the text content
-   */
-  customIcon: PropTypes.string,
-
   /**
    * Specify if the <Tag> is disabled
    */
@@ -142,11 +135,22 @@ Tag.propTypes = {
    */
   id: PropTypes.string,
 
+  /**
+   * Specify if custom icon will be rendered
+   */
+  hasIconOnly: PropTypes.bool,
+
   /**
    * Click handler for filter tag close button.
    */
   onClose: PropTypes.func,
 
+    /**
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /**
    * Text to show on clear filters
    */

From 30b368a093e956b3b939a70bddb4a248a912aa74 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Wed, 11 Nov 2020 10:01:26 -0800
Subject: [PATCH 05/16] feat(tag): removed unecessary icon import

---
 packages/react/src/components/Tag/Tag-story.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index d9ca129310e8..ab2a4abff59a 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
-import { Tag16, Compass16 } from '@carbon/icons-react';
+import { Tag16 } from '@carbon/icons-react';
 import Tag, { types as typesList } from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
 import { action } from '@storybook/addon-actions/dist/preview';

From a26540591fe3caa47ec7a46dbd2ee66fcc423cac Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Wed, 11 Nov 2020 12:15:16 -0800
Subject: [PATCH 06/16] feat(tag): added custom icon knob to story

---
 packages/react/src/components/Tag/Tag-story.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index ab2a4abff59a..a367c7526345 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -7,12 +7,24 @@
 
 import React from 'react';
 import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
-import { Tag16 } from '@carbon/icons-react';
+import { Carbon16, Compass16, Tag16 } from '@carbon/icons-react';
 import Tag, { types as typesList } from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
 import { action } from '@storybook/addon-actions/dist/preview';
 import mdx from './Tag.mdx';
 
+const icons = {
+  'Carbon (Carbon16 from `@carbon/icons-react`)': 'Carbon16',
+  'Compass (Compass16 from `@carbon/icons-react`)' : 'Compass16',
+  'Tag (Tag16 from `@carbon/icons-react`)' : 'Tag16'
+}
+
+const iconMap = {
+  Carbon16,
+  Compass16,
+  Tag16,
+}
+
 const props = {
   regular: () => ({
     type: select(
@@ -38,11 +50,12 @@ const props = {
     };
   },
   icon() {
+    let iconToUse = iconMap[select('Icon (icon)', icons, 'Tag16')];
     return {
       ...this.regular(),
       onClick: action('onClick'),
       onClose: action('onClose'),
-      renderIcon: Tag16
+      renderIcon: iconToUse,
     }
   }
 };

From c1e6df627a74c81af26a1296ceeeb662a5f0bb33 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Wed, 11 Nov 2020 12:16:09 -0800
Subject: [PATCH 07/16] feat(tag): fixed spacing on imports

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

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 69453f426f5b..2f451e2ca5f8 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
-import { Close16 }from '@carbon/icons-react';
+import { Close16 } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;

From 7149c0b699b9fdafbe17a211b90b25c82942eae5 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Wed, 11 Nov 2020 12:38:45 -0800
Subject: [PATCH 08/16] feat(tag): removed redundant boolean

---
 packages/react/src/components/Tag/Tag-story.js | 2 +-
 packages/react/src/components/Tag/Tag.js       | 8 +-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index a367c7526345..23944049e01e 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -108,7 +108,7 @@ Filter.parameters = {
 };
 
 export const CustomIcon = () => (
-  <Tag className="some-class" {...props.icon()} hasCustomIcon>
+  <Tag className="some-class" {...props.icon()}>
     {text('Content (children)', 'This is a tag')}
   </Tag>
 );
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 2f451e2ca5f8..4720a7eaf252 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -34,7 +34,6 @@ const Tag = ({
   id,
   type,
   filter,
-  hasCustomIcon,
   renderIcon: CustomIconElement,
   title,
   disabled,
@@ -79,7 +78,7 @@ const Tag = ({
         <Close16 />
       </button>
     </div>
-  ) : hasCustomIcon ? (
+  ) : CustomIconElement ? (
     <div
       className={tagClasses}
       aria-label={
@@ -135,11 +134,6 @@ Tag.propTypes = {
    */
   id: PropTypes.string,
 
-  /**
-   * Specify if custom icon will be rendered
-   */
-  hasIconOnly: PropTypes.bool,
-
   /**
    * Click handler for filter tag close button.
    */

From 73f1f5c0dc74daed08361f6aa2ce0bf698766c04 Mon Sep 17 00:00:00 2001
From: Ignacio Becerra <i1becerr@ucsd.edu>
Date: Wed, 11 Nov 2020 12:58:21 -0800
Subject: [PATCH 09/16] Update packages/react/src/components/Tag/Tag-test.js

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 packages/react/src/components/Tag/Tag-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 570a9908aec8..35b965e14703 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -65,7 +65,7 @@ describe('Tag', () => {
   });
 
   it('should allow for a custom icon', () => {
-    const tag = shallow(<Tag type="red" customIcon='Add16'>This is a tag</Tag>)
+    const tag = shallow(<Tag type="red" renderIcon={Add16}>This is a tag</Tag>)
     expect(tag.childAt(0).hasClass('bx--tag__custom-icon'));
   })
 

From cc59c09499988272c7280c17e63584da5aae0022 Mon Sep 17 00:00:00 2001
From: Ignacio Becerra <i1becerr@ucsd.edu>
Date: Wed, 11 Nov 2020 12:58:33 -0800
Subject: [PATCH 10/16] Update packages/react/src/components/Tag/Tag.js

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 packages/react/src/components/Tag/Tag.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 4720a7eaf252..7eb64c0584cf 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -140,7 +140,7 @@ Tag.propTypes = {
   onClose: PropTypes.func,
 
     /**
-   * Optional prop to allow overriding the icon rendering.
+   * Optional prop to render a custom icon.
    * Can be a React component class
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

From f1db35c51d3fae0f0741aeda2495b7118ed9b317 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 11 Nov 2020 13:46:04 -0800
Subject: [PATCH 11/16] chore(snapshot): update snapshots, run prettier

---
 .../__tests__/__snapshots__/PublicAPI-test.js.snap  | 13 +++++++++++++
 packages/react/src/components/Tag/Tag-story.js      | 12 ++++++------
 packages/react/src/components/Tag/Tag-test.js       |  9 +++++++--
 packages/react/src/components/Tag/Tag.js            | 13 ++++++-------
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index f21b1c42ec76..594e766a0665 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5125,6 +5125,19 @@ Map {
       "onClose": Object {
         "type": "func",
       },
+      "renderIcon": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "func",
+            },
+            Object {
+              "type": "object",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "title": Object {
         "type": "string",
       },
diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index 23944049e01e..4c005315041c 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -15,15 +15,15 @@ import mdx from './Tag.mdx';
 
 const icons = {
   'Carbon (Carbon16 from `@carbon/icons-react`)': 'Carbon16',
-  'Compass (Compass16 from `@carbon/icons-react`)' : 'Compass16',
-  'Tag (Tag16 from `@carbon/icons-react`)' : 'Tag16'
-}
+  'Compass (Compass16 from `@carbon/icons-react`)': 'Compass16',
+  'Tag (Tag16 from `@carbon/icons-react`)': 'Tag16',
+};
 
 const iconMap = {
   Carbon16,
   Compass16,
   Tag16,
-}
+};
 
 const props = {
   regular: () => ({
@@ -56,8 +56,8 @@ const props = {
       onClick: action('onClick'),
       onClose: action('onClose'),
       renderIcon: iconToUse,
-    }
-  }
+    };
+  },
 };
 
 export default {
diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 35b965e14703..0c7f553a1abc 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import Tag from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
+import { Add16 } from '@carbon/icons-react';
 import { shallow } from 'enzyme';
 import { settings } from 'carbon-components';
 import { render, cleanup } from '@carbon/test-utils/react';
@@ -65,9 +66,13 @@ describe('Tag', () => {
   });
 
   it('should allow for a custom icon', () => {
-    const tag = shallow(<Tag type="red" renderIcon={Add16}>This is a tag</Tag>)
+    const tag = shallow(
+      <Tag type="red" renderIcon={Add16}>
+        This is a tag
+      </Tag>
+    );
     expect(tag.childAt(0).hasClass('bx--tag__custom-icon'));
-  })
+  });
 
   it('should support extra class names', () => {
     const tag = shallow(<Tag type="red" className="extra-class" />);
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 7eb64c0584cf..93d2b747654f 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -51,8 +51,8 @@ const Tag = ({
       event.stopPropagation();
       onClose(event);
     }
-  }
-  
+  };
+
   return filter ? (
     <div
       className={tagClasses}
@@ -88,10 +88,9 @@ const Tag = ({
       }
       id={tagId}
       {...other}>
-        <button
-          className={`${prefix}--tag__custom-icon`}>
-          <CustomIconElement />
-        </button>
+      <button type="button" className={`${prefix}--tag__custom-icon`}>
+        <CustomIconElement />
+      </button>
       <span
         className={`${prefix}--tag__label`}
         title={typeof children === 'string' ? children : null}>
@@ -139,7 +138,7 @@ Tag.propTypes = {
    */
   onClose: PropTypes.func,
 
-    /**
+  /**
    * Optional prop to render a custom icon.
    * Can be a React component class
    */

From 9dddc6dc4e818b7a089edd10f04f08c0b582fd41 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Thu, 12 Nov 2020 08:53:41 -0800
Subject: [PATCH 12/16] feat(tag): refactored nested ternary

---
 .../components/src/components/tag/_tag.scss   |   2 +-
 .../react/src/components/Tag/Tag-story.js     |   3 +-
 packages/react/src/components/Tag/Tag.js      | 100 ++++++++++--------
 3 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
index b55907a95c88..964c5e192e0a 100644
--- a/packages/components/src/components/tag/_tag.scss
+++ b/packages/components/src/components/tag/_tag.scss
@@ -176,7 +176,7 @@
     flex-shrink: 0;
     width: rem(16px);
     height: rem(16px);
-    margin-right: rem(4px);
+    margin-right: $spacing-02;
     padding: 0;
     color: currentColor;
     background-color: transparent;
diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index 23944049e01e..70380b3b6166 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -50,12 +50,11 @@ const props = {
     };
   },
   icon() {
-    let iconToUse = iconMap[select('Icon (icon)', icons, 'Tag16')];
     return {
       ...this.regular(),
       onClick: action('onClick'),
       onClose: action('onClose'),
-      renderIcon: iconToUse,
+      renderIcon: iconMap[select('Icon (icon)', icons, 'Tag16')]
     }
   }
 };
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 4720a7eaf252..9df785b28b36 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -52,60 +52,66 @@ const Tag = ({
       onClose(event);
     }
   }
-  
-  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>
-  ) : CustomIconElement ? (
-    <div
-      className={tagClasses}
-      aria-label={
-        title !== undefined
-          ? `${title} ${children}`
-          : `Clear filter ${children}`
-      }
-      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>
+    );
+  } else if(CustomIconElement) {
+    return (
+      <div
+        className={tagClasses}
+        aria-label={
+          title !== undefined
+            ? `${title} ${children}`
+            : `Clear filter ${children}`
+        }
+        id={tagId}
+        {...other}>
         <button
           className={`${prefix}--tag__custom-icon`}>
           <CustomIconElement />
         </button>
+        <span
+          className={`${prefix}--tag__label`}
+          title={typeof children === 'string' ? children : null}>
+          {children !== null && children !== undefined ? children : TYPES[type]}
+        </span>
+      </div>
+    );
+  } else {
+    return (
       <span
-        className={`${prefix}--tag__label`}
-        title={typeof children === 'string' ? children : null}>
+        className={tagClasses}
+        title={typeof children === 'string' ? children : null}
+        {...other}>
         {children !== null && children !== undefined ? children : TYPES[type]}
       </span>
-    </div>
-  ) : (
-    <span
-      className={tagClasses}
-      title={typeof children === 'string' ? children : null}
-      {...other}>
-      {children !== null && children !== undefined ? children : TYPES[type]}
-    </span>
-  );
+    );
+  }
 };
 
 Tag.propTypes = {

From 8b5dc4ff7ef395eb83fd45db2ba3df1d650ea4a9 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Thu, 12 Nov 2020 09:57:23 -0800
Subject: [PATCH 13/16] feat(tag): reformatted conditionals

---
 .../react/src/components/Tag/Tag-story.js     |  6 ++--
 packages/react/src/components/Tag/Tag.js      | 29 ++++++++++---------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index 851feff7da65..40109798d7a7 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -54,9 +54,9 @@ const props = {
       ...this.regular(),
       onClick: action('onClick'),
       onClose: action('onClose'),
-      renderIcon: iconMap[select('Icon (icon)', icons, 'Tag16')]
-    }
-  }
+      renderIcon: iconMap[select('Icon (icon)', icons, 'Tag16')],
+    };
+  },
 };
 
 export default {
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index c416618b74ac..ced6c1dff57f 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -51,9 +51,9 @@ const Tag = ({
       event.stopPropagation();
       onClose(event);
     }
-  }
+  };
 
-  if(filter) {
+  if (filter) {
     return (
       <div
         className={tagClasses}
@@ -80,7 +80,9 @@ const Tag = ({
         </button>
       </div>
     );
-  } else if(CustomIconElement) {
+  }
+
+  if (CustomIconElement) {
     return (
       <div
         className={tagClasses}
@@ -91,8 +93,7 @@ const Tag = ({
         }
         id={tagId}
         {...other}>
-        <button
-          className={`${prefix}--tag__custom-icon`}>
+        <button className={`${prefix}--tag__custom-icon`}>
           <CustomIconElement />
         </button>
         <span
@@ -102,16 +103,16 @@ const Tag = ({
         </span>
       </div>
     );
-  } else {
-    return (
-      <span
-        className={tagClasses}
-        title={typeof children === 'string' ? children : null}
-        {...other}>
-        {children !== null && children !== undefined ? children : TYPES[type]}
-      </span>
-    );
   }
+
+  return (
+    <span
+      className={tagClasses}
+      title={typeof children === 'string' ? children : null}
+      {...other}>
+      {children !== null && children !== undefined ? children : TYPES[type]}
+    </span>
+  );
 };
 
 Tag.propTypes = {

From 7ea5438f735c7749549de2b885e21fce08c8207d Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Fri, 13 Nov 2020 12:01:16 -0800
Subject: [PATCH 14/16] feat(tag): refactored icon rendering code

---
 packages/components/docs/sass.md              | 18 +++++++
 .../react/src/components/Tag/Tag-story.js     |  2 -
 packages/react/src/components/Tag/Tag.js      | 47 ++++++-------------
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 738b2ff4ba46..aeb4218e1bd8 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -3729,6 +3729,7 @@ $spacing-02: $carbon--spacing-02;
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [modal [mixin]](#modal-mixin)
+  - [tags [mixin]](#tags-mixin)
 
 ### ✅spacing-03 [variable]
 
@@ -25003,6 +25004,22 @@ Tag styles
     }
   }
 
+  .#{$prefix}--tag__custom-icon {
+    flex-shrink: 0;
+    width: rem(16px);
+    height: rem(16px);
+    margin-right: $spacing-02;
+    padding: 0;
+    color: currentColor;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
   .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
     cursor: not-allowed;
   }
@@ -25050,6 +25067,7 @@ Tag styles
   - [inverse-hover-ui [variable]](#inverse-hover-ui-variable)
   - [disabled-01 [variable]](#disabled-01-variable)
   - [disabled-02 [variable]](#disabled-02-variable)
+  - [spacing-02 [variable]](#spacing-02-variable)
   - [focus [variable]](#focus-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [ui-03 [variable]](#ui-03-variable)
diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index 40109798d7a7..3bcbbb7e15e8 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -52,8 +52,6 @@ const props = {
   icon() {
     return {
       ...this.regular(),
-      onClick: action('onClick'),
-      onClose: action('onClose'),
       renderIcon: iconMap[select('Icon (icon)', icons, 'Tag16')],
     };
   },
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index ced6c1dff57f..3e05a8d17e4d 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -53,8 +53,7 @@ const Tag = ({
     }
   };
 
-  if (filter) {
-    return (
+  return filter ? (
       <div
         className={tagClasses}
         aria-label={
@@ -79,39 +78,23 @@ const Tag = ({
           <Close16 />
         </button>
       </div>
-    );
-  }
-
-  if (CustomIconElement) {
-    return (
+    ): (
       <div
-        className={tagClasses}
-        aria-label={
-          title !== undefined
-            ? `${title} ${children}`
-            : `Clear filter ${children}`
-        }
-        id={tagId}
-        {...other}>
-        <button className={`${prefix}--tag__custom-icon`}>
-          <CustomIconElement />
-        </button>
-        <span
-          className={`${prefix}--tag__label`}
-          title={typeof children === 'string' ? children : null}>
-          {children !== null && children !== undefined ? children : TYPES[type]}
-        </span>
-      </div>
-    );
-  }
-
-  return (
-    <span
       className={tagClasses}
-      title={typeof children === 'string' ? children : null}
+      id={tagId}
       {...other}>
-      {children !== null && children !== undefined ? children : TYPES[type]}
-    </span>
+      { CustomIconElement ? 
+      <div className={`${prefix}--tag__custom-icon`}>
+        <CustomIconElement />
+      </div>
+      : ''
+      }
+      <span
+        title={typeof children === 'string' ? children : null}
+        {...other}>
+        {children !== null && children !== undefined ? children : TYPES[type]}
+      </span>
+    </div>
   );
 };
 

From 69a105f956041d7c771227fae29d12febdfb97a2 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Fri, 13 Nov 2020 12:02:29 -0800
Subject: [PATCH 15/16] feat(tag): ran formatter

---
 packages/react/src/components/Tag/Tag.js | 64 +++++++++++-------------
 1 file changed, 30 insertions(+), 34 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 3e05a8d17e4d..a489e241fed5 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -54,44 +54,40 @@ 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
+    <div
       className={tagClasses}
+      aria-label={
+        title !== undefined
+          ? `${title} ${children}`
+          : `Clear filter ${children}`
+      }
       id={tagId}
       {...other}>
-      { CustomIconElement ? 
-      <div className={`${prefix}--tag__custom-icon`}>
-        <CustomIconElement />
-      </div>
-      : ''
-      }
       <span
-        title={typeof children === 'string' ? children : null}
-        {...other}>
+        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}>
+      {CustomIconElement ? (
+        <div className={`${prefix}--tag__custom-icon`}>
+          <CustomIconElement />
+        </div>
+      ) : (
+        ''
+      )}
+      <span title={typeof children === 'string' ? children : null} {...other}>
         {children !== null && children !== undefined ? children : TYPES[type]}
       </span>
     </div>

From 3cb83990dddef7faef973578d02dfd2a889dab1b Mon Sep 17 00:00:00 2001
From: Ignacio Becerra <i1becerr@ucsd.edu>
Date: Mon, 7 Dec 2020 14:44:52 -0800
Subject: [PATCH 16/16] feat(tag): removed inner span's ...other options

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

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index a489e241fed5..8f6c6af069d7 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -87,7 +87,7 @@ const Tag = ({
       ) : (
         ''
       )}
-      <span title={typeof children === 'string' ? children : null} {...other}>
+      <span title={typeof children === 'string' ? children : null}>
         {children !== null && children !== undefined ? children : TYPES[type]}
       </span>
     </div>