feat(ui): add accessible tree suite - #1065
Draft
EhabY wants to merge 3 commits into
Draft
Conversation
EhabY
force-pushed
the
feat/ui-tree-suite
branch
from
August 5, 2026 14:11
510e466 to
309f05d
Compare
…uite Drop the explorer variant: collapsing leaf twisties belongs to icon themes without folder icons, and combined with folder icons it ran the active indent guide through leaf file icons. Every row now keeps the native gutter, matching the VS Code 1.131 default explorer. Simplify the tree store: items subscribe to the store directly through per-item snapshots instead of a per-item observer registry, a single registration path replaces registerElement plus the ready flag, and the ancestor-path cache goes away. Share the interactive-target selector with TreeItem. Trim the stories to variations that differ: stable snapshots stay only where row geometry or focus behavior diverges from Modern, TreeItem gains collapsed-branch coverage, and the Tree play reveals the row action through selection so it no longer depends on window focus.
The native default Explorer renders folders without icons and aligns leaf file icons with the branch twisties, so bring back variant="explorer" for that mode and document when it applies: branch rows with icons keep the default gutter, or leaf icons would sit on the indent guides. The Tree story now mirrors the native default Explorer with chevron-only folders.
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.
Summary
Tree,TreeItem,TreeGroup, andTreeIndentGuidecomponent suiteuseSyncExternalStoreregistry with batched reconciliation and per-item snapshotsStack
feat/ui-package-gapsCloses #1037
Validation
pnpm test:webview— 357 tests passedpnpm typecheckNODE_OPTIONS=--max-old-space-size=4096 pnpm lintpnpm format:checkpnpm storybook:cipnpm buildgit diff --checkPixel snapshots were not submitted locally because
PIXEL_KEYwas unavailable.Implementation plan and decisions
API and state
Tree > TreeItem > TreeGroup > TreeItemitemIdandtextValueTree.selectedItemIdandTree.onSelectedItemChangeTreeItem.expandedandTreeItem.onExpandedChangeBehavior
Styling
Tree.csscontains shared structure and statesTree.modern.csscontains the Modern UI row inset, radius, and keyboard-only focus behaviorTree.stable.csscontains stable focus behavior; edge-to-edge square geometry follows from excluding Modern rulesdata-ui-style="stable"selects stable stylingCoverage
This PR was generated with Coder Agents.
Native tree visual audit
abstractTree.tsindent math, injected list styles,.style-overrideModern rules) and verified against a livecode serve-webexplorer DOM: Modern rows are inset 4px with a 4px radius, guides sit at 16px + 8px per level, active guide owners derive from focus and selection, and inactive guides show only on hovervariant="explorer"collapses the unused leaf gutter so file icons align with branch twisties, matching the native default Explorer whose folders render without icons — mixing folder icons with the collapsed gutter was what ran the active indent guide through leaf file iconsregisterElementplus thereadyflag, the ancestor-path cache is gone, and the interactive-target selector is shared withTreeItemTree,TreeItem), added collapsed-branch coverage, and made the Tree play reveal the row action through selection so it no longer depends on the window holding OS focus