chore(project): update prettier to latest (#11542)

* chore(project): update prettier to latest

* feat(prettier-config): update to bracketSameLine

* chore(project): run prettier

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',
       },
     },
   ],

packages/icons-vue/package.json

@@ -34,7 +34,7 @@
     "@carbon/cli-reporter": "^10.5.0",
     "@carbon/icons": "^11.4.0",
     "fs-extra": "^10.0.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.6.2",
     "rimraf": "^3.0.0",
     "rollup": "^2.46.0",
     "vue": "^2.6.8"

packages/layout/tasks/build.js

@@ -31,7 +31,8 @@ async function build() {
     {
       filepath: path.join(SCSS_DIR, '_size.scss'),
       builder() {
-        const FILE_BANNER = t.Comment(` Code generated by @carbon/layout. DO NOT EDIT.
+        const FILE_BANNER =
+          t.Comment(` Code generated by @carbon/layout. DO NOT EDIT.
 
  Copyright IBM Corp. 2018, 2021
 

packages/react/src/components/ComboBox/ComboBox-story.js

@@ -13,8 +13,7 @@ import ComboBox from '../ComboBox';
 const items = [
   {
     id: 'option-0',
-    text:
-      'An example option that is really long to show what should be done to handle long text',
+    text: 'An example option that is really long to show what should be done to handle long text',
   },
   {
     id: 'option-1',

packages/react/src/components/ComboBox/ComboBox-test.e2e.js

@@ -16,8 +16,7 @@ describe('ComboBox', () => {
     const items = [
       {
         id: 'option-0',
-        text:
-          'An example option that is really long to show what should be done to handle long text',
+        text: 'An example option that is really long to show what should be done to handle long text',
       },
       {
         id: 'option-1',

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

@@ -13,8 +13,7 @@ import mdx from '../ComboBox.mdx';
 const items = [
   {
     id: 'option-0',
-    text:
-      'An example option that is really long to show what should be done to handle long text',
+    text: 'An example option that is really long to show what should be done to handle long text',
   },
   {
     id: 'option-1',

packages/react/src/components/ComposedModal/next/ComposedModal.js

@@ -209,9 +209,8 @@ const ComposedModal = React.forwardRef(function ComposedModal(
   useEffect(() => {
     const focusButton = (focusContainerElement) => {
       if (focusContainerElement) {
-        const primaryFocusElement = focusContainerElement.querySelector(
-          selectorPrimaryFocus
-        );
+        const primaryFocusElement =
+          focusContainerElement.querySelector(selectorPrimaryFocus);
         if (primaryFocusElement) {
           primaryFocusElement.focus();
           return;

packages/react/src/components/ContentSwitcher/next/index.js

@@ -96,12 +96,8 @@ function ContentTabs({
   size = 'md',
   ...rest
 }) {
-  const {
-    activeIndex,
-    selectedIndex,
-    setSelectedIndex,
-    setActiveIndex,
-  } = React.useContext(ContentSwitcherContext);
+  const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex } =
+    React.useContext(ContentSwitcherContext);
   const ref = React.useRef(null);
   const prefix = usePrefix();
   const className = cx(customClassName, `${prefix}--content-switcher`, {