Merge branch 'main' into renovate/eslint-plugin-jsdoc-37.x

.github/renovate.json5

@@ -1,18 +1,19 @@
 {
-  "extends": [   
+  "extends": [
     // https://docs.renovatebot.com/presets-config/#configjs-lib
     "config:js-lib",
 
     // https://docs.renovatebot.com/presets-default/#maintainlockfilesweekly
     ":maintainLockFilesWeekly",
-    
+
     // https://docs.renovatebot.com/presets-default/#preservesemverranges
     ":preserveSemverRanges",
-    
+
     // https://docs.renovatebot.com/presets-npm/#npmunpublishsafe
     "npm:unpublishSafe",
-    
+
     // https://docs.renovatebot.com/presets-schedule/#scheduledaily
-    "schedule:earlyMondays"
-  ]
+    "schedule:earlyMondays",
+  ],
+  "rebaseWhen": "never",
 }

.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]
@@ -128,7 +131,8 @@ jobs:
       - name: Build project
         run: yarn build --ignore '@carbon/sketch'
       - name: Run VRT
+        if: github.repository == 'carbon-design-system/carbon'
         env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_TOKEN: c9a21a3fde4fda0a0f822d633426ab26e2ab2c1cba55221d342d4047744c8c24
         run: |
           yarn run percy exec -- yarn workspace carbon-components-react test:e2e

.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/stylelint-config-carbon/index.js

@@ -16,6 +16,7 @@ module.exports = {
     require.resolve('./rules/possible-errors'),
     require.resolve('./rules/limit-language-features'),
     require.resolve('./rules/stylistic-issues'),
+    require.resolve('./plugins/a11y'),
     require.resolve('./plugins/prettier'),
     require.resolve('./plugins/scss'),
   ],

config/stylelint-config-carbon/package.json

@@ -26,6 +26,7 @@
     "stylelint": "^14.3.0"
   },
   "dependencies": {
+    "stylelint-a11y": "^1.2.3",
     "stylelint-config-idiomatic-order": "^8.1.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^24.0.0",

config/stylelint-config-carbon/plugins/a11y.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  plugins: ['stylelint-a11y'],
+  rules: {
+    'a11y/media-prefers-reduced-motion': true,
+  },
+};

docs/migration/v11.md

@@ -372,26 +372,24 @@ The `scss/globals/scss/_motion.scss` entrypoint re-exported exports from the
 `@carbon/motion` package along with providing a number of helpers and variables
 for duration and easing curves.
 
-| v10                        | v11                     |
-| :------------------------- | :---------------------- |
-| `$carbon--ease-in`         | Removed                 |
-| `$carbon--ease-out`        | Removed                 |
-| `$carbon--standard-easing` | Removed                 |
-| `$transition--base`        | Removed                 |
-| `$transition--expansion`   | Removed                 |
-| `$duration--fast-01`       | `$duration-fast-01`     |
-| `$duration--fast-02`       | `$duartion-fast-02`     |
-| `$duration--moderate-01`   | `$duration-moderate-01` |
-| `$duration--moderate-02`   | `$duration-moderate-01` |
-| `$duration--slow-01`       | `$duration-slow-01`     |
-| `$duration--slow-02`       | `$duration-slow-02`     |
-| `@function motion`         | No changes              |
-| `@mixin motion`            | No changes              |
-
-TODO what to use instead of removed items?
+| v10                        | v11                                |
+| :------------------------- | :--------------------------------- |
+| `$carbon--ease-in`         | Renamed to `$ease-in`              |
+| `$carbon--ease-out`        | Renamed to `$ease-out`             |
+| `$carbon--standard-easing` | Renamed to `$standard-easing`      |
+| `$transition--base`        | Renamed to `$transition-base`      |
+| `$transition--expansion`   | Renamed to `$transition-expansion` |
+| `$duration--fast-01`       | `$duration-fast-01`                |
+| `$duration--fast-02`       | `$duartion-fast-02`                |
+| `$duration--moderate-01`   | `$duration-moderate-01`            |
+| `$duration--moderate-02`   | `$duration-moderate-01`            |
+| `$duration--slow-01`       | `$duration-slow-01`                |
+| `$duration--slow-02`       | `$duration-slow-02`                |
+| `@function motion`         | No changes                         |
+| `@mixin motion`            | No changes                         |
 
 For a full overview of what is available in this entrypoint, check out the
-[API documentation](../../packages/motion/docs/sass.md#todo) for the
+[API documentation](../../packages/motion/docs/sass.md#api) for the
 `@carbon/motion` package.
 
 #### `scss/globals/scss/_spacing.scss`
@@ -948,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                                                         |
@@ -1058,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