[kangzj]

Fixes RSM-3319

Why

The "Preview" qualifier on the AI Answers tab read as part of the title — AI Answers (Preview) in body weight, with parentheses doing the only work to separate it. Promoting it to a proper superscript turns it into a status marker the eye skims over instead of competing with the tab name, which is what every comparable design system (Material, Atlassian, GitHub, Carbon) does for in-line "Preview" / "Beta" / "New" labels.

Proposed changes

• dashboard-page.jsx: swap the <span> around (Preview) for a semantic <sup> and drop the parentheses (the visual treatment now does the separating).
• Move the translation call to _x() with a context note so translators see the badge intent rather than just the bare word.
• dashboard-page.scss: keep the UA's vertical-align: super baseline shift; only override font-size (0.7em), tint with the muted --wpds-color-fg-content-neutral-weak token, and add a 4px inline-start margin so the qualifier reads as metadata.
• Removes the   workaround that Search Dashboard: restore visible space between "AI Answers" and "(Preview)" tab label #48850 had to add against the new flex-based Tabs.Tab — the text now lives inside <sup> so the UA superscript handles its own separation from the tab title.

Screenshots

Before	After

Captures rendered via Playwright against a self-contained reproduction of the <Tabs.List variant="minimal"> chrome with the actual built CSS rule applied. The dashboard requires a real Jetpack ↔ WPCOM connection to render in a docker env, which the per-agent dev env can't establish autonomously, so a minimal faithful reproduction was used instead. The DOM under inspection — <sup class="jp-search-dashboard-tabs__tab-preview-label">Preview</sup> and the new SCSS rule — is exactly what ships.

Related product discussion/links

• Linear: RSM-3319 (Project: Jetpack Search blocks)
• Parent PR (the unified @wordpress/ui tab migration that introduced this label rendering): Search dashboard: adopt the unified @wordpress/ui tab pattern #48846 — RSM-3299
• Whitespace-fix predecessor: Search Dashboard: restore visible space between "AI Answers" and "(Preview)" tab label #48850 — drops the   workaround it had to add
• Original review comment that surfaced the visual debt: Search dashboard: adopt the unified @wordpress/ui tab pattern #48846 (comment)

Does this pull request change what data or activity we track or use?

No.

Testing instructions

Per the issue's acceptance criteria:

• AI Answers tab renders as AI Answers ᴾʳᵉᵛⁱᵉʷ — Preview raised above the baseline, smaller, in the secondary-foreground tone.
• No parentheses around Preview.
• DOM uses <sup class="jp-search-dashboard-tabs__tab-preview-label"> rather than <span>.
• Translation call uses _x() with the badge-status context note.
• Active-tab indicator and the other two tabs (Plan & Usage, Settings) render unchanged.
• Before/after screenshots attached to the PR.

To verify against a real Jetpack ↔ WPCOM connection (Jurassic Ninja or a connected docker env):

1. jp build packages/my-jetpack && jp build plugins/jetpack && jp build packages/search && jp build plugins/search
2. Open Jetpack → Search in wp-admin.
3. Inspect the third tab — verify the markup is <sup class="jp-search-dashboard-tabs__tab-preview-label">Preview</sup> and the visual treatment matches the After screenshot.

[kangzj]

@claude please review this PR.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the atlas/rsm-3319-ai-answers-preview-superscript branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack atlas/rsm-3319-ai-answers-preview-superscript

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[claude]

Claude finished @kangzj's task in 1m 17s —— View job

---

PR Review

• Read changed files
• Review JSX changes
• Review SCSS changes
• Review changelog entry
• Post review feedback

---

Overall this is a clean, well-reasoned change. The code is minimal, focused on the stated goal, and consistent with the codebase's conventions. A few observations below.

dashboard-page.jsx

✅ Semantic <sup> swap — Correct element choice. <sup> carries typographic superscript semantics, which is the right signal here. HTML spec allows <sup> as a phrasing content descendant of <button> (which is what <Tabs.Tab> renders), so the markup is valid.

✅ _x() with context — Good move. The context string 'Status badge on the AI Answers tab marking the feature as in preview' is specific enough for translators to render an appropriate equivalent in languages where "Preview" as a status marker differs from its common meaning.

Minor: <sup> and screen-reader announcement — Different assistive technologies announce <sup> differently: NVDA/JAWS generally read it as plain text, VoiceOver (macOS/iOS) reads it as a superscript. The effective label "AI Answers Preview" is unambiguous regardless. No action required — just confirming this was considered.

dashboard-page.scss

✅ Scoping — The rule lives inside body.jetpack_page_jetpack-search .jp-search-dashboard-page {}, which matches the existing specificity strategy in this file.

✅ Logical property — margin-inline-start is the right choice; avoids writing a separate RTL rule.

Minor: font-weight: 500 — This is a subtle point. At 0.7em and with vertical-align: super already separating it visually, the medium weight adds a small optical boost. Worth confirming this matches the design intent (not blocking — just unusual for a "muted metadata" element to be medium-weight when the intent is for it to recede).

Minor: Relying on UA vertical-align: super — The comment in the SCSS correctly notes the UA stylesheet provides this. Given there's no reset that strips <sup> baseline positioning in this codebase, this is safe. If that ever changes upstream, adding an explicit vertical-align: super to the rule would future-proof it.

Minor: line-height reflow — vertical-align: super can cause the parent line box to grow in some layout engines, which can push surrounding tab text out of vertical alignment. With font-size: 0.7em this is usually suppressed, but if tab-bar height is ever reported as inconsistent, adding line-height: 1 (or 0) to the <sup> rule is the standard fix.

Changelog

✅ Correct Significance: patch and Type: changed. Description is precise.

Summary

The PR is well-executed. The only items worth a follow-up comment before merge are:

1. Confirm font-weight: 500 is intentional for the badge — if the design calls for it to be purely muted, inherit or 400 might be more consistent.
2. Consider adding explicit vertical-align: super to the SCSS rule as a belt-and-suspenders guard against future resets.

Neither is a blocker — happy to approve as-is or after a quick check on (1).

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• 🔴 Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[kangzj]

Addressing claude[bot]'s review (issue comment ID IC_kwDOAOho7M8AAAABCaoQ8g):

1. font-weight: 500 → dropped. You're right — the medium weight was working against the "muted metadata" intent. Falling back to the inherited 400 reads more like a recede-into-the-background qualifier, which is the goal here.
2. vertical-align: super → added explicitly. Cheap insurance against a future UA reset stripping the baseline shift, and I added line-height: 1 alongside it (per your "standard fix" note) so the superscript can't inflate the tab's line-box height in any layout engine.

Both addressed in commit e007a2d015aa5731c3bfa58452e78df394d6ca37. Branch is also rebased on fresh trunk.

[kangzj]

@copilot review

[kangzj]

@claude please re-review.

[claude]

Claude finished @kangzj's task in 45s —— View job

---

PR Re-Review

• Read changed files
• Review JSX changes
• Review SCSS changes (verify addressed feedback)
• Review changelog entry
• Post review feedback

---

Both items from the previous review are addressed. The PR is clean.

Addressed feedback

font-weight: 500 → dropped ✅
The property is gone from .jp-search-dashboard-tabs__tab-preview-label. The badge now inherits 400 from its context, which is consistent with "muted metadata" intent — it recedes visually instead of competing with the tab label.

Explicit vertical-align: super + line-height: 1 ✅
Both properties are now pinned in the SCSS rule. The comment in the file accurately explains the rationale (guarding against a future UA reset stripping the baseline shift). The two properties work together: vertical-align: super positions the baseline, line-height: 1 prevents the <sup> from inflating the parent line-box height. Good belt-and-suspenders approach.

Current state of the rule

.jp-search-dashboard-tabs__tab-preview-label {
    margin-inline-start: var(--wpds-dimension-padding-xs, 4px);
    font-size: 0.7em;
    line-height: 1;
    vertical-align: super;
    color: var(--wpds-color-fg-content-neutral-weak, #50575e);
}

Five properties, each doing exactly one thing: spacing, size, line-box containment, baseline position, and tint. No redundancy, no missing pieces.

Everything else holds

• <sup> with jp-search-dashboard-tabs__tab-preview-label class — semantic and correctly scoped ✅
• _x() with translator context note — appropriate for a status-badge string ✅
• margin-inline-start logical property — RTL-safe ✅
• Design tokens with fallback hex for both color and margin — degrades gracefully ✅
• Rule scoped inside body.jetpack_page_jetpack-search .jp-search-dashboard-page — consistent with the file's existing specificity strategy ✅
• Changelog: correct Significance: patch / Type: changed, description matches changes ✅

No further concerns. Ready to merge.

[jp-launch-control]

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

[Copilot]

@copilot review

Review: LGTM ✅

The changes are clean and well-reasoned. Here's what I checked:

JSX (dashboard-page.jsx)

• <sup> is appropriate here; the UA renders it as a superscript, and the CSS explicitly reinforces that with vertical-align: super, so there's no dependency on UA defaults.
• Switching from __() to _x() with a meaningful context string is the right call for a single-word translation like "Preview" that could otherwise be misunderstood by translators.
• Removing   in favour of margin-inline-start in CSS is cleaner.

SCSS (dashboard-page.scss)

• The two points from the previous review are both addressed: font-weight: 500 removed (inherited 400 is correct for muted metadata), and vertical-align: super + line-height: 1 are now pinned explicitly — the comment explains the defensive rationale well.
• margin-inline-start is the correct logical property for RTL-awareness.
• 0.7em is relative to the already-overridden tab font-size token (~13 px), giving ~9 px — legible and appropriately subordinated.
• The #50575e fallback for --wpds-color-fg-content-neutral-weak is consistent with how other token fallbacks are used elsewhere in the file.

Tests

• Existing tests use /ai answers/i (partial-match regex), so they still match the new accessible name "AI Answers Preview" without any changes needed.

Changelog — present, correctly formatted, accurate.

One cosmetic note: the commit message has a stray space ("A ddress review…") — not a blocker, just something to keep in mind for the squash message before merge.