feat(core): add the Accordion component - #2
Merged
Merged
Conversation
A stack of disclosure rows in the same token-driven shape as the rest of the
set. `contained` groups the rows on one surface and divides them; `separated`
gives each its own outline. `exclusive` opens one row at a time, and a row can
be disabled.
Underneath it is `<details>` and `<summary>`, so the keyboard, the screen reader
and find-in-page behaviour are the platform's rather than ours - and `exclusive`
is nothing but the shared `name` attribute, so no state tracks which row is
open.
Four decisions worth writing down:
- Rows arrive as an `items` array rather than as children. A compound
`<Accordion.Item>` would have to read the group's variant and its `exclusive`
group name out of React context on every render, and the package README
advertises that nothing here does a context lookup in the render path. That
paragraph is extended rather than quietly falsified.
- The chevron mirrors the element's own open state through `onToggle` instead of
turning in CSS. `stylex.when.ancestor('[open]')` compiles to
`:where(.marker[open] *)`, which reaches every chevron under an open row and
would rotate the closed ones of a nested Accordion with it.
- `contained` draws its dividers by painting the group in the border token and
letting a `gap` of the same width show through between opaque rows. No
`:first-child` rule to exempt the first one, and a theme that thickens its
outlines thickens the dividers to match.
- A disabled row takes the pointer away from its summary and drops it out of the
tab order rather than cancelling the click. Enter on a focused summary *is* a
click, so both routes had to go; the `not-allowed` cursor sits on the row,
since a summary that ignores the pointer cannot set one.
The example app gains an Accordion section showing both variants, the exclusive
group and the disabled row.
`changeset status --since=origin/main` needs a merge base, and `actions/checkout` clones one commit deep by default: the ref does not exist on the runner and neither does the history behind it. The step failed on the first PR to reach it - PR #1 was the release PR, which the `if:` skips - with "Failed to find where HEAD diverged from origin/main". release.yml already asks for `fetch-depth: 0` for the same reason. This is the copy of that line ci.yml should have had.
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.
A stack of disclosure rows in the same token-driven shape as the rest of the set.
containedgroups the rows on one surface and divides them;separatedgives each its own outline.exclusiveopens one row at a time, and a row can be disabled.Underneath it is
<details>and<summary>, so the keyboard, the screen reader and find-in-page behaviour are the platform's rather than ours - andexclusiveis nothing but the sharednameattribute, so no state tracks which row is open.Four decisions worth writing down:
itemsarray rather than as children. A compound<Accordion.Item>would have to read the group's variant and itsexclusivegroup name out of React context on every render, and the package README advertises that nothing here does a context lookup in the render path. That paragraph is extended rather than quietly falsified.onToggleinstead of turning in CSS.stylex.when.ancestor('[open]')compiles to:where(.marker[open] *), which reaches every chevron under an open row and would rotate the closed ones of a nested Accordion with it.containeddraws its dividers by painting the group in the border token and letting agapof the same width show through between opaque rows. No:first-childrule to exempt the first one, and a theme that thickens its outlines thickens the dividers to match.not-allowedcursor sits on the row, since a summary that ignores the pointer cannot set one.The example app gains an Accordion section showing both variants, the exclusive group and the disabled row.