From 2f100f41169023074e4b7b91f69caa9d0246f5ec Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Wed, 9 Oct 2024 17:40:09 -0300
Subject: [PATCH 1/7] fix: moveing interactive tags to stable and remvoed slug
 from it

---
 .../src/components/Tag/DismissibleTag.tsx     | 20 -----
 .../src/components/Tag/InteractiveTag.mdx     | 85 -------------------
 .../components/Tag/InteractiveTag.stories.js  |  4 +-
 .../src/components/Tag/OperationalTag.tsx     | 21 -----
 .../src/components/Tag/SelectableTag.tsx      | 23 -----
 packages/react/src/components/Tag/Tag.mdx     | 71 ++++++++++++++--
 .../react/src/components/Tag/Tag.stories.js   | 62 +++++---------
 7 files changed, 86 insertions(+), 200 deletions(-)
 delete mode 100644 packages/react/src/components/Tag/InteractiveTag.mdx

diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
index 7221b3ef3a13..c9858ca65779 100644
--- a/packages/react/src/components/Tag/DismissibleTag.tsx
+++ b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -50,11 +50,6 @@ export interface DismissibleTagBaseProps {
    */
   size?: keyof typeof SIZES;
 
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
-   */
-  slug?: ReactNode;
-
   /**
    * Provide text to be rendered inside of a the tag.
    */
@@ -88,7 +83,6 @@ const DismissibleTag = <T extends React.ElementType>({
   renderIcon,
   title = 'Dismiss',
   onClose,
-  slug,
   size,
   text,
   tagTitle,
@@ -114,14 +108,6 @@ 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',
-    });
-  }
-
   const tooltipClasses = classNames(
     `${prefix}--icon-tooltip`,
     `${prefix}--tag-label-tooltip`
@@ -164,7 +150,6 @@ const DismissibleTag = <T extends React.ElementType>({
             <Close />
           </button>
         </Tooltip>
-        {normalizedSlug}
       </div>
     </Tag>
   );
@@ -202,11 +187,6 @@ DismissibleTag.propTypes = {
    */
   size: PropTypes.oneOf(Object.keys(SIZES)),
 
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
-   */
-  slug: PropTypes.node,
-
   /**
    * Provide text to be rendered inside of a the tag.
    */
diff --git a/packages/react/src/components/Tag/InteractiveTag.mdx b/packages/react/src/components/Tag/InteractiveTag.mdx
deleted file mode 100644
index 9e75d691b13b..000000000000
--- a/packages/react/src/components/Tag/InteractiveTag.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Canvas, Story, Meta } from '@storybook/blocks';
-import * as InteractiveTagStories from './InteractiveTag.stories';
-
-<Meta isTemplate />
-
-# Interactive Tag
-
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tag)
-&nbsp;|&nbsp;
-[Usage guidelines](https://www.carbondesignsystem.com/components/tag/usage)
-&nbsp;|&nbsp;
-[Accessibility](https://www.carbondesignsystem.com/components/tag/accessibility)
-
-## Overview
-
-Tags can be used to categorize items. Use short labels for easy scanning. Use
-two words only if necessary to describe the status and differentiate it from
-other tags.
-
-## Dismissible
-
-Dismissible tags are used to remove tags that can be filtered out by the user.
-
-When to use:
-
-- Use DismissibleTag when you want to allow users to easily clear or dismiss
-  specific filters applied to items.
-
-  <Canvas of={InteractiveTagStories.Dismissible} />
-
-```jsx
-<DismissibleTag
-  type="red"
-  className="some-class"
-  title="Clear Filter"
-  renderIcon={AsSleep}>
-  {'Tag content'}
-</DismissibleTag>
-```
-
-## Selectable
-
-Selectable tags are used to select or unselect single or multiple items.
-Selectable tags can also be used in filtering by label scenarios when they do
-not need to be dismissed.
-
-When to use:
-
-- Use selectable tags to toggle between a selected or unselected state.
-- Use when needing to filter without an explicit dismissable functionality. (We
-  need to be a little more specific around filtering for selectable versus
-  dismissable tags).
-
-  <Canvas of={InteractiveTagStories.Selectable} />
-
-```jsx
-<SelectableTag className="some-class" renderIcon={Asleep}>
-  {'Tag content'}
-</SelectableTag>
-```
-
-## Operational
-
-Operational tags enable the user to view a list of all items associated with a
-given tag in different ways.
-
-When to use:
-
-- Use to view a list of items with the same tag in a popover, or breadcrumb
-  detail view.
-
-When not to use:
-
-- Do not use operational tags as a replacement for links that direct you to an
-  entirely different page or launch you out to another tab.
-- Do not use in combination with Dismissable tags. Instead, consider letting the
-  user enter an "edit mode" to dismiss tags.
-
-  <Canvas of={InteractiveTagStories.Operational} />
-
-```jsx
-<OperationalTag type="red" className="some-class" renderIcon={Asleep}>
-  {'Tag content'}
-</OperationalTag>
-```
diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index e5c450254e96..170743dee83c 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -12,13 +12,13 @@ import { default as OperationalTag } from './OperationalTag';
 import { default as DismissibleTag } from './DismissibleTag';
 import { Asleep } from '@carbon/icons-react';
 import { Popover, PopoverContent } from '../Popover';
-import mdx from './InteractiveTag.mdx';
+import mdx from './Tag.mdx';
 import './storyInteractiveTag.scss';
 import { Text } from '../Text';
 import Button from '../Button';
 
 export default {
-  title: 'Experimental/unstable__InteractiveTag',
+  title: 'Components/Tag',
   component: SelectableTag,
   parameters: {
     docs: {
diff --git a/packages/react/src/components/Tag/OperationalTag.tsx b/packages/react/src/components/Tag/OperationalTag.tsx
index 84d9c4296fb1..5f7cae649815 100644
--- a/packages/react/src/components/Tag/OperationalTag.tsx
+++ b/packages/react/src/components/Tag/OperationalTag.tsx
@@ -64,11 +64,6 @@ export interface OperationalTagBaseProps {
    */
   size?: keyof typeof SIZES;
 
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
-   */
-  slug?: ReactNode;
-
   /**
    * Provide text to be rendered inside of a the tag.
    */
@@ -90,7 +85,6 @@ const OperationalTag = <T extends React.ElementType>({
   disabled,
   id,
   renderIcon,
-  slug,
   size,
   text,
   type = 'gray',
@@ -110,14 +104,6 @@ const OperationalTag = <T extends React.ElementType>({
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
 
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
-      size: 'sm',
-      kind: 'inline',
-    });
-  }
-
   const tooltipClasses = classNames(
     `${prefix}--icon-tooltip`,
     `${prefix}--tag-label-tooltip`
@@ -144,7 +130,6 @@ const OperationalTag = <T extends React.ElementType>({
           <Text title={text} className={`${prefix}--tag__label`}>
             {text}
           </Text>
-          {normalizedSlug}
         </Tag>
       </Tooltip>
     );
@@ -160,7 +145,6 @@ const OperationalTag = <T extends React.ElementType>({
       className={tagClasses}
       id={tagId}
       {...other}>
-      {normalizedSlug}
       <Text title={text} className={`${prefix}--tag__label`}>
         {text}
       </Text>
@@ -196,11 +180,6 @@ OperationalTag.propTypes = {
    */
   size: PropTypes.oneOf(Object.keys(SIZES)),
 
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
-   */
-  slug: PropTypes.node,
-
   /**
    * Provide text to be rendered inside of a the tag.
    */
diff --git a/packages/react/src/components/Tag/SelectableTag.tsx b/packages/react/src/components/Tag/SelectableTag.tsx
index 06b712eb8421..0441f1d34dd5 100644
--- a/packages/react/src/components/Tag/SelectableTag.tsx
+++ b/packages/react/src/components/Tag/SelectableTag.tsx
@@ -49,11 +49,6 @@ export interface SelectableTagBaseProps {
    */
   size?: keyof typeof SIZES;
 
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
-   */
-  slug?: ReactNode;
-
   /**
    * Provide text to be rendered inside of a the tag.
    */
@@ -71,7 +66,6 @@ const SelectableTag = <T extends React.ElementType>({
   id,
   renderIcon,
   selected = false,
-  slug,
   size,
   text,
   ...other
@@ -92,14 +86,6 @@ const SelectableTag = <T extends React.ElementType>({
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
 
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
-      size: 'sm',
-      kind: 'inline',
-    });
-  }
-
   const tooltipClasses = classNames(
     `${prefix}--icon-tooltip`,
     `${prefix}--tag-label-tooltip`
@@ -120,7 +106,6 @@ const SelectableTag = <T extends React.ElementType>({
         <Tag
           aria-pressed={selectedTag}
           ref={tagRef}
-          slug={slug}
           size={size}
           renderIcon={renderIcon}
           disabled={disabled}
@@ -131,7 +116,6 @@ const SelectableTag = <T extends React.ElementType>({
           <Text title={text} className={`${prefix}--tag__label`}>
             {text}
           </Text>
-          {normalizedSlug}
         </Tag>
       </Tooltip>
     );
@@ -141,7 +125,6 @@ const SelectableTag = <T extends React.ElementType>({
     <Tag
       aria-pressed={selectedTag}
       ref={tagRef}
-      slug={slug}
       size={size}
       renderIcon={renderIcon}
       disabled={disabled}
@@ -149,7 +132,6 @@ const SelectableTag = <T extends React.ElementType>({
       id={tagId}
       onClick={() => setSelectedTag(!selectedTag)}
       {...otherProps}>
-      {normalizedSlug}
       <Text title={text} className={`${prefix}--tag__label`}>
         {text}
       </Text>
@@ -190,11 +172,6 @@ SelectableTag.propTypes = {
    */
   size: PropTypes.oneOf(Object.keys(SIZES)),
 
-  /**
-   * **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
-   */
-  slug: PropTypes.node,
-
   /**
    * Provide text to be rendered inside of a the tag.
    */
diff --git a/packages/react/src/components/Tag/Tag.mdx b/packages/react/src/components/Tag/Tag.mdx
index cb0420bdea82..bb2f7c95ffa0 100644
--- a/packages/react/src/components/Tag/Tag.mdx
+++ b/packages/react/src/components/Tag/Tag.mdx
@@ -1,5 +1,6 @@
-import { ArgTypes, Meta } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as TagStories from './Tag.stories';
+import * as InteractiveTagStories from './InteractiveTag.stories';
 
 <Meta isTemplate />
 
@@ -11,16 +12,68 @@ import * as TagStories from './Tag.stories';
 &nbsp;|&nbsp;
 [Accessibility](https://www.carbondesignsystem.com/components/tag/accessibility)
 
-## Table of Contents
-
 ## Overview
 
-## Component API
+Tags can be used to categorize items. Use short labels for easy scanning. Use
+two words only if necessary to describe the status and differentiate it from
+other tags.
+
+## Read Only
+
+Read-only tags are used to categorize, are used for labeling, and do not have interactive functionality. Read-only tags come in several color choices and can use optional decorative icons to delineate between multiple categories.
+
+
+<Canvas of={TagStories.ReadOnly} />
+
+## Dismissible
+
+Dismissible tags are used to remove tags that can be filtered out by the user.
+
+When to use:
+
+- Use DismissibleTag when you want to allow users to easily clear or dismiss
+  specific filters applied to items.
+
+<Canvas of={InteractiveTagStories.Dismissible} />
+
+## Selectable
+
+Selectable tags are used to select or unselect single or multiple items.
+Selectable tags can also be used in filtering by label scenarios when they do
+not need to be dismissed.
+
+When to use:
+
+- Use selectable tags to toggle between a selected or unselected state.
+- Use when needing to filter without an explicit dismissable functionality. (We
+  need to be a little more specific around filtering for selectable versus
+  dismissable tags).
+
+<Canvas of={InteractiveTagStories.Selectable} />
+
+## Operational
+
+Operational tags enable the user to view a list of all items associated with a
+given tag in different ways.
+
+When to use:
+
+- Use to view a list of items with the same tag in a popover, or breadcrumb
+  detail view.
+
+When not to use:
+
+- Do not use operational tags as a replacement for links that direct you to an
+  entirely different page or launch you out to another tab.
+- Do not use in combination with Dismissable tags. Instead, consider letting the
+  user enter an "edit mode" to dismiss tags.
+
+<Canvas of={InteractiveTagStories.Operational} />
+
+## With AI Label
 
-<ArgTypes />
+<Canvas of={TagStories.withAILabel} />
 
-## Feedback
+## Skeleton
 
-Help us improve this component by providing feedback, asking questions on Slack,
-or updating this file on
-[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Tag/Tag.mdx).
+<Canvas of={TagStories.Skeleton} />
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index 850d5f048fb0..294ad9f65740 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -13,71 +13,69 @@ import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
 import '../AILabel/ailabel-story.scss';
+import mdx from './Tag.mdx';
 
 export default {
   title: 'Components/Tag',
   component: Tag,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
-export const ReadOnly = () => {
+export const ReadOnly = (args) => {
   return (
     <>
-      <Tag className="some-class" type="red">
+      <Tag className="some-class" type="red" {...args}>
         {'Tag content with a long text description'}
       </Tag>
-      <Tag className="some-class" type="magenta">
+      <Tag className="some-class" type="magenta" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="purple">
+      <Tag className="some-class" type="purple" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="blue">
+      <Tag className="some-class" type="blue" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="cyan">
+      <Tag className="some-class" type="cyan" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="teal">
+      <Tag className="some-class" type="teal" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="green">
+      <Tag className="some-class" type="green" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="gray">
+      <Tag className="some-class" type="gray" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="cool-gray">
+      <Tag className="some-class" type="cool-gray" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="warm-gray">
+      <Tag className="some-class" type="warm-gray" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="high-contrast">
+      <Tag className="some-class" type="high-contrast" {...args}>
         {'Tag content'}
       </Tag>
-      <Tag className="some-class" type="outline">
+      <Tag className="some-class" type="outline" {...args}>
         {'Tag content'}
       </Tag>
     </>
   );
 };
 
-export const Playground = (args) => {
-  return (
-    <Tag renderIcon={Asleep} {...args}>
-      {'Tag content'}
-    </Tag>
-  );
-};
-
-Playground.args = {
+ReadOnly.args = {
   disabled: false,
   filter: false,
   size: 'md',
   title: 'Clear filter',
 };
 
-Playground.argTypes = {
+ReadOnly.argTypes = {
   children: {
     control: false,
   },
@@ -112,23 +110,7 @@ Playground.argTypes = {
     },
   },
   type: {
-    options: [
-      'red',
-      'magenta',
-      'purple',
-      'blue',
-      'cyan',
-      'teal',
-      'green',
-      'gray',
-      'cool-gray',
-      'warm-gray',
-      'high-contrast',
-      'outline',
-    ],
-    control: {
-      type: 'select',
-    },
+    control: false,
   },
 };
 

From a12f68c5a1aa74303836c102c7c1419acce9d7a6 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Thu, 10 Oct 2024 09:01:25 -0300
Subject: [PATCH 2/7] test: fixed snapshots

---
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 746d4afdb6e1..6ccd701244eb 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2959,9 +2959,6 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
       "tagTitle": Object {
         "type": "string",
       },
@@ -5874,9 +5871,6 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
       "text": Object {
         "type": "string",
       },
@@ -7012,9 +7006,6 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
       "text": Object {
         "type": "string",
       },

From 765f3e8d628e4515c13f9c3254ff57415c5727c2 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Thu, 10 Oct 2024 13:50:09 -0300
Subject: [PATCH 3/7] fix: fixed path

---
 .../InteractiveTag/InteractiveTag-test.avt.e2e.js    | 12 ++++++------
 .../InteractiveTag/InteractiveTag-test.e2e.js        |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js b/e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js
index 406818fc503a..9cea0bf2c0b8 100644
--- a/e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js
+++ b/e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js
@@ -14,7 +14,7 @@ test.describe('@avt InteractiveTag', () => {
   test('@avt-advanced-states DismissibleTag', async ({ page }) => {
     await visitStory(page, {
       component: 'Tag',
-      id: 'experimental-unstable-interactivetag--dismissible',
+      id: 'components-tag--dismissible',
       globals: {
         theme: 'white',
       },
@@ -26,7 +26,7 @@ test.describe('@avt InteractiveTag', () => {
   test('@avt-advanced-states OperationalTag', async ({ page }) => {
     await visitStory(page, {
       component: 'Tag',
-      id: 'experimental-unstable-interactivetag--operational',
+      id: 'components-tag--operational',
       globals: {
         theme: 'white',
       },
@@ -37,7 +37,7 @@ test.describe('@avt InteractiveTag', () => {
   test('@avt-advanced-states SelectableTag', async ({ page }) => {
     await visitStory(page, {
       component: 'Tag',
-      id: 'experimental-unstable-interactivetag--selectable',
+      id: 'components-tag--selectable',
       globals: {
         theme: 'white',
       },
@@ -48,7 +48,7 @@ test.describe('@avt InteractiveTag', () => {
   test('@avt-keyboard-nav DismissibleTag', async ({ page }) => {
     await visitStory(page, {
       component: 'Tag',
-      id: 'experimental-unstable-interactivetag--dismissible',
+      id: 'components-tag--dismissible',
       globals: {
         theme: 'white',
       },
@@ -82,7 +82,7 @@ test.describe('@avt InteractiveTag', () => {
   test('@avt-keyboard-nav OperationalTag', async ({ page }) => {
     await visitStory(page, {
       component: 'Tag',
-      id: 'experimental-unstable-interactivetag--operational',
+      id: 'components-tag--operational',
       globals: {
         theme: 'white',
       },
@@ -117,7 +117,7 @@ test.describe('@avt InteractiveTag', () => {
   test('@avt-keyboard-nav SelectableTag', async ({ page }) => {
     await visitStory(page, {
       component: 'Tag',
-      id: 'experimental-unstable-interactivetag--selectable',
+      id: 'components-tag--selectable',
       globals: {
         theme: 'white',
       },
diff --git a/e2e/components/InteractiveTag/InteractiveTag-test.e2e.js b/e2e/components/InteractiveTag/InteractiveTag-test.e2e.js
index fe9795fd3fa8..8b68d48140cb 100644
--- a/e2e/components/InteractiveTag/InteractiveTag-test.e2e.js
+++ b/e2e/components/InteractiveTag/InteractiveTag-test.e2e.js
@@ -17,7 +17,7 @@ test.describe('InteractiveTag', () => {
       test('DismissibleTag @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'DismissibleTag',
-          id: 'experimental-unstable-interactivetag--dismissible',
+          id: 'components-tag--dismissible',
           theme,
         });
       });
@@ -25,7 +25,7 @@ test.describe('InteractiveTag', () => {
       test('OperationalTag @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'OperationalTag',
-          id: 'experimental-unstable-interactivetag--operational',
+          id: 'components-tag--operational',
           theme,
         });
       });
@@ -33,7 +33,7 @@ test.describe('InteractiveTag', () => {
       test('SelectableTag @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'SelectableTag',
-          id: 'experimental-unstable-interactivetag--selectable',
+          id: 'components-tag--selectable',
           theme,
         });
       });

From 734becfaf95ca97df77a068b45026a16a2bc0e87 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Fri, 11 Oct 2024 09:31:46 -0300
Subject: [PATCH 4/7] docs: added text to with ai label example

---
 packages/react/src/components/Tag/Tag.mdx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Tag/Tag.mdx b/packages/react/src/components/Tag/Tag.mdx
index bb2f7c95ffa0..459fc7e9b9a5 100644
--- a/packages/react/src/components/Tag/Tag.mdx
+++ b/packages/react/src/components/Tag/Tag.mdx
@@ -20,8 +20,9 @@ other tags.
 
 ## Read Only
 
-Read-only tags are used to categorize, are used for labeling, and do not have interactive functionality. Read-only tags come in several color choices and can use optional decorative icons to delineate between multiple categories.
-
+Read-only tags are used to categorize, are used for labeling, and do not have
+interactive functionality. Read-only tags come in several color choices and can
+use optional decorative icons to delineate between multiple categories.
 
 <Canvas of={TagStories.ReadOnly} />
 
@@ -72,6 +73,10 @@ When not to use:
 
 ## With AI Label
 
+Tag with AI label is now stable for Read Only tags. This addition changes the
+visual appearance of the component and introduces an AI explainability feature
+when AI is present in the component.
+
 <Canvas of={TagStories.withAILabel} />
 
 ## Skeleton

From 21d5ebaca2488972ed0d3424e3fc5d13bac7c3e7 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Mon, 14 Oct 2024 10:10:05 -0300
Subject: [PATCH 5/7] fix: added back ai label to dismissible tag

---
 .../src/components/Tag/DismissibleTag.tsx     | 20 +++++++++++
 .../components/Tag/InteractiveTag.stories.js  | 36 ++++++++++++++++++-
 packages/styles/scss/components/tag/_tag.scss |  4 +++
 3 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
index c9858ca65779..eb68a9b6a41d 100644
--- a/packages/react/src/components/Tag/DismissibleTag.tsx
+++ b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -50,6 +50,11 @@ export interface DismissibleTagBaseProps {
    */
   size?: keyof typeof SIZES;
 
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
+   */
+  slug?: ReactNode;
+
   /**
    * Provide text to be rendered inside of a the tag.
    */
@@ -83,6 +88,7 @@ const DismissibleTag = <T extends React.ElementType>({
   renderIcon,
   title = 'Dismiss',
   onClose,
+  slug,
   size,
   text,
   tagTitle,
@@ -108,6 +114,14 @@ 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',
+    });
+  }
+
   const tooltipClasses = classNames(
     `${prefix}--icon-tooltip`,
     `${prefix}--tag-label-tooltip`
@@ -135,6 +149,7 @@ const DismissibleTag = <T extends React.ElementType>({
           className={`${prefix}--tag__label`}>
           {text}
         </Text>
+        {normalizedSlug}
         <Tooltip
           label={isEllipsisApplied ? dismissLabel : title}
           align="bottom"
@@ -187,6 +202,11 @@ DismissibleTag.propTypes = {
    */
   size: PropTypes.oneOf(Object.keys(SIZES)),
 
+  /**
+   * **Experimental:** Provide a `Slug` component to be rendered inside the `DismissibleTag` component
+   */
+  slug: PropTypes.node,
+
   /**
    * Provide text to be rendered inside of a the tag.
    */
diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index 170743dee83c..608021e01bfb 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -10,12 +10,14 @@ import { default as Tag } from '.';
 import { default as SelectableTag } from './SelectableTag';
 import { default as OperationalTag } from './OperationalTag';
 import { default as DismissibleTag } from './DismissibleTag';
-import { Asleep } from '@carbon/icons-react';
+import { Asleep, FolderOpen, Folders, View } from '@carbon/icons-react';
 import { Popover, PopoverContent } from '../Popover';
 import mdx from './Tag.mdx';
 import './storyInteractiveTag.scss';
 import { Text } from '../Text';
 import Button from '../Button';
+import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import { IconButton } from '../IconButton';
 
 export default {
   title: 'Components/Tag',
@@ -357,6 +359,37 @@ export const Dismissible = (args) => {
     setRenderedTags(tags);
   };
 
+  const aiLabel = (
+    <AILabel className="slug-container">
+      <AILabelContent>
+        <div>
+          <p className="secondary">AI Explained</p>
+          <h1>84%</h1>
+          <p className="secondary bold">Confidence score</p>
+          <p className="secondary">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <hr />
+          <p className="secondary">Model type</p>
+          <p className="bold">Foundation model</p>
+        </div>
+        <AILabelActions>
+          <IconButton kind="ghost" label="View">
+            <View />
+          </IconButton>
+          <IconButton kind="ghost" label="Open Folder">
+            <FolderOpen />
+          </IconButton>
+          <IconButton kind="ghost" label="Folders">
+            <Folders />
+          </IconButton>
+          <Button>View details</Button>
+        </AILabelActions>
+      </AILabelContent>
+    </AILabel>
+  );
+
   return (
     <>
       <Button
@@ -369,6 +402,7 @@ export const Dismissible = (args) => {
       <div aria-label="Dismissible tags" role="group">
         {renderedTags.map((tag, index) => (
           <DismissibleTag
+            slug={aiLabel}
             key={index}
             type={tag.type}
             className="some-class"
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
index 30d5dcee08dc..f4d0f5cf11de 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -396,6 +396,10 @@
     border-color: currentColor;
   }
 
+  .#{$prefix}--tag--filter .#{$prefix}--slug {
+    min-inline-size: convert.to-rem(32.14px);
+  }
+
   // Windows HCM fix
   /* stylelint-disable */
   .#{$prefix}--tag {

From f2bb355c095c7a80d70d26e12b1cbc3cab3c359f Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Mon, 14 Oct 2024 10:14:16 -0300
Subject: [PATCH 6/7] fix: removed example test from stories

---
 .../components/Tag/InteractiveTag.stories.js  | 36 +------------------
 1 file changed, 1 insertion(+), 35 deletions(-)

diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index 608021e01bfb..170743dee83c 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -10,14 +10,12 @@ import { default as Tag } from '.';
 import { default as SelectableTag } from './SelectableTag';
 import { default as OperationalTag } from './OperationalTag';
 import { default as DismissibleTag } from './DismissibleTag';
-import { Asleep, FolderOpen, Folders, View } from '@carbon/icons-react';
+import { Asleep } from '@carbon/icons-react';
 import { Popover, PopoverContent } from '../Popover';
 import mdx from './Tag.mdx';
 import './storyInteractiveTag.scss';
 import { Text } from '../Text';
 import Button from '../Button';
-import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
-import { IconButton } from '../IconButton';
 
 export default {
   title: 'Components/Tag',
@@ -359,37 +357,6 @@ export const Dismissible = (args) => {
     setRenderedTags(tags);
   };
 
-  const aiLabel = (
-    <AILabel className="slug-container">
-      <AILabelContent>
-        <div>
-          <p className="secondary">AI Explained</p>
-          <h1>84%</h1>
-          <p className="secondary bold">Confidence score</p>
-          <p className="secondary">
-            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-          </p>
-          <hr />
-          <p className="secondary">Model type</p>
-          <p className="bold">Foundation model</p>
-        </div>
-        <AILabelActions>
-          <IconButton kind="ghost" label="View">
-            <View />
-          </IconButton>
-          <IconButton kind="ghost" label="Open Folder">
-            <FolderOpen />
-          </IconButton>
-          <IconButton kind="ghost" label="Folders">
-            <Folders />
-          </IconButton>
-          <Button>View details</Button>
-        </AILabelActions>
-      </AILabelContent>
-    </AILabel>
-  );
-
   return (
     <>
       <Button
@@ -402,7 +369,6 @@ export const Dismissible = (args) => {
       <div aria-label="Dismissible tags" role="group">
         {renderedTags.map((tag, index) => (
           <DismissibleTag
-            slug={aiLabel}
             key={index}
             type={tag.type}
             className="some-class"

From 9ca6938700f661d932117f0455bb688d9d54a8a0 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Mon, 14 Oct 2024 14:29:14 -0300
Subject: [PATCH 7/7] test: fixed snapshots

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 6ccd701244eb..d3504990412c 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2959,6 +2959,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "slug": Object {
+        "type": "node",
+      },
       "tagTitle": Object {
         "type": "string",
       },