Skip to content

UI: improve component code readability in Storybook #80129

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

Closed
simison wants to merge 3 commits into from
Closed

UI: improve component code readability in Storybook #80129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
524ca5d
UI: improve Storybook code readability for design system components.
simison Jul 10, 2026
3ffc2a8
Update CHANGELOG.md
simison Jul 10, 2026
e079457
Types
simison Jul 10, 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
1 change: 1 addition & 0 deletions packages/ui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@

### Internal

- Improve Storybook "Show code" snippets for design system component stories by using explicit `render` functions with direct child composition ([#80129](https://github.com/WordPress/gutenberg/pull/80129)).
- Add an explicit return type to an internal overlay focus helper so the published type definitions stay self-contained ([#79684](https://github.com/WordPress/gutenberg/pull/79684)).
- Enforce CSS Module class selector naming for component-library packages ([#79504](https://github.com/WordPress/gutenberg/pull/79504)).
- Update `@base-ui/react` from `1.5.0` to [`1.6.0`](https://github.com/mui/base-ui/releases/tag/v1.6.0) ([#79408](https://github.com/WordPress/gutenberg/pull/79408)).
Expand Down
150 changes: 71 additions & 79 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 @@ -37,56 +37,50 @@ type Story = StoryObj< typeof AlertDialog.Root >;
* is blocked.
*/
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."
/>
</>
),
},
render: ( {} ) => (
<AlertDialog.Root>
<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."
/>
</AlertDialog.Root>
),
};

/**
* Confirmation dialog for irreversible actions that cannot be undone.
* The confirm button uses error/danger coloring.
*/
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"
/>
</>
),
},
render: ( {} ) => (
<AlertDialog.Root>
<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"
/>
</AlertDialog.Root>
),
};

/**
* Example with custom button labels for both confirm and cancel buttons.
*/
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"
/>
</>
),
},
render: ( {} ) => (
<AlertDialog.Root>
<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"
/>
</AlertDialog.Root>
),
};

/**
Expand All @@ -95,29 +89,27 @@ export const CustomLabels: Story = {
* accessibility (`aria-describedby`); `children` adds supplementary detail.
*/
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"
render: ( {} ) => (
<AlertDialog.Root>
<AlertDialog.Trigger>Remove pages</AlertDialog.Trigger>
<AlertDialog.Popup
title="Remove 3 pages?"
description="These pages will be moved to trash."
confirmButtonText="Delete pages"
>
<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>
</AlertDialog.Root>
),
};

/**
Expand All @@ -139,22 +131,20 @@ 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' } }
/>
}
/>
</>
),
},
render: ( {} ) => (
<AlertDialog.Root>
<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' } }
/>
}
/>
</AlertDialog.Root>
),
};

const menuPopupStyles: React.CSSProperties = {
Expand Down Expand Up @@ -188,7 +178,7 @@ const menuItemStyles: React.CSSProperties = {
* component (not ready yet).
*/
export const MenuTrigger: Story = {
render: () => {
render: ( {} ) => {
const [ menuOpen, setMenuOpen ] = useState( false );
return (
<>
Expand Down Expand Up @@ -397,9 +387,11 @@ function ScrollableContent() {
* independently.
*/
export const Scrollable: Story = {
args: {
children: <ScrollableContent />,
},
render: ( {} ) => (
<AlertDialog.Root>
<ScrollableContent />
</AlertDialog.Root>
),
};

/**
Expand Down
28 changes: 14 additions & 14 deletions packages/ui/src/badge/stories/usage-guidelines.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default meta;
type Story = StoryObj< typeof Badge >;

export const AllIntents: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="high">high</Badge>
<Badge intent="medium">medium</Badge>
Expand All @@ -39,7 +39,7 @@ export const AllIntents: Story = {
};

export const High: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="high">Payment declined</Badge>
<Badge intent="high">Security issue</Badge>
Expand All @@ -48,7 +48,7 @@ export const High: Story = {
};

export const Medium: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="medium">Approval required</Badge>
<Badge intent="medium">Review needed</Badge>
Expand All @@ -57,7 +57,7 @@ export const Medium: Story = {
};

export const Low: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="low">Pending</Badge>
<Badge intent="low">Queued</Badge>
Expand All @@ -66,7 +66,7 @@ export const Low: Story = {
};

export const Informational: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="informational">Scheduled</Badge>
<Badge intent="informational">Beta</Badge>
Expand All @@ -75,7 +75,7 @@ export const Informational: Story = {
};

export const Draft: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="draft">Draft</Badge>
<Badge intent="draft">Unpublished</Badge>
Expand All @@ -84,7 +84,7 @@ export const Draft: Story = {
};

export const Stable: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="stable">Healthy</Badge>
<Badge intent="stable">Active</Badge>
Expand All @@ -93,7 +93,7 @@ export const Stable: Story = {
};

export const None: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="none">Inactive</Badge>
<Badge intent="none">Expired</Badge>
Expand All @@ -102,7 +102,7 @@ export const None: Story = {
};

export const CommentStatus: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="none">Approved</Badge>
<Badge intent="medium">Approval required</Badge>
Expand All @@ -111,7 +111,7 @@ export const CommentStatus: Story = {
};

export const PageStatus: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="none">Published</Badge>
<Badge intent="low">Pending</Badge>
Expand All @@ -123,7 +123,7 @@ export const PageStatus: Story = {
};

export const PluginStatus: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="stable">Active</Badge>
<Badge intent="none">Inactive</Badge>
Expand All @@ -132,7 +132,7 @@ export const PluginStatus: Story = {
};

export const TextOnlyBadges: Story = {
render: () => (
render: ( {} ) => (
<>
<Badge intent="stable">Active</Badge>
<Badge intent="medium">Review needed</Badge>
Expand All @@ -142,7 +142,7 @@ export const TextOnlyBadges: Story = {
};

export const WithAdjacentContentIcon: Story = {
render: () => (
render: ( {} ) => (
<Stack direction="column" gap="sm">
<Stack direction="row" gap="sm" align="center">
<Icon icon={ page } size={ 24 } />
Expand All @@ -159,7 +159,7 @@ export const WithAdjacentContentIcon: Story = {
};

export const IncorrectBadgeWithIcon: Story = {
render: () => (
render: ( {} ) => (
<>
{ /* @ts-expect-error Demonstrating incorrect Badge usage with icon children. */ }
<Badge intent="stable">
Expand Down
15 changes: 6 additions & 9 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 @@ -154,15 +154,12 @@ export const AllTonesAndVariants: Story = {

export const WithIcon: Story = {
...Default,
args: {
...Default.args,
children: (
<>
<Button.Icon icon={ wordpress } />
Button
</>
),
},
render: ( { children: _children, ...args } ) => (
<Button { ...args }>
<Button.Icon icon={ wordpress } />
Button
</Button>
),
};

export const Loading: Story = {
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/button/stories/usage-guidelines.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ type Story = StoryObj;
* `<button>` and support loading and pressed states.
*/
export const UseButtonForActions: Story = {
render: () => (
render: ( {} ) => (
<Tooltip.Provider delay={ 0 }>
<Stack direction="row" gap="sm" wrap="wrap" align="center">
<Button type="submit">Save changes</Button>
Expand All @@ -49,7 +49,7 @@ export const UseButtonForActions: Story = {
* the user is going more clearly than a button-shaped control.
*/
export const UseLinkForInlineNavigation: Story = {
render: () => (
render: ( {} ) => (
<Text variant="body-md" render={ <p /> }>
{ createInterpolateElement(
'Read the <DocumentationLink /> for more details, or <ExternalLink />.',
Expand Down Expand Up @@ -78,7 +78,7 @@ export const UseLinkForInlineNavigation: Story = {
* styling set clearer expectations than a button-shaped control.
*/
export const UseLinkButtonForNavigation: Story = {
render: () => (
render: ( {} ) => (
<Stack direction="column" gap="md">
<Text variant="body-md" render={ <p /> }>
Standalone navigation calls to action can use `LinkButton` when
Expand Down
Loading
Loading