Skip to content

Change product switcher to neutral background with colored icon chip #385

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
JakeSCahill merged 12 commits into from
Jun 2, 2026
Merged

Change product switcher to neutral background with colored icon chip #385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2849b47
Change product switcher to neutral background with colored icon chip
JakeSCahill Jun 1, 2026
a8d0830
Add icons to product switcher chips
JakeSCahill Jun 1, 2026
d4757e2
Fix nav collapse toggle visibility on mobile
JakeSCahill Jun 1, 2026
dcf602e
Fix missing space before 'Let us know' link in search results
JakeSCahill Jun 1, 2026
049f720
Fix back-to-top button overlapping pagination Next button
JakeSCahill Jun 1, 2026
13ae8e6
Remove icons from dropdown menu chips, keep color-only
JakeSCahill Jun 1, 2026
535b13e
Add margin-left to cloud link icon
JakeSCahill Jun 1, 2026
50f9556
Change ADP icon from brain to sparkles
JakeSCahill Jun 1, 2026
18631e5
Add ADP-specific condition to show sparkles icon
JakeSCahill Jun 1, 2026
d372ba3
Add missing parent components to preview UI model
JakeSCahill Jun 1, 2026
2784411
Match platform indicator font size to nav items
JakeSCahill Jun 1, 2026
a47db72
Fix SVG sizing for dropdown product chips
JakeSCahill Jun 2, 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
45 changes: 40 additions & 5 deletions preview-src/ui-model.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@ site:
homeUrl: &home_url /streaming/24.3/index.html
components:
# Agentic Data Plane component
- name: agentic-data-plane
- &adp_component
name: agentic-data-plane
title: Agentic Data Plane
url: '#'
url: /agentic-data-plane/1.0/index.html
versions:
- &latest_version_adp
url: '#'
url: /agentic-data-plane/1.0/index.html
version: '1.0'
displayVersion: '1.0'
asciidoc:
Expand All @@ -21,6 +22,40 @@ site:
color: '#7C3AED'
order: 1
latestVersion: *latest_version_adp
# Data Platform umbrella component
- name: data-platform
title: Data Platform
url: '#'
versions:
- &latest_version_dp
url: '#'
version: '1.0'
displayVersion: '1.0'
asciidoc:
attributes:
component-metadata:
title: Data Platform
description: The streaming foundation for everything you build.
color: '#5239CC'
order: 2
latestVersion: *latest_version_dp
# Self-Managed component - parent for Streaming and Connect
- name: self-managed
title: Self-Managed
url: '#'
versions:
- &latest_version_sm
url: '#'
version: '1.0'
displayVersion: '1.0'
asciidoc:
attributes:
component-metadata:
title: Self-Managed
description: Run Redpanda on your own infrastructure.
color: '#9F1239'
order: 1
latestVersion: *latest_version_sm
# Streaming component - under Data Platform (formerly Self-Managed/ROOT)
- &component
name: streaming
Expand Down Expand Up @@ -103,8 +138,8 @@ page:
url: *home_url
home: true
title: Brand’s Hardware & Software Requirements
component: *component
componentVersion: *component_version
component: *adp_component
componentVersion: *latest_version_adp
version: '24.3'
displayVersion: '24.3'
module: ROOT
Expand Down
10 changes: 9 additions & 1 deletion src/css/doc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1765,7 +1765,7 @@ details[open] > summary {
.back-to-top {
/* Use fixed positioning to prevent layout shift when shown/hidden */
position: fixed;
bottom: 24px;
bottom: 100px; /* Increased to avoid overlapping pagination Next button */
right: 24px;
z-index: 100;
display: flex;
Expand All @@ -1778,6 +1778,14 @@ details[open] > summary {
transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* On mobile, position back-to-top even higher to clear pagination */
@media screen and (max-width: 768px) {
.back-to-top {
bottom: 120px;
right: 16px;
}
}

.doc .button-bar {
display: flex;
gap: 10px;
Expand Down
3 changes: 2 additions & 1 deletion src/css/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -685,7 +685,7 @@ html[data-theme="dark"] .tb-overflow-divider {
align-items: center;
margin-left: 8px;
color: var(--grey-600-new, #52525b);
font-size: calc(18 / var(--rem-base) * 1rem);
font-size: calc(15 / var(--rem-base) * 1rem);
font-weight: 500;
order: 1;
flex: 1 1 auto;
Expand Down Expand Up @@ -1063,6 +1063,7 @@ html[data-theme="dark"] .tb-link:hover {
/* Log into Cloud link styling */
.tb-link-cloud svg {
flex-shrink: 0;
margin-left: 5px;
}

/* Top nav dropdown (Ask a Human) */
Expand Down
10 changes: 5 additions & 5 deletions src/css/nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,11 @@ html .nav-container.is-active {
border-top: 1px solid var(--nav-border-color);
}

/* Sidebar footer collapse button - always visible (overrides .nav-collapse display:none) */
.sb-footer .sb-collapse-toggle.nav-collapse {
display: flex;
}

.nav-collapse:hover {
opacity: 1;
}
Expand Down Expand Up @@ -228,11 +233,6 @@ html .nav-container.is-active {
.nav-collapse {
display: none;
}

/* Override for sidebar footer collapse button - keep it visible */
.sb-footer .sb-collapse-toggle {
display: inline-grid;
}
}

.nav-container.is-active {
Expand Down
86 changes: 66 additions & 20 deletions src/css/product-switcher.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,56 @@
gap: 10px;
width: 100%;
padding: 10px 14px;
background: var(--component-color, #4f46e5);
border: none;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
cursor: pointer;
transition: background 0.15s, filter 0.15s;
transition: background 0.15s, border-color 0.15s;
text-align: left;
}

.sb-product-switch:hover {
filter: brightness(1.1);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
}

.sb-product-switch.is-open {
filter: brightness(1.15);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}

/* Small color indicator chip - hidden when button has full color bg */
/* Color indicator icon with component color background */
.sb-product-chip {
display: none;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--component-color, #4f46e5);
border-radius: 6px;
flex-shrink: 0;
}

.sb-product-chip svg {
width: 16px;
height: 16px;
color: #fff;
Comment on lines +48 to +51
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Jun 1, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Dropdown icon SVG size conflicts with chip sizes

.sb-product-chip svg { width: 16px; height: 16px; } applies globally, but dropdown chips are still 10/8/6px in this file, so many new SVGs will clip or become unreadable in menu options.

Suggested CSS fix 
 .sb-product-chip svg {
   width: 16px;
   height: 16px;
   color: `#fff`;
 }
+
+/* Keep dropdown SVGs proportional to smaller chip containers */
+.sb-product-opt .sb-product-chip svg {
+  width: 8px;
+  height: 8px;
+}
+
+.sb-product-opt.sb-product-child .sb-product-chip svg {
+  width: 6px;
+  height: 6px;
+}
+
+.sb-product-opt.sb-product-grandchild .sb-product-chip svg {
+  width: 5px;
+  height: 5px;
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.sb-product-chip svg {
width: 16px;
height: 16px;
color: #fff;
.sb-product-chip svg {
width: 16px;
height: 16px;
color: `#fff`;
}
/* Keep dropdown SVGs proportional to smaller chip containers */
.sb-product-opt .sb-product-chip svg {
width: 8px;
height: 8px;
}
.sb-product-opt.sb-product-child .sb-product-chip svg {
width: 6px;
height: 6px;
}
.sb-product-opt.sb-product-grandchild .sb-product-chip svg {
width: 5px;
height: 5px;
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/css/product-switcher.css` around lines 48 - 51, The global rule
".sb-product-chip svg { width: 16px; height: 16px; }" forces all SVGs to 16px
and conflicts with the smaller dropdown chip sizes (10/8/6px); update the CSS so
the 16px sizing is scoped to non-dropdown chips (for example target a specific
modifier or direct child like ".sb-product-chip:not(.sb-product-chip--dropdown)
svg" or use a more specific selector for the main chip) and ensure dropdown
selectors (the rules that set 10/8/6px) explicitly override or set their own
sizes, or alternatively make the SVG sizing responsive by using
max-width:100%/height:auto so dropdown chips can control their own dimensions.

}

/* Scale SVG icons proportionally for smaller dropdown chips */
.sb-product-opt .sb-product-chip svg {
width: 6px;
height: 6px;
}

.sb-product-opt.sb-product-child .sb-product-chip svg {
width: 5px;
height: 5px;
}

.sb-product-opt.sb-product-grandchild .sb-product-chip svg {
width: 4px;
height: 4px;
}

.sb-product-name {
Expand All @@ -42,7 +73,7 @@
align-items: flex-start;
gap: 1px;
font-size: calc(14 / var(--rem-base) * 1rem);
color: #fff;
color: #e8eef6;
font-weight: 500;
flex: 1;
letter-spacing: -0.01em;
Expand All @@ -59,15 +90,15 @@
.sb-product-parent-label {
font-size: calc(12 / var(--rem-base) * 1rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
color: #9aa8bc;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.3;
}

.sb-product-child-label {
font-size: calc(16 / var(--rem-base) * 1rem);
color: #fff;
color: #e8eef6;
line-height: 1.2;
}

Expand Down Expand Up @@ -124,38 +155,53 @@
color: #fff;
}

/* Light theme overrides - same solid color, white text */
/* Light theme overrides - neutral background with colored icon chip */
.sidebar[data-theme="light"] .sb-product-switch {
background: var(--component-color, #4f46e5);
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}

.sidebar[data-theme="light"] .sb-product-switch:hover {
filter: brightness(1.1);
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.12);
}

.sidebar[data-theme="light"] .sb-product-switch.is-open {
background: rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.15);
}

.sidebar[data-theme="light"] .sb-product-name {
color: #fff;
color: var(--grey-900-new, var(--grey-900, #181818));
}

.sidebar[data-theme="light"] .sb-product-parent-label {
color: var(--grey-500-new, var(--grey-500, #79797d));
}

.sidebar[data-theme="light"] .sb-product-child-label {
color: var(--grey-900-new, var(--grey-900, #181818));
}

.sidebar[data-theme="light"] .sb-product-section {
color: rgba(255, 255, 255, 0.7);
color: var(--grey-500-new, var(--grey-500, #79797d));
}

.sidebar[data-theme="light"] .sb-product-title {
color: #fff;
color: var(--grey-900-new, var(--grey-900, #181818));
}

.sidebar[data-theme="light"] .sb-product-caret {
color: rgba(255, 255, 255, 0.7);
color: var(--grey-500-new, var(--grey-500, #79797d));
}

.sidebar[data-theme="light"] .sb-product-caret.rot {
color: #fff;
color: var(--grey-900-new, var(--grey-900, #181818));
}

.sidebar[data-theme="light"] .sb-product-version {
background: rgba(255, 255, 255, 0.15);
color: #fff;
background: color-mix(in oklab, var(--component-color, #4f46e5) 15%, transparent);
color: var(--grey-700-new, var(--grey-700, #505053));
}

/* Dropdown menu */
Expand Down
2 changes: 1 addition & 1 deletion src/partials/algolia-script.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -766,7 +766,7 @@ function initAlgolia() {
return html`
<div>No results for ${state.query}</div>
<p>
Believe this query should return results?
Believe this query should return results?${' '}
<a target="_blank" rel="noopener noreferrer" href="https://github.com/redpanda-data/documentation/issues/new?title=No%20search%20results%20for%20${state.query}">
Let us know
</a>.
Expand Down
38 changes: 31 additions & 7 deletions src/partials/product-switcher.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,17 +48,23 @@
>
{{!-- For Labs pages, show "Product Docs" instead of "Labs" --}}
{{#if (eq page.component.name 'labs')}}
<span class="sb-product-chip" style="background: var(--component-color, #6366f1);"></span>
<span class="sb-product-chip" style="background: var(--component-color, #6366f1);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/></svg>
</span>
<span class="sb-product-name">View Product Docs</span>
{{else if (eq page.attributes.role 'home')}}
{{!-- Home page: show ADP as current product --}}
<span class="sb-product-chip" style="background: {{get-component-color site 'agentic-data-plane'}};"></span>
<span class="sb-product-chip" style="background: {{get-component-color site 'agentic-data-plane'}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
</span>
<span class="sb-product-name">Agentic Data Plane</span>
{{else if (eq page.component.name 'cloud-data-platform')}}
{{!-- Cloud pages: show hierarchy "Data Platform > Cloud" --}}
{{#with (find-component site 'cloud-data-platform')}}
{{#with (get-component-header-data this)}}
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
</span>
{{/with}}
{{/with}}
<span class="sb-product-name sb-product-name--hierarchy">
Expand All @@ -77,7 +83,9 @@
{{!-- Self-Managed pages (Streaming, Connect, Self-Managed home): show hierarchy "Data Platform > Self-Managed" --}}
{{#with (find-component site 'self-managed')}}
{{#with (get-component-header-data this)}}
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>
</span>
{{/with}}
{{/with}}
<span class="sb-product-name sb-product-name--hierarchy">
Expand All @@ -96,20 +104,36 @@
{{!-- Data Platform landing: show "Data Platform" --}}
{{#with (find-component site 'data-platform')}}
{{#with (get-component-header-data this)}}
<span class="sb-product-chip" style="background: {{this.color}};"></span>
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>
</span>
<span class="sb-product-name">{{this.title}}</span>
{{/with}}
{{/with}}
{{else if (eq page.component.name 'agentic-data-plane')}}
{{!-- ADP pages: show sparkles icon --}}
{{#with (find-component site 'agentic-data-plane')}}
{{#with (get-component-header-data this)}}
<span class="sb-product-chip" style="background: {{this.color}};">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
</span>
<span class="sb-product-name">{{this.title}}</span>
{{/with}}
{{/with}}
{{else}}
{{!-- Other components: show their product name --}}
{{#with page.component}}
{{#with (get-header-data @root.page)}}
<span class="sb-product-chip"></span>
<span class="sb-product-chip">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/></svg>
</span>
<span class="sb-product-name">
<span class="sb-product-title">{{#if this.title}}{{{this.title}}}{{else}}{{{../title}}}{{/if}}</span>
</span>
{{else}}
<span class="sb-product-chip"></span>
<span class="sb-product-chip">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/></svg>
</span>
<span class="sb-product-name">{{{this.title}}}</span>
{{/with}}
{{/with}}
Expand Down
Loading