Skip to content

UI: improve component code readability in Storybook by using arrays for children #80352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 2 commits into from
Jul 16, 2026
Merged

UI: improve component code readability in Storybook by using arrays for children #80352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
30b114a
UI: use arrays for children in Storybook examples
simison Jul 16, 2026
6770226
Update CHANGELOG.md
simison Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/ui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
137 changes: 72 additions & 65 deletions packages/ui/src/alert-dialog/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,16 @@ type Story = StoryObj< typeof AlertDialog.Root >;
*/
export const Default: Story = {
args: {
children: (
<>
<AlertDialog.Trigger>Move to trash</AlertDialog.Trigger>
<AlertDialog.Popup
title="Move to trash?"
description="This post will be moved to trash. You can restore it later."
/>
</>
),
children: [
<AlertDialog.Trigger key="trigger">
Move to trash
</AlertDialog.Trigger>,
<AlertDialog.Popup
title="Move to trash?"
description="This post will be moved to trash. You can restore it later."
key="popup"
/>,
],
},
};

Expand All @@ -56,17 +57,18 @@ export const Default: Story = {
*/
export const Irreversible: Story = {
args: {
children: (
<>
<AlertDialog.Trigger>Delete permanently</AlertDialog.Trigger>
<AlertDialog.Popup
intent="irreversible"
title="Delete permanently?"
description="This action cannot be undone. All data will be lost."
confirmButtonText="Delete permanently"
/>
</>
),
children: [
<AlertDialog.Trigger key="trigger">
Delete permanently
</AlertDialog.Trigger>,
<AlertDialog.Popup
intent="irreversible"
title="Delete permanently?"
description="This action cannot be undone. All data will be lost."
confirmButtonText="Delete permanently"
key="popup"
/>,
],
},
};

Expand All @@ -75,17 +77,18 @@ export const Irreversible: Story = {
*/
export const CustomLabels: Story = {
args: {
children: (
<>
<AlertDialog.Trigger>Send feedback</AlertDialog.Trigger>
<AlertDialog.Popup
title="Send feedback?"
description="Your feedback helps us improve. Would you like to send it now?"
confirmButtonText="Send feedback"
cancelButtonText="Not now"
/>
</>
),
children: [
<AlertDialog.Trigger key="trigger">
Send feedback
</AlertDialog.Trigger>,
<AlertDialog.Popup
title="Send feedback?"
description="Your feedback helps us improve. Would you like to send it now?"
confirmButtonText="Send feedback"
cancelButtonText="Not now"
key="popup"
/>,
],
},
};

Expand All @@ -96,27 +99,28 @@ export const CustomLabels: Story = {
*/
export const WithCustomContent: Story = {
args: {
children: (
<>
<AlertDialog.Trigger>Remove pages</AlertDialog.Trigger>
<AlertDialog.Popup
title="Remove 3 pages?"
description="These pages will be moved to trash."
confirmButtonText="Delete pages"
children: [
<AlertDialog.Trigger key="trigger">
Remove pages
</AlertDialog.Trigger>,
<AlertDialog.Popup
title="Remove 3 pages?"
description="These pages will be moved to trash."
confirmButtonText="Delete pages"
key="popup"
>
<ul
style={ {
margin: 'var(--wpds-dimension-gap-sm) 0 0',
paddingInlineStart: 'var(--wpds-dimension-gap-lg)',
} }
>
<ul
style={ {
margin: 'var(--wpds-dimension-gap-sm) 0 0',
paddingInlineStart: 'var(--wpds-dimension-gap-lg)',
} }
>
<Text render={ <li /> }>About us</Text>
<Text render={ <li /> }>Contact</Text>
<Text render={ <li /> }>Privacy policy</Text>
</ul>
</AlertDialog.Popup>
</>
),
<Text render={ <li /> }>About us</Text>
<Text render={ <li /> }>Contact</Text>
<Text render={ <li /> }>Privacy policy</Text>
</ul>
</AlertDialog.Popup>,
],
},
};

Expand All @@ -140,20 +144,21 @@ export const WithCustomContent: Story = {
export const WithCustomZIndex: Story = {
name: 'With Custom z-index',
args: {
children: (
<>
<AlertDialog.Trigger>Move to trash</AlertDialog.Trigger>
<AlertDialog.Popup
title="Move to trash?"
description="This post will be moved to trash. You can restore it later."
portal={
<AlertDialog.Portal
style={ { '--wp-ui-dialog-z-index': '9999' } }
/>
}
/>
</>
),
children: [
<AlertDialog.Trigger key="trigger">
Move to trash
</AlertDialog.Trigger>,
<AlertDialog.Popup
title="Move to trash?"
description="This post will be moved to trash. You can restore it later."
portal={
<AlertDialog.Portal
style={ { '--wp-ui-dialog-z-index': '9999' } }
/>
}
key="popup"
/>,
],
},
};

Expand Down Expand Up @@ -338,6 +343,7 @@ function StickyToggle( {
checked={ value }
onChange={ ( event ) => onChange( event.target.checked ) }
/>

<label htmlFor={ id }>{ label }</label>
</Stack>
);
Expand All @@ -355,6 +361,7 @@ function ScrollableContent() {
value={ stickyHeader }
onChange={ setStickyHeader }
/>

<StickyToggle
label="Sticky footer"
value={ stickyFooter }
Expand Down
7 changes: 1 addition & 6 deletions packages/ui/src/button/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,12 +156,7 @@ export const WithIcon: Story = {
...Default,
args: {
...Default.args,
children: (
<>
<Button.Icon icon={ wordpress } />
Button
</>
),
children: [ <Button.Icon icon={ wordpress } key="icon" />, 'Button' ],
},
};

Expand Down
Loading
Loading