Fix version dropdown links/labels and code-block styling#400
Conversation
Version selector (src/partials/version-selector.hbs): - Support policy footer link now always points to the Enterprise Support Services and Policies article (was the outdated docs.redpanda.com/current/reference/versions/ fallback). - Prerelease versions are labeled "Beta" instead of "Latest", in a dedicated Beta group; the latest GA version is promoted into the Latest group. Detection uses the Antora prerelease flag and page.component.latest, matching latest-banner.hbs. - Add violet "beta" status styling for the pill, rows, and the sticky top-bar indicator (component-home-v3.css, doc.css). Code blocks (src/css/doc.css, mirrored in doc-bump.css): - Remove the faint inner border on pre (base.css border showed inside the .content frame, visible in dark mode). - Unify line-height to 1.5 (was 1.65 on pre vs 1.7 on code) to remove the loose, uneven line spacing. - Symmetric 16px top/bottom padding; the hover toolbar now floats over the top-right with a legible backdrop instead of reserving 40px of top space that left short blocks top-heavy. preview-src/ui-model.yml: add a prerelease streaming version so the Beta grouping/styling is exercisable in local preview.
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThe version model now includes a 7.0 beta release. The version selector classifies prereleases as beta and separates them from current, supported, and end-of-life versions. Beta indicators receive light- and dark-theme styling. Documentation code blocks now use updated line heights and spacing, while source toolboxes receive revised alignment, positioning, backgrounds, borders, and shadows. Sequence Diagram(s)sequenceDiagram
participant VersionConfig
participant VersionSelector
participant Browser
VersionConfig->>VersionSelector: provide 7.0 prerelease entry
VersionSelector->>VersionSelector: classify prerelease as beta
VersionSelector->>Browser: render beta selector row and status
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The Beta status reused the violet that is the Limited Availability badge color. Switch it to the canonical beta-label indigo (--link-highlight-color / --indigo-400/600-new) so it matches the existing Beta pill and stays distinct from Limited Availability.
The Beta status is the same amber as the .status-badge--beta pill shown on beta pages (#fef3c7/#92400e/#fcd34d light, amber tint/#fcd34d dark), rather than the indigo .badge--beta variant, so the dropdown matches the Beta indicator users actually see on the page.
micheleRP
left a comment
micheleRP
left a comment
There was a problem hiding this comment.
Reviewed against docs-team standards and ran a light/dark render check locally (built the preview, screenshotted the version selector and code blocks in both themes). Code-block changes (issue #3) look good in both themes — no inner/double border, symmetric padding, legible floating toolbar. One should-fix on the version selector, inline below.
Side note: I checked this with a local /render-check command (full build + Playwright screenshots in light and dark). I could add it to the docs-team-standards plugin in PR #2864 if you want it there for team.
| box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); | ||
| } | ||
|
|
||
| .sm-ver-pill-dot[data-status="beta"] { |
There was a problem hiding this comment.
Should fix: Beta and EOL render in the same amber palette — they're not distinguishable, especially in dark mode.
The PR description says Beta gets "violet styling, distinct from ... amber EOL," but the CSS here uses amber, and several rules are the same value as EOL:
| Element | EOL | Beta |
|---|---|---|
| pill dot bg | #f59e0b |
#fbbf24 |
| pill status (dark) | #fcd34d |
#fcd34d — identical |
| pill status (light) | #d97706 |
#92400e |
| row status text | #92400e |
#92400e — identical |
| row status (dark) | #fcd34d |
#fcd34d — identical |
Confirmed visually. In light mode Beta and EOL differ only by a slightly deeper fill; in dark mode they're effectively identical — same yellow text, same dark-amber background, same dot:
Light — Beta (v7.0) vs End of life (v5.0):
(screenshot)
Dark — Beta and EOL nearly indistinguishable:
(screenshot)
Since Beta (brand-new) and EOL (dead) mean opposite things, the color coding needs to separate them. A violet palette already exists in the repo (doc.css: #c4b5fd / #9333ea / #c084fc, used for "important" admonitions) — pointing the data-status="beta" rules at those would match the description and give a clear three-way distinction (green Latest/Supported, violet Beta, amber EOL). Applies to all beta rules added in this file (pill dot, pill status light/dark, row status light/dark, row note) plus the mirror in doc.css (.component-indicator-sticky .sm-ver-pill-status[data-status="beta"]).
There was a problem hiding this comment.
@JakeSCahill flagging for action: this Beta/EOL amber collision is the first of two should-fixes from the final-pass review — either give Beta a genuinely distinct hue (the PR description says violet) or update the description.
Feediver1
left a comment
Feediver1
left a comment
There was a problem hiding this comment.
Review (docs-team-standards, UI tooling focus)
Overall: All three fixes are sound and the template logic is correct for production. @micheleRP's should-fix (Beta color) stands, and one more should-fix surfaced that screenshots couldn't reveal: the preview model can't actually exercise the new Latest-group logic.
Endorsing the existing should-fix
The Beta-vs-EOL amber collision @micheleRP flagged is confirmed in the diff (identical #fcd34d in dark-mode pill status and row status). Either switch Beta to a genuinely distinct hue or correct the PR description's "violet" claim — the whole point of the Beta group is that it isn't EOL.
New findings
- [Should fix —
preview-src/ui-model.yml] The preview can't render the Latest group at all. The template's new logic keys onpage.component.latest.version(matching Antora's runtime model andlatest-banner.hbs), but the preview model defines onlylatestVersion:on the component —latestis undefined in the gulp preview. Result: in every preview render the Latest group is empty (auto-hidden byupdateCounts()) and v6.0 silently falls into "Supported." This PR adds a 7.0 Beta fixture specifically so the preview demos the new grouping, yet the Latest half of that demo is invisible — and since review here is screenshot-driven, that's a QA blind spot. One-line fix: addlatest: *latest_version_xyzto the Streaming component in the preview model. - [Verified OK] The new Beta group needs no JS changes:
22-version-selector.jsupdateCounts()iterates all.sm-ver-groupelements generically — counts fill in and empty groups hide, including the new one. - [Verified OK] Dropping the
eol-docconfig branch is safe in practice: neither docs nor cloud-docs sets that attribute inantora.yml, so no consumer loses the hook. Minor note: the Zendesk article ID is now hardcoded in the template, so a support-portal restructure requires a docs-ui release to fix the link — acceptable, worth knowing. - [Verified OK] Group exclusion logic: prerelease versions are excluded from Latest (
and (not ./prerelease) …), Supported (nestedunless), and EOL; an all-prerelease component degrades correctly (Beta only, Latest hidden).
What works well
- Detection reuses the established
latest-banner.hbssemantics instead of inventing a second definition of "latest" - The
doc.css/doc-bump.csstoolbox rules are kept in lockstep, which is exactly where these two files historically drift - The floating-toolbox tradeoff (covers code on hover) is documented in a comment at the rule, not just in the PR
🤖 Automated review via docs-team-standards pr-review (UI tooling focus).
| url: /streaming/24.3/index.html | ||
| urlType: internal | ||
| versions: | ||
| - version: '7.0' |
There was a problem hiding this comment.
@JakeSCahill second should-fix from the final-pass review: the template's new Latest-group logic keys on page.component.latest.version, but this preview model only defines latestVersion: — so in every gulp preview the Latest group renders empty (auto-hidden) and v6.0 falls into Supported. The 7.0 Beta fixture added here demos the Beta group, but the Latest half of the demo is invisible to screenshot review. One-line fix alongside this fixture: add latest: *latest_version_xyz to the Streaming component.
Addresses the two should-fix findings from the final-pass review on #400. - Beta/EOL amber collision: Beta rows/pill were amber and byte-identical to EOL in dark mode. Repoint all data-status="beta" rules at the repo's existing violet palette (matching .status-badge--la and the "important" admonition), giving a clear three-way split: green Latest/Supported, violet Beta, amber EOL. Mirrored in the doc.css sticky rules. - Preview couldn't render the Latest group: the template keys on page.component.latest.version but the Streaming fixture only defined latestVersion. Add latest: *latest_version_xyz so gulp preview exercises the Latest group (v6.0) instead of dropping it into Supported. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
micheleRP
left a comment
micheleRP
left a comment
There was a problem hiding this comment.
Re-review: both should-fixes resolved ✅
Verified commit 1e75375 against the two should-fixes from the final-pass review. Both are addressed. Approving.
1. Beta/EOL amber collision → fixed
Every data-status="beta" rule was repointed from amber to violet, in both component-home-v3.css and the doc.css sticky mirror:
| Element | Was (amber, collided w/ EOL) | Now (violet) |
|---|---|---|
| pill dot bg | #fbbf24 |
#c084fc |
| pill status (dark) | #fcd34d (identical to EOL) |
#c4b5fd |
| pill status (light) | #92400e |
#7c3aed |
| row status (light) | #92400e / bg #fef3c7 |
#5b21b6 / bg #ede9fe |
| row status (dark) | #fcd34d (identical to EOL) |
#c4b5fd / bg rgba(139,92,246,.15) |
| row note (light/dark) | #b45309 / #fcd34d |
#7c3aed / #c4b5fd |
| doc.css sticky (light/dark) | #92400e / #fcd34d |
#7c3aed / #c4b5fd |
These match the existing violet "important" admonition palette (#c4b5fd / #c084fc). Beta is now a clean three-way distinction from green Latest/Supported and amber EOL, and the description's "violet" claim is accurate.
2. Preview can't render the Latest group → fixed
latest: *latest_version_xyz added to the Streaming component. The anchor resolves to the version: '6.0' object, so page.component.latest.version now resolves and v6.0 renders in the Latest group in gulp preview instead of falling into Supported. QA blind spot closed.
Notes
- Commit
1e75375touches only the eight color values and the one YAML line — no new logic, no scope creep. All prior "Verified OK" items are unaffected. - Confirmed by code inspection (values are unambiguously violet); I did not re-run a full render-check for the color swap.
3 participants
Fixes three issues reported on streaming docs pages (e.g. the streaming/26.2 stretch-clusters preview).
1. Support policy link
The version selector's "Support policy" footer link fell back to
https://docs.redpanda.com/current/reference/versions/. It now always points to the correct Enterprise Support Services and Policies article:https://support.redpanda.com/hc/en-us/articles/20682204531351-Enterprise-Support-Services-and-Policies.2. Beta/prerelease version mislabeled "Latest"
When the current version is an Antora prerelease (e.g. 26.2 Beta), the pill, group, and rows all read "Latest".
page.component.latest) is promoted into the Latest group.prereleaseflag andpage.component.latest, matching the existing logic inlatest-banner.hbs. Non-prerelease components are unaffected (the Beta group is empty and auto-hidden).3. Inconsistent code-block styling
Confirmed via computed styles + light/dark screenshots:
base.cssputs a border on everypre/code, which showed inside the.contentframe (visible in dark mode). Removed from blockpre.prewas 1.65 and innercodewas 1.7; unified to 1.5.prereserved 40px of top space for the hover toolbar (plus acodepadding-bottom), leaving short blocks top-heavy. Now uses symmetric 16px top/bottom; the toolbar floats over the top-right on hover with a small backdrop for legibility.Mirrored in
doc-bump.cssso the search/Ask-AI overlay code blocks match.Testing
gulp previewin both light and dark themes: Beta group + violet styling, GA promoted to Latest, correct support link, and code blocks with no inner border, tight even spacing, balanced padding, and a legible floating toolbar.preview-src/ui-model.ymlgains a prerelease streaming version so the Beta path is exercisable in local preview.gulp lintpasses.