feat(ui): add Radix overlays themed to VS Code#1039
Open
EhabY wants to merge 1 commit into
Open
Conversation
Tooltip, ContextMenu, and DropdownMenu wrap the Radix primitives with flat compound exports (Tooltip takes a content prop) and are styled to match the native menu and hover widgets via --ui-* tokens, including high contrast, forced-colors, and reduced-motion handling. Long menus and tooltips cap to the space Radix reports and scroll like native. Stories snapshot the four theme families through Chromatic and assert focus handling in play functions.
87cb194 to
bb96f01
Compare
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
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.
Closes #1038 (DEVEX-619)
Stacked on #1030 (the
packages/uiscaffold); this diff is overlay-only.What
Tooltip,ContextMenu,DropdownMenuwrapping@radix-ui/react-*— the package's only runtime deps besides codicons; React stays a peer.Tooltipis a single component with acontentprop (Radix Themes / Fluent v9 shape) and a 500ms delay matchingworkbench.hover.delay.--ui-menu-*/--ui-tooltip-*tokens intokens.css(menu colors frommenu.*IDs, tooltip fromeditorHoverWidget.*, shadow fromwidget.shadowwhich self-removes in HC). Metrics verified against the VS Code source: 24px items, 2em check-column gutters, corner-radius tokens with the pre-token 5px/4px fallbacks.body, matching real webview default styles (Storybook'sglobal.cssstand-in moved typography from#roottobodyaccordingly).forced-colors(system colors re-pointed through custom properties) andprefers-reduced-motionhandling.@repo/*and relative cross-package imports inpackages/ui; shared internals go through#cx/#storybooksubpath imports;sideEffectsdeclared for tree-shaking.Storybook
One
.stories.tsxper overlay. TheOpenmatrix stories (nested submenu, disabled items, separators, icons) snapshot Light, Dark, High Contrast, and High Contrast Light via Chromatic modes; play functions open the overlays pre-snapshot.ManyItems/OverflowScrollsassert the scroll caps.Webview focus handling
Verified via play assertions (the preview iframe owns its
document, like a webview): focus moves into the menu on open, Escape closes and returns focus to the trigger, tooltip opens on keyboard focus.Manual checklist for the first real webview consumer:
bodyOut of scope
Checkbox/radio items, labels, keybinding hints, a data-driven
itemswrapper, and Tasks' migration off@vscode-elements.🤖 Generated with Claude Code