feat(Collapsible): let the chevron lead the trigger - #5993
Open
ernestt wants to merge 2 commits into
Open
Conversation
Collapsible has always drawn its chevron as a trailing indicator. The leading disclosure arrow — the tree and file-browser convention, where the labels form a column the arrows sit in front of — was only available from TreeList and the Table row-expansion column, so a card or accordion header had no way to match them. `chevronPlacement` adds that side. The default is unchanged. The side picks the glyph as well as the order. A trailing chevron points down and flips up; a leading one points into the row and turns down, so `start` swaps chevronDown for chevronRight and rotates a quarter turn rather than a half, mirrored in RTL the way TreeList already does it. CollapsibleGroup carries it through the presentation context that already holds hasDividers and density, because a list whose arrows change sides row to row reads as a bug. An item still overrides its group, and a collapsible nested in an item's body keeps its own default. A leading arrow also makes the label fill the row: the trigger is space-between, so with nothing after the label to absorb the free space it would otherwise be thrown to the far edge, leaving a gap behind the arrow. Co-authored-by: Cursor <cursoragent@cursor.com>
ernestt
requested review from
cixzhang,
imdreamrunner and
josephfarina
as code owners
September 3, 2026 21:49
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
github-actions
Bot
added
the
needs:code-review
Contributor
PR Analysis Report
Generated by PR Enrichment workflow | View current CI run |
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
1 participant
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.
What
CollapsibleandCollapsibleGrouptake achevronPlacementprop. The default,'end', is exactly what ships today;'start'moves the disclosure arrow ahead of the label.The leading arrow is the tree and file-browser convention — the one you want when a column of labels should line up behind the arrows. Until now only
TreeListand the Table row-expansion column could draw one, so a card or accordion header had no way to match them.Why the glyph changes with the side
A trailing chevron points down and flips up. A leading one points into the row and turns down. Rotating
chevronDowna quarter turn would leave the closed state pointing the wrong way, so'start'swaps inchevronRightand rotates 0° → 90°, mirrored in RTL. That is whatTreeListalready does, so the two now agree.Why the group carries it
A list whose arrows change sides row to row reads as a bug, so
CollapsibleGrouppasses the placement down through the same presentation context that already carrieshasDividersanddensity. An individual item still overrides its group, and a collapsible nested inside an item's body keeps its own default rather than inheriting.One layout consequence
A leading arrow also makes the trigger label fill the row. The trigger is
space-between: with a trailing arrow that rule is what separates the two, but with the arrow leading there is no third child to absorb the free space, so an unfilled label would be thrown to the opposite edge with a gap behind the arrow. Filling it also gives a trigger that spreads its own contents (hAlign="between"and the like) the whole row to spread across — which is what the screenshots above rely on.This overlaps with #5933, which makes the label fill unconditionally. The two are independent and either order merges; if #5933 lands first, the conditional style here becomes redundant and the rebase drops it.
Test plan
Collapsibletests pass, 7 of them new: DOM order for each side, that the glyph changes with the side rather than only the position, group inheritance, item-over-group override, no leak into a nested collapsible, and that the label fills the row when the arrow leads.tsc --noEmitandeslintclean onpackages/core/src/Collapsible.table-groupedtemplate withchevronPlacement="start"applied locally, light and dark.