Skip to content

Accordion: Add actions slot and list view variant #3636

@twjeffery

Description

@twjeffery

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

Image

Acceptance Criteria

  1. New type property with options "normal", "filled"
  2. Modify Accordion so any interactive options inside headingContent don't trigger Accordion
  3. Investigate using headingContent slot for right aligned actions
    • Involve Tom to decide if that's what we want

Metadata

Metadata

Assignees

No one assigned

    Labels

    2.0AccordionP2Priority 2 (should have): Improves completeness and reduces the post-launch support load.

    Projects

    Status

    🔖 Ready

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions