fix(ui): close package-wide gaps from the component library PRs - #1047
Open
EhabY wants to merge 1 commit into
Open
fix(ui): close package-wide gaps from the component library PRs#1047EhabY wants to merge 1 commit into
EhabY wants to merge 1 commit into
Conversation
8 tasks
EhabY
force-pushed
the
feat/ui-package-gaps
branch
2 times, most recently
from
July 28, 2026 18:09
50045c8 to
35ba10d
Compare
…ary PRs Closes #1046. - Declare Storybook devDependencies; pin storybook via the pnpm catalog - Add Button matching monaco-text-button, with a secondary variant - Add LoadingState reusing the StatePanel skeleton - Tokens: secondary-button colors, small type tracking bodyFontSize-xSmall, overlay z-index, VS Code's cornerRadius and spacing scales, and --ui-panel-background for editor-tab and panel hosts - Re-render useVscodeTheme on same-kind theme switches (one shared observer) - Keep reduced-motion activity cues: striped indeterminate band, tinted ring - Menus: checkbox/radio/label/keybinding wrappers; keybinding hints render the current OS's binding in the native label style (formatKeybinding) - Tooltip: app-level TooltipProvider so trigger-to-trigger hovers skip the delay; tooltips cap at half the window height like native
EhabY
force-pushed
the
feat/ui-package-gaps
branch
from
July 28, 2026 18:23
35ba10d to
c7371be
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 #1046 (all 8 checkboxes) plus the overlays gaps deferred from #1039; list/selection-row tokens stay deferred to the Tree suite (#1037). One squashed commit, after a review-and-simplify pass.
Changes
packages/uideclares its Storybook devDependencies; the rootstorybookpin moves into the pnpm catalog.--ui-font-size-small,--ui-z-index-overlay,--ui-panel-backgroundfor non-sidebar hosts, and VS Code's cornerRadius and spacing scales (spacing mirrored in full; names are px times ten). Controls adopt the radius scale and state panels the spacing scale; metrics VS Code hardcodes natively (button/hover/menu paddings, the 5px hover radius) stay hardcoded.Buttonmatchingmonaco-text-button, with asecondaryvariant; the state panels and story triggers use it instead of faking one.LoadingStatepanel reusing theStatePanelskeleton stylesheet, with the largeSpinnerin the icon slot.*CheckboxItem,*RadioGroup/*RadioItem,*Label, and*Keybinding, styled like native. Keybinding hints take a contribution'skey/mac/win/linuxfields and render the current OS's binding in the native label style (⇧⌘Ron macOS,Ctrl+Shift+Relsewhere);formatKeybindingis exported for other surfaces. VS Code has no API to resolve user-remapped bindings, so hints show contributed defaults (documented known gap).useVscodeThemere-renders on same-kind theme switches: one shared observer, snapshot of theme id + kind.ProgressBarband,Spinnerarc over a tinted ring.:focuslike native (a click shows the ring; workbenchstyle.cssoutlinesbutton:focus), a toggledIconButtonkeeps its active background on hover (native applies checked colors as inline styles intoggle.ts), andIconButtonno longer defaults a browsertitlebox (native hints via the styled hover widget; wrap inTooltip).TooltipProviderbecomes a public export mounted once per app, so hovers moving between triggers skip the 500ms delay like native; tooltips cap at half the window height.Tooltiphas no per-instance delay prop; nest a provider where a different delay is needed.Testing
pnpm typecheck,lint,format:check,test:webview(315 passed), andstorybook:cipass. Button/control geometry and secondary colors pixel-verified against the captured VS Code themes; the menu, tooltip, and loading stories driven in a real browser. The parity story also compares the secondaryButtonand an open menu (items, separator, keybinding hint) against vscode-elements. Pixel CI will show intended diffs where stories now useButtonas the overlay trigger.