diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js index 889631042bbe..2cb066db37d2 100644 --- a/packages/react/.storybook/main.js +++ b/packages/react/.storybook/main.js @@ -18,11 +18,11 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin'; const storyGlobs = [ './Welcome/Welcome.mdx', '../src/**/*.stories.js', - '../src/**/*.stories.mdx', + '../src/**/*.mdx', '../src/components/Tile/Tile.mdx', '../src/**/next/*.stories.js', '../src/**/next/**/*.stories.js', - '../src/**/next/*.stories.mdx', + '../src/**/next/*.mdx', '../src/**/*-story.js', ]; diff --git a/packages/react/src/components/AILabel/AILabel.mdx b/packages/react/src/components/AILabel/AILabel.mdx index 487c476b91cd..480509661090 100644 --- a/packages/react/src/components/AILabel/AILabel.mdx +++ b/packages/react/src/components/AILabel/AILabel.mdx @@ -1,7 +1,9 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import { AILabel, AILabelContent, AILabelActions } from '.'; import * as AILabelStories from './AILabel.stories'; + + # AILabel [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug) diff --git a/packages/react/src/components/AILabel/AILabelDatatable.mdx b/packages/react/src/components/AILabel/AILabelDatatable.mdx index 21e4c633a12a..a9f0fe5f415a 100644 --- a/packages/react/src/components/AILabel/AILabelDatatable.mdx +++ b/packages/react/src/components/AILabel/AILabelDatatable.mdx @@ -1,6 +1,7 @@ import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import { AILabel, AILabelContent, AILabelActions } from '.'; -import * as AILabelStories from '../DataTable/stories/DataTable-ai-label.stories'; + + # AILabel diff --git a/packages/react/src/components/Accordion/Accordion.mdx b/packages/react/src/components/Accordion/Accordion.mdx index 8b417c1f48ed..764609f25caa 100644 --- a/packages/react/src/components/Accordion/Accordion.mdx +++ b/packages/react/src/components/Accordion/Accordion.mdx @@ -1,7 +1,9 @@ import Accordion, { AccordionItem, AccordionSkeleton } from '../Accordion'; -import { ArgTypes, Canvas } from '@storybook/blocks'; +import { ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as AccordionStories from './Accordion.stories'; + + # Accordion [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Accordion) diff --git a/packages/react/src/components/AspectRatio/AspectRatio.mdx b/packages/react/src/components/AspectRatio/AspectRatio.mdx index c090498040ef..8c0326404dfe 100644 --- a/packages/react/src/components/AspectRatio/AspectRatio.mdx +++ b/packages/react/src/components/AspectRatio/AspectRatio.mdx @@ -1,8 +1,10 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as AspectRatioStories from './AspectRatio.stories'; import { Grid, Row, Column } from '../Grid'; import { AspectRatio } from '.'; + + # AspectRatio [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/AspectRatio) diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.mdx b/packages/react/src/components/Breadcrumb/Breadcrumb.mdx index 364d806a74ff..509d5174a0a8 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.mdx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.mdx @@ -1,7 +1,9 @@ -import { Story, Canvas, ArgTypes } from '@storybook/blocks'; +import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks'; import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb'; import * as BreadcrumbStories from './Breadcrumb.stories'; + + # Breadcrumb [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Breadcrumb) diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx index 624029f27383..a46466ebea1a 100644 --- a/packages/react/src/components/Button/Button.mdx +++ b/packages/react/src/components/Button/Button.mdx @@ -1,9 +1,11 @@ -import { Story, ArgTypes, Canvas, Unstyled } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Unstyled, Meta } from '@storybook/blocks'; import Button from '../Button'; import ButtonSet from '../ButtonSet'; import { Add, TrashCan } from '@carbon/icons-react'; import * as ButtonStories from './Button.stories'; + + # Button [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Button) diff --git a/packages/react/src/components/Checkbox/Checkbox.mdx b/packages/react/src/components/Checkbox/Checkbox.mdx index 4077c0982bf4..c8a3defbf3f2 100644 --- a/packages/react/src/components/Checkbox/Checkbox.mdx +++ b/packages/react/src/components/Checkbox/Checkbox.mdx @@ -1,7 +1,9 @@ -import { Story, Canvas, ArgTypes } from '@storybook/blocks'; +import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks'; import Checkbox, { CheckboxSkeleton } from '../Checkbox'; import * as CheckboxStories from './Checkbox.stories'; + + # Checkbox [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Checkbox) diff --git a/packages/react/src/components/ClassPrefix/ClassPrefix.mdx b/packages/react/src/components/ClassPrefix/ClassPrefix.mdx index d8767e179d4b..a3b4aab4048b 100644 --- a/packages/react/src/components/ClassPrefix/ClassPrefix.mdx +++ b/packages/react/src/components/ClassPrefix/ClassPrefix.mdx @@ -1,8 +1,10 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import LinkTo from '@storybook/addon-links/react'; import { ClassPrefix } from '../ClassPrefix'; import * as ClassPrefixStories from './ClassPrefix.stories'; + + # ClassPrefix [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ClassPrefix) diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx index c8195ab009de..86ef45a9d98b 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -1,7 +1,9 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import CodeSnippet from '../CodeSnippet'; import * as CodeSnippetStories from './CodeSnippet.stories'; + + # CodeSnippet [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/CodeSnippet) diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx index eeb18dadf8d1..3cb22508eb77 100644 --- a/packages/react/src/components/ComboBox/ComboBox.mdx +++ b/packages/react/src/components/ComboBox/ComboBox.mdx @@ -1,7 +1,9 @@ -import { ArgTypes, Canvas } from '@storybook/blocks'; +import { ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as ComboBoxStories from './ComboBox.stories.js'; import ComboBox from '../ComboBox'; + + # ComboBox [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ComboBox) @@ -121,7 +123,7 @@ want to fully control the component, you can use `initialSelectedItem` ```jsx const items = ['Option 1', 'Option 2', 'Option 3'] -; + ``` ## `itemToElement` diff --git a/packages/react/src/components/ComboButton/ComboButton.mdx b/packages/react/src/components/ComboButton/ComboButton.mdx index 69226da57331..b50630639743 100644 --- a/packages/react/src/components/ComboButton/ComboButton.mdx +++ b/packages/react/src/components/ComboButton/ComboButton.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # ComboButton diff --git a/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx b/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx index b798b2923b25..089d688b9848 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx +++ b/packages/react/src/components/ComposedModal/ComposedModal.featureflag.mdx @@ -1,3 +1,7 @@ +import { Meta } from '@storybook/blocks'; + + + # ComposedModal [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ComposedModal) diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx index 3a88bfccb785..739e3299aef0 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.mdx +++ b/packages/react/src/components/ComposedModal/ComposedModal.mdx @@ -1,10 +1,12 @@ -import { Story, ArgTypes, Canvas, Unstyled } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Unstyled, Meta } from '@storybook/blocks'; import ComposedModal from '../ComposedModal'; import { InlineNotification } from '../Notification'; import CodeSnippet from '../CodeSnippet'; import * as ComposedModalStories from './ComposedModal.stories.js'; import './ComposedModal.stories.scss'; + + # ComposedModal [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ComposedModal) diff --git a/packages/react/src/components/ContainedList/ContainedList.mdx b/packages/react/src/components/ContainedList/ContainedList.mdx index 2e91bdef36b0..6f59f04e2593 100644 --- a/packages/react/src/components/ContainedList/ContainedList.mdx +++ b/packages/react/src/components/ContainedList/ContainedList.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Story, Canvas } from '@storybook/blocks'; +import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks'; import * as ContainedListStories from './ContainedList.stories.js'; + + # ContainedList [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ContainedList) diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx index c817b9b43677..cfab008cd933 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx @@ -1,8 +1,10 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import ContentSwitcher from '../ContentSwitcher'; import Switch from '../Switch'; import * as ContentSwitcherStories from './ContentSwitcher.stories.js'; + + # Content Switcher [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ContentSwitcher) diff --git a/packages/react/src/components/ContextMenu/useContextMenu.mdx b/packages/react/src/components/ContextMenu/useContextMenu.mdx index de25d7e6214a..debe239f8b0a 100644 --- a/packages/react/src/components/ContextMenu/useContextMenu.mdx +++ b/packages/react/src/components/ContextMenu/useContextMenu.mdx @@ -1,3 +1,8 @@ +import { Meta } from '@storybook/blocks'; +import * as useContextMenu from './useContextMenu.stories.js'; + + + # useContextMenu [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ContextMenu) diff --git a/packages/react/src/components/CopyButton/CopyButton.mdx b/packages/react/src/components/CopyButton/CopyButton.mdx index 598da06a1342..d6ae3b7a23ce 100644 --- a/packages/react/src/components/CopyButton/CopyButton.mdx +++ b/packages/react/src/components/CopyButton/CopyButton.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Story, Canvas } from '@storybook/blocks'; +import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks'; import * as CopyButtonStories from './CopyButton.stories.js'; + + # CopyButton [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/CopyButton) diff --git a/packages/react/src/components/DataTable/DataTable.mdx b/packages/react/src/components/DataTable/DataTable.mdx index f2a35d9d654f..b5b700377cce 100644 --- a/packages/react/src/components/DataTable/DataTable.mdx +++ b/packages/react/src/components/DataTable/DataTable.mdx @@ -8,6 +8,8 @@ import { TableBody, } from '../DataTable'; + + # DataTable [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/DataTable) diff --git a/packages/react/src/components/DatePicker/DatePicker.mdx b/packages/react/src/components/DatePicker/DatePicker.mdx index c192800c8469..951870770afe 100644 --- a/packages/react/src/components/DatePicker/DatePicker.mdx +++ b/packages/react/src/components/DatePicker/DatePicker.mdx @@ -1,8 +1,10 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import DatePicker from '../DatePicker'; import DatePickerInput from '../DatePickerInput'; import * as DatePickerStories from './DatePicker.stories'; + + # Date Picker [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/DatePicker) diff --git a/packages/react/src/components/Dropdown/Dropdown.mdx b/packages/react/src/components/Dropdown/Dropdown.mdx index d76b8a379d0e..9471c11ae4b9 100644 --- a/packages/react/src/components/Dropdown/Dropdown.mdx +++ b/packages/react/src/components/Dropdown/Dropdown.mdx @@ -1,8 +1,10 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import Dropdown from '../Dropdown'; import DropdownSkeleton from './Dropdown.Skeleton'; import * as DropdownStories from './Dropdown.stories'; + + # Dropdown [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Dropdown) @@ -108,7 +110,7 @@ want to fully control the component, you can use `initialSelectedItem`. ```jsx const items = ['Option 1', 'Option 2', 'Option 3'] -; + ``` ### Dropdown `itemToElement` diff --git a/packages/react/src/components/FileUploader/FileUploader.mdx b/packages/react/src/components/FileUploader/FileUploader.mdx index 5ca8e4a1e6aa..9d745af139b0 100644 --- a/packages/react/src/components/FileUploader/FileUploader.mdx +++ b/packages/react/src/components/FileUploader/FileUploader.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # FileUploader diff --git a/packages/react/src/components/FluidForm/FluidForm.mdx b/packages/react/src/components/FluidForm/FluidForm.mdx index 463b2721c093..ab38ac74a6d7 100644 --- a/packages/react/src/components/FluidForm/FluidForm.mdx +++ b/packages/react/src/components/FluidForm/FluidForm.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as FluidFormStories from './FluidForm.stories'; + + {/* */} ## Table of Contents diff --git a/packages/react/src/components/FluidSelect/FluidSelect.mdx b/packages/react/src/components/FluidSelect/FluidSelect.mdx index 9928df4ac088..9ca520ba3390 100644 --- a/packages/react/src/components/FluidSelect/FluidSelect.mdx +++ b/packages/react/src/components/FluidSelect/FluidSelect.mdx @@ -1,9 +1,11 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; import FluidSelect from './'; import SelectItem from '../SelectItem'; + + # FluidSelect [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FluidSelect) diff --git a/packages/react/src/components/Form/Form.mdx b/packages/react/src/components/Form/Form.mdx index f251c8143638..cf877a42be36 100644 --- a/packages/react/src/components/Form/Form.mdx +++ b/packages/react/src/components/Form/Form.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as FormStories from './Form.stories'; + + {/* */} ## Table of Contents diff --git a/packages/react/src/components/FormGroup/FormGroup.mdx b/packages/react/src/components/FormGroup/FormGroup.mdx index bf7add26b99b..fcb28995c3df 100644 --- a/packages/react/src/components/FormGroup/FormGroup.mdx +++ b/packages/react/src/components/FormGroup/FormGroup.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Story, Canvas } from '@storybook/blocks'; +import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks'; import * as FormGroupStories from './FormGroup.stories'; + + # FormGroup [Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/FormGroup) diff --git a/packages/react/src/components/FormLabel/FormLabel.mdx b/packages/react/src/components/FormLabel/FormLabel.mdx index e4a8d5de337d..350e67b8f78e 100644 --- a/packages/react/src/components/FormLabel/FormLabel.mdx +++ b/packages/react/src/components/FormLabel/FormLabel.mdx @@ -1,7 +1,9 @@ -import { ArgTypes, Story, Canvas } from '@storybook/blocks'; +import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks'; import Tooltip from '../Tooltip'; import * as FormLabelStories from './FormLabel.stories'; + + # FormLabel [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/FormLabel) diff --git a/packages/react/src/components/Grid/FlexGrid.mdx b/packages/react/src/components/Grid/FlexGrid.mdx index e09b9b151cff..b74f2959c060 100644 --- a/packages/react/src/components/Grid/FlexGrid.mdx +++ b/packages/react/src/components/Grid/FlexGrid.mdx @@ -1,6 +1,8 @@ -import { Story, Canvas, ArgTypes } from '@storybook/blocks'; +import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks'; import * as FlexGridStories from './FlexGrid.stories'; + + # Grid [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Grid) diff --git a/packages/react/src/components/Grid/Grid.mdx b/packages/react/src/components/Grid/Grid.mdx index 994828830021..9fc025760d7d 100644 --- a/packages/react/src/components/Grid/Grid.mdx +++ b/packages/react/src/components/Grid/Grid.mdx @@ -1,6 +1,8 @@ -import { Story, Canvas, ArgTypes } from '@storybook/blocks'; +import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks'; import * as GridStories from './Grid.stories'; + + # Grid [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Grid) diff --git a/packages/react/src/components/Heading/Heading.mdx b/packages/react/src/components/Heading/Heading.mdx index 4ffabdda6a3a..34992c3ef3ed 100644 --- a/packages/react/src/components/Heading/Heading.mdx +++ b/packages/react/src/components/Heading/Heading.mdx @@ -1,6 +1,8 @@ -import { Canvas, ArgTypes, Story } from '@storybook/blocks'; +import { Canvas, ArgTypes, Story, Meta } from '@storybook/blocks'; import * as HeadingStories from './Heading.stories'; + + # Heading [Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/Heading) diff --git a/packages/react/src/components/IconButton/IconButton.mdx b/packages/react/src/components/IconButton/IconButton.mdx index 5c03a9efb189..85517fe85a95 100644 --- a/packages/react/src/components/IconButton/IconButton.mdx +++ b/packages/react/src/components/IconButton/IconButton.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # IconButton diff --git a/packages/react/src/components/IdPrefix/IdPrefix.mdx b/packages/react/src/components/IdPrefix/IdPrefix.mdx index dfa97b96f785..882822436e2a 100644 --- a/packages/react/src/components/IdPrefix/IdPrefix.mdx +++ b/packages/react/src/components/IdPrefix/IdPrefix.mdx @@ -1,7 +1,9 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import { IdPrefix } from '../IdPrefix'; import * as IdPrefixStories from './IdPrefix.stories'; + + # Prefix [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ClassPrefix) diff --git a/packages/react/src/components/InlineLoading/InlineLoading.mdx b/packages/react/src/components/InlineLoading/InlineLoading.mdx index 8affeee0de1b..fa4688f3bef5 100644 --- a/packages/react/src/components/InlineLoading/InlineLoading.mdx +++ b/packages/react/src/components/InlineLoading/InlineLoading.mdx @@ -1,7 +1,9 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import InlineLoading from '../InlineLoading'; import * as InlineLoadingStories from './InlineLoading.stories'; + + # InlineLoading [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/InlineLoading) diff --git a/packages/react/src/components/Layer/Layer.mdx b/packages/react/src/components/Layer/Layer.mdx index c82eef5c5f94..82cba89e3c66 100644 --- a/packages/react/src/components/Layer/Layer.mdx +++ b/packages/react/src/components/Layer/Layer.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as LayerStories from './Layer.stories'; + + # Layer [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Layer) diff --git a/packages/react/src/components/Layout/Layout.mdx b/packages/react/src/components/Layout/Layout.mdx index 6c51bb143d6a..9839fc13604d 100644 --- a/packages/react/src/components/Layout/Layout.mdx +++ b/packages/react/src/components/Layout/Layout.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # Layout diff --git a/packages/react/src/components/Link/Link.mdx b/packages/react/src/components/Link/Link.mdx index d5537b62c880..dda47f135a39 100644 --- a/packages/react/src/components/Link/Link.mdx +++ b/packages/react/src/components/Link/Link.mdx @@ -1,5 +1,6 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; -import * as LinkStories from './Link.stories'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; + + # Link diff --git a/packages/react/src/components/Loading/Loading.mdx b/packages/react/src/components/Loading/Loading.mdx index c7ba6b2922d2..0d686cea4953 100644 --- a/packages/react/src/components/Loading/Loading.mdx +++ b/packages/react/src/components/Loading/Loading.mdx @@ -1,7 +1,9 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import Loading from '../Loading'; import * as LoadingStories from './Loading.stories'; + + # Loading [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Loading) diff --git a/packages/react/src/components/Menu/Menu.mdx b/packages/react/src/components/Menu/Menu.mdx index 7e0bdf686fcd..a91f52ef103f 100644 --- a/packages/react/src/components/Menu/Menu.mdx +++ b/packages/react/src/components/Menu/Menu.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # Menu diff --git a/packages/react/src/components/MenuButton/MenuButton.mdx b/packages/react/src/components/MenuButton/MenuButton.mdx index 1892045ddfc5..e8e520266911 100644 --- a/packages/react/src/components/MenuButton/MenuButton.mdx +++ b/packages/react/src/components/MenuButton/MenuButton.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # MenuButton diff --git a/packages/react/src/components/Modal/Modal.featureflag.mdx b/packages/react/src/components/Modal/Modal.featureflag.mdx index db6b333252a3..1b67dd19bbaa 100644 --- a/packages/react/src/components/Modal/Modal.featureflag.mdx +++ b/packages/react/src/components/Modal/Modal.featureflag.mdx @@ -1,3 +1,7 @@ +import { Meta } from '@storybook/blocks'; + + + # Modal [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Modal) diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx index 20afc4e1f4f2..4d51e89b029e 100644 --- a/packages/react/src/components/Modal/Modal.mdx +++ b/packages/react/src/components/Modal/Modal.mdx @@ -1,10 +1,12 @@ -import { Story, ArgTypes, Canvas, Unstyled } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Unstyled, Meta } from '@storybook/blocks'; import Modal from '../Modal'; import { InlineNotification } from '../Notification'; import CodeSnippet from '../CodeSnippet'; import * as ModalStories from './Modal.stories'; import './Modal.stories.scss'; + + # Modal [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Modal) diff --git a/packages/react/src/components/ModalWrapper/migration.mdx b/packages/react/src/components/ModalWrapper/migration.mdx index d688ff053a3d..7d2054a6b923 100644 --- a/packages/react/src/components/ModalWrapper/migration.mdx +++ b/packages/react/src/components/ModalWrapper/migration.mdx @@ -1,3 +1,7 @@ +import { Meta } from '@storybook/blocks'; + + + # ModalWrapper deprecation ## Timeline diff --git a/packages/react/src/components/MultiSelect/MultiSelect.mdx b/packages/react/src/components/MultiSelect/MultiSelect.mdx index 014dcc5609fb..d0c835c0253d 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.mdx +++ b/packages/react/src/components/MultiSelect/MultiSelect.mdx @@ -1,7 +1,9 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as MultiSelect from './MultiSelect.stories'; + + # MultiSelect [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/MultiSelect) diff --git a/packages/react/src/components/Notification/Notification.featureflag.mdx b/packages/react/src/components/Notification/Notification.featureflag.mdx index 1d9919cf841c..76402993cc06 100644 --- a/packages/react/src/components/Notification/Notification.featureflag.mdx +++ b/packages/react/src/components/Notification/Notification.featureflag.mdx @@ -1,3 +1,7 @@ +import { Meta } from '@storybook/blocks'; + + + # ActionableNotification [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Notification) diff --git a/packages/react/src/components/Notification/Notification.mdx b/packages/react/src/components/Notification/Notification.mdx index 12fc837e518d..c44833e75c0f 100644 --- a/packages/react/src/components/Notification/Notification.mdx +++ b/packages/react/src/components/Notification/Notification.mdx @@ -1,5 +1,7 @@ import { Canvas, ArgTypes, Meta } from '@storybook/blocks'; + + # Notification [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Notification) diff --git a/packages/react/src/components/NumberInput/NumberInput.mdx b/packages/react/src/components/NumberInput/NumberInput.mdx index 3c1606911cd7..87d94ed5aaa2 100644 --- a/packages/react/src/components/NumberInput/NumberInput.mdx +++ b/packages/react/src/components/NumberInput/NumberInput.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as NumberInputStories from './NumberInput.stories'; + + # NumberInput [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/NumberInput) diff --git a/packages/react/src/components/OrderedList/OrderedList.mdx b/packages/react/src/components/OrderedList/OrderedList.mdx index 3411c4de6861..15fe53768bf2 100644 --- a/packages/react/src/components/OrderedList/OrderedList.mdx +++ b/packages/react/src/components/OrderedList/OrderedList.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as OrderedListStories from './OrderedList.stories'; + + # OrderedList [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/OrderedList) diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.mdx b/packages/react/src/components/OverflowMenu/OverflowMenu.mdx index 68c308b48736..f50033faf05a 100644 --- a/packages/react/src/components/OverflowMenu/OverflowMenu.mdx +++ b/packages/react/src/components/OverflowMenu/OverflowMenu.mdx @@ -1,6 +1,8 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as OverflowMenuStories from './OverflowMenu.stories'; + + # OverflowMenu [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/OverflowMenu) diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx b/packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx index 18d2c1f1f7c4..0dff67cfb155 100644 --- a/packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx +++ b/packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx @@ -1,4 +1,6 @@ -import { ArgTypes, Canvas, Story } from '@storybook/addon-docs'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/addon-docs'; + + # OverflowMenu diff --git a/packages/react/src/components/Pagination/Pagination.mdx b/packages/react/src/components/Pagination/Pagination.mdx index 2ae7db9082b0..0319cb38fc20 100644 --- a/packages/react/src/components/Pagination/Pagination.mdx +++ b/packages/react/src/components/Pagination/Pagination.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # Pagination diff --git a/packages/react/src/components/Popover/Popover.mdx b/packages/react/src/components/Popover/Popover.mdx index 9952617c13a8..d20aed930459 100644 --- a/packages/react/src/components/Popover/Popover.mdx +++ b/packages/react/src/components/Popover/Popover.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as PopoverStories from './Popover.stories'; + + # Popover [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Popover) diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx index ef39538b3ee7..ad330b0c6835 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx @@ -1,6 +1,8 @@ -import { Story, Canvas, ArgTypes } from '@storybook/blocks'; +import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks'; import * as ProgressIndicatorStories from './ProgressIndicator.stories'; + + # ProgressIndicator [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/ProgressIndicator) diff --git a/packages/react/src/components/RadioButton/RadioButton.mdx b/packages/react/src/components/RadioButton/RadioButton.mdx index 8756a08c49d4..c0cf94a1f072 100644 --- a/packages/react/src/components/RadioButton/RadioButton.mdx +++ b/packages/react/src/components/RadioButton/RadioButton.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as RadioButtonStories from './RadioButton.stories'; + + # RadioButton [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/RadioButton) diff --git a/packages/react/src/components/Search/Search.mdx b/packages/react/src/components/Search/Search.mdx index a3c84ceb880b..a98e52d84791 100644 --- a/packages/react/src/components/Search/Search.mdx +++ b/packages/react/src/components/Search/Search.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # Search diff --git a/packages/react/src/components/Select/Select.mdx b/packages/react/src/components/Select/Select.mdx index 2a8a2d6799c8..65a55b25bd7c 100644 --- a/packages/react/src/components/Select/Select.mdx +++ b/packages/react/src/components/Select/Select.mdx @@ -1,9 +1,11 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; import Select from './'; import SelectItem from '../SelectItem'; + + # Select [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Select) diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx index 0edcff91fa7d..cfe9482f4be2 100644 --- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx +++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx @@ -1,6 +1,8 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as SkeletonPlaceholderStories from './SkeletonPlaceholder.stories'; + + # SkeletonPlaceholder [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/SkeletonPlaceholder) diff --git a/packages/react/src/components/SkeletonText/SkeletonText.mdx b/packages/react/src/components/SkeletonText/SkeletonText.mdx index 6c5a31c46964..de5a11378226 100644 --- a/packages/react/src/components/SkeletonText/SkeletonText.mdx +++ b/packages/react/src/components/SkeletonText/SkeletonText.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as SkeletonTextStories from './SkeletonText.stories'; + + # SkeletonText [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/SkeletonText) diff --git a/packages/react/src/components/Slider/Slider.mdx b/packages/react/src/components/Slider/Slider.mdx index 9122d4329b68..4a3680652e26 100644 --- a/packages/react/src/components/Slider/Slider.mdx +++ b/packages/react/src/components/Slider/Slider.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Story, Canvas } from '@storybook/blocks'; +import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks'; import * as SliderStories from './Slider.stories'; + + # Slider [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slider) diff --git a/packages/react/src/components/Slug/Slug.mdx b/packages/react/src/components/Slug/Slug.mdx deleted file mode 100644 index 47a0d7dadbfb..000000000000 --- a/packages/react/src/components/Slug/Slug.mdx +++ /dev/null @@ -1,156 +0,0 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; -import { Slug, SlugContent, SlugActions } from '../Slug'; -import * as SlugStories from './Slug.stories'; - -# Slug - -[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug) -| -[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo) -| -[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md) - -## Table of Contents - -- [Overview](#overview) -- [Slug anatomy](#slug-anatomy) -- [Component API](#component-api) - - [Slug `aiText`](#slug-aitext) - - [Slug `aiTextLabel`](#slug-aitextlabel) - - [Slug `kind`](#slug-kind) - - [Slug `revertActive` and `onRevertClick`](#slug-revertactive-and-onrevertclick) -- [Feedback](#feedback) - -## Overview - -The AI slug is intended for any scenario where something is being generated by -(or with) AI to reinforce AI transparency, accountability, and explainability at -any interface level. This also enables more effective recognition and recall of -AI instances in a way that is identifiable across any IBM product. - - - -## Slug anatomy - -The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct -the contents of the `Slug` callout, you can place the desired elements as a -child of `Slug` in `SlugContent`, like so: - -```jsx - - - {Content Here} - - -``` - -The `Slug` also supports the rendering of an action bar at the bottom of the -callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`, -placed inside the `SlugContent` - -```jsx - - - {Content Here} - {Optional Slug action bar} - - - - - - - - - - - - - - -``` - -## Component API - - - -### Slug `aiText` - -If needed, you can change the text inside the `Slug` when translating to -different languages. - - - Explanation of AI generated content - - -```jsx - - Explanation of AI-generated content - -``` - -### Slug `aiTextLabel` - -When using the `inline` variant, you can add text adjacent to the AI label with -the `aiTextLabel` prop. - - - Explanation of AI generated content - -
- - Explanation of AI generated content - - -```jsx - - Explanation of AI generated content - - - - Explanation of AI generated content - -``` - -### Slug `kind` - -The `Slug` component has two variants, `default` and `inline`. - - - AI was used to generate this content - - -```jsx - - AI was used to generate this content - -``` - -The `inline` `Slug` with the standard icon can also trigger the AI -explainability callout. - - - Explanation of AI generated content - - -```jsx - - Explanation of AI-generated content - -``` - -### Slug `revertActive` and `onRevertClick` - -`revertActive` is a boolean prop that can be set on `Slug` that transforms the -`Slug` into a revert action button. This is useful if a user edits an -AI-generated input to show that the element has been modified. This can be used -in conjunction with the `onRevertClick` callback to handle restoring the element -to the AI-generated state. For an example, please take a look at the -[Revert Test story](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-form--revert-test) -or take a look at the example story -[source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Slug/Slug-form.stories.js#L96). - -## Feedback - -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/edit/main/packages/react/src/components/Slug/Slug.mdx). diff --git a/packages/react/src/components/StructuredList/StructuredList.mdx b/packages/react/src/components/StructuredList/StructuredList.mdx index b201378c1040..8a729ba58661 100644 --- a/packages/react/src/components/StructuredList/StructuredList.mdx +++ b/packages/react/src/components/StructuredList/StructuredList.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # StructuredList diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx index 41798cf60b39..1c56f266dca2 100644 --- a/packages/react/src/components/Tabs/Tabs.mdx +++ b/packages/react/src/components/Tabs/Tabs.mdx @@ -1,8 +1,10 @@ -import { ArgTypes, Canvas, Story } from '@storybook/blocks'; +import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs'; import * as TabsStories from './Tabs.stories'; import { Grid, Column } from '../Grid'; + + # Tabs [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tabs) @@ -184,9 +186,11 @@ And there you have it! Working dismissable tabs. ### Tab - tab activation modes -**Tabs With Automatic Activation**: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus. +**Tabs With Automatic Activation**: A tabs widget where tabs are automatically +activated and their panel is displayed when they receive focus. -**Tabs With Manual Activation**: A tabs widget where users activate a tab and display its panel by pressing Space or Enter. +**Tabs With Manual Activation**: A tabs widget where users activate a tab and +display its panel by pressing Space or Enter. In v11, to do this, you can this by setting `activation` to `manual`: diff --git a/packages/react/src/components/Tag/InteractiveTag.mdx b/packages/react/src/components/Tag/InteractiveTag.mdx index 9ba8dc201186..9e75d691b13b 100644 --- a/packages/react/src/components/Tag/InteractiveTag.mdx +++ b/packages/react/src/components/Tag/InteractiveTag.mdx @@ -1,6 +1,8 @@ -import { Canvas, Story } from '@storybook/blocks'; +import { Canvas, Story, Meta } from '@storybook/blocks'; import * as InteractiveTagStories from './InteractiveTag.stories'; + + # Interactive Tag [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tag) diff --git a/packages/react/src/components/Tag/Tag.mdx b/packages/react/src/components/Tag/Tag.mdx index ac0401ef93ae..cb0420bdea82 100644 --- a/packages/react/src/components/Tag/Tag.mdx +++ b/packages/react/src/components/Tag/Tag.mdx @@ -1,4 +1,7 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; +import * as TagStories from './Tag.stories'; + + # Tag diff --git a/packages/react/src/components/Text/Text-story.js b/packages/react/src/components/Text/Text-story.js index 05a240af2c9f..5a983c9e1447 100644 --- a/packages/react/src/components/Text/Text-story.js +++ b/packages/react/src/components/Text/Text-story.js @@ -7,7 +7,7 @@ import React from 'react'; import { LayoutDirection } from '../LayoutDirection'; -import { TextDirection, Text } from '../Text'; +import { TextDirection, Text } from '.'; import RadioButtonGroup from '../RadioButtonGroup'; import RadioButton from '../RadioButton'; import Button from '../Button'; diff --git a/packages/react/src/components/Text/Text.mdx b/packages/react/src/components/Text/Text.mdx index e20eee43eb36..f03b3deed18f 100644 --- a/packages/react/src/components/Text/Text.mdx +++ b/packages/react/src/components/Text/Text.mdx @@ -1,6 +1,8 @@ -import { Canvas, ArgTypes, Story } from '@storybook/blocks'; +import { Canvas, ArgTypes, Story, Meta } from '@storybook/blocks'; import * as TextStories from './Text-story'; + + # Text [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Text) diff --git a/packages/react/src/components/TextArea/TextArea.mdx b/packages/react/src/components/TextArea/TextArea.mdx index ae394018c904..47cc0e91e950 100644 --- a/packages/react/src/components/TextArea/TextArea.mdx +++ b/packages/react/src/components/TextArea/TextArea.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # TextArea diff --git a/packages/react/src/components/TextInput/TextInput.mdx b/packages/react/src/components/TextInput/TextInput.mdx index cb8f75c409db..e81821763a55 100644 --- a/packages/react/src/components/TextInput/TextInput.mdx +++ b/packages/react/src/components/TextInput/TextInput.mdx @@ -2,6 +2,8 @@ import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as TextInputStories from './TextInput.stories'; import * as PasswordInputStories from './PasswordInput.stories'; + + # TextInput [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TextInput) diff --git a/packages/react/src/components/Theme/Theme.mdx b/packages/react/src/components/Theme/Theme.mdx index 5537e76e712c..cdc24e4cc6b7 100644 --- a/packages/react/src/components/Theme/Theme.mdx +++ b/packages/react/src/components/Theme/Theme.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Story, Canvas } from '@storybook/blocks'; +import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks'; import * as ThemeStories from './Theme.stories'; + + # Theme [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Theme) diff --git a/packages/react/src/components/Tile/Tile.mdx b/packages/react/src/components/Tile/Tile.mdx index 552e14f13402..8312de5f5200 100644 --- a/packages/react/src/components/Tile/Tile.mdx +++ b/packages/react/src/components/Tile/Tile.mdx @@ -2,7 +2,7 @@ import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as TileStories from './Tile.stories'; import * as TileFeatureFlagStories from './Tile.featureflag.stories'; - + # Tile diff --git a/packages/react/src/components/TimePicker/TimePicker.mdx b/packages/react/src/components/TimePicker/TimePicker.mdx index 7e2113640cd6..e585b9a07fd0 100644 --- a/packages/react/src/components/TimePicker/TimePicker.mdx +++ b/packages/react/src/components/TimePicker/TimePicker.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # TimePicker diff --git a/packages/react/src/components/Toggle/Toggle.mdx b/packages/react/src/components/Toggle/Toggle.mdx index 3fd0c9b643f9..18ac5b64dc7f 100644 --- a/packages/react/src/components/Toggle/Toggle.mdx +++ b/packages/react/src/components/Toggle/Toggle.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # Toggle diff --git a/packages/react/src/components/Toggletip/Toggletip.mdx b/packages/react/src/components/Toggletip/Toggletip.mdx index fec2ada2c4d3..994b5f5a8b33 100644 --- a/packages/react/src/components/Toggletip/Toggletip.mdx +++ b/packages/react/src/components/Toggletip/Toggletip.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # Toggletip diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.mdx b/packages/react/src/components/Tooltip/DefinitionTooltip.mdx index 33a2748536cb..e7b1d95b6889 100644 --- a/packages/react/src/components/Tooltip/DefinitionTooltip.mdx +++ b/packages/react/src/components/Tooltip/DefinitionTooltip.mdx @@ -1,6 +1,8 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as DefinitionTooltipStories from './DefinitionTooltip.stories'; + + # DefinitionTooltip [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tooltip/DefinitionTooltip.js) diff --git a/packages/react/src/components/Tooltip/Tooltip.mdx b/packages/react/src/components/Tooltip/Tooltip.mdx index cb973540c2d9..4fa2da5298e8 100644 --- a/packages/react/src/components/Tooltip/Tooltip.mdx +++ b/packages/react/src/components/Tooltip/Tooltip.mdx @@ -1,6 +1,8 @@ -import { Story, ArgTypes, Canvas } from '@storybook/blocks'; +import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as TooltipStories from './Tooltip.stories'; + + # Tooltip [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tooltip) diff --git a/packages/react/src/components/TreeView/TreeView.featureflag.mdx b/packages/react/src/components/TreeView/TreeView.featureflag.mdx index e8be8d3ca94c..4ea18ac7a634 100644 --- a/packages/react/src/components/TreeView/TreeView.featureflag.mdx +++ b/packages/react/src/components/TreeView/TreeView.featureflag.mdx @@ -1,16 +1,26 @@ +import { Meta } from '@storybook/blocks'; + + + # TreeView controllable API -The new controllable API of TreeView allows you to synchronize the state of `selected` and `active` with your application. +The new controllable API of TreeView allows you to synchronize the state of +`selected` and `active` with your application. -You can opt-in to this by enabling the `enable-treeview-controllable` feature flag. This changes the following behaviour: +You can opt-in to this by enabling the `enable-treeview-controllable` feature +flag. This changes the following behaviour: - `TreeView` - `props.onActivate` will be called with a node's ID whenever it is activated. - - The signature of `props.onSelect` changes from `(event, selectedIDs)` to `(selectedIDs)`. - - Whenever you update `props.selected` or `props.active`, the internal state will be updated accordingly and the component re-renders. + - The signature of `props.onSelect` changes from `(event, selectedIDs)` to + `(selectedIDs)`. + - Whenever you update `props.selected` or `props.active`, the internal state + will be updated accordingly and the component re-renders. - `TreeNode` - - The signature of `props.onToggle` changes from `(event, { id, isExpanded, label, value })` to `(isExpanded)`. - - `props.defaultIsExpanded` is added to allow for a default state in uncontrolled mode. + - The signature of `props.onToggle` changes from + `(event, { id, isExpanded, label, value })` to `(isExpanded)`. + - `props.defaultIsExpanded` is added to allow for a default state in + uncontrolled mode. ## Example @@ -24,8 +34,7 @@ function SynchronizedTreeView() { selected={selected} onSelect={setSelected} active={active} - onActivate={setActive} - > + onActivate={setActive}> ... ); diff --git a/packages/react/src/components/TreeView/TreeView.mdx b/packages/react/src/components/TreeView/TreeView.mdx index 0b8fef1360b9..5140818a0ae3 100644 --- a/packages/react/src/components/TreeView/TreeView.mdx +++ b/packages/react/src/components/TreeView/TreeView.mdx @@ -1,6 +1,8 @@ -import { ArgTypes, Canvas } from '@storybook/blocks'; +import { ArgTypes, Canvas, Meta } from '@storybook/blocks'; import * as TreeViewStories from './Treeview.stories'; + + # TreeView [Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/TreeView) diff --git a/packages/react/src/components/UIShell/UIShell.mdx b/packages/react/src/components/UIShell/UIShell.mdx index 3c402d8126f1..540c4920cb25 100644 --- a/packages/react/src/components/UIShell/UIShell.mdx +++ b/packages/react/src/components/UIShell/UIShell.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # UIShell diff --git a/packages/react/src/components/UnorderedList/UnorderedList.mdx b/packages/react/src/components/UnorderedList/UnorderedList.mdx index e3458503c7a5..e0e36380b2a8 100644 --- a/packages/react/src/components/UnorderedList/UnorderedList.mdx +++ b/packages/react/src/components/UnorderedList/UnorderedList.mdx @@ -1,4 +1,6 @@ -import { ArgTypes } from '@storybook/blocks'; +import { ArgTypes, Meta } from '@storybook/blocks'; + + # UnorderedList