@carbon/ibm-products 2.66.0 → 2.67.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.66.0",
+  "version": "2.67.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,13 +43,18 @@
   "scripts": {
     "build": "run-s clean build-all",
     "build-all": "run-p 'build:*'",
+    "build:carbon": "sass -q --quiet-deps --style=expanded --load-path ./node_modules --load-path ../../node_modules --load-path node_modules .storybook/carbon.scss:css/carbon.css",
     "build:css": "copyfiles '../ibm-products-styles/css/**/*.*' ./ -u 2",
     "build:scss": "copyfiles '../ibm-products-styles/scss/**/*.*' ./ -u 2",
+    "build:storybook": "yarn dlx cross-env \"NODE_OPTIONS=--max_old_space_size=8192\" && storybook build --quiet",
     "build:js-new": "node scripts/build",
     "ci-check": "node scripts/import",
     "clean": "rimraf es lib css scss",
     "generate": "cross-env FORCE_COLOR=1 node scripts/generate",
     "postinstall": "ibmtelemetry --config=telemetry.yml",
+    "start": "run-s build:carbon storybook:start",
+    "storybook:build": "run-s build:carbon build:storybook",
+    "storybook:start": "storybook dev ./public -p 3000",
     "telemetry-config": "ibmtelemetry-config generate --id 495342db-5046-4ecf-85ea-9ffceb6f8cdf --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./src/components/**/*.(tsx|js|jsx)",
     "test": "jest --colors",
     "//upgrade-dependencies": "# don't upgrade carbon (done globally), react/react-dom (explicit range peer dependency), chalk (issue #1596)",
@@ -66,13 +71,31 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
+    "@percy/cli": "^1.30.7",
+    "@percy/storybook": "^6.0.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-controls": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-storysource": "^8.6.12",
+    "@storybook/addon-viewport": "^8.6.12",
+    "@storybook/components": "^8.6.12",
+    "@storybook/core-events": "^8.6.12",
+    "@storybook/csf": "^0.1.13",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/source-loader": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.24.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.25.0-rc.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -81,24 +104,26 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.25.0",
+    "jest-config-ibm-cloud-cognitive": "^1.26.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
-    "npm-check-updates": "^17.1.15",
+    "npm-check-updates": "^18.0.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
     "rollup": "^4.35.0",
     "rollup-plugin-strip-banner": "^3.1.0",
     "sass": "^1.85.1",
+    "storybook": "^8.6.12",
     "typescript-config-carbon": "^0.5.0",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
     "@carbon/feature-flags": "^0.26.0",
-    "@carbon/ibm-products-styles": "^2.62.0",
+    "@carbon/ibm-products-styles": "^2.63.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.5.0",
+    "@carbon/utilities-react": "0.7.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -117,5 +142,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": "3de1ea266ed33f09120ef615aa418790b7f3c35b"
+  "gitHead": "f131ccc59383f8b291880d6a9a420288c825c3a8"
 }

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

@@ -122,17 +122,12 @@ $duration: 1000ms;
     --#{$block-class}--background-opacity: 1;
     --#{$block-class}--breadcrumb-title-top: initial;
     --#{$block-class}--button-set-in-breadcrumb-width-px: initial;
-    --#{$block-class}--navigation-buffer-top: $spacing-06;
   }
 
   &.#{$block-class}--without-background {
     border-block-end: none;
   }
 
-  &.#{$block-class}--has-navigation-tags-only {
-    --#{$block-class}--navigation-buffer-top: $spacing-04;
-  }
-
   &::before {
     @include appearingBackground(true);
 
@@ -158,7 +153,7 @@ $duration: 1000ms;
       .#{$block-class}__breadcrumb-row--has-action-bar
     ) {
     // lifts up page title when there is no action bar
-    min-block-size: $spacing-07;
+    min-block-size: $spacing-08;
   }
 
   .#{$block-class}__breadcrumb-row--container {
@@ -173,6 +168,10 @@ $duration: 1000ms;
     min-inline-size: calc(0.6 * (100% + 2 * #{$spacing-05}));
   }
 
+  .#{$block-class}__has-page-actions-with-title-collapsed {
+    max-inline-size: none;
+  }
+
   .#{$block-class}__has-page-actions-without-action-bar
     .#{$block-class}__has-page-actions-without-action-bar {
     min-inline-size: 100%;
@@ -211,6 +210,7 @@ $duration: 1000ms;
   .#{$block-class}__breadcrumb-row--next-to-tabs:not(
       .#{$block-class}__has-page-actions-without-action-bar
     )::after,
+  .#{$block-class}__has-page-actions-without-action-bar.#{$block-class}__has-page-actions-with-title-collapsed::after,
   .#{$block-class}__breadcrumb-row--has-action-bar::after {
     /* creates a full width box shadow without causing scroll */
     box-shadow:
@@ -615,6 +615,15 @@ $duration: 1000ms;
     display: none; /* need to figure out how to handle the tab content */
   }
 
+  .#{$block-class}__action-bar-column--has-page-actions {
+    display: block;
+  }
+
+  .#{$block-class}__has-page-actions-with-title-collapsed
+    .#{$block-class}__action-bar-column--has-page-actions {
+    display: block;
+  }
+
   .#{$block-class}__navigation-tabs {
     margin-inline-start: calc(-1 * #{$spacing-05});
   }