feat(slug): ai slug updates (carbon-design-system#11716)

### Related Ticket(s) Closes #[11674](carbon-design-system#11674) ### Description Following changes from Carbon core (carbon-design-system/carbon#15943) to update the AI slug. This sets the `hollow` variation to default. <img width="716" alt="Screenshot 2024-04-11 at 4 24 29 PM" src="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/assets/54281166/11b971cf-70dd-406e-87f2-8bc824c92d28"> ### Changelog **Changed** - set `hollow` variation styles to be the default slug styles - adjust box-shadow values to match changes from Carbon **Removed** - remove references to the `hollow` slug variation - removed the dot-type property from slug
annawen1 · Apr 15, 2024 · e9fa12f · e9fa12f
1 parent f7ca107
commit e9fa12f
Show file tree

Hide file tree

Showing 20 changed files with 136 additions and 448 deletions.
diff --git a/.yarn/cache/@carbon-feature-flags-npm-0.18.0-a39c189e14-66201ba5a5.zip b/.yarn/cache/@carbon-feature-flags-npm-0.18.0-a39c189e14-66201ba5a5.zip
diff --git a/.yarn/cache/@carbon-styles-npm-1.53.0-32e9b8c543-b13e02fd2d.zip b/.yarn/cache/@carbon-styles-npm-1.53.0-32e9b8c543-b13e02fd2d.zip
diff --git a/.yarn/cache/@carbon-themes-npm-11.33.0-adcf3f2da4-6ec00956c0.zip b/.yarn/cache/@carbon-themes-npm-11.33.0-adcf3f2da4-6ec00956c0.zip
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <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) {
@@ -24,7 +24,7 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/slug/v2/latest/slug.min.js"></script>
 </head>
 <body class="cds-theme-zone-white">
-  <cds-slug size="mini" kind="hollow" alignment="bottom-left">
+  <cds-slug size="mini" alignment="bottom-left">
     <span slot="body-text">AI was used to generate this content</span>
   </cds-slug>
 </body>

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/index.html
@@ -13,7 +13,7 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  
+
   <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
@@ -24,7 +24,7 @@
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <cds-slug size="mini" kind="hollow" alignment="bottom-left">
+  <cds-slug size="mini" alignment="bottom-left">
     <span slot="body-text">AI was used to generate this content</span>
   </cds-slug>
 </body>

diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json
@@ -71,7 +71,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@carbon/ibm-products-styles": "^2.30.1",
-    "@carbon/styles": "1.53.0",
+    "@carbon/styles": "1.54.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.2.1",
     "flatpickr": "4.6.13",

diff --git a/packages/carbon-web-components/src/components/modal/modal.scss b/packages/carbon-web-components/src/components/modal/modal.scss
@@ -155,14 +155,15 @@
   border: 1px solid transparent;
   background-color: $layer;
   box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
-    0 4px 10px 2px $ai-drop-shadow;
+    0 24px 40px -24px $ai-drop-shadow;
 }
 
 :host(#{$prefix}-modal[slug][has-footer]) .#{$prefix}--modal-container {
   @include ai-popover-gradient('default', 64px, 'layer');
 
   box-shadow: inset 0 -80px 0 -16px $layer,
-    inset 0 -160px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow;
+    inset 0 -160px 70px -65px $ai-inner-shadow,
+    0 24px 40px -24px $ai-drop-shadow;
 }
 
 :host(#{$prefix}-modal[slug][has-scrolling-content]) {

diff --git a/packages/carbon-web-components/src/components/popover/autoalign-story.ts b/packages/carbon-web-components/src/components/popover/autoalign-story.ts
@@ -70,10 +70,6 @@ const content = html`
   </div>
 `;
 
-const hollowContent = html`<span slot="body-text"
-  >AI was used to generate this content</span
->`;
-
 const actions = html`
   <cds-icon-button kind="ghost" slot="actions" size="lg">
     ${View16({ slot: 'icon' })}
@@ -245,8 +241,7 @@ export const Slug = (args) => {
         dot-type="${dotType}"
         ai-text-label="${aiTextLabel}"
         ?revert-active="${revertActive}">
-        ${kind === 'hollow' || dotType === 'hollow' ? hollowContent : content}
-        ${kind === 'hollow' || dotType === 'hollow' ? '' : actions}
+        ${content} ${actions}
       </cds-slug>
     </div>
   `;
@@ -255,15 +250,7 @@ export const Slug = (args) => {
 Slug.parameters = {
   knobs: {
     [`${prefix}-slug`]: () => {
-      const kind = select(
-        'Kind (kind)',
-        ['default', 'hollow', 'inline'],
-        'default'
-      );
-      const dotType =
-        kind === 'inline'
-          ? select('DotType (dotType)', ['default', 'hollow'], 'default')
-          : ``;
+      const kind = select('Kind (kind)', ['default', 'inline'], 'default');
 
       return {
         alignment: select(
@@ -273,7 +260,6 @@ Slug.parameters = {
         ),
         size: select('Slug size (size)', sizes, SLUG_SIZE.EXTRA_SMALL),
         kind,
-        dotType,
         aiTextLabel: textNullable('Ai text label', ''),
         revertActive: boolean('Revert active', false),
       };

diff --git a/packages/carbon-web-components/src/components/popover/popover.scss b/packages/carbon-web-components/src/components/popover/popover.scss
@@ -106,6 +106,11 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
+:host(#{$prefix}-slug[alignment^='bottom']:not([autoalign]))
+  .#{$prefix}--popover-caret {
+  clip-path: none;
+}
+
 :host(#{$prefix}-tooltip-content[align='bottom']:not([autoalign])),
 :host(#{$prefix}-popover-content[align='bottom']:not([autoalign])),
 :host(#{$prefix}-toggletip[alignment='bottom']:not([autoalign])),

diff --git a/packages/carbon-web-components/src/components/slug/defs.ts b/packages/carbon-web-components/src/components/slug/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022, 2023
+ * Copyright IBM Corp. 2020, 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.
@@ -56,28 +56,8 @@ export enum SLUG_KIND {
    */
   DEFAULT = '',
 
-  /**
-   * Hollow kind.
-   */
-  HOLLOW = 'hollow',
-
   /**
    * Inline kind.
    */
   INLINE = 'inline',
 }
-
-/**
- * Slug dot type.
- */
-export enum SLUG_DOT_TYPE {
-  /**
-   * Default dot type.
-   */
-  DEFAULT = '',
-
-  /**
-   * Hollow dot type.
-   */
-  HOLLOW = 'hollow',
-}
diff --git a/packages/carbon-web-components/src/components/slug/slug-story.mdx b/packages/carbon-web-components/src/components/slug/slug-story.mdx
@@ -9,7 +9,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 
 [![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/slug)
 
-The AI slug is intended for any scenario where something is being generated by (or with) AI to reinforce AI transparency, accountability, and explainability at any interface level. This also enables more effective recognition and recall of AI instances in a way that is identifiable across any IBM product.
+The AI slug is intended for any scenario where something is being generated by
+(or with) AI to reinforce AI transparency, accountability, and explainability at
+any interface level. This also enables more effective recognition and recall of
+AI instances in a way that is identifiable across any IBM product.
 
 ## Getting started
 
@@ -32,22 +35,20 @@ import '@carbon/web-components/es/components/slug/index.js';
 
 ```html
 <cds-slug size="mini" alignment="bottom-left">
-  <div slot="body-text">
-   {Content Here}
-  </div>
+  <div slot="body-text">{Content Here}</div>
 </cds-slug>
 ```
 
 ### HTML (with actions)
 
 The `Slug` also supports the rendering of an action bar at the bottom of the
-callout. To achieve this, you can add elements with `slot="actions"` inside the `slot="body-text"` element
+callout. To achieve this, you can add elements with `slot="actions"` inside the
+`slot="body-text"` element
 
 ```html
 <cds-slug size="mini" alignment="bottom-left">
   <div slot="body-text">
-   {Content Here}
-   {Optional Slug action bar}
+    {Content Here} {Optional Slug action bar}
     <cds-icon-button kind="ghost" slot="actions" size="lg">
       ${View16({ slot: 'icon' })}
       <span slot="tooltip-content"> View </span>
@@ -70,12 +71,9 @@ callout. To achieve this, you can add elements with `slot="actions"` inside the
 If needed, you can change the text inside the `Slug` when translating to
 different languages.
 
-
 ```html
 <cds-slug ai-text="IA">
-  <div slot="body-text">
-   Explanation of AI-generated content
-  </div>
+  <div slot="body-text">Explanation of AI-generated content</div>
 </cds-slug>
 ```
 
@@ -86,43 +84,23 @@ the `ai-text-label` prop.
 
 ```html
 <cds-slug kind="inline" ai-text-label="Text goes here">
-  <div slot="body-text">
-   Explanation of AI-generated content
-  </div>
-</cds-slug>
-```
-
-### Slug `dotType`
-
-When using the `inline` variant, you can switch between the `hollow` slug for
-content that does not need additional explainability or the `default` variant
-that will render the AI callout.
-
-```html
-<cds-slug kind="inline" dot-type="hollow" ai-text-label="Text goes here">
-  <div slot="body-text">
-   Explanation of AI-generated content
-  </div>
+  <div slot="body-text">Explanation of AI-generated content</div>
 </cds-slug>
 ```
 
 ### Slug `kind`
 
-The `Slug` component has three variants, `default`, `hollow`, and `inline`. The
-`hollow` slugs represent items that don’t have any additional explainability.
-Therefore they don’t use the AI callout and instead use the standard Carbon
-tooltip, with a simple message.
+The `Slug` component has two variants, `default` and `inline`.
 
 ```html
-<cds-slug kind="hollow" size="xs">
+<cds-slug size="xs">
   <div slot="body-text">AI was used to generate this content</div>
 </cds-slug>
 ```
 
 The `inline` `Slug` with the standard icon can also trigger the AI
 explainability callout.
 
-
 ```html
 <cds-slug kind="inline" ai-text-label="Text goes here" size="xs">
   <div slot="body-text">Explanation of AI-generated content</div>
@@ -146,4 +124,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-slug revert-active>`) and `false` means not setting the attribute (e.g.
 `<cds-slug>` without `revertActive` attribute).
 
-<Props of="cds-slug" />
+<Props of="cds-slug" />