diff --git a/.editorconfig b/.editorconfig index b2559f0a07af..0f1786729b40 100644 --- a/.editorconfig +++ b/.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 diff --git a/.github/ISSUE_TEMPLATE/ACCESSIBILITY_ISSUE.yaml b/.github/ISSUE_TEMPLATE/ACCESSIBILITY_ISSUE.yaml index 8d9486a2218f..81ac93d27349 100644 --- a/.github/ISSUE_TEMPLATE/ACCESSIBILITY_ISSUE.yaml +++ b/.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. diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml index 185559303868..33bd4636a4b2 100644 --- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yaml +++ b/.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. diff --git a/.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml b/.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml index 38acec41e384..2b30722cf1e1 100644 --- a/.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml +++ b/.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. diff --git a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml index 8a50f70c58c5..bbd7881bb1e7 100644 --- a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml +++ b/.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. diff --git a/.github/ISSUE_TEMPLATE/QUESTION.yaml b/.github/ISSUE_TEMPLATE/QUESTION.yaml index 4b89bbbac176..c265fa3ce69d 100644 --- a/.github/ISSUE_TEMPLATE/QUESTION.yaml +++ b/.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. diff --git a/docs/guides/reviewing-pull-requests.md b/docs/guides/reviewing-pull-requests.md index 8263b224f62b..86e49a4041ae 100644 --- a/docs/guides/reviewing-pull-requests.md +++ b/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. diff --git a/docs/guides/sass.md b/docs/guides/sass.md index fafbfd9d8a1e..2a8ea1281a8a 100644 --- a/docs/guides/sass.md +++ b/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/'; ``` -> [!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. > diff --git a/docs/preview-code.md b/docs/preview-code.md index 1baa28000170..5067838cc2f6 100644 --- a/docs/preview-code.md +++ b/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) diff --git a/package.json b/package.json index 72eb692ccc71..ea7df82be65f 100644 --- a/package.json +++ b/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" ] diff --git a/packages/carbon-components-react/README.md b/packages/carbon-components-react/README.md index 83249bef1643..f424e0c6fde3 100644 --- a/packages/carbon-components-react/README.md +++ b/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 diff --git a/packages/carbon-components/README.md b/packages/carbon-components/README.md index c2df31c9cd0f..b84bf64eb307 100644 --- a/packages/carbon-components/README.md +++ b/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 diff --git a/packages/react/code-connect/README.md b/packages/react/code-connect/README.md index 606481f205f7..f981c0d85c0a 100644 --- a/packages/react/code-connect/README.md +++ b/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. diff --git a/packages/react/src/components/AILabel/AILabel.mdx b/packages/react/src/components/AILabel/AILabel.mdx index 02663591024e..be1d63db94c7 100644 --- a/packages/react/src/components/AILabel/AILabel.mdx +++ b/packages/react/src/components/AILabel/AILabel.mdx @@ -44,6 +44,7 @@ AI instances in a way that is identifiable across any IBM product. }, ]} /> + ## Inline # 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). \ No newline at end of file +[GitHub](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/AISkeleton.mdx). diff --git a/packages/react/src/components/Accordion/docs/overview.mdx b/packages/react/src/components/Accordion/docs/overview.mdx index 3735a5c803a0..c02a1cc321be 100644 --- a/packages/react/src/components/Accordion/docs/overview.mdx +++ b/packages/react/src/components/Accordion/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-accordion--default' - } + variant: 'components-accordion--default', + }, ]} /> diff --git a/packages/react/src/components/AspectRatio/docs/overview.mdx b/packages/react/src/components/AspectRatio/docs/overview.mdx index 13c381f9a92e..53bfcccb763f 100644 --- a/packages/react/src/components/AspectRatio/docs/overview.mdx +++ b/packages/react/src/components/AspectRatio/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-aspectratio--default' - } + variant: 'components-aspectratio--default', + }, ]} /> diff --git a/packages/react/src/components/Breadcrumb/docs/overview.mdx b/packages/react/src/components/Breadcrumb/docs/overview.mdx index f4375decff1c..c5af200d1f00 100644 --- a/packages/react/src/components/Breadcrumb/docs/overview.mdx +++ b/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', + }, ]} /> diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx index 3f7153462ba2..595853dd9604 100644 --- a/packages/react/src/components/Button/Button.mdx +++ b/packages/react/src/components/Button/Button.mdx @@ -240,8 +240,12 @@ to render an icon-only button, please refer to the section on the
- - + +
@@ -255,8 +259,17 @@ the Icon to ensure the proper classes are applied:
- - + +
diff --git a/packages/react/src/components/Checkbox/docs/overview.mdx b/packages/react/src/components/Checkbox/docs/overview.mdx index f94018e3611d..79c4b8324245 100644 --- a/packages/react/src/components/Checkbox/docs/overview.mdx +++ b/packages/react/src/components/Checkbox/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-checkbox--default' - } + variant: 'components-checkbox--default', + }, ]} /> diff --git a/packages/react/src/components/ClassPrefix/docs/overview.mdx b/packages/react/src/components/ClassPrefix/docs/overview.mdx index 4b4eb9511f99..2c2d6dfac77e 100644 --- a/packages/react/src/components/ClassPrefix/docs/overview.mdx +++ b/packages/react/src/components/ClassPrefix/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-classprefix--default' - } + variant: 'components-classprefix--default', + }, ]} /> diff --git a/packages/react/src/components/CodeSnippet/docs/overview.mdx b/packages/react/src/components/CodeSnippet/docs/overview.mdx index 6e033888e726..ae3c1d6a772b 100644 --- a/packages/react/src/components/CodeSnippet/docs/overview.mdx +++ b/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', + }, ]} /> diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx index 10edb8a11d35..e14c245705b3 100644 --- a/packages/react/src/components/ComboBox/ComboBox.mdx +++ b/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,17 +281,6 @@ 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. - - menu?.item?.toLowerCase().includes(menu?.inputValue?.toLowerCase()) - } - onChange={() => {}} -/> - ```jsx const filterItems = (menu) => { return menu?.item?.toLowerCase().includes(menu?.inputValue?.toLowerCase()); @@ -317,6 +307,7 @@ callback. ```js {selectedItem: undefined, inputValue: 'Apple'} ``` + `. -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 ``` - ## With AI Label diff --git a/packages/react/src/components/ComboButton/ComboButton.mdx b/packages/react/src/components/ComboButton/ComboButton.mdx index 6f38cfa814ec..6145e24d5cd5 100644 --- a/packages/react/src/components/ComboButton/ComboButton.mdx +++ b/packages/react/src/components/ComboButton/ComboButton.mdx @@ -1,5 +1,5 @@ import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks'; -import * as ComboButtonStories from './ComboButton.stories.js' +import * as ComboButtonStories from './ComboButton.stories.js'; import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -89,18 +89,21 @@ understand the `menuAlignment` prop. additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(ComboButtonStories.WithMenuAlignment), + onClick: () => + stackblitzPrefillConfig(ComboButtonStories.WithMenuAlignment), }, ]} /> ## Experimental Auto Align + stackblitzPrefillConfig(ComboButtonStories.ExperimentalAutoAlign), + onClick: () => + stackblitzPrefillConfig(ComboButtonStories.ExperimentalAutoAlign), }, ]} /> diff --git a/packages/react/src/components/ComboButton/docs/overview.mdx b/packages/react/src/components/ComboButton/docs/overview.mdx index d6b052e20f2a..dc5e93aced89 100644 --- a/packages/react/src/components/ComboButton/docs/overview.mdx +++ b/packages/react/src/components/ComboButton/docs/overview.mdx @@ -7,7 +7,7 @@ variants={[ { label: 'Default', - variant: 'components-combobutton--default' + variant: 'components-combobutton--default', }, ]} /> diff --git a/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx b/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx index 4c9a5f7a5c30..7f82dc5defa4 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx +++ b/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx @@ -96,8 +96,9 @@ to a different level: ``` -Instead of wrapping your component with `ComposedModalPresence`, you can also use the higher-order function `withComposedModalPresence`. -This will automatically wrap your component and handle the props and types for you: +Instead of wrapping your component with `ComposedModalPresence`, you can also +use the higher-order function `withComposedModalPresence`. This will +automatically wrap your component and handle the props and types for you: ```jsx export const MyComposedModal = withComposedModalPresence( diff --git a/packages/react/src/components/ComposedModal/docs/overview.mdx b/packages/react/src/components/ComposedModal/docs/overview.mdx index b5b7ae4c9dd0..b251acba93db 100644 --- a/packages/react/src/components/ComposedModal/docs/overview.mdx +++ b/packages/react/src/components/ComposedModal/docs/overview.mdx @@ -8,19 +8,19 @@ variants={[ { label: 'Default', - variant: 'components-composedmodal--default' + variant: 'components-composedmodal--default', }, { label: 'Full Width', - variant: 'components-composedmodal--full-width' + variant: 'components-composedmodal--full-width', }, { label: 'Passive Modal', - variant: 'components-composedmodal--passive-modal' + variant: 'components-composedmodal--passive-modal', }, { label: 'With State Manager', - variant: 'components-composedmodal--with-state-manager' - } + variant: 'components-composedmodal--with-state-manager', + }, ]} /> diff --git a/packages/react/src/components/ContainedList/ContainedList.mdx b/packages/react/src/components/ContainedList/ContainedList.mdx index 614f67ef66d9..0aa263cb5fb9 100644 --- a/packages/react/src/components/ContainedList/ContainedList.mdx +++ b/packages/react/src/components/ContainedList/ContainedList.mdx @@ -182,7 +182,8 @@ export const WithPersistentSearch = () => { additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(ContainedListStories.UsageExamples), + onClick: () => + stackblitzPrefillConfig(ContainedListStories.UsageExamples), }, ]} /> @@ -230,7 +231,8 @@ export const WithPersistentSearch = () => { additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(ContainedListStories.WithInteractiveItems), + onClick: () => + stackblitzPrefillConfig(ContainedListStories.WithInteractiveItems), }, ]} /> @@ -242,7 +244,10 @@ export const WithPersistentSearch = () => { additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(ContainedListStories.WithInteractiveItemsAndActions), + onClick: () => + stackblitzPrefillConfig( + ContainedListStories.WithInteractiveItemsAndActions + ), }, ]} /> @@ -254,7 +259,8 @@ export const WithPersistentSearch = () => { additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(ContainedListStories.WithListTitleDecorators), + onClick: () => + stackblitzPrefillConfig(ContainedListStories.WithListTitleDecorators), }, ]} /> diff --git a/packages/react/src/components/ContentSwitcher/docs/overview.mdx b/packages/react/src/components/ContentSwitcher/docs/overview.mdx index 8f33a0e5dbb6..dd13e0fc2dbc 100644 --- a/packages/react/src/components/ContentSwitcher/docs/overview.mdx +++ b/packages/react/src/components/ContentSwitcher/docs/overview.mdx @@ -7,7 +7,7 @@ variants={[ { label: 'Default', - variant: 'components-contentswitcher--default' - } + variant: 'components-contentswitcher--default', + }, ]} /> diff --git a/packages/react/src/components/ContextMenu/docs/overview.mdx b/packages/react/src/components/ContextMenu/docs/overview.mdx index e454f5a4a737..b8d571da9934 100644 --- a/packages/react/src/components/ContextMenu/docs/overview.mdx +++ b/packages/react/src/components/ContextMenu/docs/overview.mdx @@ -7,7 +7,7 @@ variants={[ { label: 'Default', - variant: 'hooks-usecontextmenu--use-context-menu' + variant: 'hooks-usecontextmenu--use-context-menu', }, ]} /> diff --git a/packages/react/src/components/ContextMenu/useContextMenu.mdx b/packages/react/src/components/ContextMenu/useContextMenu.mdx index f8f3f57ba3f2..fbfe0176f2b4 100644 --- a/packages/react/src/components/ContextMenu/useContextMenu.mdx +++ b/packages/react/src/components/ContextMenu/useContextMenu.mdx @@ -52,8 +52,7 @@ function SomeComponent() { additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => - stackblitzPrefillConfig(useContextMenu.SpecificElement), + onClick: () => stackblitzPrefillConfig(useContextMenu.SpecificElement), }, ]} /> @@ -71,8 +70,7 @@ therefore be configured by the user: additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => - stackblitzPrefillConfig(useContextMenu._useContextMenu), + onClick: () => stackblitzPrefillConfig(useContextMenu._useContextMenu), }, ]} /> diff --git a/packages/react/src/components/CopyButton/docs/overview.mdx b/packages/react/src/components/CopyButton/docs/overview.mdx index f0dea216eb70..fac33adb749f 100644 --- a/packages/react/src/components/CopyButton/docs/overview.mdx +++ b/packages/react/src/components/CopyButton/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-copybutton--default' - } + variant: 'components-copybutton--default', + }, ]} /> diff --git a/packages/react/src/components/DataTable/DataTable.mdx b/packages/react/src/components/DataTable/DataTable.mdx index 162cb6baf69e..29a466c47d67 100644 --- a/packages/react/src/components/DataTable/DataTable.mdx +++ b/packages/react/src/components/DataTable/DataTable.mdx @@ -360,7 +360,7 @@ the following components: - `TableSelectAll` - `TableSelectRow` - + _Note: press "Show code" above to view a code snippet of this example_ diff --git a/packages/react/src/components/DataTable/docs/overview.mdx b/packages/react/src/components/DataTable/docs/overview.mdx index cce04bb8b0d3..c67310b7cf00 100644 --- a/packages/react/src/components/DataTable/docs/overview.mdx +++ b/packages/react/src/components/DataTable/docs/overview.mdx @@ -8,59 +8,59 @@ variants={[ { label: 'Basic', - variant: 'components-datatable-basic--default' + variant: 'components-datatable-basic--default', }, { label: 'Batch Actions', - variant: 'components-datatable-batch-actions--default' + variant: 'components-datatable-batch-actions--default', }, { label: 'Dynamic', - variant: 'components-datatable-dynamic--default' + variant: 'components-datatable-dynamic--default', }, { label: 'Expansion', - variant: 'components-datatable-expansion--default' + variant: 'components-datatable-expansion--default', }, { label: 'Batch Expansion', - variant: 'components-datatable-expansion--batch-expansion' + variant: 'components-datatable-expansion--batch-expansion', }, { label: 'Filtering', - variant: 'components-datatable-filtering--default' + variant: 'components-datatable-filtering--default', }, { label: 'Selection', - variant: 'components-datatable-selection--default' + variant: 'components-datatable-selection--default', }, { label: 'With Radio Selection', - variant: 'components-datatable-selection--with-radio-selection' + variant: 'components-datatable-selection--with-radio-selection', }, { label: 'With Selection And Sorting', - variant: 'components-datatable-selection--with-selection-and-sorting' + variant: 'components-datatable-selection--with-selection-and-sorting', }, { label: 'Sorting', - variant: 'components-datatable-sorting--default' + variant: 'components-datatable-sorting--default', }, { label: 'Toolbar', - variant: 'components-datatable-toolbar--default' + variant: 'components-datatable-toolbar--default', }, { label: 'Persistent Toolbar', - variant: 'components-datatable-toolbar--persistent-toolbar' + variant: 'components-datatable-toolbar--persistent-toolbar', }, { label: 'Small Persistent Toolbar', - variant: 'components-datatable-toolbar--small-persistent-toolbar' + variant: 'components-datatable-toolbar--small-persistent-toolbar', }, { label: 'With Overflow Menu', - variant: 'components-datatable-toolbar--with-overflow-menu' - } + variant: 'components-datatable-toolbar--with-overflow-menu', + }, ]} /> diff --git a/packages/react/src/components/DatePicker/docs/overview.mdx b/packages/react/src/components/DatePicker/docs/overview.mdx index 8b46f54d6e27..6a3c7b9b4f22 100644 --- a/packages/react/src/components/DatePicker/docs/overview.mdx +++ b/packages/react/src/components/DatePicker/docs/overview.mdx @@ -7,27 +7,27 @@ variants={[ { label: 'Range With Calendar', - variant: 'components-datepicker--range-with-calendar' + variant: 'components-datepicker--range-with-calendar', }, { label: 'Simple', - variant: 'components-datepicker--simple' + variant: 'components-datepicker--simple', }, { label: 'Single With Calendar', - variant: 'components-datepicker--single-with-calendar' + variant: 'components-datepicker--single-with-calendar', }, { label: 'Fluid Range With Calendar (unstable)', - variant: 'experimental-unstable-fluiddatepicker--range-with-calendar' + variant: 'experimental-unstable-fluiddatepicker--range-with-calendar', }, { label: 'Fluid Simple (unstable)', - variant: 'experimental-unstable-fluiddatepicker--simple' + variant: 'experimental-unstable-fluiddatepicker--simple', }, { label: 'Fluid Single (unstable)', - variant: 'experimental-unstable-fluiddatepicker--single' - } + variant: 'experimental-unstable-fluiddatepicker--single', + }, ]} /> diff --git a/packages/react/src/components/Dropdown/docs/overview.mdx b/packages/react/src/components/Dropdown/docs/overview.mdx index fbc9ffd34ee6..cea47f808056 100644 --- a/packages/react/src/components/Dropdown/docs/overview.mdx +++ b/packages/react/src/components/Dropdown/docs/overview.mdx @@ -7,19 +7,19 @@ variants={[ { label: 'Default', - variant: 'components-dropdown--default' + variant: 'components-dropdown--default', }, { label: 'Inline', - variant: 'components-dropdown--inline' + variant: 'components-dropdown--inline', }, { label: 'Fluid (unstable)', - variant: 'experimental-unstable-fluiddropdown--default' + variant: 'experimental-unstable-fluiddropdown--default', }, { label: 'Fluid Condensed (unstable)', - variant: 'experimental-unstable-fluiddropdown--condensed' - } + variant: 'experimental-unstable-fluiddropdown--condensed', + }, ]} /> diff --git a/packages/react/src/components/ErrorBoundary/ErrorBoundary.mdx b/packages/react/src/components/ErrorBoundary/ErrorBoundary.mdx index 41186b620509..9036b3c55198 100644 --- a/packages/react/src/components/ErrorBoundary/ErrorBoundary.mdx +++ b/packages/react/src/components/ErrorBoundary/ErrorBoundary.mdx @@ -39,4 +39,3 @@ 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/ErrorBoundary/ErrorBoundary.mdx). - diff --git a/packages/react/src/components/ErrorBoundary/docs/overview.mdx b/packages/react/src/components/ErrorBoundary/docs/overview.mdx index 2afad9ee8172..55dba7075150 100644 --- a/packages/react/src/components/ErrorBoundary/docs/overview.mdx +++ b/packages/react/src/components/ErrorBoundary/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'components-errorboundary--default' + variant: 'components-errorboundary--default', }, { label: 'With Custom Context', - variant: 'components-errorboundary--with-custom-context' - } + variant: 'components-errorboundary--with-custom-context', + }, ]} /> diff --git a/packages/react/src/components/FileUploader/FileUploader.featureflag.mdx b/packages/react/src/components/FileUploader/FileUploader.featureflag.mdx index 7e40ff90612a..c369c2a544d9 100644 --- a/packages/react/src/components/FileUploader/FileUploader.featureflag.mdx +++ b/packages/react/src/components/FileUploader/FileUploader.featureflag.mdx @@ -9,9 +9,10 @@ FileUploader component, including richer callback data and expanded trigger events for `onChange` and `onDelete`. When this flag is enabled, the `onChange` callback is consistently triggered for -all file list modifications (additions, deletions, programmatic clears), and both -`onChange` and `onDelete` events are augmented with detailed file information -like `deletedFile`, `addedFiles`, and `currentFiles` on `event.target`. +all file list modifications (additions, deletions, programmatic clears), and +both `onChange` and `onDelete` events are augmented with detailed file +information like `deletedFile`, `addedFiles`, and `currentFiles` on +`event.target`. ## Enable enhanced FileUploader callbacks @@ -20,7 +21,10 @@ like `deletedFile`, `addedFiles`, and `currentFiles` on `event.target`. console.log('onChange', evt.target.action, evt.target.currentFiles)} + onChange={(evt) => + console.log('onChange', evt.target.action, evt.target.currentFiles) + } onDelete={(evt) => console.log('onDelete', evt.target.deletedFile)} /> - \ No newline at end of file + +``` diff --git a/packages/react/src/components/FileUploader/FileUploader.mdx b/packages/react/src/components/FileUploader/FileUploader.mdx index aeb096b8f760..4a5af928e0ca 100644 --- a/packages/react/src/components/FileUploader/FileUploader.mdx +++ b/packages/react/src/components/FileUploader/FileUploader.mdx @@ -18,11 +18,11 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - [Overview](#overview) - [Drag And Drop](#drag-and-drop) - - [Drag And Drop Upload Container Example Application](#drag-and-drop-upload-container-example-application) - - [Drag And Drop Upload Single Container Example Application](#drag-and-drop-upload-single-container-example-application) + - [Drag And Drop Upload Container Example Application](#drag-and-drop-upload-container-example-application) + - [Drag And Drop Upload Single Container Example Application](#drag-and-drop-upload-single-container-example-application) - [File](#file) - - [File Uploader Drop Container](#file-uploader-drop-container) - - [File Uploader Item](#file-uploader-item) + - [File Uploader Drop Container](#file-uploader-drop-container) + - [File Uploader Item](#file-uploader-item) - [Skeleton state](#skeleton-state) - [Component API](#component-api) - [Feedback](#feedback) @@ -50,23 +50,30 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FileUploaderStories.DragAndDropUploadContainerExampleApplication), + onClick: () => + stackblitzPrefillConfig( + FileUploaderStories.DragAndDropUploadContainerExampleApplication + ), }, ]} /> #### Drag And Drop Upload Single Container Example Application + stackblitzPrefillConfig(FileUploaderStories.DragAndDropUploadSingleContainerExampleApplication), + onClick: () => + stackblitzPrefillConfig( + FileUploaderStories.DragAndDropUploadSingleContainerExampleApplication + ), }, ]} /> -## File +## File #### File Uploader Drop Container @@ -75,7 +82,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FileUploaderStories._FileUploaderDropContainer), + onClick: () => + stackblitzPrefillConfig(FileUploaderStories._FileUploaderDropContainer), }, ]} /> @@ -87,12 +95,14 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FileUploaderStories._FileUploaderItem), + onClick: () => + stackblitzPrefillConfig(FileUploaderStories._FileUploaderItem), }, ]} /> ## Skeleton state + diff --git a/packages/react/src/components/FlexGrid/docs/overview.mdx b/packages/react/src/components/FlexGrid/docs/overview.mdx index ae9cc6aedfb5..f57a6bb36967 100644 --- a/packages/react/src/components/FlexGrid/docs/overview.mdx +++ b/packages/react/src/components/FlexGrid/docs/overview.mdx @@ -7,39 +7,39 @@ variants={[ { label: 'Auto Columns', - variant: 'elements-flexgrid--auto-columns' + variant: 'elements-flexgrid--auto-columns', }, { label: 'Condensed', - variant: 'elements-flexgrid--condensed' + variant: 'elements-flexgrid--condensed', }, { label: 'Condensed Columns', - variant: 'elements-flexgrid--condensed-columns' + variant: 'elements-flexgrid--condensed-columns', }, { label: 'Full Width', - variant: 'elements-flexgrid--full-width' + variant: 'elements-flexgrid--full-width', }, { label: 'Mixed Gutter Modes', - variant: 'elements-flexgrid--mixed-gutter-modes' + variant: 'elements-flexgrid--mixed-gutter-modes', }, { label: 'Narrow', - variant: 'elements-flexgrid--narrow' + variant: 'elements-flexgrid--narrow', }, { label: 'Narrow Columns', - variant: 'elements-flexgrid--narrow-columns' + variant: 'elements-flexgrid--narrow-columns', }, { label: 'Offset', - variant: 'elements-flexgrid--offset' + variant: 'elements-flexgrid--offset', }, { label: 'Responsive Grid', - variant: 'elements-flexgrid--responsive-grid' - } + variant: 'elements-flexgrid--responsive-grid', + }, ]} /> diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.mdx b/packages/react/src/components/FluidComboBox/FluidComboBox.mdx index b9948e8cb939..1922c3f13a88 100644 --- a/packages/react/src/components/FluidComboBox/FluidComboBox.mdx +++ b/packages/react/src/components/FluidComboBox/FluidComboBox.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid ComboBox [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidComboBox) @@ -13,7 +12,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';  |  [Accessibility](https://www.carbondesignsystem.com/components/ComboBox/accessibility) - {/* */} ## Table of Contents diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.mdx b/packages/react/src/components/FluidDatePicker/FluidDatePicker.mdx index 5e3bd6c76432..bd252852cd6c 100644 --- a/packages/react/src/components/FluidDatePicker/FluidDatePicker.mdx +++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid DatePicker [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidDatePicker) @@ -67,7 +66,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FluidDatePickerStories.RangeWithCalendar), + onClick: () => + stackblitzPrefillConfig(FluidDatePickerStories.RangeWithCalendar), }, ]} /> diff --git a/packages/react/src/components/FluidDropdown/FluidDropdown.mdx b/packages/react/src/components/FluidDropdown/FluidDropdown.mdx index 2e1d7013e721..90106640e485 100644 --- a/packages/react/src/components/FluidDropdown/FluidDropdown.mdx +++ b/packages/react/src/components/FluidDropdown/FluidDropdown.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid Dropdown [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidDropdown) @@ -13,7 +12,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';  |  [Accessibility](https://www.carbondesignsystem.com/components/Dropdown/accessibility) - {/* */} ## Table of Contents diff --git a/packages/react/src/components/FluidForm/FluidForm.mdx b/packages/react/src/components/FluidForm/FluidForm.mdx index fef5c4e509ca..a3e48c2fae56 100644 --- a/packages/react/src/components/FluidForm/FluidForm.mdx +++ b/packages/react/src/components/FluidForm/FluidForm.mdx @@ -3,7 +3,6 @@ import * as FluidFormStories from './FluidForm.stories'; - # Fluid Form [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidForm) @@ -12,7 +11,6 @@ import * as FluidFormStories from './FluidForm.stories';  |  [Accessibility](https://www.carbondesignsystem.com/components/form/accessibility) - {/* */} ## Table of Contents diff --git a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.mdx b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.mdx index 654281df1c9d..4e935fd0f0e2 100644 --- a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.mdx +++ b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid Multiselect [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidMultiselect) @@ -13,7 +12,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';  |  [Accessibility](https://www.carbondesignsystem.com/components/Multiselect/accessibility) - {/* */} ## Table of Contents @@ -38,7 +36,10 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FluidTFluidMultiSelectStoriesextAreaStories.Default), + onClick: () => + stackblitzPrefillConfig( + FluidTFluidMultiSelectStoriesextAreaStories.Default + ), }, ]} /> @@ -50,7 +51,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FluidMultiSelectStories.Filterable), + onClick: () => + stackblitzPrefillConfig(FluidMultiSelectStories.Filterable), }, ]} /> @@ -62,7 +64,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FluidMultiSelectStories._FilterableWithLayer), + onClick: () => + stackblitzPrefillConfig(FluidMultiSelectStories._FilterableWithLayer), }, ]} /> @@ -86,7 +89,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FluidMultiSelectStories.withAILabel), + onClick: () => + stackblitzPrefillConfig(FluidMultiSelectStories.withAILabel), }, ]} /> diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.mdx b/packages/react/src/components/FluidNumberInput/FluidNumberInput.mdx index 4a9502611e64..68e21e6e90ce 100644 --- a/packages/react/src/components/FluidNumberInput/FluidNumberInput.mdx +++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid NumberInput [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidNumberInput) @@ -13,7 +12,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';  |  [Accessibility](https://www.carbondesignsystem.com/components/NumberInput/accessibility) - {/* */} ## Table of Contents diff --git a/packages/react/src/components/FluidSearch/FluidSearch.mdx b/packages/react/src/components/FluidSearch/FluidSearch.mdx index bf2a3d2393c9..ee4add711dd7 100644 --- a/packages/react/src/components/FluidSearch/FluidSearch.mdx +++ b/packages/react/src/components/FluidSearch/FluidSearch.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid Search [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidSearch) @@ -13,7 +12,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';  |  [Accessibility](https://www.carbondesignsystem.com/components/Search/accessibility) - {/* */} ## Table of Contents diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.mdx b/packages/react/src/components/FluidTextArea/FluidTextArea.mdx index 3764b325f4e4..48bd3d45d61b 100644 --- a/packages/react/src/components/FluidTextArea/FluidTextArea.mdx +++ b/packages/react/src/components/FluidTextArea/FluidTextArea.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid TextArea [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidTextArea) @@ -55,7 +54,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FluidTextAreaStories.DefaultWithToggletip), + onClick: () => + stackblitzPrefillConfig(FluidTextAreaStories.DefaultWithToggletip), }, ]} /> @@ -67,7 +67,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FluidTextAreaStories.DefaultWithLayers), + onClick: () => + stackblitzPrefillConfig(FluidTextAreaStories.DefaultWithLayers), }, ]} /> diff --git a/packages/react/src/components/FluidTextInput/FluidPasswordInput.mdx b/packages/react/src/components/FluidTextInput/FluidPasswordInput.mdx index 7558085ca050..4deadc69f089 100644 --- a/packages/react/src/components/FluidTextInput/FluidPasswordInput.mdx +++ b/packages/react/src/components/FluidTextInput/FluidPasswordInput.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid PasswordInput [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidPasswordInput) diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.mdx b/packages/react/src/components/FluidTextInput/FluidTextInput.mdx index 686dec6cb100..cbe188fcfea9 100644 --- a/packages/react/src/components/FluidTextInput/FluidTextInput.mdx +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid TextInput [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidTextInput) @@ -54,7 +53,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(FluidTextInputStories.DefaultWithToggletip), + onClick: () => + stackblitzPrefillConfig(FluidTextInputStories.DefaultWithToggletip), }, ]} /> diff --git a/packages/react/src/components/FluidTimePicker/FluidTimePicker.mdx b/packages/react/src/components/FluidTimePicker/FluidTimePicker.mdx index 7cd341871ef9..5394dd4f7b6b 100644 --- a/packages/react/src/components/FluidTimePicker/FluidTimePicker.mdx +++ b/packages/react/src/components/FluidTimePicker/FluidTimePicker.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Fluid TimePicker [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidTimePicker) diff --git a/packages/react/src/components/Form/Form.mdx b/packages/react/src/components/Form/Form.mdx index 01d6d0687450..c25fd0dcdc78 100644 --- a/packages/react/src/components/Form/Form.mdx +++ b/packages/react/src/components/Form/Form.mdx @@ -4,7 +4,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Form [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Form) @@ -13,7 +12,6 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';  |  [Accessibility](https://www.carbondesignsystem.com/components/form/accessibility) - {/* */} ## Table of Contents diff --git a/packages/react/src/components/Form/docs/overview.mdx b/packages/react/src/components/Form/docs/overview.mdx index 19aab480ab8c..74b4e8b9fe2f 100644 --- a/packages/react/src/components/Form/docs/overview.mdx +++ b/packages/react/src/components/Form/docs/overview.mdx @@ -7,11 +7,11 @@ variants={[ { label: 'Default', - variant: 'components-form--default' + variant: 'components-form--default', }, { label: 'Fluid (unstable)', - variant: 'experimental-fluidform--default' - } + variant: 'experimental-fluidform--default', + }, ]} /> diff --git a/packages/react/src/components/FormLabel/FormLabel.mdx b/packages/react/src/components/FormLabel/FormLabel.mdx index 5b0a558a7917..80ce488ef3c2 100644 --- a/packages/react/src/components/FormLabel/FormLabel.mdx +++ b/packages/react/src/components/FormLabel/FormLabel.mdx @@ -17,7 +17,7 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; ## Table of Contents - [Overview](#overview) - - [With Toggletip](#with-toggletip) + - [With Toggletip](#with-toggletip) - [Component API](#component-api) - [Feedback](#feedback) diff --git a/packages/react/src/components/FormLabel/docs/overview.mdx b/packages/react/src/components/FormLabel/docs/overview.mdx index 02ebb14ab0af..28a90ef805e8 100644 --- a/packages/react/src/components/FormLabel/docs/overview.mdx +++ b/packages/react/src/components/FormLabel/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-formlabel--default' - } + variant: 'components-formlabel--default', + }, ]} /> diff --git a/packages/react/src/components/Grid/docs/overview.mdx b/packages/react/src/components/Grid/docs/overview.mdx index eea08c6fa376..6a4de290eebf 100644 --- a/packages/react/src/components/Grid/docs/overview.mdx +++ b/packages/react/src/components/Grid/docs/overview.mdx @@ -8,39 +8,39 @@ variants={[ { label: 'Default', - variant: 'elements-grid--default' + variant: 'elements-grid--default', }, { label: 'Condensed', - variant: 'elements-grid--condensed' + variant: 'elements-grid--condensed', }, { label: 'Full Width', - variant: 'elements-grid--full-width' + variant: 'elements-grid--full-width', }, { label: 'Grid Start End', - variant: 'elements-grid--grid-start-end' + variant: 'elements-grid--grid-start-end', }, { label: 'Mixed Gutter Modes', - variant: 'elements-grid--mixed-gutter-modes' + variant: 'elements-grid--mixed-gutter-modes', }, { label: 'Narrow', - variant: 'elements-grid--narrow' + variant: 'elements-grid--narrow', }, { label: 'Offset', - variant: 'elements-grid--offset' + variant: 'elements-grid--offset', }, { label: 'Responsive', - variant: 'elements-grid--responsive' + variant: 'elements-grid--responsive', }, { label: 'Subgrid', - variant: 'elements-grid--subgrid' - } + variant: 'elements-grid--subgrid', + }, ]} /> diff --git a/packages/react/src/components/Heading/docs/overview.mdx b/packages/react/src/components/Heading/docs/overview.mdx index 107ab3b68471..1a53d64ce10e 100644 --- a/packages/react/src/components/Heading/docs/overview.mdx +++ b/packages/react/src/components/Heading/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-heading--default' - } + variant: 'components-heading--default', + }, ]} /> diff --git a/packages/react/src/components/IconButton/IconButton.mdx b/packages/react/src/components/IconButton/IconButton.mdx index c5782eb3a8f9..c5f560d4fc62 100644 --- a/packages/react/src/components/IconButton/IconButton.mdx +++ b/packages/react/src/components/IconButton/IconButton.mdx @@ -1,8 +1,7 @@ import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks'; -import * as IconButtonStories from './IconButton.stories'; +import * as IconButtonStories from './IconButton.stories'; import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # IconButton @@ -43,6 +42,7 @@ function ExampleComponent() { ); } ``` + diff --git a/packages/react/src/components/IdPrefix/IdPrefix.mdx b/packages/react/src/components/IdPrefix/IdPrefix.mdx index 9dbc1d7fe0c5..6ab1617dc9b3 100644 --- a/packages/react/src/components/IdPrefix/IdPrefix.mdx +++ b/packages/react/src/components/IdPrefix/IdPrefix.mdx @@ -3,7 +3,6 @@ import { IdPrefix } from '../IdPrefix'; import * as IdPrefixStories from './IdPrefix.stories'; import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; - # Prefix diff --git a/packages/react/src/components/IdPrefix/docs/overview.mdx b/packages/react/src/components/IdPrefix/docs/overview.mdx index 3555185ef8d7..045927de9cca 100644 --- a/packages/react/src/components/IdPrefix/docs/overview.mdx +++ b/packages/react/src/components/IdPrefix/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-idprefix--default' - } + variant: 'components-idprefix--default', + }, ]} /> diff --git a/packages/react/src/components/InlineLoading/docs/overview.mdx b/packages/react/src/components/InlineLoading/docs/overview.mdx index 479ed9733bd6..3c3152d24fdd 100644 --- a/packages/react/src/components/InlineLoading/docs/overview.mdx +++ b/packages/react/src/components/InlineLoading/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'components-inlineloading--default' + variant: 'components-inlineloading--default', }, { label: 'Ux Example', - variant: 'components-inlineloading--ux-example' - } + variant: 'components-inlineloading--ux-example', + }, ]} /> diff --git a/packages/react/src/components/Layer/Layer.mdx b/packages/react/src/components/Layer/Layer.mdx index 1ee7398f21e1..bf1bfcfb7b3b 100644 --- a/packages/react/src/components/Layer/Layer.mdx +++ b/packages/react/src/components/Layer/Layer.mdx @@ -55,8 +55,8 @@ can be nested indefinitely, but the token sets typically end after 3 layers. ## With Background -The `Layer` component updates layer tokens at each level and theme. When you add the -`withBackground` prop, it automatically sets a background color using the +The `Layer` component updates layer tokens at each level and theme. When you add +the `withBackground` prop, it automatically sets a background color using the `$layer-background` token. Without it, you can manually set the background with `background-color: $layer-background`. diff --git a/packages/react/src/components/Layer/docs/overview.mdx b/packages/react/src/components/Layer/docs/overview.mdx index 3a29738dbaca..4edce3b830e4 100644 --- a/packages/react/src/components/Layer/docs/overview.mdx +++ b/packages/react/src/components/Layer/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'components-layer--default' + variant: 'components-layer--default', }, { label: 'Custom Level', - variant: 'components-layer--custom-level' - } + variant: 'components-layer--custom-level', + }, ]} /> diff --git a/packages/react/src/components/Layer/docs/use-layer-overview.mdx b/packages/react/src/components/Layer/docs/use-layer-overview.mdx index 6fede02bd5b6..69f88e3d08ac 100644 --- a/packages/react/src/components/Layer/docs/use-layer-overview.mdx +++ b/packages/react/src/components/Layer/docs/use-layer-overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-layer--use-layer' - } + variant: 'components-layer--use-layer', + }, ]} /> diff --git a/packages/react/src/components/Layout/Layout.mdx b/packages/react/src/components/Layout/Layout.mdx index 19fb0ea4ec30..fca8accb3614 100644 --- a/packages/react/src/components/Layout/Layout.mdx +++ b/packages/react/src/components/Layout/Layout.mdx @@ -1,4 +1,4 @@ -import { ArgTypes, Meta, Canvas} from '@storybook/addon-docs/blocks'; +import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks'; import * as LayoutStories from './Layout.stories'; import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; diff --git a/packages/react/src/components/LayoutDirection/docs/overview.mdx b/packages/react/src/components/LayoutDirection/docs/overview.mdx index 83eb79ed64ef..0a56d351087a 100644 --- a/packages/react/src/components/LayoutDirection/docs/overview.mdx +++ b/packages/react/src/components/LayoutDirection/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'experimental-unstable-text--layout-and-text#layout-direction' - } + variant: 'experimental-unstable-text--layout-and-text#layout-direction', + }, ]} /> diff --git a/packages/react/src/components/Link/docs/overview.mdx b/packages/react/src/components/Link/docs/overview.mdx index fbe0957e49d4..8160dc8ec136 100644 --- a/packages/react/src/components/Link/docs/overview.mdx +++ b/packages/react/src/components/Link/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'components-link--default' + variant: 'components-link--default', }, { label: 'Paired With Icon', - variant: 'components-link--paired-with-icon' - } + variant: 'components-link--paired-with-icon', + }, ]} /> diff --git a/packages/react/src/components/Loading/docs/overview.mdx b/packages/react/src/components/Loading/docs/overview.mdx index 23e95e68fd25..eadd09aa1807 100644 --- a/packages/react/src/components/Loading/docs/overview.mdx +++ b/packages/react/src/components/Loading/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-loading--default' - } + variant: 'components-loading--default', + }, ]} /> diff --git a/packages/react/src/components/MenuButton/MenuButton.mdx b/packages/react/src/components/MenuButton/MenuButton.mdx index be7a77584a55..5189c67e7d38 100644 --- a/packages/react/src/components/MenuButton/MenuButton.mdx +++ b/packages/react/src/components/MenuButton/MenuButton.mdx @@ -1,5 +1,5 @@ import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks'; -import * as MenuButtonStories from "./MenuButton.stories.js" +import * as MenuButtonStories from './MenuButton.stories.js'; import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -13,9 +13,9 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; ## Table of Contents - [Overview](#overview) - - [With Danger](#with-danger) - - [With Dividers](#with-dividers) - - [With Icons](#with-icons) + - [With Danger](#with-danger) + - [With Dividers](#with-dividers) + - [With Icons](#with-icons) - [Menu Alignment](#menu-alignment) - [menuTarget Prop](#menutarget-prop) - [Managing the `menuTarget` prop with React refs](#managing-the-menutarget-prop-with-react-refs) @@ -38,6 +38,7 @@ passed as `props.label`. ``` + stackblitzPrefillConfig(MenuButtonStories.WithMenuAlignment), + onClick: () => + stackblitzPrefillConfig(MenuButtonStories.WithMenuAlignment), }, ]} /> @@ -118,8 +120,10 @@ Pass the `menuTarget` prop to render the `Menu` inside the modal or any specific element where you want it to render: ## Managing the `menuTarget` prop with React refs + Because React does not trigger re-renders when a ref's `.current` value changes, you must capture the ref value in state to update the `menuTarget` prop. + ```tsx const Component = () => { const containerRef = useRef(null); @@ -146,7 +150,8 @@ const Component = () => { additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(MenuButtonStories.ExperimentalAutoAlign), + onClick: () => + stackblitzPrefillConfig(MenuButtonStories.ExperimentalAutoAlign), }, ]} /> diff --git a/packages/react/src/components/MenuButton/docs/overview.mdx b/packages/react/src/components/MenuButton/docs/overview.mdx index 7fee30d40fb4..994f2960ab94 100644 --- a/packages/react/src/components/MenuButton/docs/overview.mdx +++ b/packages/react/src/components/MenuButton/docs/overview.mdx @@ -7,7 +7,7 @@ variants={[ { label: 'Default', - variant: 'components-menubutton--default' + variant: 'components-menubutton--default', }, ]} /> diff --git a/packages/react/src/components/Modal/Modal.featureflag.mdx b/packages/react/src/components/Modal/Modal.featureflag.mdx index 281842a06c9b..d01810a5b203 100644 --- a/packages/react/src/components/Modal/Modal.featureflag.mdx +++ b/packages/react/src/components/Modal/Modal.featureflag.mdx @@ -98,8 +98,9 @@ different level: ``` -Instead of wrapping your component with `ModalPresence`, you can also use the higher-order function `withModalPresence`. -This will automatically wrap your component and handle the props and types for you: +Instead of wrapping your component with `ModalPresence`, you can also use the +higher-order function `withModalPresence`. This will automatically wrap your +component and handle the props and types for you: ```jsx export const MyModal = withModalPresence( diff --git a/packages/react/src/components/Modal/docs/overview.mdx b/packages/react/src/components/Modal/docs/overview.mdx index e804e1c54fa9..9a0939a79a41 100644 --- a/packages/react/src/components/Modal/docs/overview.mdx +++ b/packages/react/src/components/Modal/docs/overview.mdx @@ -7,23 +7,23 @@ variants={[ { label: 'Default', - variant: 'components-modal--default' + variant: 'components-modal--default', }, { label: 'Danger Modal', - variant: 'components-modal--danger-modal' + variant: 'components-modal--danger-modal', }, { label: 'Full Width', - variant: 'components-modal--full-width' + variant: 'components-modal--full-width', }, { label: 'Passive Modal', - variant: 'components-modal--passive-modal' + variant: 'components-modal--passive-modal', }, { label: 'With State Manager', - variant: 'components-modal--with-state-manager' - } + variant: 'components-modal--with-state-manager', + }, ]} /> diff --git a/packages/react/src/components/MultiSelect/MultiSelect.mdx b/packages/react/src/components/MultiSelect/MultiSelect.mdx index 23599f981750..7a354aea2d5b 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.mdx +++ b/packages/react/src/components/MultiSelect/MultiSelect.mdx @@ -123,16 +123,18 @@ For more information, checkout the Downshift prop ## `inputProps` -Use `inputProps` to specify native input attributes to place on the ``. -These are passed to [Downshift's `getInputProps()`](https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops) +Use `inputProps` to specify native input attributes to place on the ``. +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 diff --git a/packages/react/src/components/Notification/docs/overview.mdx b/packages/react/src/components/Notification/docs/overview.mdx index 43e74a6894a1..2078b0a32dbf 100644 --- a/packages/react/src/components/Notification/docs/overview.mdx +++ b/packages/react/src/components/Notification/docs/overview.mdx @@ -6,15 +6,15 @@ variants={[ { label: 'Actionable', - variant: 'components-notifications-actionable--default' + variant: 'components-notifications-actionable--default', }, { label: 'Inline', - variant: 'components-notifications-inline--default' + variant: 'components-notifications-inline--default', }, { label: 'Toast', - variant: 'components-notifications-toast--default' - } + variant: 'components-notifications-toast--default', + }, ]} -/> \ No newline at end of file +/> diff --git a/packages/react/src/components/NumberInput/NumberInput.mdx b/packages/react/src/components/NumberInput/NumberInput.mdx index 8f7caaf72a64..15b627dd1cca 100644 --- a/packages/react/src/components/NumberInput/NumberInput.mdx +++ b/packages/react/src/components/NumberInput/NumberInput.mdx @@ -121,7 +121,13 @@ For example, percent style can be used: ### Configurable start value with stepStartValue -A step start value can be configured to provide the user a more beneficial starting point when the input is empty and an increment or decrement button is clicked. This can be used in situations where zero is not within the min/max or there is a more sensible default starting value, such as the current year when asking the user for a year. Since this allows the input to still initially be empty, it ensures on submission of the form that the user has actually interacted with the input and inserted a value. +A step start value can be configured to provide the user a more beneficial +starting point when the input is empty and an increment or decrement button is +clicked. This can be used in situations where zero is not within the min/max or +there is a more sensible default starting value, such as the current year when +asking the user for a year. Since this allows the input to still initially be +empty, it ensures on submission of the form that the user has actually +interacted with the input and inserted a value. ``` diff --git a/packages/react/src/components/OrderedList/OrderedList.mdx b/packages/react/src/components/OrderedList/OrderedList.mdx index 5c6bd37ccb8e..74657c59079e 100644 --- a/packages/react/src/components/OrderedList/OrderedList.mdx +++ b/packages/react/src/components/OrderedList/OrderedList.mdx @@ -46,7 +46,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(OrderedListStories.NativeListStyles), + onClick: () => + stackblitzPrefillConfig(OrderedListStories.NativeListStyles), }, ]} /> diff --git a/packages/react/src/components/OrderedList/docs/overview.mdx b/packages/react/src/components/OrderedList/docs/overview.mdx index ac5332ff2f73..f68ec23e3eba 100644 --- a/packages/react/src/components/OrderedList/docs/overview.mdx +++ b/packages/react/src/components/OrderedList/docs/overview.mdx @@ -17,5 +17,5 @@ label: 'Nested', variant: 'components-orderedlist--nested' } - ]} -/> + +]} /> diff --git a/packages/react/src/components/OverflowMenu/docs/overview.mdx b/packages/react/src/components/OverflowMenu/docs/overview.mdx index d21af5437dbf..a4fd503b9317 100644 --- a/packages/react/src/components/OverflowMenu/docs/overview.mdx +++ b/packages/react/src/components/OverflowMenu/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'components-overflowmenu--default' + variant: 'components-overflowmenu--default', }, { label: 'Render custom Icon', - variant: 'components-overflowmenu--render-custom-icon' - } + variant: 'components-overflowmenu--render-custom-icon', + }, ]} /> diff --git a/packages/react/src/components/OverflowMenu/next/docs/overview.mdx b/packages/react/src/components/OverflowMenu/next/docs/overview.mdx index a8e1f088d4e1..c2d54e9bf02c 100644 --- a/packages/react/src/components/OverflowMenu/next/docs/overview.mdx +++ b/packages/react/src/components/OverflowMenu/next/docs/overview.mdx @@ -7,15 +7,15 @@ variants={[ { label: 'Custom Icon', - variant: 'experimental-feature-flags-overflowmenu--custom-icon' + variant: 'experimental-feature-flags-overflowmenu--custom-icon', }, { label: 'Nested', - variant: 'experimental-feature-flags-overflowmenu--nested' + variant: 'experimental-feature-flags-overflowmenu--nested', }, { label: 'Overflow Menu V2', - variant: 'experimental-feature-flags-overflowmenu--overflow-menu' - } + variant: 'experimental-feature-flags-overflowmenu--overflow-menu', + }, ]} /> diff --git a/packages/react/src/components/PageHeader/PageHeader.mdx b/packages/react/src/components/PageHeader/PageHeader.mdx index e92742ee9629..aea373972c65 100644 --- a/packages/react/src/components/PageHeader/PageHeader.mdx +++ b/packages/react/src/components/PageHeader/PageHeader.mdx @@ -29,7 +29,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; ## Overview -The `PageHeader` is a large family of components, composed of three zones; the Breadcrumb, Content, and Tabs. +The `PageHeader` is a large family of components, composed of three zones; the +Breadcrumb, Content, and Tabs. ); -const contentActions = ( - -) +const contentActions = ; return ( @@ -80,7 +80,7 @@ return ( ... -) +); ``` ## PageHeader.Content @@ -90,19 +90,28 @@ return ( additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(PageHeaderStories.ContentWithContextualActionsAndPageActions), + onClick: () => + stackblitzPrefillConfig( + PageHeaderStories.ContentWithContextualActionsAndPageActions + ), }, ]} /> -The `PageHeader.Content` component defines the primary content area of the `PageHeader`, including the title, subtitle, and -any supporting text or contextual actions. It accepts a `title` prop to display the main heading and can optionally include a `renderIcon` prop -to show an icon adjacent to the title. Child components such as `PageHeader.ContentText` can be used to provide additional descriptive text. -To support use cases such as tags, `contextualActions` can be passed as a prop to render components beside the content. -`pageActions` allows integration of action buttons aligned with the content section. - -The `PageHeader.ContentPageActions` component provides responsive behavior by collapsing actions into a `MenuButton` when the viewport -width is reduced. To enable this functionality, it expects an array of action objects with a specific API shape, as demonstrated below: +The `PageHeader.Content` component defines the primary content area of the +`PageHeader`, including the title, subtitle, and any supporting text or +contextual actions. It accepts a `title` prop to display the main heading and +can optionally include a `renderIcon` prop to show an icon adjacent to the +title. Child components such as `PageHeader.ContentText` can be used to provide +additional descriptive text. To support use cases such as tags, +`contextualActions` can be passed as a prop to render components beside the +content. `pageActions` allows integration of action buttons aligned with the +content section. + +The `PageHeader.ContentPageActions` component provides responsive behavior by +collapsing actions into a `MenuButton` when the viewport width is reduced. To +enable this functionality, it expects an array of action objects with a specific +API shape, as demonstrated below: ```jsx @@ -163,13 +172,14 @@ return ( additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(PageHeaderStories.ContentWithHeroImage), + onClick: () => + stackblitzPrefillConfig(PageHeaderStories.ContentWithHeroImage), }, ]} /> -When including a hero image within the `PageHeader`, the `Grid` and `Column` components will need to be utilized in order -to define the layout correctly. +When including a hero image within the `PageHeader`, the `Grid` and `Column` +components will need to be utilized in order to define the layout correctly. ```jsx import { Grid, Column } from '@carbon/react'; @@ -208,9 +218,11 @@ return ( ## PageHeader.TabsBar -To render the Tabs zone, utilitize the `PageHeader.TabBar` component, passing in the `TabList` and `Tab` components -as its children. Then set up the `TabPanels` and `TabPanel` components outside of the `PageHeader`, making sure to -wrap all components within the `Tabs` component to ensures proper linkage of tab and its associated panel. +To render the Tabs zone, utilitize the `PageHeader.TabBar` component, passing in +the `TabList` and `Tab` components as its children. Then set up the `TabPanels` +and `TabPanel` components outside of the `PageHeader`, making sure to wrap all +components within the `Tabs` component to ensures proper linkage of tab and its +associated panel. ```jsx @@ -241,13 +253,15 @@ wrap all components within the `Tabs` component to ensures proper linkage of tab additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(PageHeaderStories.TabBarWithTabsAndTags), + onClick: () => + stackblitzPrefillConfig(PageHeaderStories.TabBarWithTabsAndTags), }, ]} /> -The `PageHeader.TabsBar` component accepts a `tags` prop expecting an array of objects as shown below. When the viewport -width is reduced, these tags automatically collapse into a `Popover` for responsive display. +The `PageHeader.TabsBar` component accepts a `tags` prop expecting an array of +objects as shown below. When the viewport width is reduced, these tags +automatically collapse into a `Popover` for responsive display. ```jsx const tags = [ @@ -264,20 +278,20 @@ const tags = [ ]; return ( - - - - - Tab 1 - ... - - - - - Tab Panel 1 - ... - - + + + + + Tab 1 + ... + + + + + Tab Panel 1 + ... + + ); ``` diff --git a/packages/react/src/components/Pagination/Pagination.mdx b/packages/react/src/components/Pagination/Pagination.mdx index bdb8fdd2a7dd..369993361f63 100644 --- a/packages/react/src/components/Pagination/Pagination.mdx +++ b/packages/react/src/components/Pagination/Pagination.mdx @@ -28,50 +28,56 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; ## Overview - stackblitzPrefillConfig(PaginationStories.Default), - }, - ]} - /> + stackblitzPrefillConfig(PaginationStories.Default), + }, + ]} +/> ## Multiple pagination components - stackblitzPrefillConfig(PaginationStories.MultiplePaginationComponents), - }, - ]} - /> + + + stackblitzPrefillConfig(PaginationStories.MultiplePaginationComponents), + }, + ]} +/> ## Pagination unknown pages - stackblitzPrefillConfig(PaginationStories.PaginationUnknownPages), - }, - ]} - /> + + stackblitzPrefillConfig(PaginationStories.PaginationUnknownPages), + }, + ]} +/> ## Pagination with custom page sizes label - stackblitzPrefillConfig(PaginationStories.PaginationWithCustomPageSizesLabel), - }, - ]} - /> + + stackblitzPrefillConfig( + PaginationStories.PaginationWithCustomPageSizesLabel + ), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/Pagination/docs/overview.mdx b/packages/react/src/components/Pagination/docs/overview.mdx index 9596d42b365a..a57d47078c72 100644 --- a/packages/react/src/components/Pagination/docs/overview.mdx +++ b/packages/react/src/components/Pagination/docs/overview.mdx @@ -6,15 +6,15 @@ variants={[ { label: 'Default', - variant: 'components-pagination--default' + variant: 'components-pagination--default', }, { label: 'Multiple Pagination Components', - variant: 'components-pagination--multiple-pagination-components' + variant: 'components-pagination--multiple-pagination-components', }, { label: 'Pagination with custom page sizes label', - variant: 'components-pagination--pagination-with-custom-page-sizes-label' - } + variant: 'components-pagination--pagination-with-custom-page-sizes-label', + }, ]} /> diff --git a/packages/react/src/components/Pagination/experimental/docs/overview.mdx b/packages/react/src/components/Pagination/experimental/docs/overview.mdx index 1f2aa4bec683..3e12273d9cda 100644 --- a/packages/react/src/components/Pagination/experimental/docs/overview.mdx +++ b/packages/react/src/components/Pagination/experimental/docs/overview.mdx @@ -7,11 +7,12 @@ variants={[ { label: 'With a Page Selector', - variant: 'experimental-unstable-pagination--with-a-page-selector' + variant: 'experimental-unstable-pagination--with-a-page-selector', }, { label: 'With no Sizer, Child Input, or Child Selector', - variant: 'experimental-unstable-pagination--with-no-sizer-child-input-or-child-selector' - } + variant: + 'experimental-unstable-pagination--with-no-sizer-child-input-or-child-selector', + }, ]} /> diff --git a/packages/react/src/components/PaginationNav/PaginationNav.mdx b/packages/react/src/components/PaginationNav/PaginationNav.mdx index 62d5295e06a5..70941edc7f7b 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.mdx +++ b/packages/react/src/components/PaginationNav/PaginationNav.mdx @@ -21,15 +21,15 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; ## Overview - stackblitzPrefillConfig(PaginationNavStories.Default), - }, - ]} - /> + stackblitzPrefillConfig(PaginationNavStories.Default), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/PaginationNav/docs/overview.mdx b/packages/react/src/components/PaginationNav/docs/overview.mdx index 880b712f20fe..f54dd054cf25 100644 --- a/packages/react/src/components/PaginationNav/docs/overview.mdx +++ b/packages/react/src/components/PaginationNav/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-paginationnav--default' - } + variant: 'components-paginationnav--default', + }, ]} /> diff --git a/packages/react/src/components/ProgressBar/docs/overview.mdx b/packages/react/src/components/ProgressBar/docs/overview.mdx index ae19b52452e6..9131f02472bc 100644 --- a/packages/react/src/components/ProgressBar/docs/overview.mdx +++ b/packages/react/src/components/ProgressBar/docs/overview.mdx @@ -6,15 +6,15 @@ variants={[ { label: 'Default', - variant: 'components-progressbar--default' + variant: 'components-progressbar--default', }, { label: 'Example', - variant: 'components-progressbar--example' + variant: 'components-progressbar--example', }, { label: 'Indeterminate', - variant: 'components-progressbar--indeterminate' - } + variant: 'components-progressbar--indeterminate', + }, ]} /> diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx index ef9f74945323..57a30305e4d0 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx @@ -37,17 +37,20 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; /> ## Interactive + stackblitzPrefillConfig(ProgressIndicatorStories.Interactive), + onClick: () => + stackblitzPrefillConfig(ProgressIndicatorStories.Interactive), }, ]} /> ## Skeleton + \ No newline at end of file +/> diff --git a/packages/react/src/components/RadioButton/RadioButton.mdx b/packages/react/src/components/RadioButton/RadioButton.mdx index 4b4adc374231..f4665a4466ce 100644 --- a/packages/react/src/components/RadioButton/RadioButton.mdx +++ b/packages/react/src/components/RadioButton/RadioButton.mdx @@ -46,6 +46,7 @@ states. /> ## Vertical + ## Skeleton + ## AI Label + \ No newline at end of file +/> diff --git a/packages/react/src/components/Search/docs/overview.mdx b/packages/react/src/components/Search/docs/overview.mdx index 5454f995e888..b61cfd574c00 100644 --- a/packages/react/src/components/Search/docs/overview.mdx +++ b/packages/react/src/components/Search/docs/overview.mdx @@ -6,19 +6,19 @@ variants={[ { label: 'Default', - variant: 'components-search--default' + variant: 'components-search--default', }, { label: 'Disabled', - variant: 'components-search--disabled' + variant: 'components-search--disabled', }, { label: 'Expandable', - variant: 'components-search--expandable' + variant: 'components-search--expandable', }, { label: 'Fluid (unstable)', - variant: 'experimental-unstable-fluidsearch--default' - } + variant: 'experimental-unstable-fluidsearch--default', + }, ]} /> diff --git a/packages/react/src/components/Select/Select.mdx b/packages/react/src/components/Select/Select.mdx index 19b4c8b194f4..1425000b10fd 100644 --- a/packages/react/src/components/Select/Select.mdx +++ b/packages/react/src/components/Select/Select.mdx @@ -1,7 +1,7 @@ import { ArgTypes, Meta, Canvas } from '@storybook/addon-docs/blocks'; import Select from './'; import SelectItem from '../SelectItem'; -import * as SelectStories from './Select.stories' +import * as SelectStories from './Select.stories'; import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; diff --git a/packages/react/src/components/Select/docs/overview.mdx b/packages/react/src/components/Select/docs/overview.mdx index 399f755ac60c..a6d6595f6e77 100644 --- a/packages/react/src/components/Select/docs/overview.mdx +++ b/packages/react/src/components/Select/docs/overview.mdx @@ -6,15 +6,15 @@ variants={[ { label: 'Default', - variant: 'components-select--default' + variant: 'components-select--default', }, { label: 'Inline', - variant: 'components-select--inline' + variant: 'components-select--inline', }, { label: 'Fluid (unstable)', - variant: 'experimental-unstable-fluidselect--default' - } + variant: 'experimental-unstable-fluidselect--default', + }, ]} /> diff --git a/packages/react/src/components/ShapeIndicator/docs/overview.mdx b/packages/react/src/components/ShapeIndicator/docs/overview.mdx index b4a99df2d105..23f68022b153 100644 --- a/packages/react/src/components/ShapeIndicator/docs/overview.mdx +++ b/packages/react/src/components/ShapeIndicator/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-statusindicator-shapeindicator--playground' - } + variant: 'components-statusindicator-shapeindicator--playground', + }, ]} /> diff --git a/packages/react/src/components/SkeletonIcon/SkeletonIcon.mdx b/packages/react/src/components/SkeletonIcon/SkeletonIcon.mdx index 317a3cd8aaab..9d9b7c8cb824 100644 --- a/packages/react/src/components/SkeletonIcon/SkeletonIcon.mdx +++ b/packages/react/src/components/SkeletonIcon/SkeletonIcon.mdx @@ -33,6 +33,7 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; /> ## Component API + ## Feedback diff --git a/packages/react/src/components/SkeletonText/SkeletonText.mdx b/packages/react/src/components/SkeletonText/SkeletonText.mdx index 12a7c93b2c66..7eacb19f88fe 100644 --- a/packages/react/src/components/SkeletonText/SkeletonText.mdx +++ b/packages/react/src/components/SkeletonText/SkeletonText.mdx @@ -33,6 +33,7 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; /> ## Component API + ## Feedback diff --git a/packages/react/src/components/Slider/docs/overview.mdx b/packages/react/src/components/Slider/docs/overview.mdx index c1451e212c49..6524aeeb1562 100644 --- a/packages/react/src/components/Slider/docs/overview.mdx +++ b/packages/react/src/components/Slider/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'components-slider--default' + variant: 'components-slider--default', }, { label: 'Controlled Slider', - variant: 'components-slider--controlled-slider' - } + variant: 'components-slider--controlled-slider', + }, ]} /> diff --git a/packages/react/src/components/Stack/docs/overview.mdx b/packages/react/src/components/Stack/docs/overview.mdx index 1be5dcdfcb71..c2f1266e6829 100644 --- a/packages/react/src/components/Stack/docs/overview.mdx +++ b/packages/react/src/components/Stack/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'layout-stack--default' + variant: 'layout-stack--default', }, { label: 'Horizontal', - variant: 'layout-stack--horizontal' - } + variant: 'layout-stack--horizontal', + }, ]} /> diff --git a/packages/react/src/components/StructuredList/StructuredList.mdx b/packages/react/src/components/StructuredList/StructuredList.mdx index 060d53d6dd1a..eef3e45f421d 100644 --- a/packages/react/src/components/StructuredList/StructuredList.mdx +++ b/packages/react/src/components/StructuredList/StructuredList.mdx @@ -49,13 +49,15 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; ]} /> -## Initial Row Selection +## Initial Row Selection + stackblitzPrefillConfig(StructuredListStories.InitialSelection), + onClick: () => + stackblitzPrefillConfig(StructuredListStories.InitialSelection), }, ]} /> diff --git a/packages/react/src/components/StructuredList/docs/overview.mdx b/packages/react/src/components/StructuredList/docs/overview.mdx index 0a158003f0be..a2bc6822f4ff 100644 --- a/packages/react/src/components/StructuredList/docs/overview.mdx +++ b/packages/react/src/components/StructuredList/docs/overview.mdx @@ -7,15 +7,15 @@ variants={[ { label: 'Default', - variant: 'components-structuredlist--default' + variant: 'components-structuredlist--default', }, { label: 'Simple', - variant: 'components-structuredlist--simple' + variant: 'components-structuredlist--simple', }, { label: 'Selection', - variant: 'components-structuredlist--selection' - } + variant: 'components-structuredlist--selection', + }, ]} /> diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx index 2efe4cb8c0b2..22e44b75a9d8 100644 --- a/packages/react/src/components/Tabs/Tabs.mdx +++ b/packages/react/src/components/Tabs/Tabs.mdx @@ -103,7 +103,8 @@ what is in rendered inside of `Tab` and `TabPanel`. additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(TabsStories.ContainedWithSecondaryLabels), + onClick: () => + stackblitzPrefillConfig(TabsStories.ContainedWithSecondaryLabels), }, ]} /> @@ -115,7 +116,10 @@ what is in rendered inside of `Tab` and `TabPanel`. additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(TabsStories.ContainedWithSecondaryLabelsAndIcons), + onClick: () => + stackblitzPrefillConfig( + TabsStories.ContainedWithSecondaryLabelsAndIcons + ), }, ]} /> @@ -272,7 +276,7 @@ And there you have it! Working dismissable tabs. ]} /> -Dismissable With Icons: +Dismissable With Icons: \ No newline at end of file +/> diff --git a/packages/react/src/components/Text/docs/overview.mdx b/packages/react/src/components/Text/docs/overview.mdx index a64d620601f9..6215d024da9f 100644 --- a/packages/react/src/components/Text/docs/overview.mdx +++ b/packages/react/src/components/Text/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'experimental-unstable-text--default' - } + variant: 'experimental-unstable-text--default', + }, ]} /> diff --git a/packages/react/src/components/Text/docs/text-direction-overview.mdx b/packages/react/src/components/Text/docs/text-direction-overview.mdx index b8bc3c6cd563..d0a98888f865 100644 --- a/packages/react/src/components/Text/docs/text-direction-overview.mdx +++ b/packages/react/src/components/Text/docs/text-direction-overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'experimental-unstable-text--set-text-direction' - } + variant: 'experimental-unstable-text--set-text-direction', + }, ]} /> diff --git a/packages/react/src/components/TextArea/TextArea.mdx b/packages/react/src/components/TextArea/TextArea.mdx index 2a8f76afe6e7..74010c64944f 100644 --- a/packages/react/src/components/TextArea/TextArea.mdx +++ b/packages/react/src/components/TextArea/TextArea.mdx @@ -37,6 +37,7 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; /> ## Skeleton + ## AI Label + diff --git a/packages/react/src/components/Theme/docs/overview.mdx b/packages/react/src/components/Theme/docs/overview.mdx index be3243ffa494..9edcd10b9cd2 100644 --- a/packages/react/src/components/Theme/docs/overview.mdx +++ b/packages/react/src/components/Theme/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-theme--default' - } + variant: 'components-theme--default', + }, ]} /> diff --git a/packages/react/src/components/Theme/docs/use-theme-overview.mdx b/packages/react/src/components/Theme/docs/use-theme-overview.mdx index 69eada26bc2e..f4fb9a952046 100644 --- a/packages/react/src/components/Theme/docs/use-theme-overview.mdx +++ b/packages/react/src/components/Theme/docs/use-theme-overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-theme--use-theme' - } + variant: 'components-theme--use-theme', + }, ]} /> diff --git a/packages/react/src/components/Tile/Tile.mdx b/packages/react/src/components/Tile/Tile.mdx index 3696edb5ebeb..76c40bf136e8 100644 --- a/packages/react/src/components/Tile/Tile.mdx +++ b/packages/react/src/components/Tile/Tile.mdx @@ -177,7 +177,6 @@ or if you have multiple feature flags you can enable them this way. - ## Component API diff --git a/packages/react/src/components/Tile/docs/overview.mdx b/packages/react/src/components/Tile/docs/overview.mdx index 0aa5dc8cefcb..1cc2fbde3357 100644 --- a/packages/react/src/components/Tile/docs/overview.mdx +++ b/packages/react/src/components/Tile/docs/overview.mdx @@ -6,51 +6,51 @@ variants={[ { label: 'Default', - variant: 'components-tile--default' + variant: 'components-tile--default', }, { label: 'Clickable', - variant: 'components-tile--clickable' + variant: 'components-tile--clickable', }, { label: 'Expandable', - variant: 'components-tile--expandable' + variant: 'components-tile--expandable', }, { label: 'Expandable with interactive', - variant: 'components-tile--expandable-with-interactive' + variant: 'components-tile--expandable-with-interactive', }, { label: 'Multiselect', - variant: 'components-tile--multi-select' + variant: 'components-tile--multi-select', }, { label: 'Radio', - variant: 'components-tile--radio' + variant: 'components-tile--radio', }, { label: 'Selectable', - variant: 'components-tile--selectable' + variant: 'components-tile--selectable', }, { label: 'Clickable with Improved Contrast (unstable)', - variant: 'experimental-improved-contrast-tile--clickable' + variant: 'experimental-improved-contrast-tile--clickable', }, { label: 'Expandable with Improved Contrast (unstable)', - variant: 'experimental-improved-contrast-tile--expandable' + variant: 'experimental-improved-contrast-tile--expandable', }, { label: 'Multiselect with Improved Contrast (unstable)', - variant: 'experimental-improved-contrast-tile--multi-select' + variant: 'experimental-improved-contrast-tile--multi-select', }, { label: 'Radio with Improved Contrast (unstable)', - variant: 'experimental-improved-contrast-tile--radio' + variant: 'experimental-improved-contrast-tile--radio', }, { label: 'Selectable with Improved Contrast (unstable)', - variant: 'experimental-improved-contrast-tile--selectable' - } + variant: 'experimental-improved-contrast-tile--selectable', + }, ]} /> diff --git a/packages/react/src/components/TimePicker/docs/overview.mdx b/packages/react/src/components/TimePicker/docs/overview.mdx index cef13a81d79c..25496f23ab2b 100644 --- a/packages/react/src/components/TimePicker/docs/overview.mdx +++ b/packages/react/src/components/TimePicker/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'components-timepicker--default' + variant: 'components-timepicker--default', }, { label: 'Fluid (unstable)', - variant: 'experimental-unstable-fluidtimepicker--default' - } + variant: 'experimental-unstable-fluidtimepicker--default', + }, ]} /> diff --git a/packages/react/src/components/Toggle/Toggle.featureflag.mdx b/packages/react/src/components/Toggle/Toggle.featureflag.mdx index b6f2d2afd395..ace2d7323f1e 100644 --- a/packages/react/src/components/Toggle/Toggle.featureflag.mdx +++ b/packages/react/src/components/Toggle/Toggle.featureflag.mdx @@ -4,7 +4,8 @@ import { Meta } from '@storybook/addon-docs/blocks'; # Reduced toggle label spacing -Reduced spacing between the toggle control and its label to improve visual consistency with other form inputs. +Reduced spacing between the toggle control and its label to improve visual +consistency with other form inputs. ```scss @use '@carbon/react' with ( diff --git a/packages/react/src/components/Toggle/Toggle.mdx b/packages/react/src/components/Toggle/Toggle.mdx index b64df9012f77..d46b6003d6b6 100644 --- a/packages/react/src/components/Toggle/Toggle.mdx +++ b/packages/react/src/components/Toggle/Toggle.mdx @@ -69,7 +69,8 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; additionalActions={[ { title: 'Open in Stackblitz', - onClick: () => stackblitzPrefillConfig(ToggleStories.WithAccessibleLabels), + onClick: () => + stackblitzPrefillConfig(ToggleStories.WithAccessibleLabels), }, ]} /> diff --git a/packages/react/src/components/Toggle/docs/overview.mdx b/packages/react/src/components/Toggle/docs/overview.mdx index aa7d0c91b0a6..94b69ec141d7 100644 --- a/packages/react/src/components/Toggle/docs/overview.mdx +++ b/packages/react/src/components/Toggle/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'components-toggle--default' + variant: 'components-toggle--default', }, { label: 'Small Toggle', - variant: 'components-toggle--small-toggle' - } + variant: 'components-toggle--small-toggle', + }, ]} /> diff --git a/packages/react/src/components/Toggletip/docs/overview.mdx b/packages/react/src/components/Toggletip/docs/overview.mdx index 7dde318cdbb8..f3eab310dfa3 100644 --- a/packages/react/src/components/Toggletip/docs/overview.mdx +++ b/packages/react/src/components/Toggletip/docs/overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-toggletip--default' - } + variant: 'components-toggletip--default', + }, ]} -/> \ No newline at end of file +/> diff --git a/packages/react/src/components/Tooltip/docs/definition-tooltip-overview.mdx b/packages/react/src/components/Tooltip/docs/definition-tooltip-overview.mdx index 5a49ff28a5ac..6bade962824e 100644 --- a/packages/react/src/components/Tooltip/docs/definition-tooltip-overview.mdx +++ b/packages/react/src/components/Tooltip/docs/definition-tooltip-overview.mdx @@ -6,7 +6,7 @@ variants={[ { label: 'Default', - variant: 'components-definitiontooltip--default' - } + variant: 'components-definitiontooltip--default', + }, ]} /> diff --git a/packages/react/src/components/Tooltip/docs/overview.mdx b/packages/react/src/components/Tooltip/docs/overview.mdx index 0d284cc9dd70..cdbf24ee1cbf 100644 --- a/packages/react/src/components/Tooltip/docs/overview.mdx +++ b/packages/react/src/components/Tooltip/docs/overview.mdx @@ -6,15 +6,15 @@ variants={[ { label: 'Default', - variant: 'components-tooltip--default' + variant: 'components-tooltip--default', }, { label: 'Alignment', - variant: 'components-tooltip--alignment' + variant: 'components-tooltip--alignment', }, { label: 'Duration', - variant: 'components-tooltip--duration' - } + variant: 'components-tooltip--duration', + }, ]} -/> \ No newline at end of file +/> diff --git a/packages/react/src/components/TreeView/TreeView.mdx b/packages/react/src/components/TreeView/TreeView.mdx index 3c5271c9b0f5..af0123bca3d9 100644 --- a/packages/react/src/components/TreeView/TreeView.mdx +++ b/packages/react/src/components/TreeView/TreeView.mdx @@ -88,9 +88,7 @@ TreeView. The `href` prop can be used with click handling on each node of the TreeView. - + ## Component API diff --git a/packages/react/src/components/TreeView/docs/overview.mdx b/packages/react/src/components/TreeView/docs/overview.mdx index d416ae5c21a1..d2831cf0c882 100644 --- a/packages/react/src/components/TreeView/docs/overview.mdx +++ b/packages/react/src/components/TreeView/docs/overview.mdx @@ -6,15 +6,15 @@ variants={[ { label: 'Default', - variant: 'components-treeview--default' + variant: 'components-treeview--default', }, { label: 'With controlled expansion', - variant: 'components-treeview--with-controlled-expansion' + variant: 'components-treeview--with-controlled-expansion', }, { label: 'With icons', - variant: 'components-treeview--with-icons' - } + variant: 'components-treeview--with-icons', + }, ]} -/> \ No newline at end of file +/> diff --git a/packages/react/src/components/UnorderedList/docs/overview.mdx b/packages/react/src/components/UnorderedList/docs/overview.mdx index bd1d45869fab..a37cfadf2181 100644 --- a/packages/react/src/components/UnorderedList/docs/overview.mdx +++ b/packages/react/src/components/UnorderedList/docs/overview.mdx @@ -6,11 +6,11 @@ variants={[ { label: 'Default', - variant: 'components-unorderedlist--default' + variant: 'components-unorderedlist--default', }, { label: 'Nested', - variant: 'components-unorderedlist--nested' - } + variant: 'components-unorderedlist--nested', + }, ]} -/> \ No newline at end of file +/> diff --git a/packages/react/src/internal/usePrefix.mdx b/packages/react/src/internal/usePrefix.mdx index c9a5a1f5cd8b..8c352d680b51 100644 --- a/packages/react/src/internal/usePrefix.mdx +++ b/packages/react/src/internal/usePrefix.mdx @@ -34,4 +34,8 @@ function ExampleComponent() { } ``` -To *set* the prefix, use ClassPrefix +To _set_ the prefix, use + + + {'ClassPrefix'} + diff --git a/packages/web-components/docs/form.mdx b/packages/web-components/docs/form.mdx index 1030836f30a0..65cac4169e73 100644 --- a/packages/web-components/docs/form.mdx +++ b/packages/web-components/docs/form.mdx @@ -4,13 +4,19 @@ import { Meta } from '@storybook/addon-docs/blocks'; # Having components participate in form -Though form elements in `@carbon/web-components` (e.g. ``) are not native form elements like ``, they have some extra APIs that align well with web/framework standards. +Though form elements in `@carbon/web-components` (e.g. ``) are +not native form elements like ``, they have some extra APIs that align +well with web/framework standards. ## `formdata` event -Browsers supporting [`formdata` event](https://www.chromestatus.com/feature/5662230242656256) fire that event when the user clicks on `