Moving Interactive Tags to stable (#17706)

* fix: moveing interactive tags to stable and remvoed slug from it * test: fixed snapshots * fix: fixed path * docs: added text to with ai label example * fix: added back ai label to dismissible tag * fix: removed example test from stories * test: fixed snapshots
carbon-design-system · Oct 14, 2024 · 781bfed · 781bfed
1 parent 7fda14b
commit 781bfed
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 196 deletions.
diff --git 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
@@ -17,23 +17,23 @@ test.describe('InteractiveTag', () => {
       test('DismissibleTag @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'DismissibleTag',
-          id: 'experimental-unstable-interactivetag--dismissible',
+          id: 'components-tag--dismissible',
           theme,
         });
       });
 
       test('OperationalTag @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'OperationalTag',
-          id: 'experimental-unstable-interactivetag--operational',
+          id: 'components-tag--operational',
           theme,
         });
       });
 
       test('SelectableTag @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'SelectableTag',
-          id: 'experimental-unstable-interactivetag--selectable',
+          id: 'components-tag--selectable',
           theme,
         });
       });

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5882,9 +5882,6 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
       "text": Object {
         "type": "string",
       },
@@ -7020,9 +7017,6 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
       "text": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx
@@ -149,6 +149,7 @@ const DismissibleTag = <T extends React.ElementType>({
           className={`${prefix}--tag__label`}>
           {text}
         </Text>
+        {normalizedSlug}
         <Tooltip
           label={isEllipsisApplied ? dismissLabel : title}
           align="bottom"
@@ -164,7 +165,6 @@ const DismissibleTag = <T extends React.ElementType>({
             <Close />
           </button>
         </Tooltip>
-        {normalizedSlug}
       </div>
     </Tag>
   );

diff --git a/packages/react/src/components/Tag/InteractiveTag.mdx b/packages/react/src/components/Tag/InteractiveTag.mdx
diff --git 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
@@ -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
@@ -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,15 +125,13 @@ const SelectableTag = <T extends React.ElementType>({
     <Tag
       aria-pressed={selectedTag}
       ref={tagRef}
-      slug={slug}
       size={size}
       renderIcon={renderIcon}
       disabled={disabled}
       className={tagClasses}
       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.
    */