@carbon/ibm-products-styles 2.75.0 → 2.76.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.75.0",
+  "version": "2.76.0-rc.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -49,7 +49,7 @@
     "cross-env": "^10.0.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.38.0",
+    "jest-config-ibm-cloud-cognitive": "^1.39.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.1",
@@ -57,14 +57,14 @@
     "yargs": "^18.0.0"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.44.0",
-    "@carbon/layout": "^11.42.0",
-    "@carbon/motion": "^11.36.0",
-    "@carbon/themes": "^11.61.0",
-    "@carbon/type": "^11.48.0"
+    "@carbon/grid": "^11.45.0",
+    "@carbon/layout": "^11.43.0",
+    "@carbon/motion": "^11.37.0",
+    "@carbon/themes": "^11.62.0",
+    "@carbon/type": "^11.49.0"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "02d6f4fe2d1dc65327ae5c9fdae4bd92ab5c3bcd"
+  "gitHead": "18c246c4b4f3cae35f0056cb73f68b68fb0b534d"
 }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -51,6 +51,17 @@ $motion-duration: $duration-moderate-02;
       }
     }
 
+    &:not(.is-visible) {
+      &.#{$block-class}.#{$block-class} .#{$block-class}__container {
+        // we want the enter/leave animation to run up most of the height of the
+        // viewport, capped at 500px to set an upper limit on the movement speed
+        // For the reason for calc() see https://github.com/sass/sass/issues/2849
+        // and https://github.com/sass/node-sass/issues/2815.
+        // stylelint-disable-next-line carbon/layout-use
+        transform: translate3d(0, calc(min(95vh, 500px)), 0);
+      }
+    }
+
     &.#{$block-class}.#{$block-class} {
       /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
       background: initial;
@@ -106,12 +117,6 @@ $motion-duration: $duration-moderate-02;
     block-size: 100%;
     inset-block-start: auto;
     max-block-size: calc(100% - #{$spacing-09});
-    // we want the enter/leave animation to run up most of the height of the
-    // viewport, capped at 500px to set an upper limit on the movement speed
-    // For the reason for calc() see https://github.com/sass/sass/issues/2849
-    // and https://github.com/sass/node-sass/issues/2815.
-    // stylelint-disable-next-line carbon/layout-use
-    transform: translate3d(0, calc(min(95vh, 500px)), 0);
   }
 
   &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug

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));
+      }
+    }
   }
 }