feat(Accordion): expandable panel list - #394
Open
ebellamy-bh wants to merge 2 commits into
Open
Conversation
Generalizes bluehive-marketing's FAQAccordion into a design-system primitive: single/multiple modes, controlled or uncontrolled open state, separated-card and joined-list variants, per-item disable, and heading-wrapped triggers with aria-expanded/aria-controls. Panels animate to natural height via CSS grid rows instead of a max-height clip.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new generic Accordion component to the UI library to replace domain-specific and hand-rolled “expandable panel list” implementations, with Storybook examples and unit coverage.
Changes:
- Introduces
src/components/Accordion/Accordion.tsxwith single/multiple open modes, controlled/uncontrolled state, and two visual variants (separated/joined). - Adds Storybook stories demonstrating common use cases (FAQ, joined variant, multiple mode, controlled state).
- Wires the component into library exports and build entry points (
src/index.ts,tsup.config.ts), plus adds unit tests.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tsup.config.ts | Adds Accordion as an individual component entry for tree-shaking. |
| src/index.ts | Re-exports Accordion from the package root. |
| src/components/Accordion/index.ts | Adds barrel export for Accordion and its public types. |
| src/components/Accordion/Accordion.tsx | Implements the Accordion component, variants, state management, and ARIA wiring. |
| src/components/Accordion/Accordion.test.tsx | Adds unit tests for open/close behavior, controlled state, aria wiring, and disabled items. |
| src/components/Accordion/Accordion.stories.tsx | Adds Storybook stories covering default, joined, multiple, and controlled scenarios. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Deploying ui with
|
| Latest commit: |
4859c3b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1135cac8.ui-6d0.pages.dev |
| Branch Preview URL: | https://feat-accordion.ui-6d0.pages.dev |
…normalization, safelist - Collapsed panels get aria-hidden + inert (CollapsiblePill/ServiceAccordion pattern) so visually-clipped content is unreachable by AT and Tab - type=single normalizes open state to at most one id even when defaultOpenIds/openIds hand it several - grid-rows-[0fr]/[1fr] + transition-[grid-template-rows] added to both Tailwind 3 safelist twins
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.
Adds the generic expandable-panel primitive the library was missing —
ServiceAccordionis domain-specific, and consumers (bluehive-marketing's FAQ lists among them) have been hand-rolling this pattern.What it does
single/multipleopen modes, uncontrolled (defaultOpenIds) or controlled (openIds/onOpenChange), withcollapsiblefor single mode0fr → 1fr) — nomax-heightclipping of long answers (the bug lurking in the hand-rolled versions)headingLevel), witharia-expanded/aria-controlsand labelled panel regions; per-itemdisabledseparatedcards with gaps, or ajoinedbordered list with dividersScreenshots
Provenance
Generalizes
bluehive-marketing/src/components/ui/FAQAccordion.tsx(FAQ lists on the marketing site) into a data-driven primitive with modes, variants, and controlled state.Testing
typecheck/lint/format/rtl:scanclean; combined batch suite 622/622