refactor(site): migrate VS Code button menus off MUI - #27730
Conversation
Replace MUI `Menu`/`MenuItem` (and the Emotion `css` prop) in `VSCodeDesktopButton` and `VSCodeDevContainerButton` with the shared shadcn `DropdownMenu`. The variant selector keeps the split-button layout, sizes the menu to the button group via an `inline-flex` anchor (so width is not the full parent), and uses `collisionPadding` so the menu stays inset from the viewport edge.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 95427700d9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <DropdownMenu | ||
| open={isVariantMenuOpen} | ||
| anchorEl={menuAnchorRef.current} | ||
| onClose={() => setIsVariantMenuOpen(false)} | ||
| css={{ | ||
| "& .MuiMenu-paper": { | ||
| width: menuAnchorRef.current?.clientWidth, | ||
| }, | ||
| }} | ||
| onOpenChange={setIsVariantMenuOpen} |
There was a problem hiding this comment.
When both VS Code variants are enabled, this replaces the menu's trigger, keyboard navigation, selection, and closing behavior, but VSCodeDesktopButton.stories.tsx still only renders the component and has no play function. Add a story interaction that opens the dropdown, selects a variant, and verifies the resulting visible state so regressions in this migration are exercised.
AGENTS.md reference: site/AGENTS.md:L9-L10
Useful? React with 👍 / 👎.
| <DropdownMenu | ||
| open={isVariantMenuOpen} | ||
| anchorEl={menuAnchorRef.current} | ||
| onClose={() => setIsVariantMenuOpen(false)} | ||
| css={{ | ||
| "& .MuiMenu-paper": { | ||
| width: menuAnchorRef.current?.clientWidth, | ||
| }, | ||
| }} | ||
| onOpenChange={setIsVariantMenuOpen} |
There was a problem hiding this comment.
When both VS Code variants are enabled, this independently replaces the dev-container menu's interaction behavior, but VSCodeDevContainerButton.stories.tsx has no play function and therefore never opens or selects from this dropdown. Add a story interaction that opens the menu, selects a variant, and verifies the updated visible state.
AGENTS.md reference: site/AGENTS.md:L9-L10
Useful? React with 👍 / 👎.
2 participants
Replace MUI
Menu/MenuItem(and the Emotioncssprop) inVSCodeDesktopButtonandVSCodeDevContainerButtonwith the shared shadcnDropdownMenu.The variant selector keeps the split-button layout, sizes the menu to the button group via an
inline-flexanchor (so width is not the full parent), and usescollisionPaddingso the menu stays inset from the viewport edge.