@carbon/ibm-products 2.85.0 → 2.86.0

package/scss/components/Tearsheet/_tearsheet_next.scss

@@ -16,9 +16,88 @@
 
 $block-class__next: #{$pkg-prefix}--tearsheet__next;
 $motion-duration: $duration-moderate-02;
+// viewport, capped at 500px to set an upper limit on the movement speed
+$transform-start: translate3d(0, calc(min(95vh, 500px)), 0);
 
 /// Experimental tearsheet styles
-@include block-wrap($block-class__next) {
+.#{$block-class__next} {
+  // ──────────────────────────────────────────────────────────────
+  // Presence animations (enter/exit) - default behavior
+  // ──────────────────────────────────────────────────────────────
+  &.#{$block-class__next}:not(.#{$block-class__next}--keep-mounted) {
+    animation: #{$block-class__next}--presence-tearsheet__enter $motion-duration
+      motion(entrance, expressive);
+    opacity: 1;
+
+    // extra specificity to ensure this transition overrides the carbon default
+    &.#{$block-class__next}.#{$block-class__next}
+      .#{$block-class__next}__container {
+      animation: #{$block-class__next}--presence-tearsheet--container__enter
+        $motion-duration motion(entrance, expressive);
+      transform: translate3d(0, 0, 0);
+      @media screen and (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+
+    &.#{$block-class__next}--stacked.is-visible
+      .#{$block-class__next}__container {
+      transform: scaleX(var(--scale-factor));
+    }
+
+    &[data-tearsheet-exiting] {
+      animation: #{$block-class__next}--presence-tearsheet__exit
+        $motion-duration motion(exit, expressive) forwards;
+
+      &.#{$block-class__next}.#{$block-class__next}
+        .#{$block-class__next}__container {
+        animation: #{$block-class__next}--presence-tearsheet--container__exit
+          $motion-duration motion(entrance, expressive) forwards;
+        @media screen and (prefers-reduced-motion: reduce) {
+          animation: none;
+        }
+      }
+    }
+  }
+
+  // ──────────────────────────────────────────────────────────────
+  // Traditional visibility toggle when keepMounted is true
+  // ──────────────────────────────────────────────────────────────
+  &.#{$block-class__next}--keep-mounted {
+    &:not(.is-visible) {
+      &.#{$block-class__next}.#{$block-class__next}
+        .#{$block-class__next}__container {
+        transform: $transform-start;
+      }
+    }
+  }
+
+  @keyframes #{$block-class__next}--presence-tearsheet__enter {
+    from {
+      opacity: 0;
+      transition: none;
+    }
+  }
+
+  @keyframes #{$block-class__next}--presence-tearsheet__exit {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes #{$block-class__next}--presence-tearsheet--container__enter {
+    from {
+      transform: $transform-start;
+      transition: none;
+    }
+  }
+
+  @keyframes #{$block-class__next}--presence-tearsheet--container__exit {
+    to {
+      transform: $transform-start;
+    }
+  }
+
   // ──────────────────────────────────────────────────────────────
   // Container
   // ──────────────────────────────────────────────────────────────
@@ -28,6 +107,7 @@ $motion-duration: $duration-moderate-02;
     block-size: 100%;
     inset-block-start: auto;
     max-block-size: calc(100% - var(--tearsheet-vertical-gap, #{$spacing-09}));
+    max-inline-size: var(--tearsheet-max-inline-size, 1312px);
   }
   &:not(.#{$block-class__next}--stack-activated.is-visible) {
     .#{$block-class__next}__container {
@@ -43,6 +123,7 @@ $motion-duration: $duration-moderate-02;
       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;
@@ -69,17 +150,15 @@ $motion-duration: $duration-moderate-02;
   }
 
   // Extra specificity to override Carbon default transition
+  // Keep transitions for stacking animations only
   &.#{$block-class__next}.#{$block-class__next}
     .#{$block-class__next}__container {
     transition:
       transform $motion-duration motion(entrance, expressive),
       max-block-size $motion-duration motion(entrance, expressive);
-  }
 
-  // Wide variant at medium breakpoint
-  @include breakpoint(md) {
-    &.#{$block-class__next}--wide .#{$block-class__next}__container {
-      inline-size: calc(100% - (2 * #{$spacing-10}));
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
     }
   }
 
@@ -137,149 +216,6 @@ $motion-duration: $duration-moderate-02;
     }
   }
 
-  // Header content and actions
-  .#{$block-class__next}__header-content,
-  .#{$block-class__next}__header-actions {
-    margin-block-end: $spacing-06;
-  }
-
-  // Label, title, description styles
-  .#{$block-class__next}__header-label {
-    @include type.type-style('label-01');
-
-    color: $text-secondary;
-    margin-block-end: $spacing-02;
-  }
-
-  .#{$block-class__next}__header-title {
-    @include type.type-style('heading-04');
-
-    @include breakpoint-down(md) {
-      @include type.type-style('heading-03');
-    }
-
-    display: flex;
-    align-items: flex-start;
-    margin-block-end: $spacing-03;
-
-    svg {
-      flex-shrink: 0;
-    }
-    .#{$block-class__next}__title-start {
-      margin-inline-end: $spacing-05;
-    }
-    .#{$block-class__next}__title-end {
-      margin-inline-start: $spacing-05;
-    }
-  }
-
-  .#{$block-class__next}__header-description {
-    @include type.type-style('body-compact-01');
-  }
-
-  .#{$block-class__next}__header--no-close-icon {
-    display: none;
-  }
-
-  // ──────────────────────────────────────────────────────────────
-  // Navigation bar inside header
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__navigation-bar {
-    position: relative;
-    // margin: $spacing-04 0 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: $spacing-10;
-    max-inline-size: 100%;
-    min-block-size: $spacing-08;
-
-    .#{$block-class__next}__scroller-container {
-      position: absolute;
-      inset-block-end: $spacing-01;
-      inset-inline-end: calc(-#{$spacing-07} + #{$spacing-01});
-      @include breakpoint-down(md) {
-        inset-inline-end: -$spacing-05;
-      }
-
-      .#{$block-class__next}__scroller-button-icon-collapsed {
-        transform: rotate(-180deg);
-      }
-    }
-
-    .#{$carbon-prefix}--tabs {
-      margin-inline-start: -$spacing-05;
-    }
-  }
-
-  // ──────────────────────────────────────────────────────────────
-  // Header actions
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__header-actions {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .#{$block-class__next}__content__header-actions {
-    display: flex;
-    overflow: hidden;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: flex-end;
-    block-size: $spacing-07;
-    inline-size: 100%;
-    margin-block-start: -14px;
-
-    > *.#{$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;
-    }
-
-    > * {
-      flex-shrink: 0;
-    }
-    @include breakpoint-down(md) {
-      justify-content: flex-start;
-      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)
   // ──────────────────────────────────────────────────────────────
@@ -364,6 +300,12 @@ $motion-duration: $duration-moderate-02;
         align-items: center;
         block-size: $spacing-06;
       }
+      .#{$block-class__next}__title-start,
+      .#{$block-class__next}__title-end {
+        svg {
+          inline-size: $spacing-05;
+        }
+      }
     }
 
     .#{$block-class__next}__header-content {
@@ -412,86 +354,6 @@ $motion-duration: $duration-moderate-02;
     }
   }
 
-  // ──────────────────────────────────────────────────────────────
-  // Body layout grid
-  // ──────────────────────────────────────────────────────────────
-  .#{$block-class__next}__body-layout {
-    display: grid;
-    grid-template-areas:
-      'influencer body'
-      'influencer footer';
-    grid-template-columns:
-      var(--tearsheet-influencer-width, calc($spacing-10 * 4))
-      1fr;
-    grid-template-rows: 1fr auto;
-    padding-block: 0;
-    padding-inline-end: 0;
-
-    /* Redefine grid when influencer is absent */
-    &:not(:has(> .#{$block-class__next}__influencer)) {
-      grid-template-areas:
-        'body'
-        'footer';
-      grid-template-columns: 1fr;
-    }
-  }
-
-  /* Assign components to their named grid areas */
-  .#{$block-class__next}__influencer {
-    border-inline-end: 1px solid $border-subtle-01;
-    grid-area: influencer;
-  }
-
-  .#{$block-class__next}__body {
-    position: relative;
-    display: grid;
-    overflow: hidden;
-    grid-area: body;
-    grid-template-columns: 1fr var(
-        --tearsheet-summary-content-width,
-        calc($spacing-10 * 4)
-      );
-    @include breakpoint-down(md) {
-      grid-template-columns: 1fr 0;
-    }
-
-    > *:only-child {
-      grid-column: 1 / -1;
-    }
-  }
-
-  .#{$block-class__next}__footer {
-    border-block-start: 1px solid $border-subtle-01;
-    grid-area: footer;
-  }
-
-  .#{$block-class__next}__influencer,
-  .#{$block-class__next}__main-content,
-  .#{$block-class__next}__summary-content {
-    overflow: auto;
-    &:not(.#{$block-class__next}__flush) {
-      padding-inline: $spacing-07;
-      @include breakpoint-down(md) {
-        padding-inline: $spacing-05;
-      }
-    }
-  }
-
-  .#{$block-class__next}__main-content {
-    position: relative;
-  }
-  .#{$pkg-prefix}--side-panel {
-    position: absolute;
-    z-index: 9999;
-    block-size: 100%;
-    inline-size: 100%;
-    inset-block-start: 0;
-    max-inline-size: none;
-    .#{$pkg-prefix}--side-panel__header {
-      min-block-size: 0;
-    }
-  }
-
   &.#{$block-class__next}--stack-activated.is-visible {
     --overlay-color: #{$overlay};
     --overlay-alpha: 0.5;
@@ -528,3 +390,263 @@ $motion-duration: $duration-moderate-02;
     }
   }
 }
+
+// Label, title, description styles
+.#{$block-class__next}__header-label {
+  @include type.type-style('label-01');
+
+  color: $text-secondary;
+  margin-block-end: $spacing-02;
+}
+
+.#{$block-class__next}__header-title {
+  @include type.type-style('heading-04');
+
+  @include breakpoint-down(md) {
+    @include type.type-style('heading-03');
+  }
+
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-05;
+  margin-block-end: $spacing-03;
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  .#{$block-class__next}__title-end {
+    margin-inline-start: $spacing-05;
+  }
+}
+
+.#{$block-class__next}__header-description {
+  @include type.type-style('body-compact-01');
+}
+
+.#{$block-class__next}__header--no-close-icon {
+  display: none;
+}
+
+// ──────────────────────────────────────────────────────────────
+// Navigation bar inside header
+// ──────────────────────────────────────────────────────────────
+.#{$block-class__next}__navigation-bar {
+  // margin: $spacing-04 0 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-01;
+  max-inline-size: calc(100% - $spacing-04);
+  min-block-size: $spacing-08;
+
+  .#{$carbon-prefix}--tabs {
+    margin-inline-start: -$spacing-05;
+  }
+}
+.#{$block-class__next}__scroller-container {
+  position: absolute;
+  inset-block-end: $spacing-01;
+  inset-inline-end: -$spacing-08; // padding inline end of header + adjusted -ve margin for tabs
+  @include breakpoint-down(md) {
+    inset-inline-end: -$spacing-06;
+  }
+
+  .#{$block-class__next}__scroller-button-icon-collapsed {
+    transform: rotate(-180deg);
+  }
+}
+
+// ──────────────────────────────────────────────────────────────
+// Header actions
+// ──────────────────────────────────────────────────────────────
+.#{$block-class__next}__header-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.#{$block-class__next}__content__header-actions {
+  display: flex;
+  overflow: hidden;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  block-size: $spacing-07;
+  inline-size: 100%;
+  margin-block-start: -14px;
+
+  > *.#{$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;
+  }
+
+  > * {
+    flex-shrink: 0;
+  }
+  @include breakpoint-down(md) {
+    justify-content: flex-start;
+    margin-inline-end: 0;
+  }
+}
+// Header content and actions
+.#{$block-class__next}__header-content,
+.#{$block-class__next}__header-actions {
+  margin-block-end: $spacing-06;
+}
+// Wide variant at medium breakpoint
+@include breakpoint(md) {
+  .#{$block-class__next}--wide .#{$block-class__next}__container {
+    inline-size: calc(100% - (2 * #{$spacing-10}));
+  }
+}
+// ──────────────────────────────────────────────────────────────
+// Body layout grid
+// ──────────────────────────────────────────────────────────────
+.#{$block-class__next}__body-layout {
+  display: grid;
+  grid-template-areas:
+    'influencer body'
+    'influencer footer';
+  grid-template-columns:
+    var(--tearsheet-influencer-width, calc($spacing-10 * 4))
+    1fr;
+  grid-template-rows: 1fr auto;
+  padding-block: 0;
+  padding-inline-end: 0;
+
+  /* Redefine grid when influencer is absent */
+  &:not(.#{$block-class__next}__body-layout--has-influencer) {
+    grid-template-areas:
+      'body'
+      'footer';
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Assign components to their named grid areas */
+.#{$block-class__next}__influencer {
+  border-inline-end: 1px solid $border-subtle-01;
+  grid-area: influencer;
+}
+
+.#{$block-class__next}__body {
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  grid-area: body;
+  grid-template-columns: 1fr var(
+      --tearsheet-summary-content-width,
+      calc($spacing-10 * 4)
+    );
+  @include breakpoint-down(md) {
+    grid-template-columns: 1fr 0;
+  }
+
+  > *:only-child {
+    grid-column: 1 / -1;
+  }
+}
+
+.#{$block-class__next}__footer {
+  overflow: hidden;
+  block-size: $spacing-11;
+  border-block-start: 1px solid $border-subtle-01;
+  grid-area: footer;
+
+  @include breakpoint-down(md) {
+    block-size: $spacing-10;
+  }
+
+  // Footer overflow handling for many actions (> 3 buttons)
+  &.#{$block-class__next}__footer--three-actions {
+    @include breakpoint-down(sm) {
+      overflow-x: auto;
+      overflow-y: hidden;
+      .#{$pkg-prefix}--action-set {
+        display: inline-flex;
+        flex-shrink: 0;
+        min-inline-size: max-content;
+      }
+    }
+  }
+  &.#{$block-class__next}__footer--many-actions {
+    @include breakpoint-down(md) {
+      overflow-x: auto;
+      overflow-y: hidden;
+      .#{$pkg-prefix}--action-set {
+        display: inline-flex;
+        flex-shrink: 0;
+        min-inline-size: max-content;
+      }
+    }
+  }
+}
+
+.#{$block-class__next}__influencer,
+.#{$block-class__next}__main-content,
+.#{$block-class__next}__summary-content {
+  overflow: auto;
+  &:not(.#{$block-class__next}__flush) {
+    padding-inline: $spacing-07;
+    @include breakpoint-down(md) {
+      padding-inline: $spacing-05;
+    }
+  }
+}
+
+.#{$block-class__next}__main-content {
+  position: relative;
+}
+.#{$block-class__next}__side-panel {
+  position: absolute;
+  z-index: 9999;
+  block-size: 100%;
+  inline-size: 100% !important; /* stylelint-disable-line declaration-no-important */
+  inset-block-start: 0;
+  max-inline-size: none;
+  .#{$pkg-prefix}--side-panel__header {
+    min-block-size: 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;
+    }
+  }
+  .#{$block-class__next}__footer {
+    block-size: $spacing-10;
+  }
+}

package/telemetry.yml

@@ -45,6 +45,7 @@ collect:
         - breadcrumbs
         - button
         - buttonProps
+        - buttonSize
         - cancelButtonText
         - caret
         - cellSize
@@ -427,7 +428,7 @@ collect:
         - searchText
         - setSearchText
         # ActionSet
-        - buttonSize
+        - disableStacking
         # AddSelectBody
         - defaultModifiers
         - globalFilterOpts
@@ -958,6 +959,8 @@ collect:
         - tagComponent
         # Tearsheet
         - containerClassName
+        - disablePortal
+        - keepMounted
         - summaryContentWidth
         - verticalGap
         # TearsheetHeader