Skip to content

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

Description

@EhabY

While documenting known gaps for #1039, an audit of everything shipped in packages/ui so far (#1030, #1031) surfaced package-wide limitations that were never written down or tracked. They are now listed in the package README's "Known gaps" section; this issue tracks fixing them.

  • No Button component. The VS Code button style exists only as a descendant selector inside the state panels (StatePanel.css), and the parity story has to fake one. Secondary/danger button colors (--vscode-button-secondary*) have no --ui-* tokens; storybook.css reaches for the raw variables and says so.
  • No Loading state panel. Only EmptyState and ErrorState ship; the shared panel skeleton (StatePanel) is internal, so a loading/offline/unauthenticated panel would re-implement it.
  • Token layer only covers shipped components. No list/selection-row tokens (needed by the first real list screen), no spacing/typography/z-index/motion tokens (overlay.css hardcodes z-index: 40, StatusPill.css hardcodes font-size: 11px).
  • --ui-radius-* tokens only adopted by the overlays. IconButton.css (5px), SearchInput.css (4px), StatePanel.css (4px), and StatusPill.css (11px) hardcode radii, so a future host --vscode-cornerRadius-* change would move overlays but not controls.
  • --ui-background assumes sidebar hosting. A webview in an editor tab or panel renders on sideBar-background instead of its host surface.
  • useVscodeTheme reports theme kind only. Switching between two themes of the same kind changes no body attribute, so subscribers never re-render; code reading resolved token values in JS goes stale.
  • No activity cue under prefers-reduced-motion. The indeterminate ProgressBar renders as a full (complete-looking) bar and the Spinner as a static ring.
  • Storybook packages are root-hoisted. src/storybook.tsx and the stories import storybook/test / @storybook/react-vite without declaring them, so stories break on a standalone split the README otherwise designs for.

Prop-level minimalism (controlled-only SearchInput, fixed Spinner/IconButton sizes, no toggle prop) is deliberate for now: the README documents the single-class-specificity CSS override as the escape hatch, and the APIs should grow against real consumers rather than speculatively.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions