feat: cwc stacking tearsheets

packages/carbon-web-components/package.json

@@ -70,7 +70,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibm-products-styles": "^2.27.1",
+    "@carbon/ibm-products-styles": "^2.28.0",
     "@carbon/styles": "1.51.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.2.1",

packages/carbon-web-components/src/components/tearsheet/story-styles.scss

@@ -11,6 +11,13 @@ $story-prefix: 'tearsheet-stories';
 
 @use '@carbon/styles/scss/spacing' as *;
 
+#page-content-selector {
+  position: absolute;
+  z-index: 9999;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
 .#{$story-prefix}__tabs .#{$prefix}--tab-content {
   display: none;
 }

packages/carbon-web-components/src/components/tearsheet/tearsheet-story.ts

@@ -315,7 +315,10 @@ const slugs = {
 const getSlug = (index) => {
   switch (index) {
     case 1:
-      return html`<cds-slug slot="slug" className="slug-container" size="xs">
+      return html`<cds-slug
+        className="slug-container"
+        size="xs"
+        alignment="bottom-right">
         <div slot="body-text">
           <p class="secondary">AI Explained</p>
           <h1>84%</h1>
@@ -503,3 +506,200 @@ NarrowWithAllHeaderItems.parameters = {
     }),
   },
 };
+
+const StackingTemplate = (argsIn) => {
+  const args = {
+    actionItems: getActionItems(select('Slot (actions)', actionItems, 4)),
+    headerActions: getActionToolbarItems(
+      select('Slot (header-toolbar)', headerActions, 0)
+    ),
+    content: getContent(select('Slot (default), panel contents', contents, 2)),
+    label: getLabel(select('label', labels, 1)),
+    open: boolean('open', false),
+    influencerWidth: select(
+      'influencer-width',
+      influencerWidths,
+      TEARSHEET_INFLUENCER_WIDTH.NARROW
+    ),
+    influencerPlacement: select(
+      'influencer-placement',
+      influencerPlacements,
+      TEARSHEET_INFLUENCER_PLACEMENT.LEFT
+    ),
+
+    influencer: getInfluencer(select('influencer (slot)', influencers, 0)),
+
+    preventCloseOnClickOutside: boolean(
+      'prevent-close-on-click-outside',
+      false
+    ),
+    selectorInitialFocus: text('selector-initial-focus', ''),
+    width: select('width', widths, TEARSHEET_WIDTH.WIDE),
+    slug: getSlug(select('slug (AI slug)', slugs, 0)),
+    description: text(
+      'description',
+      'Description used to describe the flow if need be.'
+    ),
+    title: text(
+      'title',
+      'Title used to designate the overarching flow of the tearsheet.'
+    ),
+    headerNavigation: getNavigation(select('header-navigation', navigation, 0)),
+
+    ...(argsIn?.['cds-tearsheet'] ?? {}),
+  };
+
+  const toggleButton = (index) => {
+    const tearsheet = document.querySelector(`[data-index="${index}"]`);
+    tearsheet?.toggleAttribute('open');
+  };
+
+  return html`
+    <div class="${storyPrefix}story-container">
+      <div class="${storyPrefix}story-header"></div>
+      <div id="page-content-selector" class="${storyPrefix}story-content">
+        <cds-button-set-base z-index="9999">
+          <cds-button @click="${() => toggleButton('one')}"
+            >Toggle tearsheet one</cds-button
+          >
+          <cds-button @click="${() => toggleButton('two')}"
+            >Toggle tearsheet two</cds-button
+          >
+          <cds-button @click="${() => toggleButton('three')}"
+            >Toggle tearsheet three</cds-button
+          >
+        </cds-button-set-base>
+      </div>
+    </div>
+    <cds-tearsheet
+      data-index="one"
+      class=${args.class}
+      selector-initial-focus=${args.selectorInitialFocus}
+      ?open=${args.open}
+      influencer-placement=${args.influencerPlacement}
+      influencer-width=${args.influencerWidth}
+      ?prevent-close-on-click-outside=${args.preventCloseOnClickOutside}
+      width=${args.width}>
+      <!-- default slotted content -->
+      <cds-button @click="${() => toggleButton('two')}"
+        >Toggle tearsheet two</cds-button
+      >
+      ${args.content}
+
+      <!-- slotted header label -->
+      ${args.label}
+
+      <!-- slotted header title -->
+      ${args.title ? html`<span slot="title">One ${args.title}</span>` : ''}
+
+      <!-- slotted header description -->
+      ${args.description
+        ? html`<span slot="description">${args.description}</span>`
+        : ''}
+
+      <!-- slotted action in header cds-buttons -->
+      ${args.headerActions}
+
+      <!-- slotted action items cds-buttons -->
+      ${args.actionItems}
+
+      <!-- slotted slug -->
+      ${args.slug}
+
+      <!-- slotted header-navigation -->
+      ${args.headerNavigation}
+
+      <!-- slotted influencer -->
+      ${args.influencer}
+    </cds-tearsheet>
+    <cds-tearsheet
+      data-index="two"
+      class=${args.class}
+      selector-initial-focus=${args.selectorInitialFocus}
+      has-close-icon
+      ?open=${args.open}
+      influencer-placement=${args.influencerPlacement}
+      influencer-width=${args.influencerWidth}
+      ?prevent-close-on-click-outside=${args.preventCloseOnClickOutside}
+      width=${args.width}>
+      <!-- default slotted content -->
+      <cds-button @click="${() => toggleButton('three')}"
+        >Toggle tearsheet three</cds-button
+      >
+      ${args.content}
+
+      <!-- slotted header label -->
+      ${args.label}
+
+      <!-- slotted header title -->
+      ${args.title ? html`<span slot="title">Two ${args.title}</span>` : ''}
+
+      <!-- slotted header description -->
+      ${args.description
+        ? html`<span slot="description">${args.description}</span>`
+        : ''}
+
+      <!-- slotted action in header cds-buttons -->
+      ${args.headerActions}
+
+      <!-- slotted action items cds-buttons -->
+      ${args.actionItems}
+
+      <!-- slotted slug -->
+      ${args.slug}
+
+      <!-- slotted header-navigation -->
+      ${args.headerNavigation}
+
+      <!-- slotted influencer -->
+      ${args.influencer}
+    </cds-tearsheet>
+    <cds-tearsheet
+      data-index="three"
+      class=${args.class}
+      selector-initial-focus=${args.selectorInitialFocus}
+      has-close-icon
+      ?open=${args.open}
+      influencer-placement=${args.influencerPlacement}
+      influencer-width=${args.influencerWidth}
+      ?prevent-close-on-click-outside=${args.preventCloseOnClickOutside}
+      width=${args.width}>
+      <!-- default slotted content -->
+      ${args.content}
+
+      <!-- slotted header label -->
+      ${args.label}
+
+      <!-- slotted header title -->
+      ${args.title ? html`<span slot="title">Three ${args.title}</span>` : ''}
+
+      <!-- slotted header description -->
+      ${args.description
+        ? html`<span slot="description">${args.description}</span>`
+        : ''}
+
+      <!-- slotted action in header cds-buttons -->
+      ${args.headerActions}
+
+      <!-- slotted action items cds-buttons -->
+      ${args.actionItems}
+
+      <!-- slotted slug -->
+      ${args.slug}
+
+      <!-- slotted header-navigation -->
+      ${args.headerNavigation}
+
+      <!-- slotted influencer -->
+      ${args.influencer}
+    </cds-tearsheet>
+  `;
+};
+
+export const Stacking = StackingTemplate.bind({}) as TemplateType;
+Stacking.parameters = {
+  ...storyDocs.parameters,
+  knobs: {
+    'cds-tearsheet': () => ({}),
+  },
+};

packages/carbon-web-components/src/components/tearsheet/tearsheet.scss

@@ -40,13 +40,16 @@ $motion-duration: $duration-moderate-02;
   @extend .#{$prefix}--tearsheet;
 
   &[open] {
+    --overlay-color: #{$overlay};
+    --overlay-opacity: 1;
+
     z-index: utilities.z('modal');
     align-items: flex-end;
+    background: initial;
     opacity: 1;
+
     // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-    transition: visibility 0s linear,
-      background-color $motion-duration motion(entrance, expressive),
-      opacity $motion-duration motion(entrance, expressive);
+    transition: visibility 0s linear;
     visibility: inherit;
 
     .#{$prefix}--tearsheet__container {
@@ -57,6 +60,39 @@ $motion-duration: $duration-moderate-02;
     @media (prefers-reduced-motion: reduce) {
       transition: none;
     }
+
+    &::before {
+      position: absolute;
+      display: block;
+      background: var(--overlay-color);
+      content: '';
+      inset: 0;
+      opacity: var(--overlay-opacity);
+
+      transition: background-color $motion-duration motion(exit, expressive),
+        opacity $motion-duration motion(exit, expressive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
+      &[stack-position='1'][stack-depth='2'] {
+        --overlay-opacity: 0.67;
+      }
+
+      &[stack-position='1'][stack-depth='3'] {
+        --overlay-opacity: 0.22;
+      }
+
+      &[stack-position='2'][stack-depth='3'] {
+        --overlay-opacity: 0.5;
+      }
+
+      &[stack-position='2'][stack-depth='2'],
+      &[stack-position='3'][stack-depth='3'] {
+        --overlay-opacity: 0.5;
+      }
+    }
   }
 
   [hidden] {
@@ -70,7 +106,24 @@ $motion-duration: $duration-moderate-02;
   }
 
   &[slug] {
-    background-color: $ai-overlay;
+    --overlay-color: #{$ai-overlay};
+
+    .#{$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;
+      border-block-end: 0;
+      box-shadow: 0 4px 10px 2px $ai-drop-shadow;
+    }
 
     .#{$block-class}__content {
       @include utilities.callout-gradient('default', 0);
@@ -84,6 +137,35 @@ $motion-duration: $duration-moderate-02;
     }
   }
 
+  .#{$block-class}__container {
+    /* lower prop is deprecated but the default in ibm products */
+    @extend .#{$block-class}__container--lower;
+
+    &[stack-position='1'][stack-depth='2'],
+    &[stack-position='2'][stack-depth='3'] {
+      max-block-size: calc(
+        100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05}
+      );
+      transform: scale(var(--#{$block-class}--stacking-scale-factor-single));
+    }
+
+    &[stack-position='1'][stack-depth='3'] {
+      max-block-size: calc(
+        100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05})
+      );
+      transform: scale(var(--#{$block-class}--stacking-scale-factor-double));
+    }
+  }
+
+  &[stack-position='1'][stack-depth='2'],
+  &[stack-position='2'][stack-depth='3'] {
+    z-index: utilities.z('modal') - 1;
+  }
+
+  &[stack-position='1'][stack-depth='3'] {
+    z-index: utilities.z('modal') - 2;
+  }
+
   &[width='narrow'] {
     .#{$block-class}__header {
       margin: 0;