Merge remote-tracking branch 'upstream/main'

Author: makafsal

config/babel-preset-ibm-cloud-cognitive/package.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-preset-ibm-cloud-cognitive",
   "private": true,
-  "version": "0.37.0",
+  "version": "0.38.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/jest-config-ibm-cloud-cognitive/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jest-config-ibm-cloud-cognitive",
   "private": true,
-  "version": "1.38.0",
+  "version": "1.39.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -32,7 +32,7 @@
     "accessibility-checker": "^4.0.7",
     "axe-core": "^4.10.3",
     "babel-jest": "^29.7.0",
-    "babel-preset-ibm-cloud-cognitive": "^0.37.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.38.0-rc.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-circus": "^29.7.0",
     "jest-watch-typeahead": "^3.0.0",

config/storybook-addon-carbon-theme/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/storybook-addon-theme",
   "description": "Carbon theme switcher for Storybook",
-  "version": "2.28.0",
+  "version": "2.29.0-rc.0",
   "license": "Apache-2.0",
   "main": "dist/react.js",
   "private": true,

cspell.json

@@ -120,6 +120,7 @@
     "homescreen",
     "httperror",
     "httperrorother",
+    "icondescription",
     "importmodal",
     "influencers",
     "inlineedit",

e2e/components/Coachmark/next/Coachmark-test.avt.e2e.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2025, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -17,7 +17,7 @@ test.describe('Coachmark @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'Coachmark',
-      id: 'preview-onboarding-coachmark-next--tooltip',
+      id: 'preview-onboarding-coachmark--tooltip',
       globals: {
         carbonTheme: 'white',
       },
@@ -28,7 +28,7 @@ test.describe('Coachmark @avt', () => {
   test('@avt-initially-focus-done-button', async ({ page }) => {
     await visitStory(page, {
       component: 'Coachmark',
-      id: 'preview-onboarding-coachmark-next--tooltip',
+      id: 'preview-onboarding-coachmark--tooltip',
       globals: {
         carbonTheme: 'white',
       },
@@ -40,7 +40,7 @@ test.describe('Coachmark @avt', () => {
   test('@avt-dragging-happening-on-header', async ({ page }) => {
     await visitStory(page, {
       component: 'Coachmark',
-      id: 'preview-onboarding-coachmark-next--floating',
+      id: 'preview-onboarding-coachmark--floating',
       globals: {
         carbonTheme: 'white',
       },

e2e/components/CreateFlows/CreateTearsheet-test.avt.e2e.js

@@ -108,8 +108,6 @@ test.describe('CreateTearsheet @avt', () => {
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
 
     // Goto next step by pressing enter
     await page.keyboard.press('Enter');
@@ -132,8 +130,6 @@ test.describe('CreateTearsheet @avt', () => {
     // Switch focus to back button
     await page.keyboard.press('Tab');
     await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Tab');
 
     // Goto previous step by pressing enter
     await expect(backButton).toBeFocused();
@@ -190,7 +186,7 @@ test.describe('CreateTearsheet @avt', () => {
 
     await expect(errorToggle).toBeFocused();
     // Enable simulate error toggle
-    await page.keyboard.press('Enter');
+    await page.keyboard.press('Space');
 
     // Navigate to next button
     await page.keyboard.press('Tab');

package.json

@@ -42,7 +42,7 @@
     "lint:license:staged": "scripts/check-license.cjs -w",
     "lint:js": "eslint packages --fix",
     "lint:styles": "stylelint '**/*.scss' --fix",
-    "prepare": "husky install",
+    "prepare": "husky",
     "postinstall": "husky",
     "run-all": "lerna run --stream --prefix --loglevel success",
     "release-telemetry": "cd packages/ibm-products && yarn telemetry-config && cd ../ibm-products-web-components && yarn telemetry-config",
@@ -67,12 +67,12 @@
     "@babel/core": "^7.26.10",
     "@babel/eslint-parser": "^7.26.10",
     "@babel/preset-react": "^7.26.3",
-    "@carbon/grid": "^11.44.0",
-    "@carbon/layout": "^11.42.0",
-    "@carbon/motion": "^11.36.0",
-    "@carbon/react": "^1.92.1",
-    "@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/react": "^1.95.0",
+    "@carbon/themes": "^11.62.0",
+    "@carbon/type": "^11.49.0",
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@eslint/compat": "^1.2.7",

packages/ibm-products-styles/CHANGELOG.md

@@ -1,3 +1,14 @@
+## `@carbon/[email protected]`
+### Features :rocket:
+- feat(Tearsheet): stacking, unit test, design review changes and fixes (#8563)
+
+### Bug fixes :bug:
+- fix: tearsheet entry and exit animations not working after carbon upgrade (#8674)
+- fix: replace uselayouteffect with isomorphic effect (#8630)
+
+### Housekeeping :house:
+- build(deps): update Carbon 11 compatible versions to latest (#8638)
+
 ## `@carbon/[email protected]`
 ### Features :rocket:
 - feat: composable tearsheet initial implementation (#8337)

packages/ibm-products-styles/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,19 +49,19 @@
     "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",
     "sass": "^1.93.2",
     "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"

packages/ibm-products-styles/src/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