feat: standardize sidebars #8377
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
removes progress icon variant to unify all sidebar experiences, and no longer suggest linear flow, which we received as feedback multiple times during collaboration summit
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8377 +/- ##
==========================================
- Coverage 76.42% 76.41% -0.02%
==========================================
Files 118 118
Lines 9928 9928
Branches 334 334
==========================================
- Hits 7587 7586 -1
- Misses 2339 2340 +1
Partials 2 2 ☔ View full report in Codecov by Sentry. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR removes the progression icon feature from sidebar components to standardize the UI experience across the site. The change addresses feedback that the progression indicators (hexagonal icons with connecting lines) falsely suggested linear content flow in the Learn section when the content is often non-linear.
Key changes:
- Removed
showProgressionIconsprop from Sidebar components throughout the component hierarchy - Deleted the
ProgressionIconcomponent entirely - Unified hover and active states across all sidebar items
- Removed the Progression variant from Storybook stories
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
packages/ui-components/src/Containers/Sidebar/index.tsx |
Removed showProgressionIcons prop from component interface and removed prop passing to SidebarGroup |
packages/ui-components/src/Containers/Sidebar/index.stories.tsx |
Removed Progression story variant, keeping only Default story |
packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx |
Removed ProgressionIcon import, showProgressionIcons prop, and conditional rendering of progression icon |
packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css |
Removed progression-specific styles and simplified hover/active state selectors |
packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx |
Removed showProgressionIcons prop from component interface and prop passing to SidebarItem |
packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css |
Removed progression-specific styles including vertical lines and hexagon positioning |
packages/ui-components/src/Containers/Sidebar/ProgressionIcon/index.tsx |
Deleted entire file as the component is no longer needed |
apps/site/layouts/Learn.tsx |
Removed showProgressionIcons={true} prop from WithSideBar component usage |
apps/site/components/withSidebar.tsx |
Removed showProgressionIcons from WithSidebarProps type definition |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
📦 Build Size ComparisonSummary
Changes➕ Added Assets (3)
➖ Removed Assets (4)
|
avivkeller
approved these changes
Nov 27, 2025
avivkeller
reviewed
Nov 27, 2025
packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx
Outdated
Show resolved
Hide resolved
avivkeller
reviewed
Nov 27, 2025
packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
Outdated
Show resolved
Hide resolved
formatting
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
relates to nodejs/web-team#56
Description
Within https://github.com/nodejs/web-team/blob/main/meetings/2025-10-27.md we discussed #8234, and specific to this PR, how multiple attendees noted that Learn content seems to indicate there is a progression (I mean, it's labeled that way in our code even!), when the content is often not linear at all. In addition to re-ordering and presenting content differently, I want to explore doing away with the progression logic altogether.
This PR therefore removes progress the icon variant to unify all sidebar experiences, and no longer suggests linear flow.
I first thought about simply removing the vertical lines between hexagons, but that looks like oddly executed list items then. I think this proposed approach makes the most sense from a consistency standpoint, so the UX is similar throughout the whole page to indicate active, hover, current states. Of particular improvement is the hover state, which does not exist on learn items currently.
Validation
live preview
Related Issues
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.