diff --git a/packages/react/previewer/codePreviewer.tsx b/packages/react/previewer/codePreviewer.tsx index 49fd5a8f83c9..821cb068eaa1 100644 --- a/packages/react/previewer/codePreviewer.tsx +++ b/packages/react/previewer/codePreviewer.tsx @@ -53,12 +53,12 @@ export const stackblitzPrefillConfig = ( return iconNames.filter((iconName) => { // Grab the component to convert in " @@ -36,7 +37,15 @@ You can configure the accordion item's heading using the `title` prop. Everything you pass in as a child of `AccordionItem` will be rendered in the accordion's panel. - + stackblitzPrefillConfig(AccordionStories.Default), + }, + ]} +/> ## Skeleton state @@ -44,7 +53,15 @@ You can use the `AccordionSkeleton` component to render a skeleton variant of an accordion. This is useful to display while content in your accordion is being fetched from an external resource like an API. - + stackblitzPrefillConfig(AccordionStories.Skeleton), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.mdx b/packages/react/src/components/Breadcrumb/Breadcrumb.mdx index 509d5174a0a8..52085f4f7e9f 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.mdx +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.mdx @@ -1,6 +1,7 @@ import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks'; import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb'; import * as BreadcrumbStories from './Breadcrumb.stories'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -27,7 +28,15 @@ You can build a breadcrumb using a combination of the `Breadcrumb` and `BreadcrumbItem` components as `children` and each `BreadcrumbItem` is responsible for displaying the page links in the hierarchy. - + stackblitzPrefillConfig(BreadcrumbStories.Default), + }, + ]} +/> ## Breadcrumb with `OverflowMenu` @@ -36,7 +45,16 @@ The first and last two page links should be shown, but the remaining breadcrumbs in between are condensed into an overflow menu. Breadcrumbs should never wrap onto a second line. - + + stackblitzPrefillConfig(BreadcrumbStories.BreadcrumbWithOverflowMenu), + }, + ]} +/> ## Skeleton state @@ -44,7 +62,15 @@ You can use the `BreadcrumbSkeleton` component to render a skeleton variant of a breadcrumb. This is useful to display while content in your breadcrumb is being fetched from an external resource like an API. - + stackblitzPrefillConfig(BreadcrumbStories.Skeleton), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js index 5bf74f259764..a846d3152d2f 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js @@ -71,4 +71,6 @@ BreadcrumbWithOverflowMenu.argTypes = { ...sharedArgTypes, }; -export const Skeleton = () => ; +export const Skeleton = () => { + return ; +}; diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx index 5c07b5f4a1eb..d0effb97fb10 100644 --- a/packages/react/src/components/Button/Button.mdx +++ b/packages/react/src/components/Button/Button.mdx @@ -49,10 +49,42 @@ communicate calls to action to the user and allow users to interact with pages in a variety of ways. `Button` labels express what action will occur when the user interacts with it. - - - - + stackblitzPrefillConfig(ButtonStories.Default), + }, + ]} +/> + stackblitzPrefillConfig(ButtonStories.Secondary), + }, + ]} +/> + stackblitzPrefillConfig(ButtonStories.Tertiary), + }, + ]} +/> + stackblitzPrefillConfig(ButtonStories.Ghost), + }, + ]} +/> ## Danger Buttons @@ -64,7 +96,15 @@ danger button style. However, if a destructive action is just one of several actions a user could choose from, then a lower emphasis style like the tertiary danger button or the ghost danger button may be more appropriate. - + stackblitzPrefillConfig(ButtonStories.Danger), + }, + ]} +/> ## Icon-only Buttons @@ -73,7 +113,15 @@ Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but most commonly will be styled as primary or ghost buttons. Icon only buttons do not support Danger, Danger tertiary, or Danger ghost. - + stackblitzPrefillConfig(ButtonStories.IconButton), + }, + ]} +/> ## Set of Buttons @@ -84,7 +132,15 @@ Negative action buttons will be on the left. Positive action buttons should be on the right. When these two types buttons are paired in the correct order, they will automatically space themselves apart. - + stackblitzPrefillConfig(ButtonStories.SetOfButtons), + }, + ]} +/> ## Skeleton state @@ -92,7 +148,15 @@ You can use the `ButtonSkeleton` component to render a skeleton variant of a button. This is useful to display on initial page load to indicate to users that content is being loaded. - + stackblitzPrefillConfig(ButtonStories.Skeleton), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/Button/Button.stories.js b/packages/react/src/components/Button/Button.stories.js index 551a58742178..dd6614e4a923 100644 --- a/packages/react/src/components/Button/Button.stories.js +++ b/packages/react/src/components/Button/Button.stories.js @@ -130,10 +130,12 @@ export const SetOfButtons = (args) => { ); }; -export const Skeleton = () => ( -
- -   - -
-); +export const Skeleton = () => { + return ( +
+ +   + +
+ ); +}; diff --git a/packages/react/src/components/Checkbox/Checkbox.mdx b/packages/react/src/components/Checkbox/Checkbox.mdx index c8a3defbf3f2..ce1b5f4ea44e 100644 --- a/packages/react/src/components/Checkbox/Checkbox.mdx +++ b/packages/react/src/components/Checkbox/Checkbox.mdx @@ -1,6 +1,7 @@ import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks'; import Checkbox, { CheckboxSkeleton } from '../Checkbox'; import * as CheckboxStories from './Checkbox.stories'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -24,7 +25,15 @@ import * as CheckboxStories from './Checkbox.stories'; You can build a checkbox using the `Checkbox` in combination with a `
` element to group controls and `` element for the label. - + stackblitzPrefillConfig(CheckboxStories.Default), + }, + ]} +/> ### Controlled example @@ -50,7 +59,15 @@ You can use the `CheckboxSkeleton` component to render a skeleton variant of a checkbox. This is useful to display while content in your checkbox is being fetched from an external resource like an API. - + stackblitzPrefillConfig(CheckboxStories.Skeleton), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js index f792661649c1..fdb03bc578b0 100644 --- a/packages/react/src/components/Checkbox/Checkbox.stories.js +++ b/packages/react/src/components/Checkbox/Checkbox.stories.js @@ -20,11 +20,6 @@ const checkboxEvents = { labelText: 'Checkbox label', }; -const fieldsetCheckboxProps = () => ({ - className: 'some-class', - legendText: 'Group label', -}); - export default { title: 'Components/Checkbox', component: Checkbox, @@ -146,7 +141,7 @@ const sharedArgTypes = { }; export const Default = (args) => ( - + @@ -162,7 +157,8 @@ export const Horizontal = (args) => { return ( @@ -204,7 +200,9 @@ export const Single = () => { ); }; -export const Skeleton = () => ; +export const Skeleton = () => { + return ; +}; const AILabelFunc = (kind) => ( diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx index 86ef45a9d98b..902e45e996eb 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -1,6 +1,7 @@ import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import CodeSnippet from '../CodeSnippet'; import * as CodeSnippetStories from './CodeSnippet.stories'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -29,7 +30,15 @@ Code snippets are strings or small blocks of reusable code that are copyable. We don't provide the copy functionality and recommend [clipboard.js](https://clipboardjs.com/). - + stackblitzPrefillConfig(CodeSnippetStories.Inline), + }, + ]} +/> ## Skeleton state @@ -37,14 +46,30 @@ You can use the `CodeSnippetSkeleton` component to render a skeleton variant of an code snippet. This is useful to display while content in your code snippet is being fetched from an external resource like an API. - + stackblitzPrefillConfig(CodeSnippetStories.Skeleton), + }, + ]} +/> ## Inline Inline code snippet's are used for distinguishing a symbol, variable, function name or similar small piece of code from it's surrounding text. - + stackblitzPrefillConfig(CodeSnippetStories.Inline), + }, + ]} +/> ## Multi-line @@ -53,7 +78,15 @@ line. They're shown in a block and useful for showing classes, functions, blocks of styles and the like. There is an option to wrap the lines displayed if the lines are longer than the container. - + stackblitzPrefillConfig(CodeSnippetStories.Multiline), + }, + ]} +/> ## Single-line @@ -61,7 +94,15 @@ Single line code snippets are used when showing code that fits on one line without wrapping. Useful for calling out terminal commands, function invocations, expressions etc. - + stackblitzPrefillConfig(CodeSnippetStories.Singleline), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js index 452ad42ef309..00a9f3822b38 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js @@ -29,15 +29,18 @@ export default { }, }; -export const Inline = () => ( - - {'node -v'} - -); +export const Inline = () => { + return ( + + {'node -v'} + + ); +}; -export const Multiline = () => ( - - {` "scripts": { +export const Multiline = () => { + return ( + + {` "scripts": { "build": "lerna run build --stream --prefix --npm-client yarn", "ci-check": "carbon-cli ci-check", "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", @@ -66,28 +69,34 @@ export const Multiline = () => ( "@babel/preset-react": "^7.10.0", "@babel/runtime": "^7.10.0", "@commitlint/cli": "^8.3.5",`} - -); - -export const Singleline = () => ( - - yarn add carbon-components@latest carbon-components-react@latest - @carbon/icons-react@latest carbon-icons@latest - -); + + ); +}; -export const InlineWithLayer = () => ( - - - {'node -v'} +export const Singleline = () => { + return ( + + yarn add carbon-components@latest carbon-components-react@latest + @carbon/icons-react@latest carbon-icons@latest - -); + ); +}; -export const MultilineWithLayer = () => ( - - - {` "scripts": { +export const InlineWithLayer = () => { + return ( + + + {'node -v'} + + + ); +}; + +export const MultilineWithLayer = () => { + return ( + + + {` "scripts": { "build": "lerna run build --stream --prefix --npm-client yarn", "ci-check": "carbon-cli ci-check", "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", @@ -116,22 +125,27 @@ export const MultilineWithLayer = () => ( "@babel/preset-react": "^7.10.0", "@babel/runtime": "^7.10.0", "@commitlint/cli": "^8.3.5",`} - - -); + + + ); +}; -export const SinglelineWithLayer = () => ( - - - yarn add carbon-components@latest carbon-components-react@latest - @carbon/icons-react@latest carbon-icons@latest - - -); +export const SinglelineWithLayer = () => { + return ( + + + yarn add carbon-components@latest carbon-components-react@latest + @carbon/icons-react@latest carbon-icons@latest + + + ); +}; -export const Skeleton = () => ( -
- - -
-); +export const Skeleton = () => { + return ( +
+ + +
+ ); +}; diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx index 8f9d956e2e4c..d39525a4c24e 100644 --- a/packages/react/src/components/ComboBox/ComboBox.mdx +++ b/packages/react/src/components/ComboBox/ComboBox.mdx @@ -33,7 +33,15 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; A combobox allows the user to make a selection from a predefined list of options and is typically used when there are a large amount of options to choose from. - + stackblitzPrefillConfig(ComboBoxStories.Default), + }, + ]} +/> ## Component API @@ -143,7 +151,15 @@ const items = ['Option 1', 'Option 2', 'Option 3'] You can use `selectedItem` for a fully controlled component. - + stackblitzPrefillConfig(ComboBoxStories._fullyControlled), + }, + ]} +/> ```jsx const options = [ diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js index 7621e0c2d319..801b3c2d64c7 100644 --- a/packages/react/src/components/ComboBox/ComboBox.stories.js +++ b/packages/react/src/components/ComboBox/ComboBox.stories.js @@ -347,7 +347,7 @@ export const _fullyControlled = (args) => { text: 'Option 3', }, ]; - const [value, setValue] = useState(options[0]); + const [value, setValue] = React.useState(options[0]); const onChange = ({ selectedItem }) => { setValue(selectedItem); }; diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx index 02769808e242..ecaff614a347 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.mdx +++ b/packages/react/src/components/ComposedModal/ComposedModal.mdx @@ -42,7 +42,19 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; Modal content can be customized via the ``, `` and `` components. - + + stackblitzPrefillConfig( + ComposedModalStories.WithStateManager, + "import ReactDOM from 'react-dom';" + ), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/ContainedList/ContainedList.mdx b/packages/react/src/components/ContainedList/ContainedList.mdx index 6f59f04e2593..6709cb420035 100644 --- a/packages/react/src/components/ContainedList/ContainedList.mdx +++ b/packages/react/src/components/ContainedList/ContainedList.mdx @@ -1,5 +1,6 @@ import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks'; import * as ContainedListStories from './ContainedList.stories.js'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -26,7 +27,15 @@ import * as ContainedListStories from './ContainedList.stories.js'; ## Overview - + stackblitzPrefillConfig(ContainedListStories.Default), + }, + ]} +/> ### Search @@ -85,7 +94,16 @@ export const WithExpandableSearch = () => { }; ``` - + + stackblitzPrefillConfig(ContainedListStories.WithExpandableSearch), + }, + ]} +/> #### Persistent Search: @@ -140,7 +158,16 @@ export const WithPersistentSearch = () => { `ContainedList.ContainedListItem` is deprecated, use `import { ContainedListItem } from '@carbon/react` import instead. - + + stackblitzPrefillConfig(ContainedListStories.WithPersistentSearch), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js index 32851cccbfbc..6e6c95ad45f8 100644 --- a/packages/react/src/components/ContainedList/ContainedList.stories.js +++ b/packages/react/src/components/ContainedList/ContainedList.stories.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { action } from '@storybook/addon-actions'; import { @@ -136,13 +136,13 @@ export const WithActions = () => { }; export const WithExpandableSearch = () => { - const [searchTerm, setSearchTerm] = useState(''); - const [searchResults, setSearchResults] = useState([]); + const [searchTerm, setSearchTerm] = React.useState(''); + const [searchResults, setSearchResults] = React.useState([]); const handleChange = (event) => { setSearchTerm(event.target.value); }; - useEffect(() => { + React.useEffect(() => { const listItems = [ 'List item 1', 'List item 2', @@ -178,13 +178,13 @@ export const WithExpandableSearch = () => { }; export const WithPersistentSearch = () => { - const [searchTerm, setSearchTerm] = useState(''); - const [searchResults, setSearchResults] = useState([]); + const [searchTerm, setSearchTerm] = React.useState(''); + const [searchResults, setSearchResults] = React.useState([]); const handleChange = (event) => { setSearchTerm(event.target.value); }; - useEffect(() => { + React.useEffect(() => { const listItems = [ 'List item 1', 'List item 2', diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx index d52de1e5c7ad..16f1e8ee4d14 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx @@ -2,6 +2,7 @@ import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import ContentSwitcher from '../ContentSwitcher'; import Switch from '../Switch'; import * as ContentSwitcherStories from './ContentSwitcher.stories.js'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -39,7 +40,15 @@ Content switchers allow users to toggle between two or more content sections within the same space on screen. Only one content section is shown at a time. Create Switch components for each section in the content switcher. - + stackblitzPrefillConfig(ContentSwitcherStories.Default), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/CopyButton/CopyButton.mdx b/packages/react/src/components/CopyButton/CopyButton.mdx index f7c53d3650c4..44aca3d37b23 100644 --- a/packages/react/src/components/CopyButton/CopyButton.mdx +++ b/packages/react/src/components/CopyButton/CopyButton.mdx @@ -1,5 +1,6 @@ import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks'; import * as CopyButtonStories from './CopyButton.stories.js'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -25,7 +26,15 @@ The copy button should be accompanied by a tooltip. Tooltip feedback text should be concise and describe the action taken when the user clicks the copy button. By default we display the text “Copied!”. - + stackblitzPrefillConfig(CopyButtonStories.Default), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/DataTable/DataTable.mdx b/packages/react/src/components/DataTable/DataTable.mdx index 0fe291de1722..e4f2af5fed99 100644 --- a/packages/react/src/components/DataTable/DataTable.mdx +++ b/packages/react/src/components/DataTable/DataTable.mdx @@ -8,6 +8,9 @@ import { TableBody, } from '../DataTable'; +import * as DataTableBasicStories from './stories/DataTable-basic.stories'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; + # DataTable @@ -18,7 +21,15 @@ import {  |  [Accessibility](https://www.carbondesignsystem.com/components/data-table/accessibility) - + stackblitzPrefillConfig(DataTableBasicStories.Default), + }, + ]} +/> {/* */} diff --git a/packages/react/src/components/DatePicker/DatePicker.mdx b/packages/react/src/components/DatePicker/DatePicker.mdx index 5340b36218d9..41dddd128452 100644 --- a/packages/react/src/components/DatePicker/DatePicker.mdx +++ b/packages/react/src/components/DatePicker/DatePicker.mdx @@ -2,6 +2,7 @@ import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import DatePicker from '../DatePicker'; import DatePickerInput from '../DatePickerInput'; import * as DatePickerStories from './DatePicker.stories'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -54,7 +55,15 @@ The simple date input provides the user with only a text field in which they can manually input a date. It allows dates to be entered without adding unnecessary interactions that come with the calendar menu or a dropdown. - + stackblitzPrefillConfig(DatePickerStories.Simple), + }, + ]} +/> ### Range Datepicker @@ -62,8 +71,26 @@ Calendar pickers default to showing today’s date when opened and only one mont is shown at a time. Calendar pickers allow users to navigate through months and years, however they work best when used for recent or near future dates. - - + + stackblitzPrefillConfig(DatePickerStories.SingleWithCalendar), + }, + ]} +/> + + stackblitzPrefillConfig(DatePickerStories.RangeWithCalendar), + }, + ]} +/> ### Skeleton state @@ -71,7 +98,15 @@ You can use the `DatePickerSkeleton` component to render a skeleton variant of a `DatePicker`. This is useful to display while an initial date range in your `DatePicker` is being fetched from an external resource like an API. - + stackblitzPrefillConfig(DatePickerStories.Skeleton), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js index 11c54fd8d0d8..8848a2d75f67 100644 --- a/packages/react/src/components/DatePicker/DatePicker.stories.js +++ b/packages/react/src/components/DatePicker/DatePicker.stories.js @@ -293,7 +293,9 @@ export const RangeWithCalendarWithLayer = (args) => ( RangeWithCalendarWithLayer.argTypes = { ...sharedArgTypes }; -export const Skeleton = () => ; +export const Skeleton = () => { + return ; +}; const aiLabel = ( diff --git a/packages/react/src/components/Dropdown/Dropdown.mdx b/packages/react/src/components/Dropdown/Dropdown.mdx index 9471c11ae4b9..3bb86fca8cac 100644 --- a/packages/react/src/components/Dropdown/Dropdown.mdx +++ b/packages/react/src/components/Dropdown/Dropdown.mdx @@ -2,6 +2,7 @@ import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks'; import Dropdown from '../Dropdown'; import DropdownSkeleton from './Dropdown.Skeleton'; import * as DropdownStories from './Dropdown.stories'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -43,14 +44,30 @@ Dropdowns present a list of options from which a user can select one option, or several. A selected option can represent a value in a form, or can be used as an action to filter or sort existing content. - + stackblitzPrefillConfig(DropdownStories.Default), + }, + ]} +/> ### Inline dropdown You can place a `Dropdown` inline with other content by using the `inline` variant - + stackblitzPrefillConfig(DropdownStories.Inline), + }, + ]} +/> ### Skeleton state @@ -58,7 +75,15 @@ You can use the `DropdownSkeleton` component to render a skeleton variant of a `Dropdown`. This is useful to display on initial page load or when data needs to be fetched from an external API. - + stackblitzPrefillConfig(DropdownStories.Skeleton), + }, + ]} +/> ## Component API diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js index 2c845a78a23c..218f06863035 100644 --- a/packages/react/src/components/Dropdown/Dropdown.stories.js +++ b/packages/react/src/components/Dropdown/Dropdown.stories.js @@ -155,20 +155,53 @@ const sharedArgTypes = { }, }; -export const Default = (args) => ( -
- (item ? item.text : '')} - {...args} - /> -
-); +export const Default = (args) => { + const items = [ + { + text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', + }, + { + text: 'Option 1', + }, + { + text: 'Option 2', + }, + { + text: 'Option 3 - a disabled item', + disabled: true, + }, + { + text: 'Option 4', + }, + { + text: 'Option 5', + }, + { + text: 'Option 6', + }, + { + text: 'Option 7', + }, + { + text: 'Option 8', + }, + ]; + + return ( +
+ (item ? item.text : '')} + {...args} + /> +
+ ); +}; Default.args = { ...sharedArgs, @@ -178,43 +211,77 @@ Default.argTypes = { ...sharedArgTypes, }; -export const ExperimentalAutoAlign = (args) => ( -
-
- (item ? item.text : '')} - direction="top" - {...args} - /> -
-
-); +export const ExperimentalAutoAlign = (args) => { + return ( +
+
+ (item ? item.text : '')} + direction="top" + {...args} + /> +
+
+ ); +}; ExperimentalAutoAlign.argTypes = { ...sharedArgTypes, }; -export const Inline = (args) => ( -
- (item ? item.text : '')} - {...args} - /> -
-); +export const Inline = (args) => { + const items = [ + { + text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', + }, + { + text: 'Option 1', + }, + { + text: 'Option 2', + }, + { + text: 'Option 3 - a disabled item', + disabled: true, + }, + { + text: 'Option 4', + }, + { + text: 'Option 5', + }, + { + text: 'Option 6', + }, + { + text: 'Option 7', + }, + { + text: 'Option 8', + }, + ]; + return ( +
+ (item ? item.text : '')} + {...args} + /> +
+ ); +}; Inline.argTypes = { ...sharedArgTypes, @@ -266,11 +333,13 @@ InlineWithLayer.argTypes = { ...sharedArgTypes, }; -export const Skeleton = () => ( -
- -
-); +export const Skeleton = () => { + return ( +
+ +
+ ); +}; const aiLabel = ( diff --git a/packages/react/src/components/Form/Form.mdx b/packages/react/src/components/Form/Form.mdx index cf877a42be36..654c6d581cdf 100644 --- a/packages/react/src/components/Form/Form.mdx +++ b/packages/react/src/components/Form/Form.mdx @@ -1,5 +1,6 @@ import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks'; import * as FormStories from './Form.stories'; +import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer'; @@ -33,7 +34,15 @@ The `Form` component is configurable to fit various use cases and layouts. It is purposely simple out of the box, and users are responsible for configuring it to suit their needs. - + stackblitzPrefillConfig(FormStories.Default), + }, + ]} +/> ## Accessibility Considerations diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js index ac7d51780a1f..e47a57a864ec 100644 --- a/packages/react/src/components/Form/Form.stories.js +++ b/packages/react/src/components/Form/Form.stories.js @@ -42,16 +42,6 @@ import '../AILabel/ailabel-story.scss'; import mdx from './Form.mdx'; -const checkboxEvents = { - className: 'some-class', - labelText: 'Checkbox label', -}; - -const fieldsetCheckboxProps = () => ({ - className: 'some-class', - legendText: 'Checkbox heading', -}); - const numberInputProps = { className: 'some-class', id: 'number-input-1', @@ -63,34 +53,6 @@ const numberInputProps = { iconDescription: 'Add/decrement number', }; -const fileUploaderEvents = { - buttonLabel: 'Add files', - className: 'some-class', -}; - -const fieldsetFileUploaderProps = { - className: 'some-class', - legendText: 'File Uploader', -}; - -const radioProps = { - className: 'some-class', -}; - -const searchProps = { - className: 'some-class', - size: 'md', -}; - -const fieldsetSearchProps = { - className: 'some-class', - legendText: 'Search', -}; - -const selectProps = { - className: 'some-class', -}; - const TextInputProps = { className: 'some-class', id: 'test2', @@ -135,111 +97,142 @@ export default { }, }; -export const Default = () => ( -
- - - - - - - - - - - { + return ( + + + + + + + + + - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - -