Summary
Update `` to implement the PatternFly v6 Accordion component.
Expandable content panels that allow users to show and hide sections of related content.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
`` |
Exists |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
`` |
Exists |
Sub-components
- `` - Toggle header for each panel
- `` - Expandable content area
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` Accordion
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
- React `isBordered` - adds border around each panel; map to `bordered` attribute
- React `displaySize`: `default`, `lg` - larger toggle text; map to `size` attribute
- React `headingLevel`: `h1`-`h6` - sets heading element for toggle buttons; map to `heading-level`
- React `asDefinitionList` - renders as `
`/`- `/`
- ` instead of `
`/`<h*>`/`
` - web component approach: use slots and reflect structure; probably skip this variant
- Single-expand vs multi-expand: React default is multi (all can be open); v5 element has `single` mode - verify v6
- `AccordionItem` wraps `AccordionToggle` + `AccordionContent` - consider if `pf-v6-accordion-item` sub-element is needed
- ARIA: toggle button has `aria-expanded`, `aria-controls` pointing to panel; panel has `id`
Checklist
Rename
Implementation
Demos
Tests
Reviews
Ship
Summary
Update `` to implement the PatternFly v6 Accordion component.
Expandable content panels that allow users to show and hide sections of related content.
Prior Art
Sub-components
Requirements
Element-specific considerations
`/`- `/`
- ` instead of `
`/`<h*>`/`` - web component approach: use slots and reflect structure; probably skip this variant
Checklist
Rename
Implementation
Demos
Tests
Reviews
Ship