Migrate Menu component from emotion styled-components to vanilla-extract #5585
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.
This PR migrates the Menu component and its subcomponents from emotion styled-components to vanilla-extract CSS-in-JS, following the established pattern used by other components like Button and Text.
Changes Made
Created
styles.css.ts
styledPopup
recipe with searchable variant for the main popup containeritemContainer
,styledItem
, andstyledLinkItem
recipes handling sentiment variants (neutral, primary, danger) and disabled statesgroupContainer
style for menu groupsUpdated Component Files
itemCoreStyle
function and 3 styled-components with clean vanilla-extract recipesBenefits
Functionality Preserved
All existing Menu functionality remains intact:
The migration maintains complete backward compatibility while modernizing the styling approach. Test snapshots will need updating due to CSS class name changes, but all functional behavior is preserved.
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.