refactor: modernize SidebarItem to functional component with Tailwind…#8100
Merged
alexander-akait merged 3 commits intowebpack:mainfrom Mar 23, 2026
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
alexander-akait
requested changes
Mar 23, 2026
Member
alexander-akait
left a comment
alexander-akait
left a comment
There was a problem hiding this comment.
please rebase and remove Print changes, they are not related
… CSS - Convert SidebarItem from class component to functional component with hooks - Replace deprecated UNSAFE_componentWillReceiveProps with useEffect - Migrate SidebarItem.scss to Tailwind CSS utilities (addresses webpack#8047) - Update Print component to use Tailwind instead of removed BEM classes - Remove orphaned sidebar-item selectors from dark.scss - Add comprehensive unit tests for SidebarItem (7 test cases) - Support both light and dark mode with proper color tokens
…ation The sidebar refactor removed the BEM class. Add to the NavLink in SidebarItem.jsx and update the Cypress test to use the new attribute selector.
- Replace removed .sidebar-item__title BEM class in click-menu-scroll-top.cy.js with data-testid attribute selector (same fix as pr_4435.cy.js) - Update SidebarItem snapshot to reflect new data-testid attribute on NavLink
ryzrr
force-pushed
the
refactor/modernize-sidebar-item
branch
from
b8dffe3 to
6dd3013
Compare
alexander-akait
approved these changes
Mar 23, 2026
Contributor
Author
|
Thanks ! |
Contributor
Author
This was the issue with the print section here so that's why I earlier added the changes in this PR only. Should I send a seperate fix for this ? |
Member
|
@ryzrr let's fix it in the separete PR |
Contributor
Author
|
okay sure . |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
Rewrote the SidebarItem component as a functional component with hooks and replaced its SCSS with Tailwind classes also updated the Print component which relied on the old class names and cleaned up leftover dark mode selectors.
What kind of change does this PR introduce?
SidebarItem was still a class component using the deprecated UNSAFE_componentWillReceiveProps method, and it was one of the remaining components with a standalone SCSS file. I converted it to a functional component, swapped all the BEM styles for Tailwind utilities with proper dark mode support, and added unit tests since it didn't have any.
Did you add tests for your changes?
Yes, added tests covering rendering, expand and collapse behavior, anchor links, and a snapshot.
Does this PR introduce a breaking change?
No
If relevant, what needs to be documented once your changes are merged or what have you already documented?
N/A
Use of AI
Claude