@carbon/ibm-products 2.72.0 → 2.73.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.72.0",
+  "version": "2.73.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "@storybook/react-vite": "^9.0.13",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.30.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.31.0-rc.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -90,7 +90,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.31.0",
+    "jest-config-ibm-cloud-cognitive": "^1.32.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all": "^4.1.5",
@@ -107,9 +107,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
-    "@carbon-labs/react-resizer": "^0.5.0",
+    "@carbon-labs/react-resizer": "^0.6.0",
     "@carbon/feature-flags": "^0.28.1",
-    "@carbon/ibm-products-styles": "^2.68.0",
+    "@carbon/ibm-products-styles": "^2.69.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.7.0",
     "@carbon/utilities-react": "0.10.0",
@@ -131,5 +131,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "996fe987dd30d6c6704e0d48079ec3346f58cd18"
+  "gitHead": "fc508881b9c0d514a376be3440ebd9f9e12bd95a"
 }

package/scss/components/Coachmark/_bubble.scss

@@ -10,8 +10,7 @@
 @use '@carbon/styles/scss/themes' as themes;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/utilities';
-@use '../../../../ibm-products-styles/src/global/styles/project-settings' as
-  c4p-settings;
+@use '../../global/styles/project-settings' as c4p-settings;
 
 $prefix: #{c4p-settings.$pkg-prefix} !default;
 

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -17,7 +17,7 @@
 @property --panel-transform {
   inherits: true;
   initial-value: 320px;
-  syntax: '<integer>';
+  syntax: '<length>';
 }
 $block-class-component: #{$block-class}-filter-panel;
 

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

@@ -765,7 +765,7 @@ $duration: 1000ms;
   }
 
   .#{$block-class}__breadcrumb__content-actions {
-    inline-size: 100%;
+    inline-size: fit-content;
     margin-inline-end: $spacing-04;
   }
 
@@ -856,6 +856,13 @@ $duration: 1000ms;
   .#{$block-class}__content__page-actions {
     display: flex;
     justify-content: right;
+    /* stylelint-disable-next-line carbon/motion-easing-use */
+    transition: opacity motion(standard, productive) $duration-moderate-02;
+
+    &.#{$block-class}__content__page-actions--clipped {
+      opacity: 0;
+      visibility: hidden;
+    }
 
     @include breakpoint-down('md') {
       justify-content: left;
@@ -1012,6 +1019,17 @@ $duration: 1000ms;
     }
   }
 
+  .#{$pkg-prefix}--page-header__breadcrumb__content-actions {
+    opacity: 0;
+  }
+
+  .#{$pkg-prefix}--page-header__breadcrumb__content-actions-with-global-actions--show {
+    opacity: 1;
+    transition:
+      /* stylelint-disable-next-line */ opacity
+      motion(standard, productive) $duration-moderate-01;
+  }
+
   .#{$pkg-prefix}--page-header-title-breadcrumb {
     opacity: 0;
     transform: translateY($spacing-05);
@@ -1022,26 +1040,31 @@ $duration: 1000ms;
     // Target browsers that do not yet support animation-timeline: scroll()
     @supports not (animation-timeline: scroll()) {
       &.#{$pkg-prefix}--page-header-title-breadcrumb-show {
-        opacity: 1;
-        transform: translateY(0);
-      }
-      @media (prefers-reduced-motion: reduce) {
-        transform: translateY(0);
-        /* stylelint-disable-next-line */
-        transition: opacity motion(standard, productive) $duration-moderate-01;
+        @media (prefers-reduced-motion: reduce) {
+          transform: translateY(0);
+          /* stylelint-disable-next-line */
+          transition: opacity motion(standard, productive) $duration-moderate-01;
+        }
       }
     }
-    // `animation-timeline: scroll()` only currently supported in Chromium based browsers
-    @supports (animation-timeline: scroll()) {
-      animation-direction: alternate;
-      animation-duration: 1ms; /* Firefox requires this to apply the animation */
-      animation-name: page-header-title-breadcrumb-animation;
-      animation-timeline: scroll(block nearest);
-
-      @media (prefers-reduced-motion: reduce) {
-        animation-name: page-header-title-breadcrumb-animation-reduced-motion;
-        transform: translateY(0);
+
+    &.#{$pkg-prefix}--page-header-title-breadcrumb-show__with-content-element {
+      // `animation-timeline: scroll()` only currently supported in Chromium based browsers
+      @supports (animation-timeline: scroll()) {
+        animation-direction: alternate;
+        animation-duration: 1ms; /* Firefox requires this to apply the animation */
+        animation-name: page-header-title-breadcrumb-animation;
+        animation-timeline: scroll(block nearest);
+
+        @media (prefers-reduced-motion: reduce) {
+          animation-name: page-header-title-breadcrumb-animation-reduced-motion;
+          transform: translateY(0);
+        }
       }
     }
+    &.#{$pkg-prefix}--page-header-title-breadcrumb-show__without-content-element {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 }

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

@@ -36,7 +36,7 @@ $clabs-prefix: 'clabs';
 @property --panel-transform {
   inherits: true;
   initial-value: 320px;
-  syntax: '<integer>';
+  syntax: '<length>';
 }
 
 @mixin setPanelSize($size: map.get($side-panel-sizes, md)) {
@@ -351,6 +351,11 @@ $clabs-prefix: 'clabs';
     }
   }
 
+  // Remove min‑block‑size when the header contains no child elements to prevent unnecessary blank space
+  .#{$block-class}__header:empty {
+    min-block-size: unset;
+  }
+
   &.#{$block-class}:has(.#{$block-class}__action-toolbar),
   &.#{$block-class}--has-action-toolbar,
   &.#{$block-class}--has-slug,