Merge branch 'main' into feat/5709_default_opening_not_stacked_coachmark

carbon-design-system · Dec 4, 2024 · 8b6582b · 8b6582b
2 parents 7b4ec2b + 7005822
commit 8b6582b
Show file tree

Hide file tree

Showing 187 changed files with 2,734 additions and 3,732 deletions.
diff --git a/.github/workflows/update.yml b/.github/workflows/update.yml
@@ -74,6 +74,13 @@ jobs:
         env:
           YARN_ENABLE_IMMUTABLE_INSTALLS: false
 
+      - name: Generate token
+        uses: tibdex/github-app-token@3beb63f4bd073e61482598c45c71c1019b59b73a #v2.1.0
+        id: generate_token
+        with:
+          app_id: ${{ secrets.APP_ID }}
+          private_key: ${{ secrets.APP_PRIVATE_KEY }}
+
       - name: Create PR
         id: create-pr
         uses: peter-evans/create-pull-request@5e914681df9dc83aa4e4905692ca88beb2f9e91f # v7.0.5

diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,11 +1,18 @@
 module.exports = {
   extends: ['stylelint-config-carbon'],
+  plugins: ['stylelint-plugin-carbon-tokens'],
   rules: {
     'max-nesting-depth': null,
     'scss/no-global-function-names': null,
     'csstools/use-logical': null,
     'scss/load-no-partial-leading-underscore': null,
     'scss/double-slash-comment-inline': null,
     'no-duplicate-selectors': null,
+
+    'carbon/layout-use': true,
+    'carbon/motion-duration-use': [true, { severity: 'warning' }],
+    'carbon/motion-easing-use': true,
+    'carbon/theme-use': true,
+    'carbon/type-use': true,
   },
 };
diff --git a/.vscode/carbon-snippets.code-snippets b/.vscode/carbon-snippets.code-snippets
@@ -28,7 +28,7 @@
 	"prefix": [
 		"//la"
 	],
-	"body": "// stylelint-disable-next-line carbon/layout-token-use"
+	"body": "// stylelint-disable-next-line carbon/layout-use"
 },
 "Stylelint disable next line Carbon Duraion": {
 	"scope": "scss",
@@ -49,14 +49,14 @@
 	"prefix": [
 		"//ty"
 	],
-	"body": "// stylelint-disable-next-line carbon/type-token-use"
+	"body": "// stylelint-disable-next-line carbon/type-use"
 },
 "Stylelint disable next line Carbon Theme": {
 	"scope": "scss",
 	"prefix": [
 		"//th"
 	],
-	"body": "// stylelint-disable-next-line carbon/theme-token-use"
+	"body": "// stylelint-disable-next-line carbon/theme-use"
 },
 // spacing tokens
 "spacing-01 (0.125rem 2px)": { "scope": "scss", "prefix": ["$sp", "$car"], "body": "$$spacing-01", "description": "Carbon spacing token" },

diff --git a/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md b/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@[email protected]) (2024-12-04)
+
+**Note:** Version bump only for package jest-config-ibm-cloud-cognitive
+
+
+
+
+
 # [1.14.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@[email protected]) (2024-11-25)
 
 **Note:** Version bump only for package jest-config-ibm-cloud-cognitive

diff --git a/config/jest-config-ibm-cloud-cognitive/package.json b/config/jest-config-ibm-cloud-cognitive/package.json
@@ -1,7 +1,7 @@
 {
   "name": "jest-config-ibm-cloud-cognitive",
   "private": true,
-  "version": "1.14.0-rc.0",
+  "version": "1.14.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@testing-library/jest-dom": "^6.3.0",
-    "accessibility-checker": "^3.1.65",
+    "accessibility-checker": "^3.1.78",
     "axe-core": "^4.8.3",
     "babel-jest": "^29.7.0",
     "babel-preset-ibm-cloud-cognitive": "^0.14.40",

diff --git a/config/storybook-addon-carbon-theme/CHANGELOG.md b/config/storybook-addon-carbon-theme/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-04)
+
+**Note:** Version bump only for package @carbon/storybook-addon-theme
+
+
+
+
+
 # [2.4.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-11-25)
 
 **Note:** Version bump only for package @carbon/storybook-addon-theme

diff --git a/config/storybook-addon-carbon-theme/package.json b/config/storybook-addon-carbon-theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/storybook-addon-theme",
   "description": "Carbon theme switcher for Storybook",
-  "version": "2.4.0-rc.0",
+  "version": "2.4.0",
   "license": "Apache-2.0",
   "main": "dist/react.js",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.5.0",
-    "@storybook/addons": "^7.6.10",
-    "@storybook/api": "^7.6.10",
-    "@storybook/client-api": "^7.6.10",
-    "@storybook/client-logger": "^7.6.10",
-    "@storybook/components": "^7.6.10",
-    "@storybook/core-events": "^7.6.10",
-    "@storybook/theming": "^7.6.10",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/api": "^7.6.17",
+    "@storybook/client-api": "^7.6.17",
+    "@storybook/client-logger": "^8.4.5",
+    "@storybook/components": "^8.4.5",
+    "@storybook/core-events": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
     "core-js": "^3.35.1",
     "global": "^4.4.0"
   },

diff --git a/e2e/components/ExpressiveCard/ExpressiveCard-test.avt.e2e.js b/e2e/components/ExpressiveCard/ExpressiveCard-test.avt.e2e.js
@@ -9,6 +9,7 @@
 
 import { expect, test } from '@playwright/test';
 import { visitStory } from '../../test-utils/storybook';
+import { pkg } from '../../../packages/ibm-products/src/settings';
 
 test.describe('ExpressiveCard @avt', () => {
   test('@avt-default-state', async ({ page }) => {
@@ -22,5 +23,137 @@ test.describe('ExpressiveCard @avt', () => {
     await expect(page).toHaveNoACViolations(
       'ExpressiveCard @avt-default-state'
     );
+    const buttonEle = page.getByText('Read more');
+    // Pressing 'Tab' key to focus on the "Read more" button
+    await page.keyboard.press('Tab');
+    await expect(buttonEle).toBeFocused();
+  });
+
+  test('@avt-label-only-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--label-only',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-label-only-state'
+    );
+  });
+  test('@avt-with-caption-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-caption',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-caption-state'
+    );
+  });
+  test('@avt-with-media-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-media',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-media-state'
+    );
+  });
+  test('@avt-with-action-icon-href-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-action-icon-href',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-action-icon-href-state'
+    );
+
+    const hrefEle = page.locator('a[href="#"]');
+    // Pressing 'Tab' key to focus on the '->' href button
+    await page.keyboard.press('Tab');
+    await expect(hrefEle).toBeFocused();
+  });
+  test('@avt-with-pictogram-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-pictogram',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-pictogram-state'
+    );
+  });
+  test('@avt-with-secondary-action-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-secondary-action',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-secondary-action-state'
+    );
+    const primaryButtonEle = page.getByText('Remove');
+    const secondaryButtonEle = page.getByText('Read more');
+    // Pressing 'Tab' key to focus on the "Remove" button
+    await page.keyboard.press('Tab');
+    await expect(primaryButtonEle).toBeFocused();
+    // Pressing 'Tab' key to focus on the "Read more" button
+    await page.keyboard.press('Tab');
+    await expect(secondaryButtonEle).toBeFocused();
+  });
+  test('@avt-clickable-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--clickable',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-clickable-state'
+    );
+    const cardElement = page.locator(
+      `[data-carbon-devtools-id="${pkg.prefix}--ExpressiveCard"]`
+    );
+    // Pressing 'Tab' key to focus on the clickable card
+    await page.keyboard.press('Tab');
+    await expect(cardElement).toBeFocused();
+  });
+  test('@avt-with-button-href-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-button-href',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-button-href-state'
+    );
+  });
+  test('@avt-with-button-icon-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ExpressiveCard',
+      id: 'ibm-products-components-cards-expressivecard--with-button-icon',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'ExpressiveCard @avt-with-button-icon-state'
+    );
   });
 });
diff --git a/e2e/components/UserAvatar/UserAvatar-test.avt.e2e.js b/e2e/components/UserAvatar/UserAvatar-test.avt.e2e.js
@@ -16,7 +16,7 @@ test.describe('UserAvatar @avt', () => {
   test('@avt-default-state', async ({ page }) => {
     await visitStory(page, {
       component: 'UserAvatar',
-      id: 'experimental-components-user-avatar-useravatar--default',
+      id: 'ibm-products-components-user-avatar-useravatar--default',
       globals: {
         carbonTheme: 'white',
       },
@@ -27,7 +27,7 @@ test.describe('UserAvatar @avt', () => {
   test('@avt-focus-state', async ({ page }) => {
     await visitStory(page, {
       component: 'UserAvatar',
-      id: 'experimental-components-user-avatar-useravatar--default',
+      id: 'ibm-products-components-user-avatar-useravatar--default',
       globals: {
         carbonTheme: 'white',
       },
@@ -45,7 +45,7 @@ test.describe('UserAvatar @avt', () => {
   test('@avt-hover-state', async ({ page }) => {
     await visitStory(page, {
       component: 'UserAvatar',
-      id: 'experimental-components-user-avatar-useravatar--default',
+      id: 'ibm-products-components-user-avatar-useravatar--default',
       globals: {
         carbonTheme: 'white',
       },

diff --git a/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss
@@ -58,8 +58,8 @@
 
 .carbon-theme-dropdown {
   position: fixed;
-  bottom: 1rem; // stylelint-disable-line carbon/layout-token-use
-  left: 1rem; // stylelint-disable-line carbon/layout-token-use
+  bottom: 1rem; // stylelint-disable-line carbon/layout-use
+  left: 1rem; // stylelint-disable-line carbon/layout-use
   min-width: 11.5rem;
 }
 

diff --git a/examples/carbon-for-ibm-products/AboutModal/src/Example/Example.jsx b/examples/carbon-for-ibm-products/AboutModal/src/Example/Example.jsx
@@ -82,7 +82,7 @@ export const Example = () => {
             IBM{' '}
             <span
               style={
-                // stylelint-disable-next-line carbon/type-token-use
+                // stylelint-disable-next-line carbon/type-use
                 { fontWeight: '600' }
               }
             >

diff --git a/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss
@@ -58,8 +58,8 @@
 
 .carbon-theme-dropdown {
   position: fixed;
-  bottom: 1rem; // stylelint-disable-line carbon/layout-token-use
-  left: 1rem; // stylelint-disable-line carbon/layout-token-use
+  bottom: 1rem; // stylelint-disable-line carbon/layout-use
+  left: 1rem; // stylelint-disable-line carbon/layout-use
   min-width: 11.5rem;
 }
 

diff --git a/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss
@@ -58,8 +58,8 @@
 
 .carbon-theme-dropdown {
   position: fixed;
-  bottom: 1rem; // stylelint-disable-line carbon/layout-token-use
-  left: 1rem; // stylelint-disable-line carbon/layout-token-use
+  bottom: 1rem; // stylelint-disable-line carbon/layout-use
+  left: 1rem; // stylelint-disable-line carbon/layout-use
   min-width: 11.5rem;
 }
 

diff --git a/examples/carbon-for-ibm-products/Cascade/src/Example/_example.scss b/examples/carbon-for-ibm-products/Cascade/src/Example/_example.scss
@@ -4,8 +4,8 @@
   display: inline-block;
   width: 150px;
   height: 150px;
-  // stylelint-disable-next-line carbon/layout-token-use
+  // stylelint-disable-next-line carbon/layout-use
   margin: 1rem;
-  // stylelint-disable-next-line carbon/theme-token-use
+  // stylelint-disable-next-line carbon/theme-use
   background-color: $background-inverse;
 }
diff --git a/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss
@@ -58,8 +58,8 @@
 
 .carbon-theme-dropdown {
   position: fixed;
-  bottom: 1rem; // stylelint-disable-line carbon/layout-token-use
-  left: 1rem; // stylelint-disable-line carbon/layout-token-use
+  bottom: 1rem; // stylelint-disable-line carbon/layout-use
+  left: 1rem; // stylelint-disable-line carbon/layout-use
   min-width: 11.5rem;
 }
 

diff --git a/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss
@@ -58,8 +58,8 @@
 
 .carbon-theme-dropdown {
   position: fixed;
-  bottom: 1rem; // stylelint-disable-line carbon/layout-token-use
-  left: 1rem; // stylelint-disable-line carbon/layout-token-use
+  bottom: 1rem; // stylelint-disable-line carbon/layout-use
+  left: 1rem; // stylelint-disable-line carbon/layout-use
   min-width: 11.5rem;
 }
 

diff --git a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss
@@ -58,8 +58,8 @@
 
 .carbon-theme-dropdown {
   position: fixed;
-  bottom: 1rem; // stylelint-disable-line carbon/layout-token-use
-  left: 1rem; // stylelint-disable-line carbon/layout-token-use
+  bottom: 1rem; // stylelint-disable-line carbon/layout-use
+  left: 1rem; // stylelint-disable-line carbon/layout-use
   min-width: 11.5rem;
 }