You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
ui: Tree suite with native-fidelity look and ARIA keyboard nav #1037
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.
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
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
Activity
linear-code commentedon Jul 15, 2026
ENG-3046
EhabY commentedon Jul 28, 2026
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 totokens.cssalongside the tree components. Minimal set agreed on: hover background, active-selection foreground/background, inactive-selection foreground/background, focus outline (map from the correspondinglist.*VS Code variables).\n\n> 🤖 Comment by Coder Agents on behalf of @EhabYfix(ui): close package-wide gaps from the component library PRs (#1047)
feat(ui): add accessible tree suite
feat(ui): add accessible tree suite
feat(ui): add accessible tree suite
feat(ui): add accessible tree suite
feat(ui): add accessible tree suite
feat(ui): add an accessible VS Code-parity Tree
feat(ui): add an accessible VS Code-parity Tree
feat(ui): add an accessible VS Code-parity Tree
feat(ui): add an accessible VS Code-parity Tree
feat(ui): add an accessible VS Code-parity Tree
feat(ui): add an accessible VS Code-parity Tree
feat(ui): add an accessible VS Code-parity Tree
feat(ui): add an accessible VS Code-parity Tree
EhabY commentedon Sep 8, 2026
Closed by #1065, #1079, #1078