chore(AI Label): web components - rename Slug to AI Label (#17739)

* chore: rename ai slug to ai label * chore: rename to ai-label * chore: rename slug example to ai-label * chore: add ai label to form group stories * chore: rename handle slug slot change methods * chore: all stories shifted * fix: fix radio-button with ai-label * fix: modal ai-label styles * chore: rename test files to ai-label * chore: add space between AI and Label in docs * chore: undo changes to tearsheet and side-panel * chore: keep slug component as deprecated * chore: restore readme * fix: specify js extensions for icon imports (#17818) * chore: add extensions to icons in stories * fix: show actions for playground and datatable sort * fix: catch both slug and ai-label in event handlers
carbon-design-system · Oct 22, 2024 · b543079 · b543079
1 parent f0225b5
commit b543079
Show file tree

Hide file tree

Showing 94 changed files with 3,055 additions and 1,773 deletions.
diff --git a/e2e/components/AILabel/Slug-test.avt.e2e.js → ...omponents/AILabel/AILabel-test.avt.e2e.js b/e2e/components/AILabel/Slug-test.avt.e2e.js → ...omponents/AILabel/AILabel-test.avt.e2e.js
diff --git a/e2e/components/AILabel/Slug-test.e2e.js → e2e/components/AILabel/AILabel-test.e2e.js b/e2e/components/AILabel/Slug-test.e2e.js → e2e/components/AILabel/AILabel-test.e2e.js
diff --git a/packages/web-components/examples/autoalign/cdn.html b/packages/web-components/examples/autoalign/cdn.html
@@ -43,7 +43,7 @@
     ></script>
     <script
       type="module"
-      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/slug.min.js"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ai-label.min.js"
     ></script>
     <script
       type="module"
@@ -127,7 +127,7 @@
     </div>
 
     <div class="section">
-      <cds-slug autoalign>
+      <cds-ai-label autoalign>
         <div slot="body-text">
           <p class="secondary">AI Explained</p>
           <h1>84%</h1>
@@ -140,7 +140,7 @@ <h1>84%</h1>
           <p class="secondary">Model type</p>
           <p class="bold">Foundation model</p>
         </div>
-      </cds-slug>
+      </cds-ai-label>
     </div>
 
     <script>

diff --git a/packages/web-components/examples/autoalign/index.html b/packages/web-components/examples/autoalign/index.html
@@ -28,7 +28,7 @@
       cds-tooltip:not(:defined) {
         display: none;
       }
-      cds-slug:not(:defined) {
+      cds-ai-label:not(:defined) {
         display: none;
       }
     </style>
@@ -111,7 +111,7 @@
     </div>
 
     <div class="section">
-      <cds-slug autoalign>
+      <cds-ai-label autoalign>
         <div slot="body-text">
           <p class="secondary">AI Explained</p>
           <h1>84%</h1>
@@ -124,7 +124,7 @@ <h1>84%</h1>
           <p class="secondary">Model type</p>
           <p class="bold">Foundation model</p>
         </div>
-      </cds-slug>
+      </cds-ai-label>
     </div>
 
     <script>

diff --git a/packages/web-components/examples/autoalign/src/index.js b/packages/web-components/examples/autoalign/src/index.js
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import "@carbon/web-components/es/components/slug/index.js";
+import "@carbon/web-components/es/components/ai-label/index.js";
 import "@carbon/web-components/es/components/popover/index.js";
 import "@carbon/web-components/es/components/toggle-tip/index.js";
 import "@carbon/web-components/es/components/tooltip/index.js";

diff --git a/...nents/examples/components/slug/.gitignore → ...s/examples/components/ai-label/.gitignore b/...nents/examples/components/slug/.gitignore → ...s/examples/components/ai-label/.gitignore
diff --git a/...mponents/examples/components/slug/.sassrc → ...ents/examples/components/ai-label/.sassrc b/...mponents/examples/components/slug/.sassrc → ...ents/examples/components/ai-label/.sassrc
diff --git a/...ponents/examples/components/slug/cdn.html → ...nts/examples/components/ai-label/cdn.html b/...ponents/examples/components/slug/cdn.html → ...nts/examples/components/ai-label/cdn.html
@@ -17,15 +17,15 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    cds-slug:not(:defined) {
+    cds-ai-label:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/slug/v2/latest/slug.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ai-label.min.js"></script>
 </head>
 <body class="cds-theme-zone-white">
-  <cds-slug size="mini" alignment="bottom-left">
+  <cds-ai-label size="mini" alignment="bottom-left">
     <span slot="body-text">AI was used to generate this content</span>
-  </cds-slug>
+  </cds-ai-label>
 </body>
 </html>
diff --git a/...nents/examples/components/slug/index.html → ...s/examples/components/ai-label/index.html b/...nents/examples/components/slug/index.html → ...s/examples/components/ai-label/index.html
@@ -17,15 +17,15 @@
   <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    cds-slug:not(:defined) {
+    cds-ai-label:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <cds-slug size="mini" alignment="bottom-left">
+  <cds-ai-label size="mini" alignment="bottom-left">
     <span slot="body-text">AI was used to generate this content</span>
-  </cds-slug>
+  </cds-ai-label>
 </body>
 </html>
diff --git a/...nts/examples/components/slug/package.json → ...examples/components/ai-label/package.json b/...nts/examples/components/slug/package.json → ...examples/components/ai-label/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "carbon-web-components-slug-example",
+  "name": "carbon-web-components-ai-label-example",
   "version": "0.1.0",
   "private": true,
   "description": "Sample project for getting started with the Web Components from Carbon.",

diff --git a/...mples/components/slug/sandbox.config.json → ...s/components/ai-label/sandbox.config.json b/...mples/components/slug/sandbox.config.json → ...s/components/ai-label/sandbox.config.json
diff --git a/...nts/examples/components/slug/src/index.js → ...examples/components/ai-label/src/index.js b/...nts/examples/components/slug/src/index.js → ...examples/components/ai-label/src/index.js
@@ -7,4 +7,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import '@carbon/web-components/es/components/slug/index.js';
+import '@carbon/web-components/es/components/ai-label/index.js';
diff --git a/.../examples/components/slug/src/styles.scss → ...mples/components/ai-label/src/styles.scss b/.../examples/components/slug/src/styles.scss → ...mples/components/ai-label/src/styles.scss
diff --git a/...s/examples/components/slug/vite.config.js → ...amples/components/ai-label/vite.config.js b/...s/examples/components/slug/vite.config.js → ...amples/components/ai-label/vite.config.js
diff --git a/packages/web-components/examples/components/side-panel/cdn.html b/packages/web-components/examples/components/side-panel/cdn.html
@@ -26,7 +26,7 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/button.min.js"></script>
   <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/text-input.min.js"></script>
   <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/textarea.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/slug.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/ai-label.min.js"></script>
   <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tabs.min.js"></script>
 </head>
 <body class="cds-theme-zone-white">
@@ -99,8 +99,8 @@ <h5>Section</h5>
     Primary
   </cds-button>
 
-  <!-- slotted slug -->
-  <cds-slug size="xs" alignment="bottom-right">
+  <!-- slotted ai-label -->
+  <cds-ai-label size="xs" alignment="bottom-right">
     <div slot="body-text">
       <p class="secondary">AI Explained</p>
       <h1>84%</h1>
@@ -113,7 +113,7 @@ <h1>84%</h1>
       <p class="secondary">Model type</p>
       <p class="bold">Foundation model</p>
     </div>
-  </cds-slug>
+  </cds-ai-label>
 </cds-side-panel>
 </body>
 <script>

diff --git a/packages/web-components/examples/components/side-panel/index.html b/packages/web-components/examples/components/side-panel/index.html
@@ -93,8 +93,8 @@ <h5>Section</h5>
     Primary
   </cds-button>
 
-  <!-- slotted slug -->
-  <cds-slug size="xs" alignment="bottom-right">
+  <!-- slotted ai-label -->
+  <cds-ai-label size="xs" alignment="bottom-right">
     <div slot="body-text">
       <p class="secondary">AI Explained</p>
       <h1>84%</h1>
@@ -107,7 +107,7 @@ <h1>84%</h1>
       <p class="secondary">Model type</p>
       <p class="bold">Foundation model</p>
     </div>
-  </cds-slug>
+  </cds-ai-label>
 </cds-side-panel>
 </body>
 

diff --git a/packages/web-components/examples/components/side-panel/src/index.js b/packages/web-components/examples/components/side-panel/src/index.js
@@ -11,5 +11,5 @@ import '@carbon/web-components/es/components/side-panel/index.js';
 import '@carbon/web-components/es/components/button/index.js';
 import '@carbon/web-components/es/components/text-input/index.js';
 import '@carbon/web-components/es/components/textarea/index.js';
-import '@carbon/web-components/es/components/slug/index.js';
+import '@carbon/web-components/es/components/ai-label/index.js';
 import '@carbon/web-components/es/components/tabs/index.js';
diff --git a/packages/web-components/examples/components/tearsheet/cdn.html b/packages/web-components/examples/components/tearsheet/cdn.html
@@ -50,7 +50,7 @@
     ></script>
     <script
       type="module"
-      src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/slug.min.js"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/ai-label.min.js"
     ></script>
     <script
       type="module"
@@ -122,8 +122,8 @@ <h5>Section</h5>
         Primary
       </cds-button>
 
-      <!-- slotted slug -->
-      <cds-slug size="xs" alignment="bottom-right">
+      <!-- slotted ai-label -->
+      <cds-ai-label size="xs" alignment="bottom-right">
         <div slot="body-text">
           <p class="secondary">AI Explained</p>
           <h1>84%</h1>
@@ -136,7 +136,7 @@ <h1>84%</h1>
           <p class="secondary">Model type</p>
           <p class="bold">Foundation model</p>
         </div>
-      </cds-slug>
+      </cds-ai-label>
 
       <!-- slotted header-navigation -->
       <div slot="header-navigation">

diff --git a/packages/web-components/examples/components/tearsheet/index.html b/packages/web-components/examples/components/tearsheet/index.html
@@ -93,8 +93,8 @@ <h5>Section</h5>
         Primary
       </cds-button>
 
-      <!-- slotted slug -->
-      <cds-slug size="xs" alignment="bottom-right">
+      <!-- slotted ai-label -->
+      <cds-ai-label size="xs" alignment="bottom-right">
         <div slot="body-text">
           <p class="secondary">AI Explained</p>
           <h1>84%</h1>
@@ -107,7 +107,7 @@ <h1>84%</h1>
           <p class="secondary">Model type</p>
           <p class="bold">Foundation model</p>
         </div>
-      </cds-slug>
+      </cds-ai-label>
 
       <!-- slotted header-navigation -->
       <div slot="header-navigation">

diff --git a/packages/web-components/examples/components/tearsheet/src/index.js b/packages/web-components/examples/components/tearsheet/src/index.js
@@ -11,5 +11,5 @@ import '@carbon/web-components/es/components/tearsheet/index.js';
 import '@carbon/web-components/es/components/button/index.js';
 import '@carbon/web-components/es/components/text-input/index.js';
 import '@carbon/web-components/es/components/textarea/index.js';
-import '@carbon/web-components/es/components/slug/index.js';
+import '@carbon/web-components/es/components/ai-label/index.js';
 import '@carbon/web-components/es/components/tabs/index.js';
diff --git a/packages/web-components/src/components/ai-label/ai-label-action-button.ts b/packages/web-components/src/components/ai-label/ai-label-action-button.ts
@@ -0,0 +1,30 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 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.
+ */
+
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSButton from '../button/button';
+import styles from './ai-label.scss?lit';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+
+/**
+ * AI Label action button.
+ *
+ * @element cds-ai-label-action-button
+ */
+@customElement(`${prefix}-ai-label-action-button`)
+export default class CDSAILabelActionButton extends CDSButton {
+  /**
+   * The shadow slot this ai-label-action should be in.
+   */
+  @property({ reflect: true })
+  slot = 'actions';
+
+  static styles = styles;
+}
diff --git a/...nents/src/components/slug/slug-story.scss → ...c/components/ai-label/ai-label-story.scss b/...nents/src/components/slug/slug-story.scss → ...c/components/ai-label/ai-label-story.scss
@@ -12,7 +12,7 @@
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/config' as *;
 
-.slug-container {
+.ai-label-container {
   display: flex;
   align-items: flex-start;
   margin-block-end: $spacing-12;
@@ -22,7 +22,7 @@
   }
 }
 
-.slug-container-example.centered {
+.ai-label-container-example.centered {
   align-items: center;
   justify-content: center;
   margin: 0;
@@ -56,7 +56,7 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
   margin-block-end: $spacing-05;
 }
 
-.slug-tile-container {
+.ai-label-tile-container {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -78,37 +78,37 @@ div #{$prefix}-selectable-tile::-moz-list-bullet {
   }
 }
 
-.slug-tile-container h4 {
+.ai-label-tile-container h4 {
   margin-block-end: $spacing-05;
 }
 
-.slug-tile-container .ai-data {
+.ai-label-tile-container .ai-data {
   display: flex;
   padding: $spacing-05 0;
   margin-block-start: $spacing-05;
 }
 
-.slug-tile-container .data-container {
+.ai-label-tile-container .data-container {
   inline-size: 126px;
 }
 
-.slug-tile-container .data-container:first-of-type {
+.ai-label-tile-container .data-container:first-of-type {
   margin-inline-end: $spacing-05;
 }
 
-.slug-tile-container p {
+.ai-label-tile-container p {
   @include type-style('body-01');
 }
 
-.slug-tile-container .data-container p {
+.ai-label-tile-container .data-container p {
   @include type-style('label-02');
 }
 
-.slug-tile-container #{$prefix}-tile-below-the-fold-content {
+.ai-label-tile-container #{$prefix}-tile-below-the-fold-content {
   padding-block-start: $spacing-05;
 }
 
-.slug-tile-container #{$prefix}-tile-below-the-fold-content p {
+.ai-label-tile-container #{$prefix}-tile-below-the-fold-content p {
   @include type-style('label-01');
 
   margin: $spacing-03 0 50px;