Merge branch 'main' into headermenu-ts

.github/workflows/deploy-react-storybook.yml

@@ -42,7 +42,7 @@ jobs:
           cd packages/react
           yarn storybook:build
       - name: Setup Pages
-        uses: actions/configure-pages@1f0c5cde4bc74cd7e1254d0cb4de8d49e9068c7d #v4.0.0
+        uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b #v5.0.0
       - name: Fix permissions
         run: |
           chmod -v -R +rX "_site/" | while read line; do

.nvmrc

@@ -1 +1 @@
-20.11
+20.12

docs/experimental-code.md

@@ -6,17 +6,24 @@ unstable for sponsor groups to leverage. During this time, the team can get
 feedback around what is working and what does not work so that changes can be
 made before an official release.
 
-This code should be treated as experimental and will break between release
-versions for the package that it is being imported from.
+Experimental code is made available in the following ways:
+
+- Components and exports prefixed with `unstable_`
+- Feature flags
+- Expanding existing APIs
+
+In all cases, experimental code should be treated as unstable and can change
+between release versions for the package that it is being imported from.
 
 - The API is not fixed, and is likely to change
 - The API is not bound by semver
-- The component export may change, be renamed, or removed in the future without
-  warning
+- The component, export, feature, etc. may change, be renamed, or removed in the
+  future without warning
 
-## Naming experimental code
+## Components and exports prefixed with `unstable_`
 
-For experimental or unstable code, we use the `unstable_` prefix. For example:
+For experimental or unstable exports, we use the `unstable_` prefix. For
+example:
 
 ```js
 // An unstable method
@@ -31,39 +38,107 @@ const unstable_meta = {
 
 // An unstable component will retain its name, specifically for things like
 // the rules of hooks plugin which depend on the correct casing of the name
-function Pagination(props) {
+function StaticNotification(props) {
   // ...
 }
 
 // However, when we export the component we will export it with the `unstable_`
 // prefix. (Similar to React.unstable_Suspense, React.unstable_Profiler)
-export { default as unstable_Pagination } from './components/Pagination';
+export { default as unstable_StaticNotification } from './components/StaticNotification';
 ```
 
 For teams using these features, they will need to import the functionality by
 using the `unstable_` prefix. For example:
 
 ```jsx
-import { unstable_Pagination as Pagination } from 'carbon-components-react';
+import { unstable_StaticNotification as StaticNotification } from '@carbon/react';
 ```
 
-## Experimental status
+### Documenting components and exports prefixed with `unstable_`
+
+Within the experimental section of the `@carbon/react` storybook, there are
+individual entries for each unstable export. These contain stories and written
+documentation outlining the functionality of these components and exports.
+
+## Feature flags
+
+Some Carbon packages ship with available feature flags. These feature flags
+enable new behavior and styling, allowing you to opt-in to new breaking changes
+while remaining on the current major version. When a new feature flag is
+introduced it is marked `false` or "off" by default to ensure backwards
+compatibility. A feature flag may be configured in javascript, sass, or both.
+
+All the currently available feature flags, as well as how to enable them, is
+documented in the
+[`@carbon/react` storybook](https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags--overview).
+
+### Feature flag naming convention
+
+All feature flags follow a prefix naming convention that indicate status.
+
+#### Flags prefixed with `enable-*`
+
+- Contain new features that we'd like consuming projects to test
+- Are generally stable and unlikely to change but may change based on user
+  feedback
+- May require some manual migration or code changes within your project
+- Are documented in storybook
+- May not be documented on https://www.carbondesignsystem.com
+- Need user feedback to ensure we've met all concerns relating to this feature
+
+If you use these flags, make sure to check our release notes where we'll outline
+any changes to them across our regularly scheduled minor version releases.
+
+#### Flags prefixed with `enable-v#-*`
+
+As usage of an existing flag increases or we determine a feature to be of high
+importance, we'll "commit" it to a future major release and rename it to use the
+`enable-v#-*` prefix. At this point the API or functionality behind this flag is
+now fixed and won't change. We intend to ship this flag as "on by default" in
+the major version indicated in the name. e.g. `enable-v12-some-feature`
+
+All breaking changes will be shipped as `enable-v12-*` flags within the current
+major release (v11). This enables projects to opt-in to breaking changes earlier
+and at their own pace avoiding one huge changeset when upgrading to the next
+major release. In theory, if all `enable-v12-*` flags are enabled within your
+project before the v12 release, no changes should need to be made when updating
+to v12.
+
+For a flag to be committed to a release and renamed to `enable-v#-*` it must:
+
+- Be tested with early adopters
+- Be fully covered in tests (Unit, AVT, and VRT)
+- Be documented in storybook
+- Be documented on https://carbondesignsystem.com
+- Have an automated migration script (codemod) available, where possible
+
+### Documenting feature flags
+
+Within the experimental section of the `@carbon/react` storybook, there is a
+"Feature Flags" folder. This contains stories and written documentation covering
+every available flag and how to configure them. Folders and stories within this
+section in storybook show components with all feature flags turned on.
+
+All the currently available feature flags, as well as how to enable them, is
+documented in the
+[`@carbon/react` storybook](https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags--overview).
 
-Components with the prefix `unstable_`, eg, `unstable_ComponentName` are
-experimental
+## Expanding existing APIs
 
-Within the storybook these components' stories are prefixed, and may include a
-notice regarding specific instability or experimental status.
+New experimental functionality can sometimes be added without the need of an
+`unstable_` export or a feature flag. Oftentimes this ends up being a new prop
+on a component. The documentation associated with this prop (TypeScript types,
+PropTypes, storybook controls, etc.) will state that it's experimental.
 
 ## Moving to stable
 
 Over time it becomes apparent an experimental API has stabilized and suits the
-needs of most users. When there hasn't been much movement on a component, it can
-be marked to be moved from "experimental" status to be "stable" by opening a new
-issue requesting it be moved to stable.
+needs of most users. If it isn't a breaking change, and there hasn't been much
+movement, it can be moved from "experimental" status to be "stable".
 
-The following criteria need to be met when moving a component from experimental
-to stable:
+To initiate a move to stable, open a new issue to request the team to evaluate
+if it can be moved. The issue should contain the following criteria that need to
+be met to move a component from experimental to stable:
 
 - [ ] All files have a copyright banner
 - [ ] All components exported in `src/index.js` and should not be `unstable_`

docs/migration/v11.md

@@ -1878,6 +1878,23 @@ const { white, g10, g90, g100 } = v10;
   counterpart.
 - **Deprecated:** v10 token was removed in v11.
 
+V11 introduces the idea of
+[component tokens](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/docs/sass.md#component-tokens)
+for tokens specific to a particular component; for example button, tag or
+notification. If you'd like to use these component tokens in your stylesheet,
+you'll need to `@use` them:
+
+```scss
+@use '@carbon/styles/scss/components/button';
+
+.my-selector {
+  background: button.$button-primary;
+}
+```
+
+Read more about using or customizing
+[component tokens](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/docs/sass.md#component-tokens).
+
 | V10 token name     | V11 token name            | V11 Contextual token   | Status     |
 | ------------------ | ------------------------- | ---------------------- | ---------- |
 | active-danger      | button-danger-active      | —                      | Updated    |

e2e/components/FluidMultiSelect/FluidMultiSelect-test.avt.e2e.js

@@ -82,8 +82,7 @@ test.describe('@avt FluidMultiSelect', () => {
     await page.keyboard.press('Space');
     await expect(menu).toBeVisible();
     // Navigation inside the menu
-    // move to first option
-    await page.keyboard.press('ArrowDown');
+    // Focus on first element by default
     await expect(
       page.getByRole('option', {
         name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
@@ -177,8 +176,7 @@ test.describe('@avt FluidMultiSelect', () => {
     await page.keyboard.press('Space');
     await expect(menu).toBeVisible();
     // Navigation inside the menu
-    // move to first option
-    await page.keyboard.press('ArrowDown');
+    // Focus on first element by default
     await expect(
       page.getByRole('option', {
         name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',

e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js

@@ -113,8 +113,7 @@ test.describe('@avt MultiSelect', () => {
     await page.keyboard.press('Space');
     await expect(menu).toBeVisible();
     // Navigation inside the menu
-    // move to first option
-    await page.keyboard.press('ArrowDown');
+    // Focus on first element by default
     await expect(
       page.getByRole('option', {
         name: 'An example option that is really long to show what should be done to handle long text',
@@ -206,8 +205,7 @@ test.describe('@avt MultiSelect', () => {
     await page.keyboard.press('Space');
     await expect(menu).toBeVisible();
     // Navigation inside the menu
-    // move to first option
-    await page.keyboard.press('ArrowDown');
+    // Focus on first element by default
     await expect(
       page.getByRole('option', {
         name: 'An example option that is really long to show what should be done to handle long text',

e2e/components/RadioButton/RadioButton-test.avt.e2e.js

@@ -54,9 +54,9 @@ test.describe('@avt RadioButton', () => {
     });
     await expect(page.locator('input#radio-1')).toBeVisible();
     await page.keyboard.press('Tab');
-    await expect(page.locator('input#radio-1')).toBeChecked();
+    await expect(page.locator('input#radio-1')).toBeVisible();
     await page.keyboard.press('ArrowDown');
-    await expect(page.locator('input#radio-2')).toBeChecked();
+    await expect(page.locator('input#radio-2')).toBeVisible();
   });
 
   test('@avt-advanced-states - invalid state', async ({ page }) => {

examples/class-prefix/package.json

@@ -1,15 +1,15 @@
 {
   "name": "class-prefix",
   "private": true,
-  "version": "0.51.0",
+  "version": "0.52.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.54.0",
+    "@carbon/react": "^1.55.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.57.0",
+  "version": "0.58.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite"
@@ -11,6 +11,6 @@
     "vite": "^4.3.8"
   },
   "dependencies": {
-    "@carbon/styles": "^1.54.0"
+    "@carbon/styles": "^1.55.0-rc.0"
   }
 }

examples/custom-theme/package.json

@@ -1,15 +1,15 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.52.0",
+  "version": "0.53.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.54.0",
+    "@carbon/react": "^1.55.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.51.0",
+  "version": "0.52.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.54.0",
+    "@carbon/react": "^1.55.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/incremental-migration-vite/package.json

@@ -1,7 +1,7 @@
 {
   "name": "incremental-migration-vite",
   "private": true,
-  "version": "0.19.0",
+  "version": "0.20.0-rc.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^10.49.0",
-    "@carbon/react": "^1.54.0",
+    "@carbon/react": "^1.55.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.52.0",
+  "version": "0.53.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.54.0",
+    "@carbon/react": "^1.55.0-rc.0",
     "next": "13.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/nextjs/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.54.0",
+  "version": "0.55.0-rc.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.54.0",
+    "@carbon/react": "^1.55.0-rc.0",
     "next": "13.5.6",
     "react": "18.2.0",
     "react-dom": "18.2.0"

examples/v10-token-compat-in-v11/package.json

@@ -1,15 +1,15 @@
 {
   "name": "v10-token-compat-in-v11",
   "private": true,
-  "version": "0.52.0",
+  "version": "0.53.0-rc.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.54.0",
+    "@carbon/react": "^1.55.0-rc.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },