feat: Tearsheet ai (carbon-design-system#4215)

* chore: wip * feat: tearsheet AI enhancements * feat: add gradient glow to container
paul-balchin-ibm · Feb 22, 2024 · 818ccf9 · 818ccf9
1 parent 9d9588a
commit 818ccf9
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 14 deletions.
diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -2725,6 +2725,12 @@ p.c4p--about-modal__copyright-text:first-child {
   max-height: calc(100% - 3rem);
   transform: translate3d(0, min(95vh, 500px), 0);
 }
+.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
+  border: 1px solid transparent;
+  /* override carbon ai removing background gradient */
+  background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+  box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
+}
 .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
   transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
 }
@@ -2822,8 +2828,11 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-nav {
   padding: 1.5rem 2rem 0;
 }
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
-  padding-right: 4rem;
+.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
+  padding-right: 5rem;
+}
+.c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
+  margin-right: 3rem;
 }
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
   max-width: 80%;
@@ -2876,6 +2885,9 @@ p.c4p--about-modal__copyright-text:first-child {
   overflow: auto;
   flex-grow: 1;
 }
+.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
+}
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -2914,6 +2926,9 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
   background: var(--cds-background, #ffffff);
 }
+.c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
+  inset-inline-end: 0;
+}
 
 .c4p--create-tearsheet-narrow .cds--modal-header__heading,
 .c4p--create-tearsheet-narrow .cds--modal-header__label,

diff --git a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss b/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss
@@ -93,6 +93,22 @@ $motion-duration: $duration-moderate-02;
     transform: translate3d(0, calc(min(95vh, 500px)), 0);
   }
 
+  &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug
+    .#{$block-class}__container {
+    border: 1px solid transparent;
+    /* override carbon ai removing background gradient */
+    background: linear-gradient(to top, var(--cds-layer), var(--cds-layer))
+        padding-box,
+      linear-gradient(
+          to bottom,
+          var(--cds-ai-border-start, #78a9ff),
+          var(--cds-ai-border-end, #d0e2ff)
+        )
+        border-box,
+      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+    box-shadow: 0 4px 10px 2px $ai-drop-shadow;
+  }
+
   // extra specificity to ensure this transition overrides the carbon default
   &.#{$block-class}.#{$block-class} .#{$block-class}__container {
     transition: transform $motion-duration motion(entrance, expressive),
@@ -223,8 +239,14 @@ $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 {
+    padding-right: $spacing-11;
+  }
+
+  &.#{$block-class}--wide.#{$block-class}--has-slug
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
-    padding-right: $spacing-10;
+    margin-right: $spacing-09;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {
@@ -292,6 +314,10 @@ $motion-duration: $duration-moderate-02;
     flex-grow: 1;
   }
 
+  &.#{$block-class}--has-slug .#{$block-class}__main {
+    @include utilities.callout-gradient('default', 0);
+  }
+
   &.#{$block-class}--wide .#{$block-class}__content {
     // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
     .#{$carbon-prefix}--pagination,
@@ -320,7 +346,8 @@ $motion-duration: $duration-moderate-02;
     .#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
     /* stylelint-disable-next-line prettier/prettier */
     .#{$carbon-prefix}--number--light input[type='number'],
-    .#{$carbon-prefix}--date-picker--light .#{$carbon-prefix}--date-picker__input {
+    .#{$carbon-prefix}--date-picker--light
+      .#{$carbon-prefix}--date-picker__input {
       background-color: $field-02;
     }
   }
@@ -340,4 +367,9 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--wide .#{$block-class}__buttons {
     background: $background;
   }
+
+  &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
+    .#{$carbon-prefix}--slug {
+    inset-inline-end: 0;
+  }
 }
diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.js b/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.js
@@ -21,6 +21,8 @@ import {
   Tabs,
   TabList,
   TextInput,
+  unstable__Slug as Slug,
+  unstable__SlugContent as SlugContent,
 } from '@carbon/react';
 
 import { Tearsheet, deprecatedProps } from './Tearsheet';
@@ -102,6 +104,17 @@ export default {
     navigation: { control: { disable: true } },
     open: { control: { disable: true } },
     portalTarget: { control: { disable: true } },
+    slug: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'No AI slug',
+          1: 'with AI Slug',
+        },
+        default: 0,
+      },
+      options: [0, 1],
+    },
   },
 };
 
@@ -160,9 +173,29 @@ const tabs = (
 
 const title = 'Title of the tearsheet';
 
+const sampleSlug = (
+  <Slug className="slug-container" size="xs">
+    <SlugContent>
+      <div>
+        <p className="secondary">AI Explained</p>
+        <h1>84%</h1>
+        <p className="secondary bold">Confidence score</p>
+        <p className="secondary">
+          This is not really Lorem Ipsum but the spell checker did not like the
+          previous text with it&apos;s non-words which is why this unwieldy
+          sentence, should one choose to call it that, here.
+        </p>
+        <hr />
+        <p className="secondary">Model type</p>
+        <p className="bold">Foundation model</p>
+      </div>
+    </SlugContent>
+  </Slug>
+);
+
 // Template.
 // eslint-disable-next-line react/prop-types
-const Template = ({ actions, ...args }) => {
+const Template = ({ actions, slug, ...args }) => {
   const [open, setOpen] = useState(false);
 
   const wiredActions =
@@ -193,6 +226,7 @@ const Template = ({ actions, ...args }) => {
           actions={wiredActions}
           open={open}
           onClose={() => setOpen(false)}
+          slug={slug && sampleSlug}
         >
           {mainContent}
         </Tearsheet>
@@ -202,7 +236,7 @@ const Template = ({ actions, ...args }) => {
 };
 
 // eslint-disable-next-line react/prop-types
-const StackedTemplate = ({ actions, ...args }) => {
+const StackedTemplate = ({ actions, slug, ...args }) => {
   const [open1, setOpen1] = useState(false);
   const [open2, setOpen2] = useState(false);
   const [open3, setOpen3] = useState(false);
@@ -294,6 +328,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           open={open1}
           onClose={() => setOpen1(false)}
           selectorPrimaryFocus="#stacked-input-1"
+          slug={slug && sampleSlug}
         >
           <div className="tearsheet-stories__dummy-content-block">
             Main content 1
@@ -323,6 +358,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           open={open2}
           onClose={() => setOpen2(false)}
           selectorPrimaryFocus="#stacked-input-2"
+          slug={slug && sampleSlug}
         >
           <div className="tearsheet-stories__dummy-content-block">
             Main content 2
@@ -339,6 +375,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           open={open3}
           onClose={() => setOpen3(false)}
           selectorPrimaryFocus="#stacked-input-3"
+          slug={slug && sampleSlug}
         >
           <div className="tearsheet-stories__dummy-content-block">
             Main content 3
@@ -408,6 +445,7 @@ export const fullyLoaded = prepareStory(Template, {
     onClose: action('onClose called'),
     title,
     actions: 0,
+    slug: 1,
   },
 });
 

diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.stories.js b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.stories.js
@@ -11,7 +11,14 @@ import { action } from '@storybook/addon-actions';
 
 import { pkg } from '../../settings';
 
-import { Button, Form, FormGroup, TextInput } from '@carbon/react';
+import {
+  Button,
+  Form,
+  FormGroup,
+  TextInput,
+  unstable__Slug as Slug,
+  unstable__SlugContent as SlugContent,
+} from '@carbon/react';
 
 import { TearsheetNarrow, deprecatedProps } from './TearsheetNarrow';
 
@@ -57,6 +64,17 @@ export default {
     onClose: { control: { disable: true } },
     open: { control: { disable: true } },
     portalTarget: { control: { disable: true } },
+    slug: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'No AI slug',
+          1: 'with AI Slug',
+        },
+        default: 0,
+      },
+      options: [0, 1],
+    },
   },
 };
 
@@ -83,9 +101,29 @@ const mainContent = (
 
 const title = 'Title of the tearsheet';
 
+const sampleSlug = (
+  <Slug className="slug-container" size="xs">
+    <SlugContent>
+      <div>
+        <p className="secondary">AI Explained</p>
+        <h1>84%</h1>
+        <p className="secondary bold">Confidence score</p>
+        <p className="secondary">
+          This is not really Lorem Ipsum but the spell checker did not like the
+          previous text with it&apos;s non-words which is why this unwieldy
+          sentence, should one choose to call it that, here.
+        </p>
+        <hr />
+        <p className="secondary">Model type</p>
+        <p className="bold">Foundation model</p>
+      </div>
+    </SlugContent>
+  </Slug>
+);
+
 // Template.
 // eslint-disable-next-line react/prop-types
-const Template = ({ actions, ...args }) => {
+const Template = ({ actions, slug, ...args }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef();
 
@@ -113,6 +151,7 @@ const Template = ({ actions, ...args }) => {
           actions={wiredActions}
           open={open}
           onClose={() => setOpen(false)}
+          slug={slug && sampleSlug}
         >
           {mainContent}
         </TearsheetNarrow>
@@ -122,7 +161,7 @@ const Template = ({ actions, ...args }) => {
 };
 
 // eslint-disable-next-line react/prop-types
-const StackedTemplate = ({ actions, ...args }) => {
+const StackedTemplate = ({ actions, slug, ...args }) => {
   const [open1, setOpen1] = useState(false);
   const [open2, setOpen2] = useState(false);
   const [open3, setOpen3] = useState(false);
@@ -194,6 +233,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           title="Tearsheet #1"
           open={open1}
           onClose={() => setOpen1(false)}
+          slug={slug && sampleSlug}
         >
           <div className="tearsheet-stories__narrow-content-block">
             Main content 1
@@ -205,6 +245,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           title="Tearsheet #2"
           open={open2}
           onClose={() => setOpen2(false)}
+          slug={slug && sampleSlug}
           selectorPrimaryFocus="#main-content"
         >
           <div className="tearsheet-stories__narrow-content-block">
@@ -217,6 +258,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           title="Tearsheet #3"
           open={open3}
           onClose={() => setOpen3(false)}
+          slug={slug && sampleSlug}
           selectorPrimaryFocus="#main-content"
         >
           <div className="tearsheet-stories__narrow-content-block">
@@ -250,6 +292,7 @@ export const fullyLoaded = prepareStory(Template, {
     onClose: action('onClose called'),
     title,
     actions: 0,
+    slug: 1,
   },
 });
 

diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.js b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.js
@@ -86,9 +86,10 @@ export const TearsheetShell = React.forwardRef(
       navigation,
       onClose,
       open,
+      portalTarget: portalTargetIn,
       selectorPrimaryFocus,
       size,
-      portalTarget: portalTargetIn,
+      slug,
       title,
       verticalPosition,
       // Collect any other property values passed in.
@@ -231,7 +232,10 @@ export const TearsheetShell = React.forwardRef(
               depth > 1 || (depth === 1 && prevDepth.current > 1),
             [`${bc}--wide`]: wide,
             [`${bc}--narrow`]: !wide,
+            [`${bc}--has-slug`]: slug,
+            [`${bc}--has-close`]: effectiveHasCloseIcon,
           })}
+          slug={slug}
           style={{
             [`--${bc}--stacking-scale-factor-single`]: (width - 32) / width,
             [`--${bc}--stacking-scale-factor-double`]: (width - 64) / width,
@@ -506,6 +510,11 @@ TearsheetShell.propTypes = {
    */
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
 
+  /**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: PropTypes.node,
+
   /**
    * The main title of the tearsheet, displayed in the header area.
    */