Skip to content

feat(TreeList): customizable expand/collapse indicator icon#4228

Draft
AKnassa wants to merge 2 commits into
facebook:mainfrom
AKnassa:ak-4131-treelist-expand-icon
Draft

feat(TreeList): customizable expand/collapse indicator icon#4228
AKnassa wants to merge 2 commits into
facebook:mainfrom
AKnassa:ak-4131-treelist-expand-icon

Conversation

@AKnassa

@AKnassa AKnassa commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Closes #4131

What this does

Lets a TreeList choose 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:

<TreeList
  items={items}
  renderExpandIcon={({isExpanded, hasChildren}) =>
    hasChildren
      ? <Icon icon={isExpanded ? FolderOpenIcon : FolderIcon} />
      : <Icon icon={DocumentIcon} />
  }
/>
  • Called per item with {isExpanded, hasChildren, isDisabled} (exported as TreeListExpandIconState). Leaves get the call too, so file trees can fill the indicator slot — rows with a leaf icon align to the indicator column.
  • Custom icons swap per state; the chevron's rotation animation is suppressed for them, per the issue's note (an open folder shouldn't also rotate).
  • Returning nothing renderable falls back safely: default chevron for parents, no indicator (and the usual alignment offset) for leaves.
  • The toggle's accessibility wiring is untouched regardless of the icon: aria-expanded, localized aria-label, roving tabindex, data-tree-toggle.
  • Without the prop, rendering is unchanged.

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

  • 23 new tests (TreeList suite 48 → 71): red-first for the feature, plus edge cases — disabled parents, children: [], isExpanded on 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.
  • Full suite green (core+lab 5090, cli 2178); core/docs/storybook typecheck and lint clean.
  • Docs updated (en/zh/dense) and rendering via astryx component TreeList --dense; changeset included.

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
@vercel

vercel Bot commented Jul 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
astryx Ready Ready Preview, Comment Jul 23, 2026 3:00am

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Jul 23, 2026
@github-actions github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge needs:design-review Affects visuals — Design should review labels Jul 23, 2026
@github-actions

Copy link
Copy Markdown
Contributor

PR Analysis Report

Modified Components

TreeList
Metric Before After Delta
Bundle Size (ESM) N/A N/A N/A
Lines of Code N/A 757 -
Complexity N/A Very High (80) -

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@astryxdesign/core N/A 4.7KB 0B

Accessibility Audit

Status: No accessibility violations detected.


Generated by PR Enrichment workflow | View full report

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

Labels

CLA Signed This label is managed by the Meta Open Source bot. community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge needs:design-review Affects visuals — Design should review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TreeList: allow customizing the expand/collapse indicator icon (e.g. folder open/closed for file trees)

1 participant