Skip to content

Commit 2326df0

Browse files
CGastrellCGastrellciampomirka
authored and
adamsilverstein
committed
Admin UI: Fix Page Header not rendering with only actions and add stories (#76695)
* Admin UI: Fix Page Header not rendering with only actions and add new stories The Page component Header was not rendered when only the actions prop was provided, because actions was missing from the render condition. This adds actions to the condition and introduces new Storybook stories covering more prop combinations: without header, badges, actions, and a full header example. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Remove off-spec stories and drop title from FullHeader Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * rebase and fix conflicts * Use Button and Text from @wordpress/ui in Page stories Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: CGastrell <cgastrell@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
1 parent 2a7b26b commit 2326df0

3 files changed

Lines changed: 86 additions & 2 deletions

File tree

‎packages/admin-ui/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
### Bug Fixes
66

77
- `Breadcrumbs`: throw a runtime error when non-last items are missing a `to` prop [#76493](https://github.com/WordPress/gutenberg/pull/76493/)
8+
- Fix Page Header not rendering when only `actions` prop is provided. [#76695](https://github.com/WordPress/gutenberg/pull/76695)
89

910
## 1.10.0 (2026-03-18)
1011

‎packages/admin-ui/src/page/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function Page( {
4141

4242
return (
4343
<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>
44-
{ ( title || breadcrumbs || badges ) && (
44+
{ ( title || breadcrumbs || badges || actions ) && (
4545
<Header
4646
headingLevel={ headingLevel }
4747
breadcrumbs={ breadcrumbs }

‎packages/admin-ui/src/page/stories/index.story.tsx‎

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
* External dependencies
33
*/
44
import type { Meta, StoryObj } from '@storybook/react-vite';
5-
import { __experimentalText as Text } from '@wordpress/components';
5+
// eslint-disable-next-line @wordpress/use-recommended-components -- admin-ui is a bundled package that depends on @wordpress/ui
6+
import { Badge, Button, Text } from '@wordpress/ui';
67

78
/**
89
* Internal dependencies
@@ -82,3 +83,85 @@ export const WithBreadcrumbsAndSubtitle: Story = {
8283
children: <Text>Page content here</Text>,
8384
},
8485
};
86+
87+
export const WithoutHeader: Story = {
88+
args: {
89+
showSidebarToggle: false,
90+
hasPadding: true,
91+
children: <Text>Page content here</Text>,
92+
},
93+
};
94+
95+
export const WithTitleAndBadges: Story = {
96+
args: {
97+
title: 'Page title',
98+
badges: <Badge intent="informational">Status</Badge>,
99+
showSidebarToggle: false,
100+
hasPadding: true,
101+
children: <Text>Page content here</Text>,
102+
},
103+
};
104+
105+
export const WithBreadcrumbsAndBadges: Story = {
106+
args: {
107+
showSidebarToggle: false,
108+
breadcrumbs: (
109+
<Breadcrumbs
110+
items={ [
111+
{ label: 'Root breadcrumb', to: '/connectors' },
112+
{ label: 'Level 1 breadcrumb' },
113+
] }
114+
/>
115+
),
116+
badges: <Badge intent="none">Published</Badge>,
117+
hasPadding: true,
118+
children: <Text>Page content here</Text>,
119+
},
120+
};
121+
122+
export const WithActions: Story = {
123+
args: {
124+
title: 'Page title',
125+
actions: (
126+
<>
127+
<Button size="compact" variant="outline">
128+
Cancel
129+
</Button>
130+
<Button size="compact" variant="solid">
131+
Save
132+
</Button>
133+
</>
134+
),
135+
showSidebarToggle: false,
136+
hasPadding: true,
137+
children: <Text>Page content here</Text>,
138+
},
139+
};
140+
141+
export const FullHeader: Story = {
142+
args: {
143+
subTitle: 'All of the subtitle text you need goes here.',
144+
breadcrumbs: (
145+
<Breadcrumbs
146+
items={ [
147+
{ label: 'Root breadcrumb', to: '/connectors' },
148+
{ label: 'Level 1 breadcrumb' },
149+
] }
150+
/>
151+
),
152+
badges: <Badge intent="informational">Status</Badge>,
153+
actions: (
154+
<>
155+
<Button size="compact" variant="outline">
156+
Cancel
157+
</Button>
158+
<Button size="compact" variant="solid">
159+
Save
160+
</Button>
161+
</>
162+
),
163+
showSidebarToggle: false,
164+
hasPadding: true,
165+
children: <Text>Page content here</Text>,
166+
},
167+
};

0 commit comments

Comments
 (0)