diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 5745f0339cbad3..12726a9724a4c9 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -14,6 +14,10 @@ - Remove unused CSS property from `Tabs` stylesheet ([#80269](https://github.com/WordPress/gutenberg/pull/80269)). +### Internal + +- Use keyed children arrays instead of Fragments in Storybook stories so Show code examples omit `Fragment` wrappers ([#80352](https://github.com/WordPress/gutenberg/pull/80352)). + ## 0.18.0 (2026-07-14) ### Breaking Changes diff --git a/packages/ui/src/alert-dialog/stories/index.story.tsx b/packages/ui/src/alert-dialog/stories/index.story.tsx index 5df7d23259be3e..4afc16e8ad44b2 100644 --- a/packages/ui/src/alert-dialog/stories/index.story.tsx +++ b/packages/ui/src/alert-dialog/stories/index.story.tsx @@ -38,15 +38,16 @@ type Story = StoryObj< typeof AlertDialog.Root >; */ export const Default: Story = { args: { - children: ( - <> - Move to trash - - - ), + children: [ + + Move to trash + , + , + ], }, }; @@ -56,17 +57,18 @@ export const Default: Story = { */ export const Irreversible: Story = { args: { - children: ( - <> - Delete permanently - - - ), + children: [ + + Delete permanently + , + , + ], }, }; @@ -75,17 +77,18 @@ export const Irreversible: Story = { */ export const CustomLabels: Story = { args: { - children: ( - <> - Send feedback - - - ), + children: [ + + Send feedback + , + , + ], }, }; @@ -96,27 +99,28 @@ export const CustomLabels: Story = { */ export const WithCustomContent: Story = { args: { - children: ( - <> - Remove pages - + Remove pages + , + +
    -
      - }>About us - }>Contact - }>Privacy policy -
    - - - ), + }>About us + }>Contact + }>Privacy policy +
+ , + ], }, }; @@ -140,20 +144,21 @@ export const WithCustomContent: Story = { export const WithCustomZIndex: Story = { name: 'With Custom z-index', args: { - children: ( - <> - Move to trash - - } - /> - - ), + children: [ + + Move to trash + , + + } + key="popup" + />, + ], }, }; @@ -338,6 +343,7 @@ function StickyToggle( { checked={ value } onChange={ ( event ) => onChange( event.target.checked ) } /> + ); @@ -355,6 +361,7 @@ function ScrollableContent() { value={ stickyHeader } onChange={ setStickyHeader } /> + - - Button - - ), + children: [ , 'Button' ], }, }; diff --git a/packages/ui/src/card/stories/index.story.tsx b/packages/ui/src/card/stories/index.story.tsx index 9535dd953489bf..c41c179f928d68 100644 --- a/packages/ui/src/card/stories/index.story.tsx +++ b/packages/ui/src/card/stories/index.story.tsx @@ -52,28 +52,24 @@ type Story = StoryObj< typeof Card.Root >; export const Default: Story = { args: { - children: ( - <> - - Card title - - - - This is the main content area. It can contain any - elements. This is the main content area. It can contain - any elements. This is the main content area. It can - contain any elements. This is the main content area. It - can contain any elements. This is the main content area. - It can contain any elements. This is the main content - area. It can contain any elements. - - - This is the main content area. It can contain any - elements. - - - - ), + children: [ + + Card title + , + + + This is the main content area. It can contain any elements. + This is the main content area. It can contain any elements. + This is the main content area. It can contain any elements. + This is the main content area. It can contain any elements. + This is the main content area. It can contain any elements. + This is the main content area. It can contain any elements. + + + This is the main content area. It can contain any elements. + + , + ], }, }; @@ -106,24 +102,22 @@ export const FullBleedCoverOnly: Story = { */ export const FullBleedCoverWithHeader: Story = { args: { - children: ( - <> - - Card title - - - -
- - - - ), + children: [ + + Card title + , + + +
+ + , + ], }, }; @@ -133,25 +127,26 @@ export const FullBleedCoverWithHeader: Story = { */ export const WithFullBleed: Story = { args: { - children: ( - <> - - Featured image - - }> - -
- - Content below the full-bleed area. - - - ), + children: [ + + Featured image + , + } + > + +
+ + Content below the full-bleed area. + , + ], }, }; @@ -175,28 +170,29 @@ export const HeaderOnly: Story = { */ export const FullBleedHeroWithTitle: Story = { args: { - children: ( - <> - }> - -
- - Hero image card - - - - The image above bleeds to the card's top and side - edges. - - - - ), + children: [ + } + > + +
+ + Hero image card + , + + + The image above bleeds to the card's top and side + edges. + + , + ], }, }; @@ -207,27 +203,25 @@ export const FullBleedHeroWithTitle: Story = { */ export const FullBleedHeroOnly: Story = { args: { - children: ( - <> - - -
- - - - - The image above bleeds to the card's top and side - edges. - - - - ), + children: [ + + +
+ + , + + + The image above bleeds to the card's top and side + edges. + + , + ], }, }; @@ -239,15 +233,13 @@ export const FullBleedHeroOnly: Story = { export const CustomSemantics: Story = { args: { render:
, - children: ( - <> - - }>Section heading - - - Semantically meaningful card content. - - - ), + children: [ + + }>Section heading + , + + Semantically meaningful card content. + , + ], }, }; diff --git a/packages/ui/src/collapsible-card/stories/index.story.tsx b/packages/ui/src/collapsible-card/stories/index.story.tsx index 1eb66d1a01ce2c..e6a056150b4462 100644 --- a/packages/ui/src/collapsible-card/stories/index.story.tsx +++ b/packages/ui/src/collapsible-card/stories/index.story.tsx @@ -51,24 +51,20 @@ type Story = StoryObj< typeof CollapsibleCard.Root >; */ export const Default: Story = { args: { - children: ( - <> - - - Collapsible card (closed by default) - - - - - This is the collapsible content area. It can contain any - elements, just like a regular Card.Content. - - - When collapsed, only the header and chevron are visible. - - - - ), + children: [ + + Collapsible card (closed by default) + , + + + This is the collapsible content area. It can contain any + elements, just like a regular Card.Content. + + + When collapsed, only the header and chevron are visible. + + , + ], }, }; @@ -82,16 +78,14 @@ export const InitiallyOpened: Story = { args: { ...Default.args, defaultOpen: true, - children: ( - <> - - Collapsed by default - - - This content was hidden until you expanded it. - - - ), + children: [ + + Collapsed by default + , + + This content was hidden until you expanded it. + , + ], }, }; @@ -102,16 +96,14 @@ export const Disabled: Story = { args: { ...Default.args, disabled: true, - children: ( - <> - - Disabled card - - - The header is not interactive when disabled. - - - ), + children: [ + + Disabled card + , + + The header is not interactive when disabled. + , + ], }, }; @@ -327,24 +319,22 @@ export const FullBleedCoverWithHeader: Story = { argTypes: { open: { control: false } }, args: { defaultOpen: true, - children: ( - <> - - Card title - - - -
- - - - ), + children: [ + + Card title + , + + +
+ + , + ], }, }; @@ -357,26 +347,25 @@ export const WithFullBleed: Story = { argTypes: { open: { control: false } }, args: { defaultOpen: true, - children: ( - <> - - Featured image - - } - > - -
- - Content below the full-bleed area. - - - ), + children: [ + + Featured image + , + } + key="content" + > + +
+ + Content below the full-bleed area. + , + ], }, }; diff --git a/packages/ui/src/collapsible/stories/index.story.tsx b/packages/ui/src/collapsible/stories/index.story.tsx index 730c583553daa9..fbadfe8a1382b8 100644 --- a/packages/ui/src/collapsible/stories/index.story.tsx +++ b/packages/ui/src/collapsible/stories/index.story.tsx @@ -23,14 +23,12 @@ type Story = StoryObj< typeof Collapsible.Root >; export const Default: Story = { args: { - children: ( - <> - Toggle - -

Collapsible content here.

- - - ), + children: [ + Toggle, + +

Collapsible content here.

+ , + ], }, }; @@ -38,28 +36,26 @@ export const DefaultOpen: Story = { argTypes: { open: { control: false } }, args: { defaultOpen: true, - children: ( - <> - Toggle - -

This panel is open by default.

- - - ), + children: [ + Toggle, + +

This panel is open by default.

+ , + ], }, }; export const Disabled: Story = { args: { disabled: true, - children: ( - <> - Toggle (disabled) - -

This content cannot be toggled.

- - - ), + children: [ + + Toggle (disabled) + , + +

This content cannot be toggled.

+ , + ], }, }; diff --git a/packages/ui/src/dialog/stories/index.story.tsx b/packages/ui/src/dialog/stories/index.story.tsx index 551c21739bc7d1..511be586d43db9 100644 --- a/packages/ui/src/dialog/stories/index.story.tsx +++ b/packages/ui/src/dialog/stories/index.story.tsx @@ -44,27 +44,25 @@ type Story = StoryObj< typeof Dialog.Root >; */ export const _Default: Story = { args: { - children: ( - <> - Open Dialog - - - Welcome - - - - - This dialog demonstrates best practices for - informational dialogs. It includes a close icon - because dismissing it is safe and expected. - - - - Got it - - - - ), + children: [ + Open Dialog, + + + Welcome + + + + + This dialog demonstrates best practices for + informational dialogs. It includes a close icon because + dismissing it is safe and expected. + + + + Got it + + , + ], }, }; @@ -159,33 +157,32 @@ export const AllSizes: Story = { export const WithCustomZIndex: Story = { name: 'With Custom z-index', args: { - children: ( - <> - Open Dialog - - } - > - - Custom z-index - - - - - The backdrop and popup render at `z-index: 9999` via - the `--wp-ui-dialog-z-index` CSS custom property, - set on `Dialog.Portal` through the `portal` prop. - - - - Got it - - - - ), + children: [ + Open Dialog, + + } + key="popup" + > + + Custom z-index + + + + + The backdrop and popup render at `z-index: 9999` via the + `--wp-ui-dialog-z-index` CSS custom property, set on + `Dialog.Portal` through the `portal` prop. + + + + Got it + + , + ], }, }; @@ -213,6 +210,7 @@ function StickyToggle( { onStickyHeaderChange( e.target.checked ) } /> + @@ -224,6 +222,7 @@ function StickyToggle( { onStickyFooterChange( e.target.checked ) } /> + @@ -242,12 +241,14 @@ function ScrollableContent() { ); + const footer = ( Decline Accept ); + const controls = ( @@ -321,28 +322,25 @@ export const Scrollable: Story = { */ export const WithVisuallyHiddenTitle: Story = { args: { - children: ( - <> - Open Dialog - - - }> - Accessible dialog heading - - - - -

- This dialog has a visually hidden title. Inspect the - DOM or use a screen reader to verify the heading is - present. -

- - - Got it - - - - ), + children: [ + Open Dialog, + + + }> + Accessible dialog heading + + + + +

+ This dialog has a visually hidden title. Inspect the DOM + or use a screen reader to verify the heading is present. +

+ + + Got it + + , + ], }, }; diff --git a/packages/ui/src/drawer/stories/index.story.tsx b/packages/ui/src/drawer/stories/index.story.tsx index 657fb35f64e06a..d5ba642b43a5e7 100644 --- a/packages/ui/src/drawer/stories/index.story.tsx +++ b/packages/ui/src/drawer/stories/index.story.tsx @@ -43,25 +43,23 @@ type Story = StoryObj< typeof Drawer.Root >; */ export const _Default: Story = { args: { - children: ( - <> - Open Drawer - - - Navigation - - - - - Browse through the available sections below. - - - - Done - - - - ), + children: [ + Open Drawer, + + + Navigation + + + + + Browse through the available sections below. + + + + Done + + , + ], }, }; @@ -133,26 +131,26 @@ export const Controlled: Story = { ); }, args: { - children: ( - <> - Open Controlled Drawer - - - Controlled Drawer - - - - - The open state is managed externally via{ ' ' } - open and onOpenChange. - - - - Close - - - - ), + children: [ + + Open Controlled Drawer + , + + + Controlled Drawer + + + + + The open state is managed externally via{ ' ' } + open and onOpenChange. + + + + Close + + , + ], }, argTypes: { open: { control: false }, @@ -170,26 +168,26 @@ export const NonModal: Story = { args: { swipeDirection: 'right', modal: false, - children: ( - <> - Open Non-Modal Drawer - - - Non-Modal - - - - - This drawer does not trap focus and allows - interaction with the rest of the page while open. - - - - Close - - - - ), + children: [ + + Open Non-Modal Drawer + , + + + Non-Modal + + + + + This drawer does not trap focus and allows interaction + with the rest of the page while open. + + + + Close + + , + ], }, render: function NonModalRender( args ) { return { args.children }; @@ -286,34 +284,33 @@ function DirectionSelector( { export const WithCustomZIndex: Story = { name: 'With Custom z-index', args: { - children: ( - <> - Open Drawer - - } - > - - Custom z-index - - - - - The backdrop, viewport, and popup render at - `z-index: 9999` via the `--wp-ui-drawer-z-index` CSS - custom property, set on `Drawer.Portal` through the - `portal` prop. - - - - Got it - - - - ), + children: [ + Open Drawer, + + } + key="popup" + > + + Custom z-index + + + + + The backdrop, viewport, and popup render at `z-index: + 9999` via the `--wp-ui-drawer-z-index` CSS custom + property, set on `Drawer.Portal` through the `portal` + prop. + + + + Got it + + , + ], }, }; @@ -342,6 +339,7 @@ export const SizePlayground: Story = { value={ direction } onChange={ setDirection } /> + Open Drawer
@@ -362,6 +360,7 @@ export const SizePlayground: Story = { value={ size } onChange={ setSize } /> + setStickyHeader( e.target.checked ) } /> + @@ -428,6 +428,7 @@ function StickyToggle( { checked={ stickyFooter } onChange={ ( e ) => setStickyFooter( e.target.checked ) } /> + @@ -504,6 +505,7 @@ export const Scrollable: Story = { ); + const footer = ( Decline diff --git a/packages/ui/src/empty-state/stories/index.story.tsx b/packages/ui/src/empty-state/stories/index.story.tsx index d2a404e773e84e..7f990de57ec123 100644 --- a/packages/ui/src/empty-state/stories/index.story.tsx +++ b/packages/ui/src/empty-state/stories/index.story.tsx @@ -32,46 +32,42 @@ type Story = StoryObj< typeof EmptyState.Root >; export const Default: Story = { args: { - children: ( - <> - - No results found - - Try adjusting your search or filter to find what you're - looking for. - - - - - - - ), + children: [ + , + No results found, + + Try adjusting your search or filter to find what you're + looking for. + , + + + + , + ], }, }; export const WithCustomVisual: Story = { args: { - children: ( - <> - - - - - - All caught up! - - You've completed all your tasks. Great work! - - - - - - ), + children: [ + + + + + , + All caught up!, + + You've completed all your tasks. Great work! + , + + + , + ], }, }; diff --git a/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx b/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx index c4cb05265f8ed2..d1fe13f155cf90 100644 --- a/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx @@ -52,28 +52,30 @@ type Story = StoryObj< typeof Autocomplete.Root >; export const Default: Story = { args: { items: URLS, - children: ( - <> - - - No matching items. - - - - { ( item: FixtureItem ) => ( - - { item.value } - - ) } - - - - - - ), + children: [ + , + + No matching items. + + + + { ( item: FixtureItem ) => ( + + { item.value } + + ) } + + + + , + ], }, }; @@ -226,47 +228,45 @@ export const Inline: Story = { export const WithSearchIconAndClearButton: Story = { args: { items: URLS, - children: ( - <> - - - - - } - suffix={ - - - - } - /> - } - /> - - - No matching items. - - - - { ( item: FixtureItem ) => ( - - { item.value } - - ) } - - - - - - ), + children: [ + + + + + } + suffix={ + + + + } + /> + } + /> + , + + No matching items. + + + + { ( item: FixtureItem ) => ( + + { item.value } + + ) } + + + + , + ], }, }; @@ -383,6 +383,7 @@ export const TextareaInlineAutocomplete: Story = { /> } /> + @@ -424,33 +425,36 @@ export const WithCustomZIndex: Story = { name: 'With Custom z-index', args: { items: URLS, - children: ( - <> - - - } - > - - - - { ( item: FixtureItem ) => ( - - { item.value } - - ) } - - - - - - ), + children: [ + , + + } + key="popup" + > + + + + { ( item: FixtureItem ) => ( + + { item.value } + + ) } + + + + , + ], }, }; @@ -461,39 +465,37 @@ export const WithCustomZIndex: Story = { export const Grouped: Story = { args: { items: GROUPED_COMMANDS, - children: ( - <> - - - No matching items. - - - - { ( group: FixtureGroup ) => ( - - - { group.label } - - - { ( item: FixtureItem ) => ( - - { item.value } - - ) } - - - ) } - - - - - - ), + children: [ + , + + No matching items. + + + + { ( group: FixtureGroup ) => ( + + + { group.label } + + + { ( item: FixtureItem ) => ( + + { item.value } + + ) } + + + ) } + + + + , + ], }, }; diff --git a/packages/ui/src/form/primitives/combobox/stories/index.story.tsx b/packages/ui/src/form/primitives/combobox/stories/index.story.tsx index fd40d1ddf1005f..800c322f560f2f 100644 --- a/packages/ui/src/form/primitives/combobox/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/combobox/stories/index.story.tsx @@ -43,31 +43,29 @@ const inputWrapperStyle = { export const Default: Story = { args: { items: ITEMS, - children: ( - <> - - -
- -
- No results found. - - - - { ( item: FixtureItem ) => ( - - { item.label } - - ) } - - - - - - ), + children: [ + , + +
+ +
+ No results found. + + + + { ( item: FixtureItem ) => ( + + { item.label } + + ) } + + + + , + ], }, }; @@ -75,32 +73,30 @@ export const Compact: Story = { args: { defaultValue: ITEMS[ 0 ], items: ITEMS, - children: ( - <> - - -
- -
- No results found. - - - - { ( item: FixtureItem ) => ( - - { item.label } - - ) } - - - - - - ), + children: [ + , + +
+ +
+ No results found. + + + + { ( item: FixtureItem ) => ( + + { item.label } + + ) } + + + + , + ], }, }; @@ -116,33 +112,29 @@ export const DetachedInline: Story = { items: ITEMS, multiple: true, inline: true, - children: ( - <> - -
- No results found. - - - { ( item: FixtureItem ) => ( - - { item.label } - - ) } - - -
- - ), + children: [ + , +
+ No results found. + + + { ( item: FixtureItem ) => ( + + { item.label } + + ) } + + +
, + ], }, }; @@ -280,66 +272,65 @@ export const WithCustomTriggerAndItem: Story = { args: { items: ITEMS, defaultValue: ITEMS[ 0 ], - children: ( - <> - - { ( item: FixtureItem ) => ( - + { ( item: FixtureItem ) => ( + + - - { item.label } - - ) } - - -
- -
- - - - { ( item: FixtureItem ) => ( - + + { item.label } + + ) } + , + +
+ +
+ + + + { ( item: FixtureItem ) => ( + +
-
{ item.label } +
- - ) } - - - - - - ), + 99 in stock + +
+ + ) } + + + + , + ], }, }; @@ -362,37 +353,36 @@ export const WithCustomZIndex: Story = { args: { defaultValue: ITEMS[ 0 ], items: ITEMS, - children: ( - <> - - - } - > -
- -
- - - - { ( item: FixtureItem ) => ( - - { item.label } - - ) } - - - - - - ), + children: [ + , + + } + key="popup" + > +
+ +
+ + + + { ( item: FixtureItem ) => ( + + { item.label } + + ) } + + + + , + ], }, }; diff --git a/packages/ui/src/form/primitives/field/stories/index.story.tsx b/packages/ui/src/form/primitives/field/stories/index.story.tsx index 22d278501b12e9..67527d02b6e65e 100644 --- a/packages/ui/src/form/primitives/field/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/field/stories/index.story.tsx @@ -30,17 +30,17 @@ export default meta; */ export const Default: StoryObj< typeof Field.Root > = { args: { - children: ( - <> - Label - } - /> - - The accessible description. - - - ), + children: [ + Label, + } + key="control" + />, + + + The accessible description. + , + ], }, }; @@ -72,6 +72,7 @@ export const UsingHtmlFor: StoryObj< typeof Field.Root > = { id={ controlId } aria-describedby={ descriptionId } /> + The accessible description. @@ -114,14 +115,15 @@ export const UsingAriaLabelledby: StoryObj< typeof Field.Root > = { */ export const HiddenLabel: StoryObj< typeof Field.Root > = { args: { - children: ( - <> - Label - } - /> - - ), + children: [ + + Label + , + } + key="control" + />, + ], }, }; @@ -137,14 +139,14 @@ export const HiddenLabel: StoryObj< typeof Field.Root > = { */ export const WithDetails: StoryObj< typeof Field.Root > = { args: { - children: ( - <> - Label - } - /> - { DETAILS_EXAMPLE } - - ), + children: [ + Label, + } + key="control" + />, + + { DETAILS_EXAMPLE }, + ], }, }; diff --git a/packages/ui/src/form/primitives/fieldset/stories/index.story.tsx b/packages/ui/src/form/primitives/fieldset/stories/index.story.tsx index 3ca119c6e69fcb..135f19e3dea64b 100644 --- a/packages/ui/src/form/primitives/fieldset/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/fieldset/stories/index.story.tsx @@ -24,20 +24,18 @@ type Story = StoryObj< typeof Fieldset.Root >; export const Default: Story = { args: { - children: ( - <> - Legend - { [ 'Apples', 'Bananas' ].map( ( fruit ) => ( - // eslint-disable-next-line jsx-a11y/label-has-associated-control - - ) ) } - - This is a description for the entire fieldset. - - - ), + children: [ + Legend, + [ 'Apples', 'Bananas' ].map( ( fruit ) => ( + // eslint-disable-next-line jsx-a11y/label-has-associated-control + + ) ), + + This is a description for the entire fieldset. + , + ], }, }; @@ -47,17 +45,17 @@ export const Default: Story = { */ export const HiddenLegend: Story = { args: { - children: ( - <> - Legend - { [ 'Apples', 'Bananas' ].map( ( fruit ) => ( - // eslint-disable-next-line jsx-a11y/label-has-associated-control - - ) ) } - - ), + children: [ + + Legend + , + [ 'Apples', 'Bananas' ].map( ( fruit ) => ( + // eslint-disable-next-line jsx-a11y/label-has-associated-control + + ) ), + ], }, }; @@ -73,17 +71,17 @@ export const HiddenLegend: Story = { */ export const WithDetails: Story = { args: { - children: ( - <> - Legend - { [ 'Apples', 'Bananas' ].map( ( fruit ) => ( - // eslint-disable-next-line jsx-a11y/label-has-associated-control - - ) ) } - { DETAILS_EXAMPLE } - - ), + children: [ + Legend, + [ 'Apples', 'Bananas' ].map( ( fruit ) => ( + // eslint-disable-next-line jsx-a11y/label-has-associated-control + + ) ), + + { DETAILS_EXAMPLE } + , + ], }, }; diff --git a/packages/ui/src/form/primitives/select/stories/index.story.tsx b/packages/ui/src/form/primitives/select/stories/index.story.tsx index 7f71dfd86766ff..5e791fe17556da 100644 --- a/packages/ui/src/form/primitives/select/stories/index.story.tsx +++ b/packages/ui/src/form/primitives/select/stories/index.story.tsx @@ -31,40 +31,36 @@ const defaultItems = Array.from( { length: 6 }, ( _, index ) => ( { export const Default: Story = { args: { items: defaultItems, - children: ( - <> - - - { defaultItems.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + children: [ + , + + { defaultItems.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], }, }; export const Compact: Story = { args: { ...Default.args, - children: ( - <> - - - { defaultItems.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + children: [ + , + + { defaultItems.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], }, }; @@ -78,22 +74,21 @@ export const Compact: Story = { */ export const Minimal: Story = { args: { - children: ( - <> - - - { Array.from( { length: 6 }, ( _, index ) => ( - - { `${ index + 1 }` } - - ) ) } - - - ), + children: [ + , + + { Array.from( { length: 6 }, ( _, index ) => ( + + { `${ index + 1 }` } + + ) ) } + , + ], + defaultValue: '1', }, }; @@ -105,18 +100,16 @@ export const Minimal: Story = { export const WithCustomPlaceholder: Story = { args: { items: defaultItems, - children: ( - <> - - - { defaultItems.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + children: [ + , + + { defaultItems.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], }, }; @@ -135,21 +128,19 @@ const nullValueOptionItems = [ export const WithNullValueOption: Story = { args: { items: nullValueOptionItems, - children: ( - <> - - - { nullValueOptionItems.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + children: [ + , + + { nullValueOptionItems.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], }, }; @@ -162,18 +153,16 @@ export const WithNullValueOption: Story = { export const Labeling: Story = { args: { ...Default.args, - children: ( - <> - - - { defaultItems.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + children: [ + , + + { defaultItems.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], }, }; @@ -194,18 +183,17 @@ const overflowItems = [ export const WithOverflow: Story = { args: { items: overflowItems, - children: ( - <> - - - { overflowItems.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + children: [ + , + + { overflowItems.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], + defaultValue: overflowItems[ 0 ], }, }; @@ -213,18 +201,17 @@ export const WithOverflow: Story = { export const Disabled: Story = { args: { ...Default.args, - children: ( - <> - - - { defaultItems.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + children: [ + , + + { defaultItems.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], + defaultValue: defaultItems[ 0 ], disabled: true, }, @@ -245,22 +232,21 @@ const disabledItemItems = [ export const WithDisabledItem: Story = { args: { items: disabledItemItems, - children: ( - <> - - - { disabledItemItems.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + children: [ + , + + { disabledItemItems.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], + defaultValue: disabledItemItems[ 0 ], }, }; @@ -283,38 +269,38 @@ const customOptions = [ export const WithCustomTriggerAndItem: Story = { args: { items: customOptions, - children: ( - <> - - { ( item ) => ( - + { ( item ) => ( + + - - { item.label } - - ) } - - - { customOptions.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + /> + + { item.label } + + ) } + , + + { customOptions.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], + defaultValue: customOptions[ 0 ], }, }; @@ -339,23 +325,22 @@ export const WithCustomZIndex: Story = { name: 'With Custom z-index', args: { ...Default.args, - children: ( - <> - - - } - > - { defaultItems.map( ( item ) => ( - - { item.label } - - ) ) } - - - ), + children: [ + , + + } + key="popup" + > + { defaultItems.map( ( item ) => ( + + { item.label } + + ) ) } + , + ], }, }; diff --git a/packages/ui/src/form/select-control/stories/index.story.tsx b/packages/ui/src/form/select-control/stories/index.story.tsx index 93a3f0dccaebde..d863873bca08e6 100644 --- a/packages/ui/src/form/select-control/stories/index.story.tsx +++ b/packages/ui/src/form/select-control/stories/index.story.tsx @@ -156,6 +156,7 @@ const User = ( { user }: { user: ( typeof userOptions )[ number ] } ) => ( borderRadius: '50%', } } /> + { user.label } ); @@ -175,19 +176,18 @@ export const WithCustomTriggerAndItems: Story = { label: 'Label', description: 'This is the description.', triggerContent: ( item ) => , - children: ( - <> - { userOptions.map( ( item ) => ( - - - - ) ) } - - ), + children: [ + userOptions.map( ( item ) => ( + + + + ) ), + ], + defaultValue: userOptions[ 0 ], }, }; @@ -202,19 +202,17 @@ export const WithCustomTriggerAndItems: Story = { export const WithItemsArrayAndPartialCustomization: Story = { args: { ...Default.args, - children: ( - <> - { Default.args?.items?.map( ( item ) => ( - - ✨ { item.label } - - ) ) } - - ), + children: [ + Default.args?.items?.map( ( item ) => ( + + ✨ { item.label } + + ) ), + ], }, }; diff --git a/packages/ui/src/link-button/stories/index.story.tsx b/packages/ui/src/link-button/stories/index.story.tsx index e827710d0d008b..51bb900f87dc81 100644 --- a/packages/ui/src/link-button/stories/index.story.tsx +++ b/packages/ui/src/link-button/stories/index.story.tsx @@ -137,12 +137,10 @@ export const WithIcon: Story = { ...Default, args: { ...Default.args, - children: ( - <> - - Link button - - ), + children: [ + , + 'Link button', + ], }, }; diff --git a/packages/ui/src/notice/stories/index.story.tsx b/packages/ui/src/notice/stories/index.story.tsx index e047056accc67b..be0d29c532ff70 100644 --- a/packages/ui/src/notice/stories/index.story.tsx +++ b/packages/ui/src/notice/stories/index.story.tsx @@ -26,22 +26,20 @@ type Story = StoryObj< typeof Notice.Root >; export const Default: Story = { args: { - children: ( - <> - Notice Title - - Description text with details about this notification. - - - Primary button - - Secondary button - - Link - - - - ), + children: [ + Notice Title, + + Description text with details about this notification. + , + + Primary button + + Secondary button + + Link + , + , + ], }, }; @@ -83,18 +81,16 @@ export const Error: Story = { export const NonDismissible: Story = { args: { intent: 'warning', - children: ( - <> - Action Required - - This notice cannot be dismissed by the user. - - - Take Action - Visit link - - - ), + children: [ + Action Required, + + This notice cannot be dismissed by the user. + , + + Take Action + Visit link + , + ], }, }; @@ -105,30 +101,26 @@ export const WithoutIcon: Story = { args: { intent: 'info', icon: null, - children: ( - <> - No Icon - - This notice has no decorative icon displayed. - - - - ), + children: [ + No Icon, + + This notice has no decorative icon displayed. + , + , + ], }, }; export const WithoutActions: Story = { args: { intent: 'info', - children: ( - <> - Simple Notice - - A dismissable notice without any action buttons or links. - - - - ), + children: [ + Simple Notice, + + A dismissable notice without any action buttons or links. + , + , + ], }, }; @@ -137,12 +129,10 @@ export const WithoutActions: Story = { */ export const TitleOnly: Story = { args: { - children: ( - <> - Just a title - - - ), + children: [ + Just a title, + , + ], }, }; @@ -152,13 +142,11 @@ export const TitleOnly: Story = { export const DescriptionOnly: Story = { args: { intent: 'info', - children: ( - <> - - Just a description without title or actions. - - - - ), + children: [ + + Just a description without title or actions. + , + , + ], }, }; diff --git a/packages/ui/src/popover/stories/index.story.tsx b/packages/ui/src/popover/stories/index.story.tsx index d10c3d47ba04b9..7da4df37f9762f 100644 --- a/packages/ui/src/popover/stories/index.story.tsx +++ b/packages/ui/src/popover/stories/index.story.tsx @@ -40,24 +40,20 @@ export const Default: Story = { children: { control: { type: 'text' } }, }, args: { - children: ( - <> - Open Popover - - - - Popover title - - - Popover description - - - - ), + children: [ + Open Popover, + + + + Popover title + + Popover description + , + ], }, }; @@ -67,23 +63,19 @@ export const Default: Story = { */ export const NoArrow: Story = { args: { - children: ( - <> - Open Popover - - - Popover title - - - Popover description - - - - ), + children: [ + Open Popover, + + + Popover title + + Popover description + , + ], }, }; @@ -151,39 +143,37 @@ export const Positioning: Story = { */ export const WithCloseButton: Story = { args: { - children: ( - <> - Settings - - -
- Settings - - } - /> -
- - Configure your notification preferences and display - settings. - - - - ), + children: [ + Settings, + + +
+ Settings + + } + /> +
+ + Configure your notification preferences and display + settings. + + , + ], }, }; @@ -202,24 +192,22 @@ export const Controlled: Story = { defaultOpen: { control: false }, }, args: { - children: ( - <> - Toggle Popover - - - - Controlled Popover - - - This popover is controlled by external state. - - - - ), + children: [ + Toggle Popover, + + + + Controlled Popover + + + This popover is controlled by external state. + + , + ], }, render: function Render( args ) { const [ isOpen, setIsOpen ] = useState( false ); @@ -290,83 +278,81 @@ export const Modal: Story = { argTypes: { modal: { control: false } }, args: { modal: true, - children: ( - <> - Edit Settings - - - Edit Settings, + + + + Settings + +
e.preventDefault() } + > + + +
e.preventDefault() } > - - -
- - Cancel - - -
- - - - ), + Cancel + + +
+ + , + ], }, }; @@ -376,24 +362,22 @@ export const Modal: Story = { */ export const Unstyled: Story = { args: { - children: ( - <> - Open Unstyled - - - Custom Styled - - - This popup has no default styling — the consumer - controls all visual appearance. - - - - ), + children: [ + Open Unstyled, + + + Custom Styled + + + This popup has no default styling — the consumer controls + all visual appearance. + + , + ], }, }; @@ -481,6 +465,7 @@ export const Inline: Story = { ref={ inlineContainerRef } style={ { display: 'contents' } } /> + @@ -715,32 +700,31 @@ export const CrossIframe: Story = { export const WithCustomZIndex: Story = { name: 'With Custom z-index', args: { - children: ( - <> - Open Popover - - } + children: [ + Open Popover, + + } + key="popup" + > + + - - - Custom z-index - - - This popover renders at `z-index: 9999` via the - `--wp-ui-popover-z-index` CSS custom property, set on - `Popover.Portal` through the `portal` prop. - - - - ), + Custom z-index + + + This popover renders at `z-index: 9999` via the + `--wp-ui-popover-z-index` CSS custom property, set on + `Popover.Portal` through the `portal` prop. + + , + ], }, }; @@ -910,31 +894,30 @@ export const Anchor: Story = { */ export const ToolbarVariant: Story = { args: { - children: ( - <> - Open Toolbar - - }> - Formatting - - - - - - - - ), + children: [ + Open Toolbar, + + }> + Formatting + + + + + + , + ], }, }; @@ -1118,6 +1101,7 @@ export const InitialFocus: Story = { type="text" placeholder="Enter name" /> +