Skip to content

Search dashboard: adopt the unified @wordpress/ui tab pattern #48846

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
kangzj merged 2 commits into from
May 15, 2026
Merged

Search dashboard: adopt the unified @wordpress/ui tab pattern #48846

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
d534998
Search dashboard: use canonical jp-admin-page-tabs wrapper (RSM-3299)
kangzj May 15, 2026
d1b5322
Search dashboard: re-apply tab font token + align first tab with header
kangzj May 15, 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
3 changes: 3 additions & 0 deletions projects/packages/search/changelog/RSM-3299-match-my-jetpack-tabs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
Significance: patch
Type: changed
Comment: Search dashboard: render the tab strip with the canonical `jp-admin-page-tabs` wrapper and `Tabs.List` `variant="minimal"`, matching the other modernized Jetpack admin pages (Podcast, Protect, Scan).
22 changes: 12 additions & 10 deletions projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,16 +164,18 @@ export default function DashboardPage( { isLoading = false } ) {
handleLocalNoticeDismissClick={ handleLocalNoticeDismissClick }
/>
<Tabs.Root value={ activeTab } onValueChange={ handleTabChange }>
<Tabs.List>
<Tabs.Tab value="plan-usage">{ __( 'Plan & Usage', 'jetpack-search-pkg' ) }</Tabs.Tab>
<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-search-pkg' ) }</Tabs.Tab>
<Tabs.Tab value="ai-answers">
{ __( 'AI Answers', 'jetpack-search-pkg' ) }{ ' ' }
<span className="jp-search-dashboard-tabs__tab-preview-label">
{ __( '(Preview)', 'jetpack-search-pkg' ) }
</span>
</Tabs.Tab>
</Tabs.List>
<div className="jp-admin-page-tabs">
<Tabs.List variant="minimal">
<Tabs.Tab value="plan-usage">{ __( 'Plan & Usage', 'jetpack-search-pkg' ) }</Tabs.Tab>
<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-search-pkg' ) }</Tabs.Tab>
<Tabs.Tab value="ai-answers">
{ __( 'AI Answers', 'jetpack-search-pkg' ) }{ ' ' }
<span className="jp-search-dashboard-tabs__tab-preview-label">
{ __( '(Preview)', 'jetpack-search-pkg' ) }
</span>
Comment on lines +172 to +175
Copy link
Copy Markdown
Contributor

@adamwoodnz adamwoodnz May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we please insert a space between 'AI Answers' and '(Preview)'? It hurts my eyes 😬

Copy link
Copy Markdown
Contributor Author

@kangzj kangzj May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same! 🙈

Copy link
Copy Markdown
Contributor Author

@kangzj kangzj May 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed in follow-up #48850 (commit c8055f2). The new flex-based Tabs.Tab was collapsing the { ' ' } JSX whitespace between the text node and the span, so I moved a &nbsp; inside the preview-label span — sibling-whitespace collapsing in flex doesn't reach inside the element's own text content, so the gap now renders reliably. 🙏

</Tabs.Tab>
</Tabs.List>
</div>
<Tabs.Panel value="plan-usage">
<div className="jp-search-dashboard-top jp-search-dashboard-wrap">
{ /* Always in the DOM so JITM JS finds it immediately (Path A). */ }
Expand Down
28 changes: 28 additions & 0 deletions projects/packages/search/src/dashboard/components/pages/dashboard-page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,34 @@
@use "scss/variables";
@use "scss/rna-styles";

// Body-scoped to beat the `body.jetpack_page_jetpack-search`-prefixed rules
// from `@automattic/jetpack-base-styles/admin-page-layout` on specificity.
body.jetpack_page_jetpack-search .jp-search-dashboard-page {

// Make `<Tabs.Tab>` actually use its design token. `@wordpress/ui` declares
// `font-size: var(--wpds-typography-font-size-md)` inside `@layer
// wp-ui-components`, but wp-admin core ships an unlayered
// `button { font-size: inherit }` reset that wins over any layered rule —
// so the tab silently inherits 16px from its surrounding context instead
// of the 13px the token specifies. Re-applying the token from an
// unlayered selector lets the design system land as intended (tab text
// smaller than the 15px page title — visual hierarchy restored).
.jp-admin-page-tabs [role="tab"] {
font-size: var(--wpds-typography-font-size-md, 13px);
}

// Align the first tab's content edge with the page header's start.
// admin-ui's page header sits at padding-inline 2xl (24px). The shared
// `.jp-admin-page-tabs` wrapper adds only 8px (designed for the default
// <Tabs.Tab> which ships with padding-inline lg = 16px, so 8 + 16 = 24
// matches the header). With `variant="minimal"`, <Tabs.Tab> has 0 inline
// padding, so the wrapper has to provide the full 2xl itself to keep
// the first tab flush with the header content edge across all widths.
.jp-admin-page-tabs {
padding-inline: var(--wpds-dimension-padding-2xl, 24px);
}
}

#jp-search-dashboard {
color: variables.$black;
font-size: 16px;
Expand Down
Loading