@carbon/ibm-products 2.79.0-rc.0 → 2.80.0-rc.0

package/scss/components/Tearsheet/_tearsheet_next.scss

@@ -24,31 +24,48 @@ $motion-duration: $duration-moderate-02;
   // ──────────────────────────────────────────────────────────────
   .#{$block-class__next}__container {
     align-self: flex-end;
+    border: 1px solid $border-subtle-01;
     block-size: 100%;
     inset-block-start: auto;
-    max-block-size: calc(100% - #{$spacing-09});
-    transform: translate3d(0, calc(min(95vh, 500px)), 0);
-    @include breakpoint-down(md) {
-      max-block-size: none;
+    max-block-size: calc(100% - var(--tearsheet-vertical-gap, #{$spacing-09}));
+  }
+  &:not(.#{$block-class__next}--stack-activated.is-visible) {
+    .#{$block-class__next}__container {
+      @include breakpoint-down(md) {
+        max-block-size: none;
+      }
     }
   }
 
-  &.#{$block-class__next}.#{$block-class__next}--has-ai-label
+  &:not(.is-visible) {
+    &.#{$block-class__next}.#{$block-class__next}
+      .#{$block-class__next}__container {
+      transform: translate3d(0, calc(min(95vh, 500px)), 0);
+    }
+  }
+  &.#{$block-class__next}.#{$block-class__next}--has-ai-label {
     .#{$block-class__next}__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;
+      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__next}__main-content {
+      position: relative;
+      @include utilities.ai-popover-gradient('default', 0, 'background');
+
+      box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
+    }
   }
 
   // Extra specificity to override Carbon default transition
@@ -56,7 +73,7 @@ $motion-duration: $duration-moderate-02;
     .#{$block-class__next}__container {
     transition:
       transform $motion-duration motion(entrance, expressive),
-      max-height $motion-duration motion(entrance, expressive);
+      max-block-size $motion-duration motion(entrance, expressive);
   }
 
   // Wide variant at medium breakpoint
@@ -107,9 +124,11 @@ $motion-duration: $duration-moderate-02;
     display: grid;
     flex-basis: unset;
     gap: $spacing-05;
-    grid-template-columns:
-      auto
-      minmax(var(--tearsheet-header-title-grid-width, 0), 1fr);
+    grid-template-columns: minmax(auto, 40rem) minmax(
+        var(--tearsheet-header-title-grid-width, 0),
+        1fr
+      );
+
     inline-size: calc(100% - var(--tearsheet-header-action-offset));
 
     @include breakpoint-down(md) {
@@ -128,6 +147,7 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class__next}__header-label {
     @include type.type-style('label-01');
 
+    color: $text-secondary;
     margin-block-end: $spacing-02;
   }
 
@@ -145,22 +165,11 @@ $motion-duration: $duration-moderate-02;
     svg {
       flex-shrink: 0;
     }
-
-    &.#{$block-class__next}__leading-icon {
-      flex-direction: row;
-
-      svg {
-        margin-inline-end: $spacing-05;
-      }
+    .#{$block-class__next}__title-start {
+      margin-inline-end: $spacing-05;
     }
-
-    &.#{$block-class__next}__trailing-icon {
-      flex-direction: row-reverse;
-      justify-content: flex-end;
-
-      svg {
-        margin-inline-start: $spacing-05;
-      }
+    .#{$block-class__next}__title-end {
+      margin-inline-start: $spacing-05;
     }
   }
 
@@ -172,10 +181,6 @@ $motion-duration: $duration-moderate-02;
     display: none;
   }
 
-  .#{$block-class__next}__header-content {
-    max-inline-size: 40rem;
-  }
-
   // ──────────────────────────────────────────────────────────────
   // Navigation bar inside header
   // ──────────────────────────────────────────────────────────────
@@ -191,8 +196,8 @@ $motion-duration: $duration-moderate-02;
 
     .#{$block-class__next}__scroller-container {
       position: absolute;
-      inset-inline-end: -$spacing-07;
-      margin-inline-end: 1px;
+      inset-block-end: $spacing-01;
+      inset-inline-end: calc(-#{$spacing-07} + #{$spacing-01});
       @include breakpoint-down(md) {
         inset-inline-end: -$spacing-05;
       }
@@ -225,9 +230,15 @@ $motion-duration: $duration-moderate-02;
     inline-size: 100%;
     margin-block-start: -14px;
 
-    // apply spacing only between two visible items
-    > *:not([hidden]) + *:not([hidden]) {
-      padding-inline-start: $spacing-03;
+    > *.#{$block-class__next}__header-action-item:not([data-hidden='true']) {
+      margin-inline-end: $spacing-03; /* space between visible items */
+    }
+
+    /* Remove margin on the last visible item */
+    > *.#{$block-class__next}__header-action-item:not(
+        [data-hidden='true']
+      ):nth-last-child(2) {
+      margin-inline-end: 0;
     }
 
     > * {
@@ -238,31 +249,78 @@ $motion-duration: $duration-moderate-02;
       margin-inline-end: 0;
     }
   }
-
+  &.#{$block-class__next}--narrow {
+    .#{$block-class__next}__header {
+      padding-inline: $spacing-05;
+    }
+    .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {
+      .#{$block-class__next}__header-actions {
+        display: none;
+      }
+    }
+    .#{$block-class__next}__header-content-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+    .#{$block-class__next}__header-title {
+      @include type.type-style('heading-03');
+    }
+    .#{$block-class__next}__content__header-actions {
+      justify-content: flex-start;
+      margin-inline-end: 0;
+    }
+    .#{$block-class__next}__body {
+      grid-template-columns: 1fr 0;
+    }
+    .#{$block-class__next}__influencer,
+    .#{$block-class__next}__main-content,
+    .#{$block-class__next}__summary-content {
+      &:not(.#{$block-class__next}__flush) {
+        padding-inline: $spacing-05;
+      }
+    }
+  }
   // ──────────────────────────────────────────────────────────────
   // Header (default vs collapsed)
   // ──────────────────────────────────────────────────────────────
   .#{$block-class__next}__header {
-    opacity: 1;
-
-    // Default visible: hide everything except nav-bar, header-content-wrapper & close button
+    // Animate all non-core visible elements
     > *:not(
         .#{$block-class__next}__navigation-bar,
         .#{$block-class__next}__header-content-wrapper,
-        .#{$carbon-prefix}--modal-close-button
-      ),
+        .#{$carbon-prefix}--modal-close-button,
+        .excludeFromCollapse
+      ) {
+      overflow: hidden;
+      max-block-size: 50vh; // large enough for expanded content
+      opacity: 1;
+      transition:
+        max-block-size $motion-duration motion(entrance, expressive),
+        opacity $motion-duration motion(entrance, expressive),
+        margin $motion-duration motion(entrance, expressive),
+        padding $motion-duration motion(entrance, expressive);
+    }
+
+    .#{$block-class__next}__header-actions,
     .#{$block-class__next}__header-content-wrapper
       .#{$block-class__next}__header-content
-      > *:not(.#{$block-class__next}__content__title-wrapper) {
-      overflow: hidden;
-      max-block-size: 50vh;
+      *:not(
+        .#{$block-class__next}__content__title-wrapper,
+        .#{$block-class__next}__header-label
+      ) {
       opacity: 1;
-      transition: all $motion-duration motion(entrance, expressive);
+      transition:
+        all $motion-duration motion(entrance, expressive),
+        opacity $motion-duration motion(entrance, expressive);
     }
   }
 
+  // COLLAPSED STATE
   .#{$block-class__next}__header-collapsed {
-    // Hide everything except navigation bar, header-content-wrapper & close button
+    padding-block-start: $spacing-04;
+    transition: padding $motion-duration motion(entrance, expressive);
+
+    // Collapse everything except core elements
     > *:not(
         .#{$block-class__next}__navigation-bar,
         .#{$block-class__next}__header-content-wrapper,
@@ -271,8 +329,7 @@ $motion-duration: $duration-moderate-02;
       ),
     .#{$block-class__next}__header-actions
       > *:not(.#{$block-class__next}__content__header-actions),
-    .#{$block-class__next}__header-content-wrapper
-      .#{$block-class__next}__header-content
+    .#{$block-class__next}__header-content
       > *:not(.#{$block-class__next}__content__title-wrapper),
     > *:not(
         .#{$block-class__next}__navigation-bar,
@@ -280,25 +337,78 @@ $motion-duration: $duration-moderate-02;
         .#{$carbon-prefix}--modal-close-button,
         .excludeFromCollapse
       )
+      *,
+    .#{$block-class__next}__header-content-wrapper
+      .#{$block-class__next}__header-content
+      > *:not(.#{$block-class__next}__content__title-wrapper)
       * {
       overflow: hidden;
       padding: 0;
       margin: 0;
       max-block-size: 0;
-      min-block-size: 0;
       opacity: 0;
-      transition: all $motion-duration ease;
-      visibility: hidden;
+      pointer-events: none;
+      transition: all $motion-duration motion(entrance, expressive);
+    }
+
+    // Header title
+    .#{$block-class__next}__header-title {
+      @include type.type-style('label-02');
+
+      align-items: center;
+      margin-block-start: $spacing-02;
+      transition: all $motion-duration motion(entrance, expressive);
+
+      > span {
+        display: flex;
+        align-items: center;
+        block-size: $spacing-06;
+      }
+    }
+
+    .#{$block-class__next}__header-content {
+      align-self: center;
+      margin-block-end: 0;
+    }
+
+    .#{$block-class__next}__content__header-actions {
+      margin-block-start: -$spacing-01;
     }
 
-    // Reset margins and transitions on always-visible items
+    // Hide header actions on small screens
+    @include breakpoint-down(md) {
+      .#{$block-class__next}__header-actions {
+        display: none;
+      }
+    }
+
+    // Normalize visible elements
     .#{$block-class__next}__header-content-wrapper,
     .#{$block-class__next}__header-content,
     .#{$block-class__next}__content__title-wrapper,
-    .#{$block-class__next}__header-actions
-      .#{$block-class__next}__header-title {
+    .#{$block-class__next}__header-actions,
+    .#{$block-class__next}__header-title {
       margin-block: 0;
-      transition: all $motion-duration ease;
+      transition: margin-block $motion-duration ease;
+    }
+
+    .#{$block-class__next}__header-content-wrapper {
+      min-block-size: $spacing-08;
+      padding-block-end: $spacing-04;
+    }
+
+    // Divider line above navigation bar
+    .#{$block-class__next}__navigation-bar::before {
+      position: absolute;
+      z-index: 1;
+      background: rgba(0, 0, 0, 0.12);
+      block-size: 1px;
+      content: '';
+      inline-size: 100vw;
+      inset-block-start: -$spacing-02;
+      inset-inline-start: 50%;
+      pointer-events: none;
+      transform: translateX(-50%);
     }
   }
 
@@ -328,6 +438,7 @@ $motion-duration: $duration-moderate-02;
 
   /* Assign components to their named grid areas */
   .#{$block-class__next}__influencer {
+    border-inline-end: 1px solid $border-subtle-01;
     grid-area: influencer;
   }
 
@@ -358,17 +469,16 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class__next}__main-content,
   .#{$block-class__next}__summary-content {
     overflow: auto;
-    padding-inline: $spacing-07;
-    @include breakpoint-down(md) {
-      padding-inline: $spacing-05;
+    &:not(.#{$block-class__next}__flush) {
+      padding-inline: $spacing-07;
+      @include breakpoint-down(md) {
+        padding-inline: $spacing-05;
+      }
     }
   }
 
   .#{$block-class__next}__main-content {
     position: relative;
-    @include utilities.ai-popover-gradient('default', 0, 'background');
-
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
   }
   .#{$pkg-prefix}--side-panel {
     position: absolute;
@@ -381,28 +491,40 @@ $motion-duration: $duration-moderate-02;
       min-block-size: 0;
     }
   }
-}
-.#{$block-class__next}--narrow {
-  .#{$block-class__next}__header {
-    padding-inline: $spacing-05;
-  }
-  .#{$block-class__next}__header-content-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-  .#{$block-class__next}__header-title {
-    @include type.type-style('heading-03');
-  }
-  .#{$block-class__next}__content__header-actions {
-    justify-content: flex-start;
-    margin-inline-end: 0;
-  }
-  .#{$block-class__next}__body {
-    grid-template-columns: 1fr 0;
-  }
-  .#{$block-class__next}__influencer,
-  .#{$block-class__next}__main-content,
-  .#{$block-class__next}__summary-content {
-    padding-inline: $spacing-05;
+
+  &.#{$block-class__next}--stack-activated.is-visible {
+    --overlay-color: #{$overlay};
+    --overlay-alpha: 0.5;
+
+    z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));
+
+    background-color: initial;
+
+    &::before {
+      position: absolute;
+      display: block;
+      background: var(--overlay-color);
+      content: '';
+      inset: 0;
+      opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);
+
+      transition:
+        background-color $motion-duration motion(exit, expressive),
+        opacity $motion-duration motion(exit, expressive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &.is-visible {
+      .#{$block-class__next}__container {
+        max-block-size: calc(
+          100% - var(--tearsheet-vertical-gap, #{$spacing-09}) +
+            var(--block-size-change)
+        );
+        transform: scaleX(var(--scale-factor));
+      }
+    }
   }
 }

package/telemetry.yml

@@ -185,6 +185,7 @@ collect:
         - invalid
         - invalidText
         - isFetching
+        - isFlush
         - isOpen
         - isTableSortable
         - item
@@ -937,6 +938,8 @@ collect:
         - sortableProps
         - strategy
         - withGrid
+        # StackProvider
+        - stackStepSize
         # StatusIndicator
         - onRetry
         - retryLabel
@@ -949,7 +952,9 @@ collect:
         # TagOverflow
         - tagComponent
         # Tearsheet
+        - containerClassName
         - summaryContentWidth
+        - verticalGap
         # TearsheetHeader
         - disableHeaderCollapse
         # TearsheetHeaderActionItem
@@ -957,10 +962,8 @@ collect:
         # TearsheetHeaderActions
         - menuButtonProps
         # TearsheetHeaderContent
-        - descriptionCollapseLabel
-        - descriptionExpandLabel
-        - titleIcon
-        - titleIconPosition
+        - titleEnd
+        - titleStart
         # TearsheetWithSteps
         - progressIndicator
         - setOpen
@@ -1245,9 +1248,10 @@ collect:
         - short
         # PageHeader - fullWidthGrid
         - xl
-        # TearsheetHeaderContent - titleIconPosition
-        - leading
-        - trailing
+        # StackProvider - stackStepSize
+        - lg
+        - md
+        - sm
         # TearsheetWithSteps - progressIndicator
         - horizontal
         - vertical

package/es/components/Tearsheet/next/index.js

@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-export { Tearsheet } from './Tearsheet.js';

package/lib/components/Tearsheet/next/index.js

@@ -1,14 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-var Tearsheet = require('./Tearsheet.js');
-
-
-
-exports.Tearsheet = Tearsheet.Tearsheet;