Skip to content

ui: Tree suite with native-fidelity look and ARIA keyboard nav #1037

Closed

Description

@EhabY

The core of the library — a tree that looks and behaves like the native VS Code tree. Builds on the @repo/ui scaffold and semantic theme boundary established in DEVEX-618.

Scope

  • Tree, TreeItem, TreeGroup, TreeIndentGuide
  • useTreeKeyboardNav: roving tabindex, Arrow keys, Home/End, Enter/Space, type-ahead
  • ARIA tree roles/attributes, selection model, chevrons, indent guides, hover-revealed trailing action slot (for inline row actions)

Out of scope

  • Virtualization (API designed so @tanstack/react-virtual can drop in later without consumer changes)
  • Workspace-specific row content

VS Code fidelity

  • Match the native VS Code tree look and behavior using native HTML elements styled to match VS Code's own controls, using the VS Code Elements implementation as a design reference without importing it
  • Tree row geometry, chevron, indent guide, and selection visuals consistent with VS Code defaults
  • Minimize custom styles — rely on inherited values from the WebViews wherever possible; component CSS is inherit-first and never uses line-height/vertical-padding math
  • tokens.css maps VS Code variables to semantic --ui-* tokens — add any new tree-specific tokens here (create the file if it doesn't already exist; conflicts will be resolved later)
  • control.css provides the shared flex-centering geometry base — add tree row geometry here if applicable (create the file if it doesn't already exist; conflicts will be resolved later)
  • Support high contrast through VS Code contrast variables, plus forced-colors and prefers-reduced-motion media handling

Library boundary (NPM-ready)

  • No @repo/* or relative cross-package imports from packages/ui (enforced by ESLint)
  • React stays a peer dependency; no new runtime dependencies for the tree itself
  • Shared internals reached through package.json subpath imports

Storybook

  • One .stories.tsx per public component (Tree, TreeItem, TreeGroup, TreeIndentGuide) with a combined matrix story covering nesting, groups, selection, disabled, and action slot
  • Each matrix story snapshotted in Light, Dark, High Contrast, and High Contrast Light via Chromatic
  • Interaction assertions via play functions; detailed behavior stays in Vitest

Acceptance

  • Side-by-side eyeball check against the native tree across the four theme families
  • Focused Testing Library/Vitest tests covering keyboard nav behaviors (roving tabindex, Arrow keys, Home/End, Enter/Space, type-ahead)
  • Validated with type checking, linting, formatting, UI tests, Storybook CI build, production build, and git diff --check

Activity

  1. added theissue type on Jul 15, 2026
  2. linear-code commented on Jul 15, 2026

    @linear-code
  3. reopened this on Jul 15, 2026
  4. assigned and unassigned on Jul 16, 2026
  5. EhabY commented on Jul 28, 2026

    @EhabY
    CollaboratorAuthor

    Follow-up from #1046: list/selection-row tokens were deliberately deferred there because no list consumer exists yet. When the Tree suite lands, add the semantic --ui-list-* tokens to tokens.css alongside the tree components. Minimal set agreed on: hover background, active-selection foreground/background, inactive-selection foreground/background, focus outline (map from the corresponding list.* VS Code variables).\n\n> 🤖 Comment by Coder Agents on behalf of @EhabY

  6. self-assigned this
    on Jul 29, 2026
  7. EhabY commented on Sep 8, 2026

    @EhabY
    CollaboratorAuthor

    Closed by #1065, #1079, #1078

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions