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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-styles",
   "description": "Carbon for IBM Products styles",
-  "version": "2.74.0",
+  "version": "2.75.0-rc.0",
   "license": "Apache-2.0",
   "installConfig": {
     "hoistingLimits": "none"
@@ -49,22 +49,22 @@
     "cross-env": "^10.0.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.37.0",
+    "jest-config-ibm-cloud-cognitive": "^1.38.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.1",
-    "sass": "^1.85.1",
+    "sass": "^1.93.2",
     "yargs": "^18.0.0"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.42.0",
-    "@carbon/layout": "^11.40.0",
-    "@carbon/motion": "^11.34.0",
-    "@carbon/themes": "^11.59.0",
-    "@carbon/type": "^11.46.0"
+    "@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"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "44b9182ef8d8018c9e3e6914e24e2259502e2f49"
+  "gitHead": "5d7a0eb6f0a6d4d7f0b909f3541aa46c856d54df"
 }

package/scss/components/FilterSummary/_filter-summary.scss

@@ -20,7 +20,7 @@ $block-class: #{$pkg-prefix}--filter-summary;
 
 .#{$block-class} {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   padding: $spacing-03;
   background: $layer-01;
   /* stylelint-disable-next-line -- to-rem carbon replacement for rem */

package/scss/components/PageHeader/_page-header.scss

@@ -997,6 +997,10 @@ $duration: 1000ms;
     @include breakpoint(lg) {
       transform: translateX($spacing-08);
     }
+
+    .#{$carbon-prefix}--tag {
+      margin-inline-end: $spacing-03;
+    }
   }
 
   .#{$block-class}--tag-overflow-popover__hidden {

package/scss/components/SidePanel/_side-panel.scss

@@ -45,7 +45,7 @@ $clabs-prefix: 'clabs';
 
 @mixin setDividerStyles() {
   position: absolute;
-  background-color: $border-subtle-02;
+  background-color: $border-subtle-01;
   block-size: 1px;
   content: '';
   inline-size: 100%;
@@ -198,7 +198,7 @@ $clabs-prefix: 'clabs';
     inline-size: 100%;
   }
   &.#{$block-class}--right-placement {
-    border-inline-start: 1px solid $border-subtle-02;
+    border-inline-start: 1px solid $border-subtle-01;
     inset-inline-end: 0;
   }
   &.#{$block-class}--left-placement {
@@ -221,7 +221,7 @@ $clabs-prefix: 'clabs';
       }
     }
 
-    border-inline-end: 1px solid $border-subtle-02;
+    border-inline-end: 1px solid $border-subtle-01;
     inset-inline-start: 0;
   }
   &.#{$block-class}.#{$block-class}--has-slug,
@@ -325,7 +325,7 @@ $clabs-prefix: 'clabs';
 
     &.#{$block-class}__header--reduced-motion {
       z-index: 5;
-      border-block-end: 1px solid $border-subtle-02;
+      border-block-end: 1px solid $border-subtle-01;
       margin-block-end: $spacing-05;
     }
 
@@ -542,7 +542,7 @@ $clabs-prefix: 'clabs';
   .#{$block-class}__actions-container {
     position: sticky; // stick to bottom
     background-color: $layer-01;
-    border-block-start: 1px solid $border-subtle-02;
+    border-block-start: 1px solid $border-subtle-01;
     inset-block-end: 0;
 
     &.#{$action-set-block-class}--2xl {

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -6,7 +6,7 @@
 //
 
 // Standard imports.
-@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/project-settings' as *;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
@@ -22,8 +22,8 @@
 // TODO: @use(s) of IBM Products component styles used by TagOverflow
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
-$block-class-overflow: #{$block-class}-popover;
+$block-class: #{$pkg-prefix}--tag-overflow;
+$block-class-popover: #{$block-class}-popover;
 $block-class-modal: #{$block-class}-modal;
 
 .#{$block-class}__visible-tags {
@@ -42,12 +42,10 @@ $block-class-modal: #{$block-class}-modal;
   flex-wrap: wrap;
 }
 
-.#{$block-class}__item {
-  margin: $spacing-01;
-}
-
 .#{$block-class}__item--tag {
   border: none;
+  margin-block-end: $spacing-03;
+  margin-inline-end: $spacing-03;
 }
 
 .#{$block-class}__item--tag span {
@@ -63,59 +61,58 @@ $block-class-modal: #{$block-class}-modal;
   max-inline-size: $spacing-09;
 }
 
-.#{c4p-settings.$carbon-prefix}--popover
-  .#{c4p-settings.$carbon-prefix}--popover-content {
+.#{$carbon-prefix}--popover .#{$carbon-prefix}--popover-content {
   white-space: normal;
 }
 
-.#{$block-class-overflow} {
+.#{$block-class-popover} {
   display: inline-block;
   vertical-align: bottom;
-  .#{c4p-settings.$carbon-prefix}--tag.#{c4p-settings.$carbon-prefix}--tag--interactive {
+
+  .#{$carbon-prefix}--tag.#{$carbon-prefix}--tag--interactive {
     border: 0;
   }
 
-  .#{c4p-settings.$carbon-prefix}--popover
-    .#{c4p-settings.$carbon-prefix}--popover-content {
+  .#{$carbon-prefix}--popover .#{$carbon-prefix}--popover-content {
     padding: $spacing-05;
   }
 }
 
-.#{$block-class-overflow}--hidden {
+.#{$block-class-popover}--hidden {
   overflow: hidden;
   max-inline-size: 0;
   visibility: hidden;
 }
 
-@include mixins.block-wrap('#{$block-class-overflow}__el') {
-  &.#{$block-class-overflow}__el {
+@include mixins.block-wrap('#{$block-class-popover}__el') {
+  &.#{$block-class-popover}__el {
     // removes the min width in Carbon
     min-inline-size: initial;
     text-align: start;
   }
 
-  .#{$block-class-overflow}__trigger {
+  .#{$block-class-popover}__trigger {
     /* stylelint-disable-next-line declaration-no-important */
     border: none !important;
     font-family: inherit;
   }
 
-  .#{c4p-settings.$carbon-prefix}--link:active,
-  .#{c4p-settings.$carbon-prefix}--link:active:visited,
-  .#{c4p-settings.$carbon-prefix}--link:active:visited:hover {
+  .#{$carbon-prefix}--link:active,
+  .#{$carbon-prefix}--link:active:visited,
+  .#{$carbon-prefix}--link:active:visited:hover {
     color: $text-inverse;
   }
 
-  .#{$block-class-overflow}__tag-list {
+  .#{$block-class-popover}__tag-list {
     display: flex;
     flex-direction: column;
   }
 
-  .#{$block-class-overflow}__show-all-tags-link {
+  .#{$block-class-popover}__show-all-tags-link {
     color: $link-inverse;
-    margin-block-start: $spacing-03;
 
-    &:hover {
+    &:hover,
+    &:visited:hover {
       color: $link-inverse-hover;
     }
 
@@ -128,14 +125,14 @@ $block-class-modal: #{$block-class}-modal;
     }
   }
 
-  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
-    .#{c4p-settings.$carbon-prefix}--tag {
+  .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--tag
+    .#{$carbon-prefix}--tag {
     background-color: $background-inverse-hover;
   }
 
-  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
-  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
-    .#{c4p-settings.$carbon-prefix}--tag {
+  .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--default,
+  .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--default
+    .#{$carbon-prefix}--tag {
     @include type.type-style('body-compact-01');
 
     display: block;
@@ -149,25 +146,21 @@ $block-class-modal: #{$block-class}-modal;
     min-inline-size: initial;
   }
 
-  .#{$block-class-overflow}__tag
-    .#{c4p-settings.$carbon-prefix}--tag__close-icon {
-    // undo override by .#{c4p-settings.$carbon-prefix}--tooltip button
+  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon {
+    // undo override by .#{$carbon-prefix}--tooltip button
     padding: 0;
   }
 
-  .#{$block-class-overflow}__tag
-    .#{c4p-settings.$carbon-prefix}--tag--high-contrast {
+  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag--high-contrast {
     background-color: $background;
     color: $text-primary;
   }
 
-  .#{$block-class-overflow}__tag
-    .#{c4p-settings.$carbon-prefix}--tag__close-icon:hover {
+  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon:hover {
     background-color: $background-hover;
   }
 
-  .#{$block-class-overflow}__tag
-    .#{c4p-settings.$carbon-prefix}--tag__close-icon:focus {
+  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon:focus {
     box-shadow: inset 0 0 0 $spacing-01 $focus;
   }
 }
@@ -194,4 +187,11 @@ $block-class-modal: #{$block-class}-modal;
     margin-inline-end: $spacing-05;
     padding-inline-end: 0;
   }
+
+  .#{$block-class-modal}__body {
+    .#{$carbon-prefix}--tag {
+      margin-block-end: $spacing-03;
+      margin-inline-end: $spacing-03;
+    }
+  }
 }

package/scss/components/TagSet/_tag-set.scss

@@ -13,41 +13,41 @@
 @use '../../global/styles/project-settings' as *;
 @use '../../global/styles/mixins' as *;
 
-$_block-class: #{$pkg-prefix}--tag-set;
-$block-class-overflow: #{$_block-class}-overflow;
-$block-class-modal: #{$_block-class}-modal;
+$block-class: #{$pkg-prefix}--tag-set;
+$block-class-overflow: #{$block-class}-overflow;
+$block-class-modal: #{$block-class}-modal;
 
-@include block-wrap($_block-class) {
-  &.#{$_block-class} {
+@include block-wrap($block-class) {
+  &.#{$block-class} {
     display: block;
     inline-size: 100%;
   }
 
-  .#{$_block-class}__space {
+  .#{$block-class}__space {
     position: relative;
     display: block;
     inline-size: 100%;
     white-space: nowrap;
   }
 
-  .#{$_block-class}__space--align-end {
+  .#{$block-class}__space--align-end {
     text-align: end;
   }
 
-  .#{$_block-class}__space--align-center {
+  .#{$block-class}__space--align-center {
     text-align: center;
   }
 
-  .#{$_block-class}__tag-container {
+  .#{$block-class}__tag-container {
     display: inline-flex; // needed to register a width
     white-space: nowrap;
   }
 
-  .#{$_block-class}__tag-container--multiline {
+  .#{$block-class}__tag-container--multiline {
     flex-wrap: wrap;
   }
 
-  .#{$_block-class}__tag-container--hidden {
+  .#{$block-class}__tag-container--hidden {
     // This tag container is used to measure the width of all displayable tags
     @include measuring-container;
   }
@@ -69,6 +69,11 @@ $block-class-modal: #{$_block-class}-modal;
     max-inline-size: 0;
     visibility: hidden;
   }
+
+  .#{$carbon-prefix}--tag {
+    margin-block-end: $spacing-03;
+    margin-inline-end: $spacing-03;
+  }
 }
 
 @include block-wrap('#{$block-class-modal}') {
@@ -93,6 +98,13 @@ $block-class-modal: #{$_block-class}-modal;
     margin-inline-end: $spacing-05;
     padding-inline-end: 0;
   }
+
+  .#{$block-class-modal}__body {
+    .#{$carbon-prefix}--tag {
+      margin-block-end: $spacing-03;
+      margin-inline-end: $spacing-03;
+    }
+  }
 }
 
 @include block-wrap('#{$block-class-overflow}__tagset-popover') {
@@ -117,7 +129,8 @@ $block-class-modal: #{$_block-class}-modal;
     color: $link-inverse;
     margin-block-start: $spacing-03;
 
-    &:hover {
+    &:hover,
+    &:visited:hover {
       color: $link-inverse-hover;
     }
 
@@ -133,6 +146,9 @@ $block-class-modal: #{$_block-class}-modal;
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
     .#{$carbon-prefix}--tag {
     background-color: $background-inverse-hover;
+    // This adds spacing only for the overflow menu
+    // listing "tags" as opposed to just "labels".
+    margin-block-end: $spacing-01;
   }
 
   .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,

package/scss/components/Tearsheet/_tearsheet.scss

@@ -22,6 +22,8 @@
 // ActionSet
 @use '../ActionSet/action-set';
 
+@use './tearsheet_next';
+
 $block-class: #{$pkg-prefix}--tearsheet;
 
 // stylelint-disable-next-line carbon/theme-use
@@ -208,8 +210,11 @@ $motion-duration: $duration-moderate-02;
     transform: scale(var(--#{$block-class}--stacking-scale-factor-double));
   }
 
+  .#{$block-class}__header {
+    min-block-size: fit-content;
+  }
+
   &.#{$block-class}--wide .#{$block-class}__header {
-    overflow: visible;
     padding: $spacing-06 $spacing-07;
     margin: 0;
     background-color: $layer;
@@ -311,6 +316,7 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class} .#{$block-class}__body {
     display: flex;
+    overflow: hidden;
     flex-direction: row;
     padding: 0;
     margin: 0;
@@ -418,6 +424,7 @@ $motion-duration: $duration-moderate-02;
   .#{$block-class}__button-container {
     grid-column: 1 / -1;
     grid-row: -1 / -1;
+    min-block-size: fit-content;
     overflow-x: auto;
     @supports (overflow-inline: auto) {
       /* stylelint-disable-next-line declaration-property-value-disallowed-list */