Skip to content

Commit 49662c6

Browse files
ntsekourasntsekouras
committed
update actions type
1 parent 611a522 commit 49662c6

File tree

12 files changed

+124
-116
lines changed

12 files changed

+124
-116
lines changed

‎client/dashboard/agency-overview/index.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@ export default function AgencyOverview() {
88
<PageLayout>
99
<PageHeader
1010
title={ __( 'Agency Overview' ) }
11-
actions={ [
12-
<Button key="add-sites" variant="primary" __next40pxDefaultSize>
13-
{ __( 'Add Sites' ) }
14-
</Button>,
15-
<Button key="add-products" variant="secondary" __next40pxDefaultSize>
16-
{ __( 'Add Products' ) }
17-
</Button>,
18-
] }
11+
actions={
12+
<>
13+
<Button variant="primary" __next40pxDefaultSize>
14+
{ __( 'Add Sites' ) }
15+
</Button>
16+
<Button variant="secondary" __next40pxDefaultSize>
17+
{ __( 'Add Products' ) }
18+
</Button>
19+
</>
20+
}
1921
description={ __( 'This is a sample overview page.' ) }
2022
/>
2123
</PageLayout>

‎client/dashboard/app/404/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ function NotFound() {
99
<PageHeader
1010
title={ __( '404 Not Found' ) }
1111
description={ __( 'The page you are looking for does not exist.' ) }
12-
actions={ [
13-
<RouterLinkButton key="go-to-sites" to="/sites" variant="primary" __next40pxDefaultSize>
12+
actions={
13+
<RouterLinkButton to="/sites" variant="primary" __next40pxDefaultSize>
1414
{ __( 'Go to Sites' ) }
15-
</RouterLinkButton>,
16-
] }
15+
</RouterLinkButton>
16+
}
1717
/>
1818
</PageLayout>
1919
);

‎client/dashboard/app/500/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ function UnknownError( { error }: { error: Error } ) {
1010
<PageHeader
1111
title={ __( '500 Error' ) }
1212
description={ __( 'Something wrong happened.' ) }
13-
actions={ [
14-
<RouterLinkButton key="go-to-sites" to="/sites" variant="primary" __next40pxDefaultSize>
13+
actions={
14+
<RouterLinkButton to="/sites" variant="primary" __next40pxDefaultSize>
1515
{ __( 'Go to Sites' ) }
16-
</RouterLinkButton>,
17-
] }
16+
</RouterLinkButton>
17+
}
1818
/>
1919
<Notice status="error" isDismissible={ false }>
2020
{ error.message }

‎client/dashboard/components/page-header/index.stories.tsx

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,12 @@ export const WithActions: Story = {
2828
description: `Manage how your site works and appears. Configure your site's basic functionality,
2929
appearance, and behavior. These settings control everything from your site title to how your
3030
content is displayed to visitors.`,
31-
actions: [
32-
<Button key="cancel" variant="secondary" size="compact">
33-
Cancel
34-
</Button>,
35-
<Button key="save" variant="primary" size="compact">
36-
Save Changes
37-
</Button>,
38-
],
31+
actions: (
32+
<>
33+
<Button variant="secondary">Cancel</Button>
34+
<Button variant="primary">Save Changes</Button>
35+
</>
36+
),
3937
},
4038
};
4139

@@ -51,33 +49,34 @@ export const FullExample: Story = {
5149
{ label: 'Theme', href: 'javascript:void(0)' },
5250
{ label: 'Advanced', href: 'javascript:void(0)' },
5351
],
54-
actions: [
55-
<Button key="help" icon={ help } variant="tertiary" __next40pxDefaultSize>
56-
Help
57-
</Button>,
58-
<Button key="preview" variant="secondary" __next40pxDefaultSize>
59-
Preview
60-
</Button>,
61-
<DropdownMenu
62-
key="more-actions"
63-
icon={ moreVertical }
64-
label="More actions"
65-
toggleProps={ { __next40pxDefaultSize: true } }
66-
>
67-
{ () => (
68-
<>
69-
<MenuGroup>
70-
<MenuItem>Import</MenuItem>
71-
<MenuItem>Export</MenuItem>
72-
<MenuItem>Settings</MenuItem>
73-
</MenuGroup>
74-
<MenuGroup>
75-
<MenuItem>Help</MenuItem>
76-
</MenuGroup>
77-
</>
78-
) }
79-
</DropdownMenu>,
80-
],
52+
actions: (
53+
<>
54+
<Button icon={ help } variant="tertiary" __next40pxDefaultSize>
55+
Help
56+
</Button>
57+
<Button variant="secondary" __next40pxDefaultSize>
58+
Preview
59+
</Button>
60+
<DropdownMenu
61+
icon={ moreVertical }
62+
label="More actions"
63+
toggleProps={ { __next40pxDefaultSize: true } }
64+
>
65+
{ () => (
66+
<>
67+
<MenuGroup>
68+
<MenuItem>Import</MenuItem>
69+
<MenuItem>Export</MenuItem>
70+
<MenuItem>Settings</MenuItem>
71+
</MenuGroup>
72+
<MenuGroup>
73+
<MenuItem>Help</MenuItem>
74+
</MenuGroup>
75+
</>
76+
) }
77+
</DropdownMenu>
78+
</>
79+
),
8180
},
8281
};
8382

@@ -93,32 +92,33 @@ export const ImageDecoration: Story = {
9392
{ label: 'Theme', href: 'javascript:void(0)' },
9493
{ label: 'Advanced', href: 'javascript:void(0)' },
9594
],
96-
actions: [
97-
<Button key="help" icon={ help } variant="tertiary" __next40pxDefaultSize>
98-
Help
99-
</Button>,
100-
<Button key="preview" variant="secondary" __next40pxDefaultSize>
101-
Preview
102-
</Button>,
103-
<DropdownMenu
104-
key="more-actions"
105-
icon={ moreVertical }
106-
label="More actions"
107-
toggleProps={ { __next40pxDefaultSize: true } }
108-
>
109-
{ () => (
110-
<>
111-
<MenuGroup>
112-
<MenuItem>Import</MenuItem>
113-
<MenuItem>Export</MenuItem>
114-
<MenuItem>Settings</MenuItem>
115-
</MenuGroup>
116-
<MenuGroup>
117-
<MenuItem>Help</MenuItem>
118-
</MenuGroup>
119-
</>
120-
) }
121-
</DropdownMenu>,
122-
],
95+
actions: (
96+
<>
97+
<Button icon={ help } variant="tertiary" __next40pxDefaultSize>
98+
Help
99+
</Button>
100+
<Button variant="secondary" __next40pxDefaultSize>
101+
Preview
102+
</Button>
103+
<DropdownMenu
104+
icon={ moreVertical }
105+
label="More actions"
106+
toggleProps={ { __next40pxDefaultSize: true } }
107+
>
108+
{ () => (
109+
<>
110+
<MenuGroup>
111+
<MenuItem>Import</MenuItem>
112+
<MenuItem>Export</MenuItem>
113+
<MenuItem>Settings</MenuItem>
114+
</MenuGroup>
115+
<MenuGroup>
116+
<MenuItem>Help</MenuItem>
117+
</MenuGroup>
118+
</>
119+
) }
120+
</DropdownMenu>
121+
</>
122+
),
123123
},
124124
};

‎client/dashboard/components/page-header/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const PageHeader = ( {
5050
) }
5151
<HStack spacing={ 3 } justify="space-between" alignment="flex-start">
5252
<h1 className="client-dashboard-components-page-header__heading">{ title }</h1>
53-
{ !! actions?.length && (
53+
{ !! actions && (
5454
<HStack
5555
spacing={ 2 }
5656
justify="flex-end"

‎client/dashboard/components/page-header/style.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@import "@wordpress/base-styles/variables";
22

3-
.client-dashboard-components-page-header-heading {
3+
.client-dashboard-components-page-header__heading {
44
font-size: $font-size-2x-large;
55
line-height: $font-line-height-2x-large;
66
margin-block: 0;
77
}
88

9-
.client-dashboard-components-page-header-decoration {
9+
.client-dashboard-components-page-header__decoration {
1010
display: inline-flex;
1111
width: $grid-unit-50;
1212
height: $grid-unit-50;
@@ -30,7 +30,7 @@
3030
}
3131
}
3232

33-
.client-dashboard-components-page-header-actions {
33+
.client-dashboard-components-page-header__actions {
3434
flex-shrink: 0;
3535
}
3636

‎client/dashboard/components/page-header/test/index.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,12 @@ describe( 'PageHeader', () => {
1919
render(
2020
<PageHeader
2121
title="Test Title"
22-
actions={ [ <Button key="cancel">Cancel</Button>, <Button key="save">Save</Button> ] }
22+
actions={
23+
<>
24+
<Button>Cancel</Button>
25+
<Button>Save</Button>
26+
</>
27+
}
2328
/>
2429
);
2530
expect( screen.getByRole( 'button', { name: 'Cancel' } ) ).toBeVisible();

‎client/dashboard/components/page-header/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export interface PageHeaderProps {
1515
* A group of contextual controls, such as buttons, dropdowns,
1616
* or a search input, relevant to the page or section.
1717
*/
18-
actions?: React.ReactNode[];
18+
actions?: React.ReactNode;
1919
/**
2020
* An optional visual element like an icon or small illustration
2121
* to enhance recognition or provide visual interest.

‎client/dashboard/domains/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,11 +103,11 @@ function Domains() {
103103
<PageLayout>
104104
<PageHeader
105105
title={ __( 'Domains' ) }
106-
actions={ [
107-
<Button key="add-new-domain" variant="primary" __next40pxDefaultSize>
106+
actions={
107+
<Button variant="primary" __next40pxDefaultSize>
108108
{ __( 'Add New Domain' ) }
109-
</Button>,
110-
] }
109+
</Button>
110+
}
111111
/>
112112
<DataViewsCard>
113113
<DataViews

‎client/dashboard/emails/index.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -121,14 +121,16 @@ function Emails() {
121121
<PageLayout>
122122
<PageHeader
123123
title={ __( 'Emails' ) }
124-
actions={ [
125-
<Button key="add-forwarder" variant="secondary" __next40pxDefaultSize>
126-
{ __( 'Add Email Forwarder' ) }
127-
</Button>,
128-
<Button key="add-mailbox" variant="primary" __next40pxDefaultSize>
129-
{ __( 'Add Mailbox' ) }
130-
</Button>,
131-
] }
124+
actions={
125+
<>
126+
<Button variant="secondary" __next40pxDefaultSize>
127+
{ __( 'Add Email Forwarder' ) }
128+
</Button>
129+
<Button variant="primary" __next40pxDefaultSize>
130+
{ __( 'Add Mailbox' ) }
131+
</Button>
132+
</>
133+
}
132134
/>
133135
<Notice status="warning" isDismissible={ false }>
134136
{ __( 'This is using fake data for the moment' ) }

‎client/dashboard/sites/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -223,11 +223,11 @@ export default function Sites() {
223223
<PageLayout>
224224
<PageHeader
225225
title={ __( 'Sites' ) }
226-
actions={ [
227-
<Button key="add-new-site" variant="primary" __next40pxDefaultSize>
226+
actions={
227+
<Button variant="primary" __next40pxDefaultSize>
228228
{ __( 'Add New Site' ) }
229-
</Button>,
230-
] }
229+
</Button>
230+
}
231231
/>
232232
<DataViewsCard>
233233
<DataViews

‎client/dashboard/sites/overview/index.tsx

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -46,22 +46,21 @@ function SiteOverview() {
4646
<PageLayout>
4747
<PageHeader
4848
title={ site.name }
49-
actions={ [
50-
<ExternalLink key="visit" href={ site.URL }>
51-
{ __( 'Visit' ) }
52-
</ExternalLink>,
53-
site.options?.admin_url && (
54-
<Button
55-
key="wp-admin"
56-
__next40pxDefaultSize
57-
variant="primary"
58-
href={ site.options.admin_url }
59-
icon={ wordpress }
60-
>
61-
{ __( 'WP Admin' ) }
62-
</Button>
63-
),
64-
].filter( Boolean ) }
49+
actions={
50+
<>
51+
<ExternalLink href={ site.URL }>{ __( 'Visit' ) }</ExternalLink>
52+
{ site.options?.admin_url && (
53+
<Button
54+
__next40pxDefaultSize
55+
variant="primary"
56+
href={ site.options.admin_url }
57+
icon={ wordpress }
58+
>
59+
{ __( 'WP Admin' ) }
60+
</Button>
61+
) }
62+
</>
63+
}
6564
/>
6665
<HStack alignment="flex-start" spacing={ 8 }>
6766
<Sidebar

0 commit comments

Comments
 (0)