feat(AILabel): Rename Slug to AILabel (#16803)

* feat(AILabel): rename Slug to AILabel * docs(AILabel): update mdx file to use new name * chore(AILabel): rename Slug folder to AILabel * chore(AILabel): more renaming, diplsyName updates, checkbox story * chore(AILabel): move example stories to corresponding folders * chore(AILabel): move DataTable, Form stories to appropriate locations: * style(AILabel): fix styles when revert is active * chore(AISkeleton): rename AiSkeleton to AISkeleton * chore(AILabel): rename more files, update test names * chore(AILabel): add copyright banner, remove some playground controls * test(AILabel): update tests to use AILabel * test(AILabel): add additional tests around aiTextLabel * fix(AILabel): deprecate aiTextLabel and SlugLabel * test(AILabel): update textLabel test * fix(AILabel): make changes based on review * fix(AILabel): update click target to 24px for mini, 2xs * feat(AILabel): add AILabel sass entrypoint --------- Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Aug 1, 2024 · 753e3a2 · 753e3a2
1 parent f22da5a
commit 753e3a2
Show file tree

Hide file tree

Showing 101 changed files with 2,434 additions and 2,090 deletions.
diff --git a/e2e/components/Slug/Slug-test.avt.e2e.js → e2e/components/AILabel/Slug-test.avt.e2e.js b/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();
 

diff --git a/e2e/components/Slug/Slug-test.e2e.js → e2e/components/AILabel/Slug-test.e2e.js b/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,
         });
       });

diff --git a/packages/carbon-components-react/scss/components/ai-label/_ai-label.scss b/packages/carbon-components-react/scss/components/ai-label/_ai-label.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label/ai-label';
diff --git a/packages/carbon-components-react/scss/components/ai-label/_index.scss b/packages/carbon-components-react/scss/components/ai-label/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label';
diff --git a/packages/carbon-components/scss/components/ai-label/_ai-label.scss b/packages/carbon-components/scss/components/ai-label/_ai-label.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label/ai-label';
diff --git a/packages/carbon-components/scss/components/ai-label/_index.scss b/packages/carbon-components/scss/components/ai-label/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label';
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/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 {
@@ -10758,12 +10906,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 [
@@ -10791,6 +10940,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "aria-label": Object {
+        "type": "string",
+      },
       "autoAlign": Object {
         "type": "bool",
       },
@@ -10832,10 +10984,8 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slugContent": Object {
-        "type": "node",
-      },
-      "slugLabel": Object {
+      "slugLabel": [Function],
+      "textLabel": Object {
         "type": "string",
       },
     },

diff --git a/packages/react/scss/components/ai-label/_ai-label.scss b/packages/react/scss/components/ai-label/_ai-label.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/ai-label/ai-label';