Merge branch 'main' into 10670-rtl

.github/workflows/ci.yml

@@ -6,13 +6,16 @@ on:
   pull_request:
     branches:
       - main
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 jobs:
   dedupe:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - name: Run yarn dedupe
@@ -23,7 +26,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - name: Install dependencies
@@ -36,7 +39,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - name: Install dependencies
@@ -51,7 +54,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - uses: actions/[email protected]
@@ -77,7 +80,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - uses: actions/[email protected]
@@ -113,7 +116,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - uses: actions/[email protected]

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

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@main
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - name: Install dependencies

.github/workflows/deploy-vanilla-devenv.yml

@@ -17,7 +17,7 @@ jobs:
     steps:
       - uses: actions/checkout@main
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - name: Install dependencies

.github/workflows/nightly-release.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@main
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - name: Install dependencies

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v2
 
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/sync-generated-files.yml

@@ -9,7 +9,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v2.5.1
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
       - name: Install dependencies

config/eslint-config-carbon/package.json

@@ -39,7 +39,7 @@
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jest": "^26.0.0",
-    "eslint-plugin-jsdoc": "^36.0.3",
+    "eslint-plugin-jsdoc": "^37.0.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",

docs/migration/v11.md

@@ -946,7 +946,7 @@ below.
 | `TimePicker`                | Updated from a class to functional component                    |
 | `TimePickerSelect`          | Updated from a class to functional component                    |
 | `ToastNotification`         | View changes [here](#notifications)                             |
-| `Toggle`                    | Updated from a class to functional component                    |
+| `Toggle`                    | View changes [here](#toggle)                                    |
 | `ToggleSkeleton`            | Removed                                                         |
 | `ToggleSmall`               | Removed                                                         |
 | `ToggleSmallSkeleton`       | Removed                                                         |
@@ -1056,6 +1056,26 @@ ToastNotification` updates:
 - The `closeOnEscape` prop toggles the closing of notifications via the `escape`
   key.
 
+### Toggle
+
+The toggle component has been updated to improve its accessibility, rtl
+compatibility and flexibility to layout.
+
+- The underlying element has been changed from a checkbox
+  (`<input type="checkbox">`) to a switch button (`<button role="switch">`).
+  - `props.onChange` has been removed since it's not available on `<button>`
+    elements.
+  - `props.onClick` has been added to substitute the previous `onChange` event.
+- `props['aria-label']` is no longer required.
+  - `props.labelText` will always be available to screen readers without the use
+    of `aria-label`.
+  - If `props['aria-label']` is still passed, it will be emitted on the
+    `<button>` element.
+- `props.hideLabel` has been added. This hides `labelA` and `labelB` while
+  moving `labelText` to the side for height-restricted layouts.
+- `props.labelA` and `props.labelB` have been made optional and default to "Off"
+  and "On" respectively.
+
 ### Tabs
 
 ### Tooltips

packages/carbon-react/.storybook/preview.js

@@ -11,7 +11,7 @@ import { configureActions } from '@storybook/addon-actions';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import React from 'react';
 import { breakpoints } from '@carbon/layout';
-import { unstable_ThemeContext as ThemeContext } from '../src';
+import { ThemeContext } from '../src';
 import { addParameters } from '@storybook/react';
 
 export const globalTypes = {

packages/carbon-react/__tests__/index-test.js

@@ -80,6 +80,7 @@ describe('Carbon Components React', () => {
         "Heading",
         "IconButton",
         "IconSkeleton",
+        "IconTab",
         "InlineLoading",
         "InlineNotification",
         "Layer",
@@ -106,6 +107,7 @@ describe('Carbon Components React', () => {
         "Popover",
         "PopoverContent",
         "PrimaryButton",
+        "ProgressBar",
         "ProgressIndicator",
         "ProgressIndicatorSkeleton",
         "ProgressStep",
@@ -157,6 +159,9 @@ describe('Carbon Components React', () => {
         "SwitcherItem",
         "Tab",
         "TabContent",
+        "TabList",
+        "TabPanel",
+        "TabPanels",
         "Table",
         "TableActionList",
         "TableBatchAction",
@@ -186,6 +191,7 @@ describe('Carbon Components React', () => {
         "TextInput",
         "TextInputSkeleton",
         "Theme",
+        "ThemeContext",
         "Tile",
         "TileAboveTheFoldContent",
         "TileBelowTheFoldContent",
@@ -206,7 +212,6 @@ describe('Carbon Components React', () => {
         "Tooltip",
         "UnorderedList",
         "VStack",
-        "unstable_IconTab",
         "unstable_Menu",
         "unstable_MenuDivider",
         "unstable_MenuGroup",
@@ -215,11 +220,6 @@ describe('Carbon Components React', () => {
         "unstable_MenuSelectableItem",
         "unstable_PageSelector",
         "unstable_Pagination",
-        "unstable_ProgressBar",
-        "unstable_TabList",
-        "unstable_TabPanel",
-        "unstable_TabPanels",
-        "unstable_ThemeContext",
         "unstable_TreeNode",
         "unstable_TreeView",
         "unstable_useContextMenu",

packages/carbon-react/src/index.js

@@ -187,7 +187,6 @@ export {
   Grid,
   Column,
   unstable_FlexGrid as FlexGrid,
-  // Experimental
   unstable_useContextMenu,
   unstable_FeatureFlags as FeatureFlags,
   unstable_Heading as Heading,
@@ -204,14 +203,14 @@ export {
   unstable_Pagination,
   unstable_Popover as Popover,
   unstable_PopoverContent as PopoverContent,
-  unstable_ProgressBar,
+  unstable_ProgressBar as ProgressBar,
   unstable_Section as Section,
   unstable_Stack as Stack,
-  unstable_TabPanel,
-  unstable_TabPanels,
-  unstable_TabList,
-  unstable_IconTab,
-  unstable_ThemeContext,
+  unstable_TabPanel as TabPanel,
+  unstable_TabPanels as TabPanels,
+  unstable_TabList as TabList,
+  unstable_IconTab as IconTab,
+  unstable_ThemeContext as ThemeContext,
   unstable_Theme as Theme,
   unstable_Tooltip as Tooltip,
   unstable_DefinitionTooltip as DefinitionTooltip,

packages/components/package.json

@@ -128,7 +128,7 @@
     "html-loader": "^0.5.0",
     "jasmine-core": "^4.0.0",
     "karma": "^6.0.0",
-    "karma-chrome-launcher": "^2.2.0",
+    "karma-chrome-launcher": "^3.0.0",
     "karma-coverage": "^2.0.3",
     "karma-firefox-launcher": "^2.1.0",
     "karma-html2js-preprocessor": "^1.1.0",
@@ -138,7 +138,7 @@
     "karma-sourcemap-loader": "~0.3.7",
     "karma-spec-reporter": "0.0.33",
     "karma-webpack": "^3.0.0",
-    "lolex": "^3.0.0",
+    "lolex": "^5.0.0",
     "markdown-it": "^12.0.4",
     "minimatch": "^3.0.4",
     "mkdirp": "^0.5.0",

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -4532,6 +4532,7 @@ Map {
       "ariaLabel": "open and close list of options",
       "direction": "bottom",
       "flipped": false,
+      "focusTrap": true,
       "iconDescription": "open and close list of options",
       "light": false,
       "menuOffset": [Function],
@@ -4569,6 +4570,9 @@ Map {
       "flipped": Object {
         "type": "bool",
       },
+      "focusTrap": Object {
+        "type": "bool",
+      },
       "iconClass": Object {
         "type": "string",
       },

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -2394,6 +2394,7 @@ exports[`DataTable should render 1`] = `
                   className="bx--toolbar-action bx--overflow-menu"
                   direction="bottom"
                   flipped={true}
+                  focusTrap={true}
                   iconDescription="Settings"
                   light={false}
                   menuOffset={[Function]}
@@ -3381,6 +3382,7 @@ exports[`DataTable sticky header should render 1`] = `
                   className="bx--toolbar-action bx--overflow-menu"
                   direction="bottom"
                   flipped={true}
+                  focusTrap={true}
                   iconDescription="Settings"
                   light={false}
                   menuOffset={[Function]}

packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap

@@ -16,6 +16,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
     className="custom-class bx--toolbar-action bx--overflow-menu"
     direction="bottom"
     flipped={true}
+    focusTrap={true}
     iconDescription="Add"
     light={false}
     menuOffset={[Function]}

packages/react/src/components/IconButton/next/IconButton.stories.js

@@ -10,7 +10,7 @@ import React from 'react';
 import { IconButton } from '../';
 
 export default {
-  title: 'Experimental/unstable_IconButton',
+  title: 'Components/IconButton',
   component: IconButton,
   parameters: {
     controls: {

packages/react/src/components/OverflowMenu/OverflowMenu.js

@@ -123,6 +123,11 @@ class OverflowMenu extends Component {
      */
     flipped: PropTypes.bool,
 
+    /**
+     * Enable or disable focus trap behavior
+     */
+    focusTrap: PropTypes.bool,
+
     /**
      * The CSS class for the icon.
      */
@@ -234,6 +239,7 @@ class OverflowMenu extends Component {
     open: false,
     direction: DIRECTION_BOTTOM,
     flipped: false,
+    focusTrap: true,
     renderIcon: OverflowMenuVertical16,
     onClick: () => {},
     onKeyDown: () => {},
@@ -461,6 +467,7 @@ class OverflowMenu extends Component {
       iconDescription,
       direction,
       flipped,
+      focusTrap,
       menuOffset,
       menuOffsetFlip,
       iconClass,
@@ -528,7 +535,7 @@ class OverflowMenu extends Component {
 
     const wrappedMenuBody = (
       <FloatingMenu
-        focusTrap
+        focusTrap={focusTrap}
         triggerRef={this._triggerRef}
         menuDirection={direction}
         menuOffset={flipped ? menuOffsetFlip : menuOffset}

packages/react/src/components/Popover/next/Popover.stories.js

@@ -12,7 +12,7 @@ import { Popover, PopoverContent } from '../../Popover';
 import mdx from './Popover.mdx';
 
 export default {
-  title: 'Experimental/unstable_Popover',
+  title: 'Components/Popover',
   component: Popover,
   subcomponents: {
     PopoverContent,

packages/react/src/components/ProgressBar/next/ProgressBar.stories.js

@@ -10,7 +10,7 @@ import React, { useState, useEffect } from 'react';
 import ProgressBar from '../';
 
 export default {
-  title: 'Experimental/unstable_ProgressBar',
+  title: 'Components/ProgressBar',
   component: ProgressBar,
 };