Skip to content

fix(ui): close package-wide gaps from the component library PRs - #1047

Open
EhabY wants to merge 1 commit into
mainfrom
feat/ui-package-gaps
Open

fix(ui): close package-wide gaps from the component library PRs#1047
EhabY wants to merge 1 commit into
mainfrom
feat/ui-package-gaps

Conversation

@EhabY

@EhabY EhabY commented Jul 28, 2026

Copy link
Copy Markdown
Collaborator

🤖 This PR was created by Coder Agents on behalf of @EhabY.

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/ui declares its Storybook devDependencies; the root storybook pin moves into the pnpm catalog.
  • Tokens: secondary-button colors, --ui-font-size-small, --ui-z-index-overlay, --ui-panel-background for 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.
  • Button matching monaco-text-button, with a secondary variant; the state panels and story triggers use it instead of faking one.
  • LoadingState panel reusing the StatePanel skeleton stylesheet, with the large Spinner in the icon slot.
  • Menus gain *CheckboxItem, *RadioGroup/*RadioItem, *Label, and *Keybinding, styled like native. Keybinding hints take a contribution's key/mac/win/linux fields and render the current OS's binding in the native label style (⇧⌘R on macOS, Ctrl+Shift+R elsewhere); formatKeybinding is exported for other surfaces. VS Code has no API to resolve user-remapped bindings, so hints show contributed defaults (documented known gap).
  • useVscodeTheme re-renders on same-kind theme switches: one shared observer, snapshot of theme id + kind.
  • Reduced motion keeps activity cues: striped indeterminate ProgressBar band, Spinner arc over a tinted ring.
  • Button parity fixes surfaced by the vscode-elements comparison: focus outlines apply on :focus like native (a click shows the ring; workbench style.css outlines button:focus), a toggled IconButton keeps its active background on hover (native applies checked colors as inline styles in toggle.ts), and IconButton no longer defaults a browser title box (native hints via the styled hover widget; wrap in Tooltip).
  • TooltipProvider becomes 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. Tooltip has no per-instance delay prop; nest a provider where a different delay is needed.

Testing

pnpm typecheck, lint, format:check, test:webview (315 passed), and storybook:ci pass. 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 secondary Button and an open menu (items, separator, keybinding hint) against vscode-elements. Pixel CI will show intended diffs where stories now use Button as the overlay trigger.

@EhabY EhabY self-assigned this Jul 28, 2026
@EhabY
EhabY force-pushed the feat/ui-package-gaps branch 2 times, most recently from 50045c8 to 35ba10d Compare July 28, 2026 18:09
…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
EhabY force-pushed the feat/ui-package-gaps branch from 35ba10d to c7371be Compare July 28, 2026 18:23
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.

ui: track package-wide gaps deferred from the component library PRs

1 participant