From 08d09d3bb4fc1925b14b82db8a9de103c6a3d747 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Thu, 14 Nov 2024 11:25:02 -0800
Subject: [PATCH 1/5] feat(tag): new decorator prop

---
 .../__snapshots__/PublicAPI-test.js.snap      |  7 +-
 packages/react/src/components/Tag/Tag-test.js | 12 +++-
 .../react/src/components/Tag/Tag.stories.js   | 65 +++++++++++++++++--
 packages/react/src/components/Tag/Tag.tsx     | 59 +++++++++++++----
 packages/styles/scss/components/tag/_tag.scss | 11 +++-
 5 files changed, 133 insertions(+), 21 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index b02fb2f6af77..9c22f56f7a4c 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8430,6 +8430,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "decorator": Object {
+        "type": "node",
+      },
       "disabled": Object {
         "type": "bool",
       },
@@ -8461,9 +8464,7 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
+      "slug": [Function],
       "title": [Function],
       "type": Object {
         "args": Array [
diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 36ee644e9281..efca3383745f 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -90,12 +90,22 @@ describe('Tag', () => {
     expect(screen.getByTestId('test')).toBeInTheDocument();
   });
 
-  it('should respect slug prop', () => {
+  it('should respect decorator prop', () => {
+    render(<Tag type="red" decorator={<AILabel />} />);
+
+    expect(
+      screen.getByRole('button', { name: 'AI - Show information' })
+    ).toBeInTheDocument();
+  });
+
+  it('should respect deprecated slug prop', () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     render(<Tag type="red" slug={<AILabel />} />);
 
     expect(
       screen.getByRole('button', { name: 'AI - Show information' })
     ).toBeInTheDocument();
+    spy.mockRestore();
   });
 
   describe('Selectable Tag', () => {
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index ddef8f4f2902..d14e4eb9286b 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -13,6 +13,8 @@ import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
 import '../AILabel/ailabel-story.scss';
+import { Tooltip } from '../Tooltip';
+import { Information } from '@carbon/icons-react';
 import mdx from './Tag.mdx';
 
 export default {
@@ -217,13 +219,60 @@ const aiLabel = (
 
 export const withAILabel = () => (
   <div style={{ marginBottom: '4rem' }}>
-    <Tag slug={aiLabel} className="some-class" type="red" title="Clear Filter">
+    <Tag
+      decorator={aiLabel}
+      className="some-class"
+      type="red"
+      title="Clear Filter">
+      {'Tag'}
+    </Tag>
+
+    <Tag
+      filter
+      decorator={aiLabel}
+      className="some-class"
+      type="purple"
+      title="Clear Filter">
+      {'Tag'}
+    </Tag>
+
+    <Tag
+      renderIcon={Asleep}
+      decorator={aiLabel}
+      className="some-class"
+      type="blue"
+      title="Clear Filter">
+      {'Tag'}
+    </Tag>
+
+    <Tag
+      filter
+      renderIcon={Asleep}
+      decorator={aiLabel}
+      className="some-class"
+      type="green"
+      title="Clear Filter">
+      {'Tag'}
+    </Tag>
+    <Tag
+      decorator={
+        <Tooltip label={'hello'}>
+          <Information />
+        </Tooltip>
+      }
+      className="some-class"
+      type="red"
+      title="Clear Filter">
       {'Tag'}
     </Tag>
 
     <Tag
       filter
-      slug={aiLabel}
+      decorator={
+        <Tooltip label={'hello'}>
+          <Information />
+        </Tooltip>
+      }
       className="some-class"
       type="purple"
       title="Clear Filter">
@@ -232,7 +281,11 @@ export const withAILabel = () => (
 
     <Tag
       renderIcon={Asleep}
-      slug={aiLabel}
+      decorator={
+        <Tooltip label={'hello'}>
+          <Information />
+        </Tooltip>
+      }
       className="some-class"
       type="blue"
       title="Clear Filter">
@@ -242,7 +295,11 @@ export const withAILabel = () => (
     <Tag
       filter
       renderIcon={Asleep}
-      slug={aiLabel}
+      decorator={
+        <Tooltip label={'hello'}>
+          <Information />
+        </Tooltip>
+      }
       className="some-class"
       type="green"
       title="Clear Filter">
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 115fade0449b..09f5ad6fe3cd 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -56,6 +56,11 @@ export interface TagBaseProps {
    */
   className?: string;
 
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
+   */
+  decorator?: ReactNode;
+
   /**
    * Specify if the `Tag` is disabled
    */
@@ -89,6 +94,7 @@ export interface TagBaseProps {
   size?: keyof typeof SIZES;
 
   /**
+   * @deprecated please use `decorator` instead.
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
    */
   slug?: ReactNode;
@@ -113,6 +119,7 @@ const Tag = React.forwardRef(function Tag<T extends React.ElementType>(
   {
     children,
     className,
+    decorator,
     id,
     type,
     filter, // remove filter in next major release - V12
@@ -168,13 +175,22 @@ const Tag = React.forwardRef(function Tag<T extends React.ElementType>(
     }
   };
 
-  // Slug is always size `md` and `inline`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel' && !isInteractiveTag) {
-    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
-      size: 'sm',
-      kind: 'inline',
-    });
+  // AILabel is always size `sm` and `inline`
+  let normalizedDecorator = React.isValidElement(slug ?? decorator)
+    ? slug ?? decorator
+    : null;
+  if (
+    normalizedDecorator &&
+    normalizedDecorator['type']?.displayName === 'AILabel' &&
+    !isInteractiveTag
+  ) {
+    normalizedDecorator = React.cloneElement(
+      normalizedDecorator as React.ReactElement<any>,
+      {
+        size: 'sm',
+        kind: 'inline',
+      }
+    );
   }
 
   if (filter) {
@@ -194,7 +210,15 @@ const Tag = React.forwardRef(function Tag<T extends React.ElementType>(
           className={`${prefix}--tag__label`}>
           {children !== null && children !== undefined ? children : typeText}
         </Text>
-        {normalizedSlug}
+        {slug ? (
+          normalizedDecorator
+        ) : decorator ? (
+          <div className={`${prefix}--tag__decorator`}>
+            {normalizedDecorator}
+          </div>
+        ) : (
+          ''
+        )}
         <button
           type="button"
           className={`${prefix}--tag__close-icon`}
@@ -265,8 +289,13 @@ const Tag = React.forwardRef(function Tag<T extends React.ElementType>(
           {children !== null && children !== undefined ? children : typeText}
         </Text>
       )}
-
-      {normalizedSlug}
+      {slug ? (
+        normalizedDecorator
+      ) : decorator ? (
+        <div className={`${prefix}--tag__decorator`}>{normalizedDecorator}</div>
+      ) : (
+        ''
+      )}
     </ComponentTag>
   );
 });
@@ -288,6 +317,11 @@ Tag.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `Tag` component
+   */
+  decorator: PropTypes.node,
+
   /**
    * Specify if the `Tag` is disabled
    */
@@ -329,7 +363,10 @@ Tag.propTypes = {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `Tag` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(
+    PropTypes.node,
+    'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'
+  ),
 
   /**
    * Text to show on clear filters
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
index 4a6c8e6dbd60..a58551fdbb42 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -303,8 +303,7 @@
     color: currentColor;
     cursor: pointer;
     inline-size: layout.size('height');
-    transition:
-      background-color $duration-fast-01 motion(standard, productive),
+    transition: background-color $duration-fast-01 motion(standard, productive),
       box-shadow $duration-fast-01 motion(standard, productive);
 
     svg {
@@ -405,11 +404,19 @@
     border-color: currentColor;
   }
 
+  .#{$prefix}--tag--filter .#{$prefix}--tag__decorator > *,
   .#{$prefix}--tag--filter .#{$prefix}--ai-label,
   .#{$prefix}--tag--filter .#{$prefix}--slug {
     min-inline-size: convert.to-rem(32.14px);
   }
 
+  // Decorator styles
+  .#{$prefix}--tag
+    .#{$prefix}--tag__decorator:not(:has(.#{$prefix}--ai-label)) {
+    block-size: 1rem;
+    text-align: center;
+  }
+
   // Windows HCM fix
 
   .#{$prefix}--tag {

From 7ca5ddc14751d593f2827796f113b50721a3faf3 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Fri, 15 Nov 2024 10:41:39 -0800
Subject: [PATCH 2/5] feat(tag-dismissible): add decorator

---
 .../__snapshots__/PublicAPI-test.js.snap      |  7 +--
 .../src/components/Tag/DismissibleTag.tsx     | 48 +++++++++++++++----
 packages/react/src/components/Tag/Tag-test.js | 32 +++++++++++++
 .../react/src/components/Tag/Tag.stories.js   | 33 +++++--------
 4 files changed, 89 insertions(+), 31 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 9c22f56f7a4c..5ad3161f7696 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2862,6 +2862,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "decorator": Object {
+        "type": "node",
+      },
       "disabled": Object {
         "type": "bool",
       },
@@ -2894,9 +2897,7 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
+      "slug": [Function],
       "tagTitle": Object {
         "type": "string",
       },
diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
index eb68a9b6a41d..4d82dfed129b 100644
--- a/packages/react/src/components/Tag/DismissibleTag.tsx
+++ b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -11,6 +11,7 @@ import classNames from 'classnames';
 import { useId } from '../../internal/useId';
 import { usePrefix } from '../../internal/usePrefix';
 import { PolymorphicProps } from '../../types/common';
+import deprecate from '../../prop-types/deprecate';
 import Tag, { SIZES, TYPES } from './Tag';
 import { Close } from '@carbon/icons-react';
 import { Tooltip } from '../Tooltip';
@@ -23,6 +24,11 @@ export interface DismissibleTagBaseProps {
    */
   className?: string;
 
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+   */
+  decorator?: ReactNode;
+
   /**
    * Specify if the `DismissibleTag` is disabled
    */
@@ -51,6 +57,7 @@ export interface DismissibleTagBaseProps {
   size?: keyof typeof SIZES;
 
   /**
+   * @deprecated please use `decorator` instead.
    * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
    */
   slug?: ReactNode;
@@ -83,6 +90,7 @@ export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<
 
 const DismissibleTag = <T extends React.ElementType>({
   className,
+  decorator,
   disabled,
   id,
   renderIcon,
@@ -114,12 +122,20 @@ const DismissibleTag = <T extends React.ElementType>({
     }
   };
 
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
-      size: 'sm',
-      kind: 'inline',
-    });
+  let normalizedDecorator = React.isValidElement(slug ?? decorator)
+    ? slug ?? decorator
+    : null;
+  if (
+    normalizedDecorator &&
+    normalizedDecorator['type']?.displayName === 'AILabel'
+  ) {
+    normalizedDecorator = React.cloneElement(
+      normalizedDecorator as React.ReactElement<any>,
+      {
+        size: 'sm',
+        kind: 'inline',
+      }
+    );
   }
 
   const tooltipClasses = classNames(
@@ -149,7 +165,15 @@ const DismissibleTag = <T extends React.ElementType>({
           className={`${prefix}--tag__label`}>
           {text}
         </Text>
-        {normalizedSlug}
+        {slug ? (
+          normalizedDecorator
+        ) : decorator ? (
+          <div className={`${prefix}--tag__decorator`}>
+            {normalizedDecorator}
+          </div>
+        ) : (
+          ''
+        )}
         <Tooltip
           label={isEllipsisApplied ? dismissLabel : title}
           align="bottom"
@@ -175,6 +199,11 @@ DismissibleTag.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * **Experimental:** Provide a `decorator` component to be rendered inside the `DismissibleTag` component
+   */
+  decorator: PropTypes.node,
+
   /**
    * Specify if the `DismissibleTag` is disabled
    */
@@ -205,7 +234,10 @@ DismissibleTag.propTypes = {
   /**
    * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(
+    PropTypes.node,
+    'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'
+  ),
 
   /**
    * Provide text to be rendered inside of a the tag.
diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index efca3383745f..da37f62f5ea6 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -73,6 +73,38 @@ describe('Tag', () => {
       // requirement
       expect(accessibilityLabel).toEqual(expect.stringContaining('Close tag'));
     });
+
+    it('should respect decorator prop', () => {
+      render(
+        <DismissibleTag
+          type="red"
+          title="Close tag"
+          text="Tag content"
+          decorator={<AILabel />}
+        />
+      );
+
+      expect(
+        screen.getByRole('button', { name: 'AI - Show information' })
+      ).toBeInTheDocument();
+    });
+
+    it('should respect deprecated slug prop', () => {
+      const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      render(
+        <DismissibleTag
+          type="red"
+          title="Close tag"
+          text="Tag content"
+          slug={<AILabel />}
+        />
+      );
+
+      expect(
+        screen.getByRole('button', { name: 'AI - Show information' })
+      ).toBeInTheDocument();
+      spy.mockRestore();
+    });
   });
 
   it('should allow for a custom label', () => {
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index d14e4eb9286b..b95befd4c409 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import { default as Tag } from '../Tag';
 import TagSkeleton from '../Tag/Tag.Skeleton';
+import DismissibleTag from '../Tag/DismissibleTag';
 import { Asleep, View, FolderOpen, Folders } from '@carbon/icons-react';
 import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
@@ -227,14 +228,12 @@ export const withAILabel = () => (
       {'Tag'}
     </Tag>
 
-    <Tag
-      filter
+    <DismissibleTag
       decorator={aiLabel}
       className="some-class"
       type="purple"
-      title="Clear Filter">
-      {'Tag'}
-    </Tag>
+      title="Clear Filter"
+      text="Tag"></DismissibleTag>
 
     <Tag
       renderIcon={Asleep}
@@ -245,15 +244,13 @@ export const withAILabel = () => (
       {'Tag'}
     </Tag>
 
-    <Tag
-      filter
+    <DismissibleTag
       renderIcon={Asleep}
       decorator={aiLabel}
       className="some-class"
       type="green"
-      title="Clear Filter">
-      {'Tag'}
-    </Tag>
+      title="Clear Filter"
+      text="Tag"></DismissibleTag>
     <Tag
       decorator={
         <Tooltip label={'hello'}>
@@ -266,8 +263,7 @@ export const withAILabel = () => (
       {'Tag'}
     </Tag>
 
-    <Tag
-      filter
+    <DismissibleTag
       decorator={
         <Tooltip label={'hello'}>
           <Information />
@@ -275,9 +271,8 @@ export const withAILabel = () => (
       }
       className="some-class"
       type="purple"
-      title="Clear Filter">
-      {'Tag'}
-    </Tag>
+      title="Clear Filter"
+      text="Tag"></DismissibleTag>
 
     <Tag
       renderIcon={Asleep}
@@ -292,8 +287,7 @@ export const withAILabel = () => (
       {'Tag'}
     </Tag>
 
-    <Tag
-      filter
+    <DismissibleTag
       renderIcon={Asleep}
       decorator={
         <Tooltip label={'hello'}>
@@ -302,8 +296,7 @@ export const withAILabel = () => (
       }
       className="some-class"
       type="green"
-      title="Clear Filter">
-      {'Tag'}
-    </Tag>
+      title="Clear Filter"
+      text="Tag"></DismissibleTag>
   </div>
 );

From b0411744bf4f2a5cb28d999131379a2415da7f76 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Mon, 18 Nov 2024 08:30:36 -0800
Subject: [PATCH 3/5] fix(tag): format and remove filter updates only add to
 dissmissible

---
 packages/react/src/components/Tag/Tag.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 09f5ad6fe3cd..30c8e5aa59de 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -210,15 +210,7 @@ const Tag = React.forwardRef(function Tag<T extends React.ElementType>(
           className={`${prefix}--tag__label`}>
           {children !== null && children !== undefined ? children : typeText}
         </Text>
-        {slug ? (
-          normalizedDecorator
-        ) : decorator ? (
-          <div className={`${prefix}--tag__decorator`}>
-            {normalizedDecorator}
-          </div>
-        ) : (
-          ''
-        )}
+        {normalizedDecorator}
         <button
           type="button"
           className={`${prefix}--tag__close-icon`}

From 8b3ce04d77703086a8bb89c31657e4ba304a754b Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Mon, 18 Nov 2024 08:47:41 -0800
Subject: [PATCH 4/5] fix(tag): format

---
 packages/react/src/components/Tag/DismissibleTag.tsx | 2 +-
 packages/react/src/components/Tag/Tag.tsx            | 2 +-
 packages/styles/scss/components/tag/_tag.scss        | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
index 4d82dfed129b..8e4baf20f1b1 100644
--- a/packages/react/src/components/Tag/DismissibleTag.tsx
+++ b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -123,7 +123,7 @@ const DismissibleTag = <T extends React.ElementType>({
   };
 
   let normalizedDecorator = React.isValidElement(slug ?? decorator)
-    ? slug ?? decorator
+    ? (slug ?? decorator)
     : null;
   if (
     normalizedDecorator &&
diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
index 30c8e5aa59de..8a762ffd64db 100644
--- a/packages/react/src/components/Tag/Tag.tsx
+++ b/packages/react/src/components/Tag/Tag.tsx
@@ -177,7 +177,7 @@ const Tag = React.forwardRef(function Tag<T extends React.ElementType>(
 
   // AILabel is always size `sm` and `inline`
   let normalizedDecorator = React.isValidElement(slug ?? decorator)
-    ? slug ?? decorator
+    ? (slug ?? decorator)
     : null;
   if (
     normalizedDecorator &&
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
index a58551fdbb42..afd7de9eea85 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -303,7 +303,8 @@
     color: currentColor;
     cursor: pointer;
     inline-size: layout.size('height');
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       box-shadow $duration-fast-01 motion(standard, productive);
 
     svg {

From ac33360e54808f74dd521985dcfd44338865de1b Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Wed, 20 Nov 2024 09:05:20 -0800
Subject: [PATCH 5/5] chore(tag): remove extra stories

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

diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index b95befd4c409..9339fc7bc17e 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -14,8 +14,6 @@ import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
 import '../AILabel/ailabel-story.scss';
-import { Tooltip } from '../Tooltip';
-import { Information } from '@carbon/icons-react';
 import mdx from './Tag.mdx';
 
 export default {
@@ -251,52 +249,5 @@ export const withAILabel = () => (
       type="green"
       title="Clear Filter"
       text="Tag"></DismissibleTag>
-    <Tag
-      decorator={
-        <Tooltip label={'hello'}>
-          <Information />
-        </Tooltip>
-      }
-      className="some-class"
-      type="red"
-      title="Clear Filter">
-      {'Tag'}
-    </Tag>
-
-    <DismissibleTag
-      decorator={
-        <Tooltip label={'hello'}>
-          <Information />
-        </Tooltip>
-      }
-      className="some-class"
-      type="purple"
-      title="Clear Filter"
-      text="Tag"></DismissibleTag>
-
-    <Tag
-      renderIcon={Asleep}
-      decorator={
-        <Tooltip label={'hello'}>
-          <Information />
-        </Tooltip>
-      }
-      className="some-class"
-      type="blue"
-      title="Clear Filter">
-      {'Tag'}
-    </Tag>
-
-    <DismissibleTag
-      renderIcon={Asleep}
-      decorator={
-        <Tooltip label={'hello'}>
-          <Information />
-        </Tooltip>
-      }
-      className="some-class"
-      type="green"
-      title="Clear Filter"
-      text="Tag"></DismissibleTag>
   </div>
 );