Merge branch 'main' into 12610-bug-data-table-content-inside-cells-sh…

…ould-top-align-when-with-text-wrap-in-some-cells

.yarnrc.yml

@@ -20,4 +20,4 @@ supportedArchitectures:
     - linux
     - win32
 
-yarnPath: .yarn/releases/yarn-3.5.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.0.cjs

README.md

@@ -238,6 +238,8 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/guidari"><img src="https://avatars.githubusercontent.com/u/52183462?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Guilherme Datilio Ribeiro</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=guidari" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=guidari" title="Documentation">📖</a> <a href="#a11y-guidari" title="Accessibility">️️️️♿️</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aguidari" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="https://github.com/kubijo"><img src="https://avatars.githubusercontent.com/u/11244314?v=4?s=100" width="100px;" alt=""/><br /><sub><b>kubijo</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=kubijo" title="Code">💻</a></td>
     <td align="center"><a href="http://www.steveblackonline.com/"><img src="https://avatars.githubusercontent.com/u/7853451?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Steven Black</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=sjbeatle" title="Code">💻</a> <a href="#a11y-sjbeatle" title="Accessibility">️️️️♿️</a></td>
+  </tr>
+  <tr>
     <td align="center"><a href="https://github.com/mrkjdy"><img src="https://avatars.githubusercontent.com/u/32761859?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mark Judy</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mrkjdy" title="Code">💻</a></td>
   </tr>
 </table>

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "3.4.0",
+  "version": "3.5.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/jest-config-carbon/package.json

@@ -2,7 +2,7 @@
   "name": "jest-config-carbon",
   "private": true,
   "description": "Jest configuration and preset for Carbon",
-  "version": "1.10.0",
+  "version": "1.11.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/prettier-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prettier-config-carbon",
   "description": "Prettier config for the Carbon Design System",
-  "version": "0.10.0",
+  "version": "0.11.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/stylelint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stylelint-config-carbon",
   "description": "Stylelint configuration for Carbon",
-  "version": "1.13.0",
+  "version": "1.14.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

e2e/components/ComboButton/ComboButton-test.e2e.js

@@ -17,7 +17,7 @@ test.describe('ComboButton', () => {
       test('combo-button @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'ComboButton',
-          id: 'experimental-unstable-combobutton--default',
+          id: 'components-combobutton--default',
           theme,
         });
       });
@@ -27,7 +27,7 @@ test.describe('ComboButton', () => {
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'ComboButton',
-      id: 'experimental-unstable-combobutton--default',
+      id: 'components-combobutton--default',
       globals: {
         theme: 'white',
       },

e2e/components/Menu/Menu-test.e2e.js

@@ -17,7 +17,7 @@ test.describe('Menu', () => {
       test('menu @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Menu',
-          id: 'experimental-unstable-menu--playground',
+          id: 'components-menu--playground',
           theme,
         });
       });
@@ -27,7 +27,7 @@ test.describe('Menu', () => {
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'Menu',
-      id: 'experimental-unstable-menu--playground',
+      id: 'components-menu--playground',
       globals: {
         theme: 'white',
       },

e2e/components/MenuButton/MenuButton-test.e2e.js

@@ -17,7 +17,7 @@ test.describe('MenuButton', () => {
       test('menu-button @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'MenuButton',
-          id: 'experimental-unstable-menubutton--default',
+          id: 'components-menubutton--default',
           theme,
         });
       });
@@ -27,7 +27,7 @@ test.describe('MenuButton', () => {
   test('accessibility-checker @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'MenuButton',
-      id: 'experimental-unstable-menubutton--default',
+      id: 'components-menubutton--default',
       globals: {
         theme: 'white',
       },

e2e/components/OverflowMenu/OverflowMenu-test.e2e.js

@@ -29,6 +29,22 @@ test.describe('OverflowMenu', () => {
           theme,
         });
       });
+
+      test('feature flags default @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'OverflowMenu',
+          id: 'experimental-feature-flags-overflowmenu--overflow-menu',
+          theme,
+        });
+      });
+
+      test('feature flags render custom icon @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'OverflowMenu',
+          id: 'experimental-feature-flags-overflowmenu--custom-icon',
+          theme,
+        });
+      });
     });
   });
 
@@ -42,4 +58,15 @@ test.describe('OverflowMenu', () => {
     });
     await expect(page).toHaveNoACViolations('OverflowMenu');
   });
+
+  test('feature flag accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'OverflowMenu',
+      id: 'experimental-feature-flags-overflowmenu--overflow-menu',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('OverflowMenu');
+  });
 });

e2e/components/Tabs/Tabs-test.e2e.js

@@ -30,6 +30,14 @@ test.describe('Tabs', () => {
         });
       });
 
+      test('dismissable with icons @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tabs',
+          id: 'components-tabs--dismissable-with-icons',
+          theme,
+        });
+      });
+
       test('manual @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tabs',

examples/class-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "class-prefix",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.28.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.30.0",
+    "@carbon/react": "^1.31.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/codesandbox-styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.33.0",
+  "version": "0.34.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite"
@@ -11,6 +11,6 @@
     "vite": "^4.3.8"
   },
   "dependencies": {
-    "@carbon/styles": "^1.30.0"
+    "@carbon/styles": "^1.31.0-rc.0"
   }
 }

examples/codesandbox-with-sass-compilation/package.json

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox-with-sass-compilation",
-  "version": "0.31.0",
+  "version": "0.32.0-rc.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.30.0",
+    "@carbon/react": "^1.31.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/codesandbox/package.json

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox",
-  "version": "0.31.0",
+  "version": "0.32.0-rc.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.30.0",
+    "@carbon/react": "^1.31.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/custom-theme/package.json

@@ -1,15 +1,15 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.28.0",
+  "version": "0.29.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.30.0",
+    "@carbon/react": "^1.31.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/id-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "id-prefix",
   "private": true,
-  "version": "0.27.0",
+  "version": "0.28.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.30.0",
+    "@carbon/react": "^1.31.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/incremental-migration/package.json

@@ -1,7 +1,7 @@
 {
   "name": "incremental-migration",
   "private": true,
-  "version": "0.30.0",
+  "version": "0.31.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^10.49.0",
-    "@carbon/react": "^1.30.0",
+    "@carbon/react": "^1.31.0-rc.0",
     "carbon-components": "^10.57.0",
     "carbon-components-react": "^7.57.0",
     "carbon-icons": "^7.0.7",

examples/light-dark-mode/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-light-dark",
   "private": true,
-  "version": "0.28.0",
+  "version": "0.29.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.30.0",
+    "@carbon/react": "^1.31.0-rc.0",
     "next": "12.1.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/nextjs/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.30.0",
+  "version": "0.31.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.30.0",
+    "@carbon/react": "^1.31.0-rc.0",
     "next": "12.1.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/v10-token-compat-in-v11/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/v10-token-compat-in-v11/README.md

@@ -0,0 +1,44 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with
+[`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## V10 token compatibility in V11
+
+This application is an example of how to use V10 tokens inside of a Carbon V11
+application. For the most part, no extra configuration is required. For the
+Color tokens, you'll need to pull in the compatibility tokens like so:
+
+```scss
+@use '@carbon/react/scss/compat/theme';
+```
+
+## Getting Started
+
+First, run `yarn` or `npm install` and then run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
+
+## Sass
+
+First and foremost, if you want to use v11 styles in any capacity, you'll have
+to migrate to use `dart-sass`. `node-sass` has been deprecated and we migrated
+to `dart-sass` in v11. For more information about migrating, visit our docs
+[here](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#changing-from-node-sass-to-sass).
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out
+[the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
+feedback and contributions are welcome!

examples/v10-token-compat-in-v11/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>