feat(TreeList): customizable expand/collapse indicator icon#4228
Draft
AKnassa wants to merge 2 commits into
Draft
feat(TreeList): customizable expand/collapse indicator icon#4228AKnassa wants to merge 2 commits into
AKnassa wants to merge 2 commits into
Conversation
Add a tree-level render prop to customize the expand/collapse
indicator. Called per item with {isExpanded, hasChildren, isDisabled}
so a file tree can show closed/open folder icons and a file icon in
the indicator slot of leaves. Custom icons swap per state (the chevron
rotation animation is suppressed); non-renderable returns fall back to
the default chevron for parents and to no indicator for leaves. The
toggle's a11y wiring (aria-expanded, aria-label, roving tabindex,
data-tree-toggle) is unchanged regardless of the icon.
Closes facebook#4131
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
requested review from
cvkxx,
ernestt,
kentonquatman and
rubyycheung
July 23, 2026 02:25
Contributor
PR Analysis ReportModified ComponentsTreeList
Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | View full report |
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.
Closes #4131
What this does
Lets a
TreeListchoose its own expand/collapse icons instead of the built-in rotating chevron — so a file tree can show a closed folder that becomes an open folder, with file icons on the rows that can't expand.How
One new tree-level prop, with the shape proposed in the issue:
{isExpanded, hasChildren, isDisabled}(exported asTreeListExpandIconState). Leaves get the call too, so file trees can fill the indicator slot — rows with a leaf icon align to the indicator column.aria-expanded, localizedaria-label, roving tabindex,data-tree-toggle.Per-item overrides stay out, as the issue suggests ("could come later").
How to see it
Storybook → Core/TreeList → Custom Expand Icons (screenshots incoming: light/dark, toggle open/close swap, and the default-chevron stories for before/after comparison).
Proof
children: [],isExpandedon leaves, Enter routing on clickable parents, string/empty returns, deep nesting, render-prop swap on re-render, ArrowLeft collapse. Six deliberate mutations each fail exactly one test.astryx component TreeList --dense; changeset included.