feat(Tearsheet): Slug to aiLabel

cspell.json

@@ -99,6 +99,7 @@
     "disttags",
     "dragbar",
     "draggable",
+    "interstitialscreenviewmodule",
     "draghandle",
     "dragmode",
     "editinplace",

e2e/components/Tearsheet/TearsheetNarrow-test.avt.e2e.js

@@ -168,7 +168,7 @@ test.describe('TearsheetNarrow @avt', () => {
     await expect(page).toHaveNoACViolations(
       'TearsheetNarrow @avt-all-header-items'
     );
-    await expect(page.locator('.slug-container')).toBeInViewport();
+    await expect(page.locator('.ai-label-container')).toBeInViewport();
 
     // Selecting the first slug button
     const slugButton1 = page

packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss

@@ -110,6 +110,8 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug
+    .#{$block-class}__container,
+  &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-ai-label
     .#{$block-class}__container {
     border: 1px solid transparent;
     border-bottom: 0;
@@ -276,11 +278,15 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--wide
     .#{$block-class}__header.#{$block-class}__header--with-close-icon,
-  &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
+  &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header,
+  &.#{$block-class}--has-ai-label
+    .#{$block-class}__header.#{$block-class}__header {
     padding-inline-end: $spacing-11;
   }
 
   &.#{$block-class}--wide.#{$block-class}--has-slug
+    .#{$block-class}__header.#{$block-class}__header--with-close-icon,
+  &.#{$block-class}--wide.#{$block-class}--has-ai-label
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
     /* spacing 11 plus additional space for slug/close */
     /* stylelint-disable-next-line carbon/layout-token-use */
@@ -362,7 +368,8 @@ $motion-duration: $duration-moderate-02;
     flex-grow: 1;
   }
 
-  &.#{$block-class}--has-slug .#{$block-class}__content {
+  &.#{$block-class}--has-slug .#{$block-class}__content,
+  &.#{$block-class}--has-ai-label .#{$block-class}__content {
     @include utilities.ai-popover-gradient('default', 0);
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
@@ -418,12 +425,15 @@ $motion-duration: $duration-moderate-02;
     background: $background;
   }
 
-  &.#{$block-class}--has-slug {
+  &.#{$block-class}--has-slug,
+  &.#{$block-class}--has-ai-label {
     /* stylelint-disable-next-line carbon/theme-token-use */
     --overlay-color: #{$ai-overlay};
   }
 
   &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
+    .#{$carbon-prefix}--slug,
+  &.#{$block-class}--has-ai-label:not(.#{$block-class}--has-close)
     .#{$carbon-prefix}--slug {
     inset-inline-end: 0;
     margin-block: 6px;

packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.jsx

@@ -23,8 +23,8 @@ import {
   TabPanel,
   TabList,
   TextInput,
-  unstable__Slug as Slug,
-  unstable__SlugContent as SlugContent,
+  AILabel,
+  AILabelContent,
 } from '@carbon/react';
 
 import { Tearsheet, deprecatedProps } from './Tearsheet';
@@ -102,15 +102,29 @@ export default {
     navigation: { control: { disable: true } },
     open: { control: { disable: true } },
     portalTarget: { control: { disable: true } },
+    aiLabel: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'No AI Label',
+          1: 'with AI Label',
+        },
+        default: 0,
+      },
+      description:
+        'Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.',
+      options: [0, 1],
+    },
     slug: {
       control: {
         type: 'select',
         labels: {
-          0: 'No AI slug',
+          0: 'No AI Slug',
           1: 'with AI Slug',
         },
         default: 0,
       },
+      description: 'Deprecated: Property replaced by "aiLabel"',
       options: [0, 1],
     },
   },
@@ -158,9 +172,9 @@ const mainContent = (
 
 const title = 'Title of the tearsheet';
 
-const sampleSlug = (
-  <Slug className="slug-container" size="xs">
-    <SlugContent>
+const sampleAILabel = (
+  <AILabel className="ai-label-container" size="xs">
+    <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
         <h1>84%</h1>
@@ -174,13 +188,13 @@ const sampleSlug = (
         <p className="secondary">Model type</p>
         <p className="bold">Foundation model</p>
       </div>
-    </SlugContent>
-  </Slug>
+    </AILabelContent>
+  </AILabel>
 );
 
 // Template.
 // eslint-disable-next-line react/prop-types
-const Template = ({ actions, slug, ...args }) => {
+const Template = ({ actions, aiLabel, slug, ...args }) => {
   const [open, setOpen] = useState(false);
 
   const wiredActions =
@@ -211,7 +225,8 @@ const Template = ({ actions, slug, ...args }) => {
           actions={wiredActions}
           open={open}
           onClose={() => setOpen(false)}
-          slug={slug && sampleSlug}
+          aiLabel={aiLabel && sampleAILabel}
+          slug={slug && sampleAILabel}
         >
           {mainContent}
         </Tearsheet>
@@ -231,7 +246,7 @@ const tabs = (
   </div>
 );
 
-const TemplateWithNav = ({ actions, slug, ...args }) => {
+const TemplateWithNav = ({ actions, aiLabel, slug, ...args }) => {
   const [open, setOpen] = useState(false);
 
   const wiredActions =
@@ -263,7 +278,8 @@ const TemplateWithNav = ({ actions, slug, ...args }) => {
             actions={wiredActions}
             open={open}
             onClose={() => setOpen(false)}
-            slug={slug && sampleSlug}
+            aiLabel={aiLabel && sampleAILabel}
+            slug={slug && sampleAILabel}
           >
             <TabPanels>
               <TabPanel>Tab 1</TabPanel>
@@ -278,7 +294,7 @@ const TemplateWithNav = ({ actions, slug, ...args }) => {
   );
 };
 
-const ReturnFocusTemplate = ({ actions, slug, ...args }) => {
+const ReturnFocusTemplate = ({ actions, aiLabel, slug, ...args }) => {
   const [open, setOpen] = useState(false);
   const buttonRef = useRef(undefined);
 
@@ -312,7 +328,8 @@ const ReturnFocusTemplate = ({ actions, slug, ...args }) => {
           actions={wiredActions}
           open={open}
           onClose={() => setOpen(false)}
-          slug={slug && sampleSlug}
+          aiLabel={aiLabel && sampleAILabel}
+          slug={slug && sampleAILabel}
           launcherButtonRef={buttonRef}
         >
           {mainContent}
@@ -322,9 +339,8 @@ const ReturnFocusTemplate = ({ actions, slug, ...args }) => {
   );
 };
 
-const FirstElementDisabledTemplate = ({ actions, slug, ...args }) => {
+const FirstElementDisabledTemplate = ({ actions, aiLabel, slug, ...args }) => {
   const [open, setOpen] = useState(false);
-
   const wiredActions =
     actions &&
     Array.prototype.map.call(actions, (action) => {
@@ -342,7 +358,6 @@ const FirstElementDisabledTemplate = ({ actions, slug, ...args }) => {
     });
 
   const ref = useRef(undefined);
-
   return (
     <>
       <style>{`.${pkg.prefix}--tearsheet { opacity: 0 }`};</style>
@@ -353,7 +368,8 @@ const FirstElementDisabledTemplate = ({ actions, slug, ...args }) => {
           actions={wiredActions}
           open={open}
           onClose={() => setOpen(false)}
-          slug={slug && sampleSlug}
+          aiLabel={aiLabel && sampleAILabel}
+          slug={slug && sampleAILabel}
         >
           <div className="tearsheet-stories__dummy-content-block">
             <Form>
@@ -389,7 +405,7 @@ const FirstElementDisabledTemplate = ({ actions, slug, ...args }) => {
 };
 
 // eslint-disable-next-line react/prop-types
-const StackedTemplate = ({ mixedSizes, actions, slug, ...args }) => {
+const StackedTemplate = ({ mixedSizes, actions, aiLabel, slug, ...args }) => {
   const [open1, setOpen1] = useState(false);
   const [open2, setOpen2] = useState(false);
   const [open3, setOpen3] = useState(false);
@@ -485,7 +501,8 @@ const StackedTemplate = ({ mixedSizes, actions, slug, ...args }) => {
           open={open1}
           onClose={() => setOpen1(false)}
           selectorPrimaryFocus="#stacked-input-1"
-          slug={slug && sampleSlug}
+          aiLabel={aiLabel && sampleAILabel}
+          slug={slug && sampleAILabel}
         >
           <div className="tearsheet-stories__dummy-content-block">
             Main content 1
@@ -515,7 +532,8 @@ const StackedTemplate = ({ mixedSizes, actions, slug, ...args }) => {
           open={open2}
           onClose={() => setOpen2(false)}
           selectorPrimaryFocus="#stacked-input-2"
-          slug={slug && sampleSlug}
+          aiLabel={aiLabel && sampleAILabel}
+          slug={slug && sampleAILabel}
         >
           <div className="tearsheet-stories__dummy-content-block">
             Main content 2
@@ -533,7 +551,8 @@ const StackedTemplate = ({ mixedSizes, actions, slug, ...args }) => {
             open={open3}
             onClose={() => setOpen3(false)}
             selectorPrimaryFocus="#stacked-input-3"
-            slug={slug && sampleSlug}
+            aiLabel={aiLabel && sampleAILabel}
+            slug={slug && sampleAILabel}
           >
             <div className="tearsheet-stories__dummy-content-block">
               Main content 3
@@ -622,7 +641,8 @@ fullyLoaded.args = {
   onClose: action('onClose called'),
   title,
   actions: 0,
-  slug: 1,
+  aiLabel: 1,
+  slug: 0,
 };
 
 // eslint-disable-next-line react/prop-types

packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.stories.jsx

@@ -16,8 +16,8 @@ import {
   Form,
   FormGroup,
   TextInput,
-  unstable__Slug as Slug,
-  unstable__SlugContent as SlugContent,
+  AILabel,
+  AILabelContent,
 } from '@carbon/react';
 
 import { TearsheetNarrow, deprecatedProps } from './TearsheetNarrow';
@@ -59,15 +59,29 @@ export default {
     onClose: { control: { disable: true } },
     open: { control: { disable: true } },
     portalTarget: { control: { disable: true } },
+    aiLabel: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'No AI Label',
+          1: 'with AI Label',
+        },
+        default: 0,
+      },
+      description:
+        'Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.',
+      options: [0, 1],
+    },
     slug: {
       control: {
         type: 'select',
         labels: {
-          0: 'No AI slug',
+          0: 'No AI Slug',
           1: 'with AI Slug',
         },
         default: 0,
       },
+      description: 'deprecated Property replaced by "aiLabel"',
       options: [0, 1],
     },
   },
@@ -99,9 +113,9 @@ const mainContent = (
 
 const title = 'Title of the tearsheet';
 
-const sampleSlug = (
-  <Slug className="slug-container" size="xs">
-    <SlugContent>
+const sampleAILabel = (
+  <AILabel className="ai-label-container" size="xs">
+    <AILabelContent>
       <div>
         <p className="secondary">AI Explained</p>
         <h1>84%</h1>
@@ -115,13 +129,13 @@ const sampleSlug = (
         <p className="secondary">Model type</p>
         <p className="bold">Foundation model</p>
       </div>
-    </SlugContent>
-  </Slug>
+    </AILabelContent>
+  </AILabel>
 );
 
 // Template.
 // eslint-disable-next-line react/prop-types
-const Template = ({ actions, slug, ...args }) => {
+const Template = ({ actions, aiLabel, slug, ...args }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef(undefined);
 
@@ -149,7 +163,8 @@ const Template = ({ actions, slug, ...args }) => {
           actions={wiredActions}
           open={open}
           onClose={() => setOpen(false)}
-          slug={slug && sampleSlug}
+          aiLabel={aiLabel && sampleAILabel}
+          slug={slug && sampleAILabel}
         >
           {mainContent}
         </TearsheetNarrow>
@@ -159,7 +174,7 @@ const Template = ({ actions, slug, ...args }) => {
 };
 
 // eslint-disable-next-line react/prop-types
-const StackedTemplate = ({ actions, slug, ...args }) => {
+const StackedTemplate = ({ actions, aiLabel, slug, ...args }) => {
   const [open1, setOpen1] = useState(false);
   const [open2, setOpen2] = useState(false);
   const [open3, setOpen3] = useState(false);
@@ -231,7 +246,8 @@ const StackedTemplate = ({ actions, slug, ...args }) => {
           title="Tearsheet #1"
           open={open1}
           onClose={() => setOpen1(false)}
-          slug={slug && sampleSlug}
+          aiLabel={aiLabel && sampleAILabel}
+          slug={slug && sampleAILabel}
         >
           <div className="tearsheet-stories__narrow-content-block">
             Main content 1
@@ -243,7 +259,8 @@ const StackedTemplate = ({ actions, slug, ...args }) => {
           title="Tearsheet #2"
           open={open2}
           onClose={() => setOpen2(false)}
-          slug={slug && sampleSlug}
+          aiLabel={aiLabel && sampleAILabel}
+          slug={slug && sampleAILabel}
           selectorPrimaryFocus="#main-content"
         >
           <div className="tearsheet-stories__narrow-content-block">
@@ -256,7 +273,8 @@ const StackedTemplate = ({ actions, slug, ...args }) => {
           title="Tearsheet #3"
           open={open3}
           onClose={() => setOpen3(false)}
-          slug={slug && sampleSlug}
+          aiLabel={aiLabel && sampleAILabel}
+          slug={slug && sampleAILabel}
           selectorPrimaryFocus="#main-content"
         >
           <div className="tearsheet-stories__narrow-content-block">
@@ -289,7 +307,8 @@ fullyLoaded.args = {
   onClose: action('onClose called'),
   title,
   actions: 0,
-  slug: 1,
+  aiLabel: 1,
+  slug: 0,
 };
 
 export const stacked = StackedTemplate.bind({});