Skip to content

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Sep 24, 2025

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

  • Comprehensive vanilla-extract recipes for all Menu styling needs
  • styledPopup recipe with searchable variant for the main popup container
  • itemContainer, styledItem, and styledLinkItem recipes handling sentiment variants (neutral, primary, danger) and disabled states
  • groupContainer style for menu groups
  • Proper CSS selector handling for hover states, focus states, and SVG icon styling

Updated Component Files

  • MenuContent.tsx: Replaced 5 styled-components with vanilla-extract classes while preserving dynamic height calculations and search functionality
  • Item.tsx: Replaced complex itemCoreStyle function and 3 styled-components with clean vanilla-extract recipes
  • Group.tsx: Replaced styled Container with vanilla-extract class

Benefits

  • Zero breaking changes - Component API remains identical with all props preserved
  • Better performance - Vanilla-extract generates optimized CSS at build time
  • Type safety - Full TypeScript support for all style variants through recipe system
  • Consistency - Aligns with project's vanilla-extract migration strategy
  • Maintainability - Cleaner separation of styles from component logic

Functionality Preserved

All existing Menu functionality remains intact:

  • Hover, focus, and active states for all sentiment variations
  • Keyboard navigation and accessibility features
  • Searchable menu functionality
  • Dynamic positioning and sizing
  • Nested menu support
  • Link and button item variants

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.

Copy link

changeset-bot bot commented Sep 24, 2025

⚠️ No Changeset found

Latest commit: 4a3c29b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@Copilot Copilot AI changed the title [WIP] Migrate packages/ui/src/components/Menu to vanilla extract based on existing other components Migrate Menu component from emotion styled-components to vanilla-extract Sep 24, 2025
@Copilot Copilot AI requested a review from matthprost September 24, 2025 10:07
Copilot finished work on behalf of matthprost September 24, 2025 10:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants