Description
The accordion component doesn't support right-aligned actions (buttons, links) in the header row. In workspace list views, each expandable row needs actions on the right (e.g., comments link, View button), but there's no slot for this.
Without an actions slot to have an expanding list view in our tables, we currently need to build custom expandable list components that duplicate accordion behavior.
<GoabAccordion heading="Client Name">
<span slot="headingcontent">
<GoabBadge type="success" content="Active" />
</span>
<span slot="actions">
<GoabLink leadingIcon="chatbox">5 comments</GoabLink>
<GoabButton type="tertiary" size="compact">View</GoabButton>
</span>
</GoabAccordion>
List view variant
A variant for list view usage where the header has a filled background with hover:
- Default background:
greyscale-100
- Hover background:
greyscale-150
This matches the pattern where each row has a subtle grey header that darkens on hover to indicate interactivity.
Screenshots
Acceptance Criteria
- New
type property with options "normal", "filled"
- Modify Accordion so any interactive options inside
headingContent don't trigger Accordion
- Investigate using
headingContent slot for right aligned actions
- Involve Tom to decide if that's what we want
Description
The accordion component doesn't support right-aligned actions (buttons, links) in the header row. In workspace list views, each expandable row needs actions on the right (e.g., comments link, View button), but there's no slot for this.
Without an actions slot to have an expanding list view in our tables, we currently need to build custom expandable list components that duplicate accordion behavior.
List view variant
A variant for list view usage where the header has a filled background with hover:
greyscale-100greyscale-150This matches the pattern where each row has a subtle grey header that darkens on hover to indicate interactivity.
Screenshots
Acceptance Criteria
typeproperty with options "normal", "filled"headingContentdon't trigger AccordionheadingContentslot for right aligned actions