Add Accordion component#2
Merged
Merged
Conversation
Build the Accordion design-system component on @base-ui/react/accordion (Root/Item/Header/Trigger/Panel) with an ergonomic Accordion / AccordionItem / AccordionTrigger / AccordionPanel API. - Trigger row mirrors Figma node 1238-3101: border-subtle divider, p-3 padding, gap-2, text-14 medium text-primary label, transparent surface with transparent-hover, icon-placeholder ChevronDown that rotates on data-[panel-open]. - Panel animates via Base UI --accordion-panel-height; relies on Base UI a11y (aria-expanded / aria-controls / region). - No className/style props (Omit from Base UI types); semantic tokens only, no hex. - Stories: Default, MultipleItems showcase, and an Interaction play test asserting expand/collapse and aria-expanded.
|
📚 Storybook preview: https://pr-2-propel-storybook.vamsi-906.workers.dev |
There was a problem hiding this comment.
Pull request overview
Adds a new Accordion production component to @plane/propel, implemented as ergonomic compound parts on top of @base-ui/react/accordion, and introduces Storybook stories (including a play interaction test) to demonstrate and verify behavior.
Changes:
- Added
Accordion,AccordionItem,AccordionTrigger, andAccordionPanelwrappers around Base UI primitives with Propel token-based styling. - Added Storybook stories under
Components/Accordion, including an interaction play test for expand/collapse + ARIA behavior.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/propel/src/components/accordion/index.tsx | New Accordion compound component wrappers and styling. |
| packages/propel/src/components/accordion/accordion.stories.tsx | New Storybook stories and interaction test for the Accordion. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…bcomponents The chevron sat inside AccordionTrigger but used data-[panel-open], which Base UI sets on the trigger itself, not the icon — so it never matched. Add `group` to the trigger and switch the chevron to `group-data-[panel-open]:rotate-180` so it rotates when the panel is open. Also register AccordionItem/Trigger/Panel as story subcomponents to match the avatar-group compound-component pattern.
Collaborator
|
chevron icon colour should be icon-secondary |
Contributor
Author
|
@bhaveshraja chevron icon now uses text-icon-secondary. c1267c6 |
bhaveshraja
approved these changes
Jun 8, 2026
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.
Accordion
A new production component for
@plane/propel, built on@base-ui/react/accordion(Root / Item / Header / Trigger / Panel).API
Ergonomic compound parts:
Accordion: wrapsAccordion.Root. Single-open by default;multipleallows several panels open. Drive withdefaultValue(uncontrolled) orvalue+onValueChange(controlled).AccordionItem: pairs a trigger with a panel (valueidentifies it).AccordionTrigger: clickable header; renders the label plus aChevronDownthat rotates on open. Base UI setsaria-expanded/aria-controls.AccordionPanel: collapsible content region; animates via Base UI's--accordion-panel-height.No
className/styleprops (omitted from the Base UI prop types). No styling axes; Accordion is structural and Figma only defines collapsed/hover/expanded state (handled by Base UI), not variants.Figma
From node 1238-3101 (file
ioN74zM1xMGbcPemsxs4J1):border/subtledivider,spacing/3(p-3) padding,spacing/2(gap-2),text/14mediumtext/primarylabel,background/layer/transparentsurface going tobackground/layer/transparent-hoveron hover, and anicon/placeholderchevron. Mapped to propel semantic-token utilities (no arbitrary hex).Stories
Components/Accordion, taggedai-generated:Default(interactive),MultipleItemsshowcase, and anInteractionplay test that clicks a trigger to expand (assertsaria-expandedflips,aria-controls/regionappear) and clicks again to collapse.Verification
vp check: pass (format, lint, types clean)vp run -r test: 15/15 pass (Playwright chromium)vp run -r build: attw No problems found (the two publint./hooks/*warnings are pre-existing and unrelated)