feat: added interactive tag (#15808)

* feat: added interactive tag

* fix: fixed changes after meeting with team

* test: added tests

* fix: fixed typescript error using any like Toggletip does

* test: fixed test

* test: fixed avt test

* test: fixed playwright test

* fix: fixed snapshot and style for operational tag

* fix: fixed TJ comments

* fix: fixed nested button with operational tag

* fix: fixed Lauren comments

* fix: fixed operational tag with popover

* fix: fixed overview page code

* fix: fixed Lauren comments

* test: fixed avt test

* fix: fixed percy errors

* test: removed skip from test

* docs: fixed docs

* fix: removed onClick from selectable tag

* fix: fixed issue 15820 from toggletip a11y

* fix: fixed typescript

* fix: fixed typescript error

e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js

@@ -0,0 +1,108 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('@avt InteractiveTag', () => {
+  test('@avt-advanced-states DismissibleTag', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tag',
+      id: 'experimental-unstable-interactivetag--dismissible',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('DismissibleTag');
+  });
+
+  // Testing being skipped because it is failing in the ToggleTip that operational it's using
+  test('@avt-advanced-states OperationalTag', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tag',
+      id: 'experimental-unstable-interactivetag--operational',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('OperationalTag');
+  });
+
+  test('@avt-advanced-states SelectableTag', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tag',
+      id: 'experimental-unstable-interactivetag--selectable',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('SelectableTag');
+  });
+
+  test('@avt-keyboard-nav DismissibleTag', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tag',
+      id: 'experimental-unstable-interactivetag--dismissible',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const button = page.getByRole('button').first();
+    await expect(button).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(button).toBeFocused();
+  });
+
+  test('@avt-keyboard-nav OperationalTag', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tag',
+      id: 'experimental-unstable-interactivetag--operational',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const button = page.getByRole('button').first();
+    await expect(button).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(button).toBeFocused();
+    await expect(button).toHaveClass(/cds--tag--red/);
+
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    // Expecte the OperationalTag with tooltip be focusable and visible
+    await expect(page.getByRole('button').nth(10)).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.getByText('View More')).toBeVisible();
+  });
+
+  test('@avt-keyboard-nav SelectableTag', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Tag',
+      id: 'experimental-unstable-interactivetag--selectable',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const tag = page.getByRole('button').first();
+    await expect(tag).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(tag).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(tag).toHaveClass(/cds--tag--selectable-selected/);
+  });
+});

e2e/components/InteractiveTag/InteractiveTag-test.e2e.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import { test } from '@playwright/test';
+import { themes } from '../../test-utils/env';
+import { snapshotStory } from '../../test-utils/storybook';
+
+test.describe('InteractiveTag', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('DismissibleTag @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'DismissibleTag',
+          id: 'experimental-unstable-interactivetag--dismissible',
+          theme,
+        });
+      });
+
+      test('OperationalTag @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'OperationalTag',
+          id: 'experimental-unstable-interactivetag--operational',
+          theme,
+        });
+      });
+
+      test('SelectableTag @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'SelectableTag',
+          id: 'experimental-unstable-interactivetag--selectable',
+          theme,
+        });
+      });
+    });
+  });
+});

e2e/components/Tag/Tag-test.avt.e2e.js

@@ -14,7 +14,7 @@ test.describe('@avt Tag', () => {
   test('@avt-default-state Tag', async ({ page }) => {
     await visitStory(page, {
       component: 'Tag',
-      id: 'components-tag--default',
+      id: 'components-tag--read-only',
       globals: {
         theme: 'white',
       },
@@ -32,23 +32,4 @@ test.describe('@avt Tag', () => {
     });
     await expect(page).toHaveNoACViolations('Tag-skeleton');
   });
-
-  test('@avt-keyboard-nav Tag', async ({ page }) => {
-    await visitStory(page, {
-      component: 'Tag',
-      id: 'components-tag--playground',
-      globals: {
-        theme: 'white',
-      },
-      args: {
-        filter: true,
-      },
-    });
-
-    await expect(page.getByText('Tag content')).toBeVisible();
-    await page.keyboard.press('Tab');
-    await expect(
-      page.getByRole('button', { name: 'Clear filter' })
-    ).toBeFocused();
-  });
 });

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -8179,15 +8179,11 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
-      "filter": Object {
-        "type": "bool",
-      },
+      "filter": [Function],
       "id": Object {
         "type": "string",
       },
-      "onClose": Object {
-        "type": "func",
-      },
+      "onClose": [Function],
       "renderIcon": Object {
         "args": Array [
           Array [
@@ -8206,16 +8202,15 @@ Map {
           Array [
             "sm",
             "md",
+            "lg",
           ],
         ],
         "type": "oneOf",
       },
       "slug": Object {
         "type": "node",
       },
-      "title": Object {
-        "type": "string",
-      },
+      "title": [Function],
       "type": Object {
         "args": Array [
           Array [
@@ -9426,20 +9421,6 @@ Map {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
-  "types" => Object {
-    "0": "red",
-    "1": "magenta",
-    "10": "high-contrast",
-    "11": "outline",
-    "2": "purple",
-    "3": "blue",
-    "4": "cyan",
-    "5": "teal",
-    "6": "green",
-    "7": "gray",
-    "8": "cool-gray",
-    "9": "warm-gray",
-  },
   "unstable_FeatureFlags" => Object {
     "propTypes": Object {
       "children": Object {

packages/react/src/__tests__/index-test.js

@@ -238,7 +238,6 @@ describe('Carbon Components React', () => {
         "TreeView",
         "UnorderedList",
         "VStack",
-        "types",
         "unstable_FeatureFlags",
         "unstable_Layout",
         "unstable_LayoutDirection",