docs: format MD and MDX docs

.editorconfig

@@ -1,6 +1,3 @@
-# EditorConfig helps developers define and maintain consistent	# top-most EditorConfig file
-# coding styles between different editors and IDEs
-# editorconfig.org
 root = true
 
 [*]
@@ -9,8 +6,4 @@ end_of_line = lf
 indent_size = 2
 indent_style = space
 insert_final_newline = true
-max_line_length = 80
 trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false

.github/ISSUE_TEMPLATE/ACCESSIBILITY_ISSUE.yaml

@@ -159,4 +159,5 @@ body:
     attributes:
       value: |
         > [!TIP]
+        >
         > You do not need to apply labels. Labels are applied automatically and by the Carbon team when your issue is triaged.

.github/ISSUE_TEMPLATE/BUG_REPORT.yaml

@@ -129,4 +129,5 @@ body:
     attributes:
       value: |
         > [!TIP]
+        >
         > You do not need to apply labels. Labels are applied automatically and by the Carbon team when your issue is triaged.

.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml

@@ -99,4 +99,5 @@ body:
     attributes:
       value: |
         > [!TIP]
+        >
         > You do not need to apply labels. Labels are applied automatically and by the Carbon team when your issue is triaged.

.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml

@@ -142,4 +142,5 @@ body:
     attributes:
       value: |
         > [!TIP]
+        >
         > You do not need to apply labels. Labels are applied automatically and by the Carbon team when your issue is triaged.

.github/ISSUE_TEMPLATE/QUESTION.yaml

@@ -57,4 +57,5 @@ body:
     attributes:
       value: |
         > [!TIP]
+        >
         > You do not need to apply labels. Labels are applied automatically and by the Carbon team when your issue is triaged.

docs/guides/reviewing-pull-requests.md

@@ -4,8 +4,10 @@
 - **Contributors**: use this as a guide for what to include in your PRs so
   they'll sail through review ⛵
 
-> [!IMPORTANT] This just serves as a starting point. It will not include every
-> small nit and detail that might end up in a PR review.
+> [!IMPORTANT]
+>
+> This just serves as a starting point. It will not include every small nit and
+> detail that might end up in a PR review.
 >
 > This document should remain as small as possible! The longer this gets, the
 > more difficult it will be to read and absorb.

docs/guides/sass.md

@@ -23,7 +23,8 @@
 The `@carbon/styles` package ships all of the styles for the Carbon Design
 System.
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
+>
 > You probably don't need to install this package. Framework variant packages
 > such as `@carbon/react` re-export all of `@carbon/styles`. For the examples
 > below `@carbon/styles` paths can be switched out for `@carbon/react` without
@@ -120,7 +121,8 @@ To use only a specific module, include the full path.
 @use '@carbon/styles/scss/<path-to-file>';
 ```
 
-> [!NOTE]  
+> [!NOTE]
+>
 > Sass modules can only ever be configured once. Bringing in this module and
 > configuring it should be one of the first things you do in your project.
 >

docs/preview-code.md

@@ -83,7 +83,8 @@ Over time it becomes apparent a preview API has stabilized and suits the needs
 of most users. If it isn't a breaking change, and there hasn't been much
 movement, it can be moved from "preview" status to be "stable".
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
+>
 > To initiate a move to stable:
 >
 > 1. [Open a new issue](https://github.com/carbon-design-system/carbon/issues/new?template=Blank+issue)

package.json

@@ -18,8 +18,8 @@
     "ci-check": "carbon-cli ci-check",
     "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
     "doctoc": "doctoc --title '## Table of Contents'",
-    "format": "prettier --cache --write '**/*.{js,md,scss,ts,tsx}' '!**/{build,es,lib,storybook,ts,umd}/**'",
-    "format:diff": "prettier --list-different '**/*.{js,md,scss,ts,tsx}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+    "format": "prettier --cache --write '**/*.{js,md,mdx,scss,ts,tsx}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+    "format:diff": "prettier --list-different '**/*.{js,md,mdx,scss,ts,tsx}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
     "lint": "eslint actions config packages www",
     "lint:fix": "eslint --cache --fix --max-warnings 0 actions config packages www",
     "lint:styles": "stylelint '**/*.scss' --report-needless-disables --report-invalid-scope-disables",
@@ -141,6 +141,9 @@
     "!(*sass).md": [
       "prettier --cache --write"
     ],
+    "!(*sass).mdx": [
+      "prettier --cache --write"
+    ],
     "{README.md,.all-contributorsrc}": [
       "all-contributors generate"
     ]

packages/carbon-components-react/README.md

@@ -2,7 +2,8 @@
 
 > React components for the Carbon Design System
 
-> [!CAUTION]  
+> [!CAUTION]
+>
 > `carbon-components-react` is deprecated and will not receive any more updates.
 >
 > More information is available on our

packages/carbon-components/README.md

@@ -2,7 +2,8 @@
 
 > Styles for the Carbon Design System
 
-> [!CAUTION]  
+> [!CAUTION]
+>
 > `carbon-components` is deprecated and will not receive any more updates.
 >
 > More information is available on our

packages/react/code-connect/README.md

@@ -1,6 +1,7 @@
 # Figma Code Connect for @carbon/react
 
-> [!WARNING]  
+> [!WARNING]
+>
 > Figma [Code Connect](https://github.com/figma/code-connect) for Carbon React
 > is in an exploratory phase.
 

packages/react/src/components/AILabel/AILabel.mdx

@@ -44,6 +44,7 @@ AI instances in a way that is identifiable across any IBM product.
     },
   ]}
 />
+
 ## Inline
 
 <Canvas

packages/react/src/components/AISkeleton/AISkeleton.mdx

@@ -4,7 +4,6 @@ import * as AISkeletonPlaceholderStories from './AISkeletonPlaceholder.stories';
 import * as AISkeletonTextStories from './AISkeletonText.stories';
 import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
-
 <Meta isTemplate />
 
 # AI Skeleton
@@ -16,9 +15,9 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 ## Table of Contents
 
 - [Overview](#overview)
-    - [AI Skeleton Icon](#ai-skeleton-icon)
-    - [AI Skeleton Placeholder](#ai-skeleton-placeholder)
-    - [AI Skeleton Text](#ai-skeleton-text)
+  - [AI Skeleton Icon](#ai-skeleton-icon)
+  - [AI Skeleton Placeholder](#ai-skeleton-placeholder)
+  - [AI Skeleton Text](#ai-skeleton-text)
 - [Component API](#component-api)
 - [Feedback](#feedback)
 
@@ -45,7 +44,10 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(AISkeletonPlaceholderStories._AISkeletonPlaceholder),
+      onClick: () =>
+        stackblitzPrefillConfig(
+          AISkeletonPlaceholderStories._AISkeletonPlaceholder
+        ),
     },
   ]}
 />
@@ -57,7 +59,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(AISkeletonTextStories._AISkeletonText),
+      onClick: () =>
+        stackblitzPrefillConfig(AISkeletonTextStories._AISkeletonText),
     },
   ]}
 />
@@ -70,4 +73,4 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 Help us improve this component by providing feedback, asking questions on Slack,
 or updating this file on
-[GitHub](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/AISkeleton.mdx).
+[GitHub](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/AISkeleton.mdx).

packages/react/src/components/Accordion/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-accordion--default'
-    }
+      variant: 'components-accordion--default',
+    },
   ]}
 />

packages/react/src/components/AspectRatio/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-aspectratio--default'
-    }
+      variant: 'components-aspectratio--default',
+    },
   ]}
 />

packages/react/src/components/Breadcrumb/docs/overview.mdx

@@ -6,11 +6,11 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-breadcrumb--default'
+      variant: 'components-breadcrumb--default',
     },
     {
       label: 'Breadcrumb with Overflow Menu',
-      variant: 'components-breadcrumb--breadcrumb-with-overflow-menu'
-    }
+      variant: 'components-breadcrumb--breadcrumb-with-overflow-menu',
+    },
   ]}
 />

packages/react/src/components/Button/Button.mdx

@@ -240,8 +240,12 @@ to render an icon-only button, please refer to the section on the
 
 <Unstyled>
   <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-    <Button renderIcon={Add} iconDescription="Add">Add</Button>
-    <Button renderIcon={TrashCan} kind="danger" iconDescription="TrashCan">Delete</Button>
+    <Button renderIcon={Add} iconDescription="Add">
+      {'Add'}
+    </Button>
+    <Button renderIcon={TrashCan} kind="danger" iconDescription="TrashCan">
+      {'Delete'}
+    </Button>
   </div>
 </Unstyled>
 
@@ -255,8 +259,17 @@ the Icon to ensure the proper classes are applied:
 
 <Unstyled>
   <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-    <Button renderIcon={(props) => <Add size={24} {...props} />} iconDescription="Add">Add</Button>
-    <Button renderIcon={(props) => <TrashCan size={24} {...props} />} kind="danger" iconDescription="TrashCan"> Delete </Button>
+    <Button
+      renderIcon={(props) => <Add size={24} {...props} />}
+      iconDescription="Add">
+      {'Add'}
+    </Button>
+    <Button
+      renderIcon={(props) => <TrashCan size={24} {...props} />}
+      kind="danger"
+      iconDescription="TrashCan">
+      {'Delete'}
+    </Button>
   </div>
 </Unstyled>
 

packages/react/src/components/Checkbox/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-checkbox--default'
-    }
+      variant: 'components-checkbox--default',
+    },
   ]}
 />

packages/react/src/components/ClassPrefix/docs/overview.mdx

@@ -6,7 +6,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-classprefix--default'
-    }
+      variant: 'components-classprefix--default',
+    },
   ]}
 />

packages/react/src/components/CodeSnippet/docs/overview.mdx

@@ -6,15 +6,15 @@
   variants={[
     {
       label: 'Inline',
-      variant: 'components-codesnippet--inline'
+      variant: 'components-codesnippet--inline',
     },
     {
       label: 'Multiline',
-      variant: 'components-codesnippet--multiline'
+      variant: 'components-codesnippet--multiline',
     },
     {
       label: 'Singleline',
-      variant: 'components-codesnippet--singleline'
-    }
+      variant: 'components-codesnippet--singleline',
+    },
   ]}
 />

packages/react/src/components/ComboBox/ComboBox.mdx

@@ -105,7 +105,8 @@ custom values and typeahead suggestions.
   additionalActions={[
     {
       title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(ComboBoxStories.AutocompleteWithTypeahead),
+      onClick: () =>
+        stackblitzPrefillConfig(ComboBoxStories.AutocompleteWithTypeahead),
     },
   ]}
 />
@@ -280,6 +281,17 @@ string. If you would like to hide items that do not match what the user is
 typing, you can pass in your own filtering function to the `shouldFilterItem`
 prop.
 
+{/* prettier-ignore-start */}
+
+{/*
+TODO: Is the `ComboBox` below supposed to be here, or should there just be the
+code snippet? If it is supposed to be here, it doesn't look right in
+Storybook. The options are bulleted, and the background doesn't match the
+theme.
+*/}
+
+{/* prettier-ignore-end */}
+
 <ComboBox
   id="carbon-combobox"
   items={['Apple', 'Orange', 'Banana']}
@@ -317,6 +329,7 @@ callback.
 ```js
 {selectedItem: undefined, inputValue: 'Apple'}
 ```
+
 <Canvas
   of={ComboBoxStories.AllowCustomValue}
   additionalActions={[
@@ -330,15 +343,17 @@ callback.
 ## `inputProps`
 
 Use `inputProps` to specify native input attributes to place on the `<input>`.
-These are passed to [Downshift's `getInputProps()`](https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops)
+These are passed to
+[Downshift's `getInputProps()`](https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops)
 and will override the internal input props.
 
-
 ### Using `maxLength`
 
-The native `maxLength` attribute can be included in `inputProps` to define the maximum string length that the user can enter into the input.
+The native `maxLength` attribute can be included in `inputProps` to define the
+maximum string length that the user can enter into the input.
 
-When using `maxLength`, ensure the limit is communicated to the user through both `helperText` and `invalidText`/`warnText`.
+When using `maxLength`, ensure the limit is communicated to the user through
+both `helperText` and `invalidText`/`warnText`.
 
 ```jsx
 <ComboBox
@@ -350,7 +365,6 @@ When using `maxLength`, ensure the limit is communicated to the user through bot
 />
 ```
 
-
 ## With AI Label
 
 <Canvas

packages/react/src/components/ComboBox/docs/overview.mdx

@@ -7,15 +7,15 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-combobox--default'
+      variant: 'components-combobox--default',
     },
     {
       label: 'Fluid (unstable)',
-      variant: 'experimental-unstable-fluidcombobox--default'
+      variant: 'experimental-unstable-fluidcombobox--default',
     },
     {
       label: 'Fluid Condensed (unstable)',
-      variant: 'experimental-unstable-fluidcombobox--condensed'
-    }
+      variant: 'experimental-unstable-fluidcombobox--condensed',
+    },
   ]}
 />