Skip to content

Commit 83c8c34

Browse files
dhasilvaclaude
dhasilva
and
claude
committed
Backup: align modernized dashboard with the legacy control UI
- Wrap the Overview activity list in a Card.Root so the left pane picks up the same chrome (border, radius, background) as the right pane and the rest of the dashboard. - Switch the activity list to `@wordpress/dataviews` (bundled) rather than `@wordpress/dataviews/wp` (script module), and pull the package's stylesheet into the dashboard route via `meta.load-css`. Without those styles the list-layout row button fell back to wp-admin's default button styling and rendered a visible 16x6 grey artifact in every row. - Hide the redundant DataViews selection checkbox, center the media slot, keep the date/summary cell on a single line, and align the pagination footer pieces — same overrides Calypso's backup-overview list applies to DataViews. - Restructure the backup detail card with explicit Card.Header / Card.Content slots so the header gets its bottom border separator and the body gets proper padding. Swap the restore icon back to rotateLeft to match the legacy admin. - Lift the "FILES" section title into the detail card with its own top-border separator, and add a separator under the "N files selected" row. - Add zebra striping to the file-browser tree with a literal hex — the --wp-components-color-gray-100 token is locally re-mapped to white inside Card.Content, which would defeat the alternation. - Wrap the non-backup activity detail in Card.Content so it stops rendering flush against the card border. Mocked data + flagged behaviour are unchanged; this is visual parity work only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent eaed666 commit 83c8c34

28 files changed

Lines changed: 799 additions & 368 deletions

File tree

‎pnpm-lock.yaml‎

Lines changed: 10 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/packages/backup/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,16 @@
4141
"@tanstack/react-query": "5.90.8",
4242
"@wordpress/admin-ui": "2.0.0",
4343
"@wordpress/api-fetch": "7.44.0",
44+
"@wordpress/base-styles": "6.20.0",
4445
"@wordpress/components": "32.6.0",
4546
"@wordpress/data": "10.44.0",
47+
"@wordpress/dataviews": "14.1.0",
4648
"@wordpress/date": "5.44.0",
4749
"@wordpress/element": "6.44.0",
4850
"@wordpress/i18n": "6.17.0",
4951
"@wordpress/icons": "12.2.0",
5052
"@wordpress/route": "0.10.0",
53+
"@wordpress/theme": "0.11.0",
5154
"@wordpress/ui": "0.11.0",
5255
"moment": "2.30.1",
5356
"prop-types": "^15.8.1",

‎projects/packages/backup/routes/dashboard/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33
"version": "1.0.0",
44
"private": true,
55
"dependencies": {
6+
"@automattic/jetpack-components": "workspace:*",
67
"@types/react": "18.3.28",
78
"@wordpress/admin-ui": "2.0.0",
89
"@wordpress/components": "32.6.0",
10+
"@wordpress/dataviews": "14.1.0",
911
"@wordpress/date": "5.27.0",
1012
"@wordpress/element": "6.44.0",
1113
"@wordpress/i18n": "6.17.0",
1214
"@wordpress/icons": "12.2.0",
1315
"@wordpress/route": "0.10.0",
16+
"@wordpress/theme": "0.11.0",
1417
"@wordpress/ui": "0.11.0"
1518
},
1619
"route": {

‎projects/packages/backup/routes/dashboard/style.scss‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,59 @@
11
// Route-level styles for the modernized Backup dashboard.
22
// Per-component styles live alongside each component under
3-
// src/dashboard/components/*. This file is intentionally minimal for
4-
// Task 1; later tasks add layout rules for the two-pane Overview here.
3+
// src/dashboard/components/*.
4+
5+
@use "sass:meta";
6+
@use "@automattic/jetpack-base-styles/admin-page-layout" as *;
7+
8+
// Pull in the bundled DataViews stylesheet. `@wordpress/dataviews` ships
9+
// its CSS in `build-style/style.css` rather than auto-injecting it from
10+
// the JS entry, so we explicitly @include it once at the route level
11+
// (mirrors VideoPress's `routes/library/style.scss`). Without this the
12+
// list-layout primary action button falls back to wp-admin's default
13+
// browser button styling and shows as a visible artifact in every row.
14+
@include meta.load-css("@wordpress/dataviews/build-style/style.css");
15+
16+
// Pin the wp-admin content column to the viewport and turn its inner
17+
// flex chain into "fixed header + scrollable middle + pinned footer"
18+
// — matches the modernized VideoPress / Forms dashboards (see
19+
// `projects/packages/videopress/src/dashboard/admin-shell.scss`).
20+
// Without this, JetpackFooter scrolls with the body when the activity
21+
// list grows past the viewport. Scoped to the backup admin body so it
22+
// can't leak onto other Jetpack pages.
23+
body.jetpack_page_jetpack-backup {
24+
@include jetpack-admin-page-layout-wp-build;
25+
26+
// The shared mixin assumes `<AdminPage>` from `@automattic/jetpack-components`
27+
// (which stamps `.jp-admin-page` AND admin-ui's `.admin-ui-page` /
28+
// `.admin-ui-page__header` classes verbatim). Our DashboardLayout uses
29+
// `<Page>` from `@wordpress/admin-ui` 2.x, whose root + header classes
30+
// are emotion-hashed (`_<hash>__page`, `_<hash>__header`) and don't
31+
// match the mixin's selectors. We add `.jp-admin-page` to the Page so
32+
// the mixin's outer flex chain still attaches, and reproduce the
33+
// page-internal "header / middle / footer" sticky layout here using
34+
// our own stable class names (`.jpb-dev-mode-banner`,
35+
// `.jpb-dashboard-body`, `.jetpack-footer`).
36+
.jp-admin-page {
37+
38+
> header {
39+
flex-shrink: 0;
40+
}
41+
42+
> .jpb-dev-mode-banner {
43+
flex-shrink: 0;
44+
}
45+
46+
> .jpb-dashboard-body {
47+
flex: 1 1 auto;
48+
min-height: 0;
49+
overflow: auto;
50+
}
51+
52+
> .jetpack-footer {
53+
flex-shrink: 0;
54+
}
55+
}
56+
}
557

658
.jpb-overview {
759
display: grid;

‎projects/packages/backup/routes/download/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "1.0.0",
44
"private": true,
55
"dependencies": {
6+
"@automattic/jetpack-components": "workspace:*",
67
"@types/react": "18.3.28",
78
"@wordpress/admin-ui": "2.0.0",
89
"@wordpress/components": "32.6.0",
@@ -11,6 +12,7 @@
1112
"@wordpress/i18n": "6.17.0",
1213
"@wordpress/icons": "12.2.0",
1314
"@wordpress/route": "0.10.0",
15+
"@wordpress/theme": "0.11.0",
1416
"@wordpress/ui": "0.11.0"
1517
},
1618
"route": {

‎projects/packages/backup/routes/download/style.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,21 @@
2121
gap: 16px;
2222
}
2323

24+
// Card.Root lays its children out as a flex column, so a `<Button>`
25+
// child stretches to fill the cross-axis (the full card width) by
26+
// default. Pin the Generate action to its content width.
27+
&__confirm {
28+
align-self: flex-start;
29+
30+
// wp-admin's global `svg { fill: … }` is unlayered and beats
31+
// `@wordpress/ui` Button's layered icon color. Force the SVG
32+
// to inherit the button's text color so the icon stays white
33+
// on the blue primary background.
34+
svg {
35+
fill: currentColor;
36+
}
37+
}
38+
2439
&__link {
2540
font-weight: 600;
2641
}

‎projects/packages/backup/routes/restore/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "1.0.0",
44
"private": true,
55
"dependencies": {
6+
"@automattic/jetpack-components": "workspace:*",
67
"@types/react": "18.3.28",
78
"@wordpress/admin-ui": "2.0.0",
89
"@wordpress/components": "32.6.0",
@@ -11,6 +12,7 @@
1112
"@wordpress/i18n": "6.17.0",
1213
"@wordpress/icons": "12.2.0",
1314
"@wordpress/route": "0.10.0",
15+
"@wordpress/theme": "0.11.0",
1416
"@wordpress/ui": "0.11.0"
1517
},
1618
"route": {

‎projects/packages/backup/routes/restore/style.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,22 @@
2020
flex-direction: column;
2121
gap: 16px;
2222
}
23+
24+
// Card.Root lays its children out as a flex column, so a `<Button>`
25+
// child stretches to fill the cross-axis (the full card width) by
26+
// default. Pin the Confirm action to its content width so it reads
27+
// as a button rather than a wide bar — matches the legacy
28+
// `try/jetpack-backup-new-ui` Restore screen.
29+
&__confirm {
30+
align-self: flex-start;
31+
32+
// wp-admin's global `svg { fill: … }` is unlayered and beats
33+
// `@wordpress/ui` Button's layered icon color, so the icon
34+
// renders black on the blue primary background. Force the
35+
// SVG to inherit the button's text color (white for the
36+
// primary variant) so the icon reads correctly.
37+
svg {
38+
fill: currentColor;
39+
}
40+
}
2341
}

‎projects/packages/backup/src/dashboard/components/activity-detail/index.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,20 @@ type Props = {
1717
*/
1818
export default function ActivityDetail( { item }: Props ) {
1919
return (
20-
<Card className="jpb-activity-detail">
21-
<Stack direction="column" gap="sm">
22-
<Text variant="heading-md" render={ <h3 /> }>
23-
{ item.title }
24-
</Text>
25-
<Text size="small" variant="muted">
26-
{ dateI18n( 'M j, Y, g:i A', item.publishedAt, undefined ) }
27-
{ ' ' }
28-
{ item.actor.name }
29-
</Text>
30-
{ item.summary && <Text>{ item.summary }</Text> }
31-
</Stack>
32-
</Card>
20+
<Card.Root className="jpb-activity-detail">
21+
<Card.Content>
22+
<Stack direction="column" gap="sm">
23+
<Text variant="heading-md" render={ <h3 /> }>
24+
{ item.title }
25+
</Text>
26+
<Text size="small" variant="muted">
27+
{ dateI18n( 'M j, Y, g:i A', item.publishedAt, undefined ) }
28+
{ ' ' }
29+
{ item.actor.name }
30+
</Text>
31+
{ item.summary && <Text>{ item.summary }</Text> }
32+
</Stack>
33+
</Card.Content>
34+
</Card.Root>
3335
);
3436
}

0 commit comments

Comments
 (0)