feat(Slug): implement phase 3 updates, adjust token values (#15943)

* feat(Slug): update Slug to phase 3 specs * feat(AI): update ai token values * fix(g10): update ai-popover-shadow-outer tokens * fix(theme): update ai popover caret tokens * test(Slug): fix some issues with storybook changes * fix(Slug): add new ai-aura-start-sm token, revert ai-aura-start changes * test(Slug): update snaps
carbon-design-system · Mar 19, 2024 · efdac19 · efdac19
1 parent 7920f52
commit efdac19
Show file tree

Hide file tree

Showing 19 changed files with 167 additions and 441 deletions.
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7,13 +7,14 @@ Array [
   "aiAuraHoverEnd",
   "aiAuraHoverStart",
   "aiAuraStart",
-  "aiAuraStartTable",
+  "aiAuraStartSm",
   "aiBorderEnd",
   "aiBorderStart",
   "aiBorderStrong",
   "aiDropShadow",
   "aiInnerShadow",
   "aiOverlay",
+  "aiPopoverBackground",
   "aiPopoverCaretBottom",
   "aiPopoverCaretBottomBackground",
   "aiPopoverCaretBottomBackgroundActions",
@@ -308,11 +309,6 @@ Array [
   "skeletonElement",
   "slow01",
   "slow02",
-  "slugBackground",
-  "slugBackgroundHover",
-  "slugGradient",
-  "slugGradientHover",
-  "slugHollowHover",
   "spacing",
   "spacing01",
   "spacing02",

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -10453,20 +10453,10 @@ Map {
       "className": Object {
         "type": "string",
       },
-      "dotType": Object {
-        "args": Array [
-          Array [
-            "default",
-            "hollow",
-          ],
-        ],
-        "type": "oneOf",
-      },
       "kind": Object {
         "args": Array [
           Array [
             "default",
-            "hollow",
             "inline",
           ],
         ],

diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/Slug/Slug.mdx
@@ -17,7 +17,6 @@ import * as SlugStories from './Slug.stories';
 - [Component API](#component-api)
   - [Slug `aiText`](#slug-aitext)
   - [Slug `aiTextLabel`](#slug-aitextlabel)
-  - [Slug `dotType`](#slug-dottype)
   - [Slug `kind`](#slug-kind)
   - [Slug `revertActive` and `onRevertClick`](#slug-revertactive-and-onrevertclick)
 - [Feedback](#feedback)
@@ -114,57 +113,16 @@ the `aiTextLabel` prop.
 </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.
-
-<Slug
-  kind="inline"
-  dotType="default"
-  aiTextLabel="Text goes here"
-  className="sbdocs-slug">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
-<br />
-<Slug
-  kind="inline"
-  dotType="hollow"
-  aiTextLabel="Text goes here"
-  className="sbdocs-slug">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
-
-```jsx
-<Slug
-  kind="inline"
-  dotType="default"
-  aiTextLabel="Text goes here">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</Slug>
-
-<Slug
-  kind="inline"
-  dotType="hollow"
-  aiTextLabel="Text goes here">
-  <SlugContent>Explanation of AI generated content</SlugContent>
-</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`.
 
-<Slug kind="hollow" size="xs" className="sbdocs-slug">
+<Slug size="xs" className="sbdocs-slug">
   <SlugContent>AI was used to generate this content</SlugContent>
 </Slug>
 
 ```jsx
-<Slug kind="hollow" size="xs">
+<Slug size="xs">
   <SlugContent>AI was used to generate this content</SlugContent>
 </Slug>
 ```

diff --git a/packages/react/src/components/Slug/Slug.stories.js b/packages/react/src/components/Slug/Slug.stories.js
@@ -41,8 +41,6 @@ const aiContent = (
   </div>
 );
 
-const content = <span>AI was used to generate this content</span>;
-
 export const Default = () => (
   <>
     <div className="slug-container slug-container-example">
@@ -138,17 +136,6 @@ export const Default = () => (
         </SlugContent>
       </Slug>
     </div>
-    <div className="slug-container-example slug-container">
-      <Slug kind="hollow" autoAlign size="mini">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug kind="hollow" autoAlign size="2xs">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug kind="hollow" autoAlign size="xs">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-    </div>
     <div className="slug-container-example slug-container">
       <Slug autoAlign kind="inline" size="sm">
         <SlugContent>
@@ -255,43 +242,6 @@ export const Default = () => (
         </SlugContent>
       </Slug>
     </div>
-    <div className="slug-container-example slug-container">
-      <Slug autoAlign kind="inline" dotType="hollow" size="sm">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug autoAlign kind="inline" dotType="hollow" size="md">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug autoAlign kind="inline" dotType="hollow" size="lg">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-    </div>
-    <div className="slug-container-example slug-container">
-      <Slug
-        autoAlign
-        kind="inline"
-        dotType="hollow"
-        size="sm"
-        aiTextLabel="Text goes here">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug
-        autoAlign
-        kind="inline"
-        dotType="hollow"
-        size="md"
-        aiTextLabel="Text goes here">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-      <Slug
-        autoAlign
-        kind="inline"
-        dotType="hollow"
-        size="lg"
-        aiTextLabel="Text goes here">
-        <SlugContent>{content}</SlugContent>
-      </Slug>
-    </div>
   </>
 );
 
@@ -373,11 +323,6 @@ Callout.argTypes = {
       disable: true,
     },
   },
-  dotType: {
-    table: {
-      disable: true,
-    },
-  },
   kind: {
     table: {
       disable: true,
@@ -411,43 +356,38 @@ Callout.argTypes = {
 };
 
 export const Playground = (args) => {
-  const { kind, dotType, showSlugActions = true } = args;
+  const { showSlugActions = true } = args;
 
-  let renderedContent;
-  if (kind === 'hollow' || dotType === 'hollow') {
-    renderedContent = content;
-  } else {
-    renderedContent = (
-      <>
-        <div>
-          <p className="secondary">AI Explained</p>
-          <h1>84%</h1>
-          <p className="secondary bold">Confidence score</p>
-          <p className="secondary">
-            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-          </p>
-          <hr />
-          <p className="secondary">Model type</p>
-          <p className="bold">Foundation model</p>
-        </div>
-        {showSlugActions && (
-          <SlugActions>
-            <IconButton kind="ghost" label="View">
-              <View />
-            </IconButton>
-            <IconButton kind="ghost" label="Open Folder">
-              <FolderOpen />
-            </IconButton>
-            <IconButton kind="ghost" label="Folders">
-              <Folders />
-            </IconButton>
-            <Button>View details</Button>
-          </SlugActions>
-        )}
-      </>
-    );
-  }
+  const renderedContent = (
+    <>
+      <div>
+        <p className="secondary">AI Explained</p>
+        <h1>84%</h1>
+        <p className="secondary bold">Confidence score</p>
+        <p className="secondary">
+          Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+        </p>
+        <hr />
+        <p className="secondary">Model type</p>
+        <p className="bold">Foundation model</p>
+      </div>
+      {showSlugActions && (
+        <SlugActions>
+          <IconButton kind="ghost" label="View">
+            <View />
+          </IconButton>
+          <IconButton kind="ghost" label="Open Folder">
+            <FolderOpen />
+          </IconButton>
+          <IconButton kind="ghost" label="Folders">
+            <Folders />
+          </IconButton>
+          <Button>View details</Button>
+        </SlugActions>
+      )}
+    </>
+  );
 
   return (
     <>

diff --git a/packages/react/src/components/Slug/__tests__/Slug-test.js b/packages/react/src/components/Slug/__tests__/Slug-test.js
@@ -54,12 +54,6 @@ describe('Slug', () => {
       );
     });
 
-    it('should respect dotType prop', () => {
-      const { container } = render(<Slug kind="inline" dotType="hollow" />);
-
-      expect(container.firstChild).toHaveClass(`${prefix}--slug--hollow`);
-    });
-
     it('should respect kind prop', () => {
       render(<Slug kind="inline" />);
 

diff --git a/packages/react/src/components/Slug/index.js b/packages/react/src/components/Slug/index.js
@@ -93,7 +93,6 @@ export const Slug = React.forwardRef(function Slug(
     autoAlign = true,
     children,
     className,
-    dotType,
     kind = 'default',
     onRevertClick,
     revertActive,
@@ -110,11 +109,6 @@ export const Slug = React.forwardRef(function Slug(
 
   const slugClasses = cx(className, {
     [`${prefix}--slug`]: true,
-    [`${prefix}--slug--hollow`]: kind === 'hollow' || dotType === 'hollow',
-    // Need to come up with a better name; explainable?
-    // Need to be able to target the non-hollow variant another way
-    // other than using `:not` all over the styles
-    [`${prefix}--slug--enabled`]: kind !== 'hollow' && dotType !== 'hollow',
     [`${prefix}--slug--revert`]: revertActive,
   });
 
@@ -212,15 +206,10 @@ Slug.propTypes = {
    */
   className: PropTypes.string,
 
-  /**
-   * Specify the type of dot that should be rendered in front of the inline variant
-   */
-  dotType: PropTypes.oneOf(['default', 'hollow']),
-
   /**
    * Specify the type of Slug, from the following list of types:
    */
-  kind: PropTypes.oneOf(['default', 'hollow', 'inline']),
+  kind: PropTypes.oneOf(['default', 'inline']),
 
   /**
    * Callback function that fires when the revert button is clicked

diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js
@@ -127,16 +127,12 @@ describe('@carbon/styles/scss/theme', () => {
         "support-caution-major",
         "support-caution-minor",
         "support-caution-undefined",
-        "slug-background",
-        "slug-gradient",
-        "slug-background-hover",
-        "slug-gradient-hover",
-        "slug-hollow-hover",
+        "ai-popover-background",
         "ai-popover-shadow-outer-01",
         "ai-popover-shadow-outer-02",
         "ai-inner-shadow",
+        "ai-aura-start-sm",
         "ai-aura-start",
-        "ai-aura-start-table",
         "ai-aura-end",
         "ai-aura-hover-background",
         "ai-aura-hover-start",

diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss
@@ -1083,7 +1083,7 @@
     // Same gradient as background
     border-block-start: linear-gradient(
       to right,
-      $ai-aura-start-table 0%,
+      $ai-aura-start-sm 0%,
       $ai-aura-end 50%,
       transparent 50%
     );

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -461,15 +461,16 @@
     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;
   }
 
   .#{$prefix}--modal--slug
     .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) {
     @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;
   }
 
   .#{$prefix}--modal--slug .#{$prefix}--slug {