Merge branch 'main' into danger-btn-rtl-test

.github/workflows/ci.yml

@@ -168,44 +168,44 @@ jobs:
         if: ${{ needs.vrt-runner.result != 'success' }}
         run: exit 1
 
-#   avt:
-#     runs-on: ubuntu-latest
-#     steps:
-#       - uses: actions/checkout@v3
-#       - name: Use Node.js 16.x
-#         uses: actions/setup-node@v3
-#         with:
-#           node-version: '16.x'
-#       - uses: actions/cache@v3
-#         id: cache
-#         with:
-#           path: |
-#             node_modules
-#             */**/node_modules
-#           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-#       - name: Install dependencies
-#         run: yarn install --immutable --immutable-cache
-#       - name: Install browsers
-#         run: yarn playwright install --with-deps
-#       - name: Build project
-#         run: yarn build --ignore '@carbon/sketch'
-#       - name: Build storybook
-#         run: yarn workspace @carbon/react build-storybook
-#       - name: Run storybook
-#         id: storybook
-#         run: |
-#           npx serve -l 3000 packages/react/storybook-static &
-#           pid=$!
-#           echo ::set-output name=pid::"$pid"
-#       - name: Run VRT
-#         if: github.repository == 'carbon-design-system/carbon'
-#         run: |
-#           yarn playwright test --project chromium --grep @avt
-#       - name: Stop storybook
-#         run: kill ${{ steps.storybook.outputs.pid }}
-#       - name: Upload test results
-#         if: always()
-#         uses: actions/upload-artifact@v3
-#         with:
-#           name: playwright-report
-#           path: .playwright
+  avt:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+      - uses: actions/cache@v3
+        id: cache
+        with:
+          path: |
+            node_modules
+            */**/node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Install browsers
+        run: yarn playwright install --with-deps
+      - name: Build project
+        run: yarn build --ignore '@carbon/sketch'
+      - name: Build storybook
+        run: yarn workspace @carbon/react build-storybook
+      - name: Run storybook
+        id: storybook
+        run: |
+          npx serve -l 3000 packages/react/storybook-static &
+          pid=$!
+          echo ::set-output name=pid::"$pid"
+      - name: Run VRT
+        if: github.repository == 'carbon-design-system/carbon'
+        run: |
+          yarn playwright test --project chromium --grep @avt
+      - name: Stop storybook
+        run: kill ${{ steps.storybook.outputs.pid }}
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: .playwright

actions/add-review-labels/index.js

@@ -30,13 +30,12 @@ async function run() {
     return;
   }
 
-  const {
-    data: permissionLevel,
-  } = await octokit.repos.getCollaboratorPermissionLevel({
-    owner: repository.owner.login,
-    repo: repository.name,
-    username: review.user.login,
-  });
+  const { data: permissionLevel } =
+    await octokit.repos.getCollaboratorPermissionLevel({
+      owner: repository.owner.login,
+      repo: repository.name,
+      username: review.user.login,
+    });
 
   // If the reviewer doesn't have one of the following permission levels
   // then ignore the event

config/eslint-config-carbon/package.json

@@ -48,6 +48,6 @@
     "eslint-restricted-globals": "^0.2.0"
   },
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "prettier": "^2.6.2"
   }
 }

config/prettier-config-carbon/index.js

@@ -8,7 +8,7 @@
 'use strict';
 
 module.exports = {
-  jsxBracketSameLine: true,
+  bracketSameLine: true,
   printWidth: 80,
   singleQuote: true,
   trailingComma: 'es5',

config/prettier-config-carbon/package.json

@@ -24,6 +24,6 @@
     "prettier": "^2.1.0"
   },
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "prettier": "^2.6.2"
   }
 }

config/stylelint-config-carbon/package.json

@@ -37,7 +37,7 @@
     "stylelint-scss": "^4.1.0"
   },
   "devDependencies": {
-    "prettier": "^2.2.1",
+    "prettier": "^2.6.2",
     "stylelint": "^14.3.0"
   }
 }

docs/developer-handbook.md

@@ -322,8 +322,7 @@ prefix prevents potential conflicts with class names from the user.
 ```html
 <div
   class="bx--inline-notification bx--inline-notification--error"
-  role="alert"
->
+  role="alert">
   <div class="bx--inline-notification__details">...</div>
 </div>
 ```

docs/migration/v11.md

@@ -112,7 +112,7 @@ will need to pass those into the `with` block in the import:
 
 ```scss
 @use '@carbon/styles' with (
-  $prefix: 'cds',
+  $prefix: 'cds'
 );
 ```
 
@@ -570,15 +570,15 @@ can configure Carbon on the main entrypoint:
 
 ```scss
 @use '@carbon/styles' with (
-  $prefix: 'cds',
+  $prefix: 'cds'
 );
 ```
 
 Or you can configure the `scss/_config.scss` directly:
 
 ```scss
 @use '@carbon/styles/config' with (
-  $prefix: 'cds',
+  $prefix: 'cds'
 );
 ```
 
@@ -1940,7 +1940,7 @@ You can use a "compatibility theme" by setting the `$fallback` to a value from
 @use '@carbon/themes/scss/themes';
 @use '@carbon/themes/scss/theme' with (
   $fallback: compat.$g100,
-  $theme: themes.$g100,
+  $theme: themes.$g100
 );
 ```
 

e2e/components/FileUploader/FileUploader-test.e2e.js

@@ -43,8 +43,7 @@ test.describe('FileUploader', () => {
       }) => {
         await snapshotStory(page, {
           component: 'FileUploader',
-          id:
-            'components-fileuploader--drag-and-drop-upload-container-example-application',
+          id: 'components-fileuploader--drag-and-drop-upload-container-example-application',
           theme,
         });
       });

e2e/components/UIShell/UIShell-test.e2e.js

@@ -59,8 +59,7 @@ test.describe('UIShell', () => {
       }) => {
         await snapshotStory(page, {
           component: 'UIShell',
-          id:
-            'components-ui-shell--header-base-w-navigation-actions-and-side-nav',
+          id: 'components-ui-shell--header-base-w-navigation-actions-and-side-nav',
           theme,
         });
       });

package.json

@@ -69,7 +69,7 @@
     "lerna": "^4.0.0",
     "lint-staged": "^12.0.0",
     "node-gyp": "^7.1.2",
-    "prettier": "^2.2.1",
+    "prettier": "^2.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.0",

packages/carbon-components/README.md

@@ -81,7 +81,7 @@ You can change the default theme of Carbon by doing the following:
 ```scss
 @use 'carbon-components/scss/themes';
 @use 'carbon-components/scss/theme' with (
-  $theme: themes.$g100,
+  $theme: themes.$g100
 );
 ```
 
@@ -95,7 +95,7 @@ extend the theme.
   $theme: (
     background: #e2e2e2,
     text-primary: #ffffff,
-  ),
+  )
 );
 ```
 
@@ -106,7 +106,7 @@ extend the theme.
   $fallback: themes.$g100,
   $theme: (
     custom-token-01: #000000,
-  ),
+  )
 );
 ```
 

packages/carbon-components/docs/experimental.md

@@ -137,7 +137,7 @@ This will register a helper for us to use in our `hbs` files called
 helper by doing the following:
 
 ```hbs
-{{ carbon-icon 'ChevronDownGlyph' }}
+{{carbon-icon 'ChevronDownGlyph'}}
 ```
 
 This will place in the icon named `ChevronDownGlyph` glyph from `@carbon/icons`
@@ -159,7 +159,7 @@ right-hand side of the table (when in expanded mode) you'd see
 helper by doing:
 
 ```hbs
-{{ carbon-icon 'ChevronDownGlyph' }}
+{{carbon-icon 'ChevronDownGlyph'}}
 ```
 
 #### How do I add a class to an icon?
@@ -168,7 +168,7 @@ You can add in a class by passing in `class=''` at the end of the partial. For
 example, in our dropdown we could do:
 
 ```hbs
-{{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--dropdown__arrow') }}
+{{carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--dropdown__arrow')}}
 ```
 
 This would take in the `@root.prefix` value and prepends the `--dropdown__arrow`
@@ -183,7 +183,7 @@ You can pass in any attributes, especially things like `aria-label` as a
 `aria-label` we would do the following:
 
 ```hbs
-{{ carbon-icon 'ChevronDownGlyph' aria-label='Aria label for icon' }}
+{{carbon-icon 'ChevronDownGlyph' aria-label='Aria label for icon'}}
 ```
 
 #### How do I only use `carbon-icon` for experimental components?
@@ -218,10 +218,19 @@ For most components, this will look like:
 
 ```hbs
 {{#if featureFlags.componentsX}}
-  {{ carbon-icon 'ChevronDownGlyph' class=(add @root.prefix '--dropdown__arrow') }}
+  {{carbon-icon
+    'ChevronDownGlyph'
+    class=(add @root.prefix '--dropdown__arrow')
+  }}
 {{else}}
-  <svg class="{{@root.prefix}}--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-    <path d="M10 0L5 5 0 0z"></path>
+  <svg
+    class='{{@root.prefix}}--dropdown__arrow'
+    width='10'
+    height='5'
+    viewBox='0 0 10 5'
+    fill-rule='evenodd'
+  >
+    <path d='M10 0L5 5 0 0z'></path>
   </svg>
 {{/if}}
 ```

packages/cli/package.json

@@ -42,7 +42,7 @@
     "klaw-sync": "^6.0.0",
     "lodash.template": "^4.5.0",
     "markdown-toc": "^1.2.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.6.2",
     "prettier-config-carbon": "^0.6.0",
     "progress-estimator": "^0.3.0",
     "remark": "^10.0.1",

packages/cli/src/commands/contribute/tools/getGitHubClient.js

@@ -26,8 +26,7 @@ async function getGitHubClient() {
         type: 'password',
         name: 'token',
         message: 'Provide a GitHub access token',
-        hint:
-          'Help: https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line',
+        hint: 'Help: https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line',
       },
     ];
     const answers = await prompt(question);

packages/cli/src/commands/publish.js

@@ -221,8 +221,7 @@ async function getLastGitTag() {
 
 module.exports = {
   command: 'publish <tag>',
-  desc:
-    'publish packages that have different versions from the package registry',
+  desc: 'publish packages that have different versions from the package registry',
   builder(yargs) {
     yargs.positional('tag', {
       describe: 'the version tag associated with the release',

packages/feature-flags/README.md

@@ -78,7 +78,7 @@ the module or by using `enable`, `disable`, and `merge`.
   $feature-flags: (
     'feature-flag-a': false,
     'feature-flag-b': true,
-  ),
+  )
 );
 
 // Enable `feature-flag-a`

packages/grid/scss/_mixins.scss

@@ -6,7 +6,7 @@
 //
 
 @use 'sass:meta';
-@use "sass:math";
+@use 'sass:math';
 
 @use 'config' as *;
 @use 'breakpoint' as *;

packages/icon-build-helpers/package.json

@@ -40,7 +40,7 @@
     "js-yaml": "^3.12.1",
     "klaw-sync": "^6.0.0",
     "memfs": "^3.4.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.6.2",
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",

packages/icon-helpers/src/__tests__/toSVG-test.js

@@ -22,15 +22,13 @@ const defaultDescriptor = {
     {
       elem: 'path',
       attrs: {
-        d:
-          'M12 11.03v4h-2v-4H8v6h4v4h2v-10h-2zm12.19 0H22l-3 4.39v-4.39h-2v10h2V18.3l.91-1.33L22 21.03h2.19l-2.99-5.62 2.99-4.38z',
+        d: 'M12 11.03v4h-2v-4H8v6h4v4h2v-10h-2zm12.19 0H22l-3 4.39v-4.39h-2v10h2V18.3l.91-1.33L22 21.03h2.19l-2.99-5.62 2.99-4.38z',
       },
     },
     {
       elem: 'path',
       attrs: {
-        d:
-          'M28 26H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM4 8v16h24V8z',
+        d: 'M28 26H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM4 8v16h24V8z',
       },
     },
   ],

packages/icon-helpers/src/__tests__/toString-test.js

@@ -22,15 +22,13 @@ const defaultDescriptor = {
     {
       elem: 'path',
       attrs: {
-        d:
-          'M12 11.03v4h-2v-4H8v6h4v4h2v-10h-2zm12.19 0H22l-3 4.39v-4.39h-2v10h2V18.3l.91-1.33L22 21.03h2.19l-2.99-5.62 2.99-4.38z',
+        d: 'M12 11.03v4h-2v-4H8v6h4v4h2v-10h-2zm12.19 0H22l-3 4.39v-4.39h-2v10h2V18.3l.91-1.33L22 21.03h2.19l-2.99-5.62 2.99-4.38z',
       },
     },
     {
       elem: 'path',
       attrs: {
-        d:
-          'M28 26H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM4 8v16h24V8z',
+        d: 'M28 26H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM4 8v16h24V8z',
       },
     },
   ],