feat(AILabel): Rename Slug to AILabel

e2e/components/Slug/Slug-test.avt.e2e.js → e2e/components/AILabel/Slug-test.avt.e2e.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,22 +10,22 @@
 const { expect, test } = require('@playwright/test');
 const { visitStory } = require('../../test-utils/storybook');
 
-test.describe('@avt Slug', async () => {
+test.describe('@avt AILabel', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
-      component: 'Slug',
-      id: 'experimental-unstable-slug--default',
+      component: 'AILabel',
+      id: 'components-ailabel--default',
       globals: {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations('Slug');
+    await expect(page).toHaveNoACViolations('AILabel');
   });
 
   test.slow('@avt-advanced-states open state', async ({ page }) => {
     await visitStory(page, {
-      component: 'Slug',
-      id: 'experimental-unstable-slug--default',
+      component: 'AILabel',
+      id: 'components-ailabel--default',
       globals: {
         theme: 'white',
       },
@@ -34,24 +34,24 @@ test.describe('@avt Slug', async () => {
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
     await page.keyboard.press('Enter');
-    await expect(page).toHaveNoACViolations('Slug-open');
+    await expect(page).toHaveNoACViolations('AILabel-open');
   });
 
   test.slow('@avt-advanced-states ai form', async ({ page }) => {
     await visitStory(page, {
-      component: 'Slug',
-      id: 'experimental-unstable-slug-form--form-example',
+      component: 'AILabel',
+      id: 'components-form--with-ai-label',
       globals: {
         theme: 'white',
       },
     });
-    await expect(page).toHaveNoACViolations('Slug-form');
+    await expect(page).toHaveNoACViolations('AILabel-form');
   });
 
   test('@avt-keyboard-nav - slug', async ({ page }) => {
     await visitStory(page, {
       component: 'Search',
-      id: 'experimental-unstable-slug--callout',
+      id: 'components-ailabel--callout',
       globals: {
         theme: 'white',
       },
@@ -63,7 +63,7 @@ test.describe('@avt Slug', async () => {
     await expect(slug).toBeVisible();
     await expect(callout).toBeVisible();
 
-    // Tab to the Slug
+    // Tab to the AILabel
     await page.keyboard.press('Tab');
     await expect(slug).toBeFocused();
 

e2e/components/Slug/Slug-test.e2e.js → e2e/components/AILabel/Slug-test.e2e.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,53 +11,53 @@ const { test } = require('@playwright/test'); // eslint-disable-line
 const { themes } = require('../../test-utils/env');
 const { snapshotStory } = require('../../test-utils/storybook'); // eslint-disable-line
 
-test.describe('Slug', () => {
+test.describe('AILabel', () => {
   themes.forEach((theme) => {
     test.describe(theme, () => {
       test('default @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug--default',
+          component: 'AILabel',
+          id: 'components-ailabel--default',
           theme,
         });
       });
 
-      test('slug callout @vrt', async ({ page }) => {
+      test('AILabel callout @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug--callout',
+          component: 'AILabel',
+          id: 'components-ailabel--callout',
           theme,
         });
       });
 
-      test('slug inside form @vrt', async ({ page }) => {
+      test('AILabel inside form @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug-form--form-example',
+          component: 'AILabel',
+          id: 'components-form--with-ai-label',
           theme,
         });
       });
 
-      test('slug inside DataTable column @vrt', async ({ page }) => {
+      test('AILabel inside DataTable column @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug-datatable--column-slug-sort',
+          component: 'AILabel',
+          id: 'components-datatable-withailabel--column-ai-label-sort',
           theme,
         });
       });
 
-      test('slug inside DataTable row @vrt', async ({ page }) => {
+      test('AILabel inside DataTable row @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug-datatable--slug-with-selection-and-expansion',
+          component: 'AILabel',
+          id: 'components-datatable-withailabel--ai-label-with-selection-and-expansion',
           theme,
         });
       });
 
-      test('slug inside Tile @vrt', async ({ page }) => {
+      test('AILabel inside Tile @vrt', async ({ page }) => {
         await snapshotStory(page, {
-          component: 'Slug',
-          id: 'experimental-unstable-slug-examples--tile',
+          component: 'AILabel',
+          id: 'components-tile--with-ai-label',
           theme,
         });
       });

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

@@ -2,6 +2,154 @@
 
 exports[`Public API should only change with a semver change 1`] = `
 Map {
+  "AILabel" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "AILabelContent": Object {
+        "type": "node",
+      },
+      "aiText": Object {
+        "type": "string",
+      },
+      "aiTextLabel": [Function],
+      "align": Object {
+        "args": Array [
+          Array [
+            "top",
+            "top-left",
+            "top-start",
+            "top-right",
+            "top-end",
+            "bottom",
+            "bottom-left",
+            "bottom-start",
+            "bottom-right",
+            "bottom-end",
+            "left",
+            "left-bottom",
+            "left-end",
+            "left-top",
+            "left-start",
+            "right",
+            "right-bottom",
+            "right-end",
+            "right-top",
+            "right-start",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "aria-label": Object {
+        "type": "string",
+      },
+      "autoAlign": Object {
+        "type": "bool",
+      },
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "kind": Object {
+        "args": Array [
+          Array [
+            "default",
+            "inline",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "onRevertClick": Object {
+        "type": "func",
+      },
+      "revertActive": Object {
+        "type": "bool",
+      },
+      "revertLabel": Object {
+        "type": "string",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            "mini",
+            "2xs",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "slugLabel": [Function],
+      "textLabel": Object {
+        "type": "string",
+      },
+    },
+    "render": [Function],
+  },
+  "AILabelActions" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+    },
+    "render": [Function],
+  },
+  "AILabelContent" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+    },
+    "render": [Function],
+  },
+  "AISkeletonIcon" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "style": Object {
+        "type": "object",
+      },
+    },
+  },
+  "AISkeletonPlaceholder" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
+  "AISkeletonText" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "heading": Object {
+        "type": "bool",
+      },
+      "lineCount": Object {
+        "type": "number",
+      },
+      "paragraph": Object {
+        "type": "bool",
+      },
+      "width": Object {
+        "type": "string",
+      },
+    },
+  },
   "Accordion" => Object {
     "propTypes": Object {
       "align": Object {
@@ -10679,12 +10827,13 @@ Map {
   "unstable__Slug" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
-      "aiText": Object {
-        "type": "string",
+      "AILabelContent": Object {
+        "type": "node",
       },
-      "aiTextLabel": Object {
+      "aiText": Object {
         "type": "string",
       },
+      "aiTextLabel": [Function],
       "align": Object {
         "args": Array [
           Array [
@@ -10712,6 +10861,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "aria-label": Object {
+        "type": "string",
+      },
       "autoAlign": Object {
         "type": "bool",
       },
@@ -10753,10 +10905,8 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slugContent": Object {
-        "type": "node",
-      },
-      "slugLabel": Object {
+      "slugLabel": [Function],
+      "textLabel": Object {
         "type": "string",
       },
     },

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

@@ -15,6 +15,12 @@ describe('Carbon Components React', () => {
   it('should export components', () => {
     expect(Object.keys(Carbon).sort()).toMatchInlineSnapshot(`
       Array [
+        "AILabel",
+        "AILabelActions",
+        "AILabelContent",
+        "AISkeletonIcon",
+        "AISkeletonPlaceholder",
+        "AISkeletonText",
         "Accordion",
         "AccordionItem",
         "AccordionSkeleton",