feat(#3636) Accordion actions and List View Variant by willcodeforcoffee · Pull Request #3859 · GovAlta/ui-components

willcodeforcoffee · 2026-04-21T23:35:13Z

Before (the change)

Accordions only had one version, and could not include an Actions slot for the header.

After (the change)

Filled Accordion

Accordion with actions slot contents

This has a badge and button:

Clicking the button will not cause the accordion to close
This is different from the headingcontent slot in that headingcontent is left aligned, while actions is right aligned

This pr closes #3636.

Make sure that you've checked the boxes below before you submit the PR

I have read and followed the setup steps
I have created necessary unit tests
I have tested the functionality in both React and Angular.

Steps needed to test

See http://localhost:4200/features/3636 for various examples.

test the type=filled attribute
test the actions slot

netlify · 2026-04-21T23:35:17Z

✅ Deploy Preview for benji-docs-previews ready!

Name	Link
🔨 Latest commit	`b8339ab`
🔍 Latest deploy log	https://app.netlify.com/projects/benji-docs-previews/deploys/69e978d931266e0008f7f59d
😎 Deploy Preview	https://deploy-preview-3859--benji-docs-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2026-04-28T03:10:50Z

PR Preview Action v1.8.1
🚀 View preview at https://GovAlta.github.io/ui-components/pr-preview-angular/pr-3859/
Built to branch `gh-pages` at 2026-05-05 19:18 UTC. Preview will be ready when the GitHub Pages deployment is complete.

github-actions · 2026-04-28T03:11:03Z

Preview links

Target	URL
Docs	https://govalta.github.io/ui-components/pr-preview/pr-3859/
React playground	https://govalta.github.io/ui-components/pr-preview-react/pr-3859/
Angular playground	https://govalta.github.io/ui-components/pr-preview-angular/pr-3859/

Built from commit beebf22. Previews are removed automatically when this PR closes.

Copilot

Pull request overview

Adds an actions slot to the Accordion header (right-aligned, non-toggling interactions) and introduces a “filled / list view” variant via a new type property, with wrapper + docs/demo updates across Web Components, React, and Angular.

Changes:

Add actions slot support in the web component and expose it through React/Angular wrappers.
Add a new Accordion type variant (filled) with filled header styling.
Update docs, API metadata, and PR demo routes; add/adjust unit and browser tests.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
libs/web-components/src/components/accordion/Accordion.svelte	Adds `type` variant + `actions` slot container and styles.
libs/web-components/src/components/accordion/AccordionWithActionsWrapper.test.svelte	Test wrapper for actions-slot interaction scenarios.
libs/web-components/src/components/accordion/Accordion.spec.ts	Adds actions-related tests (needs adjustment).
libs/common/src/lib/common.ts	Introduces shared `GoabAccordionType`.
libs/react-components/src/lib/accordion/accordion.tsx	Exposes `actions` and `type` props and maps to WC slots/attrs.
libs/react-components/src/lib/accordion/accordion.spec.tsx	Adds unit tests for `type` attribute and `actions` slot rendering.
libs/react-components/specs/accordion.browser.spec.tsx	Adds browser tests ensuring actions clicks don’t toggle and do fire onClick.
libs/angular-components/src/lib/components/accordion/accordion.ts	Adds `[attr.type]` and `actions` TemplateRef support.
libs/angular-components/src/lib/components/accordion/accordion.spec.ts	Adds tests for `type` attribute and `actions` slot rendering.
docs/src/data/configurations/accordion.ts	Adds filled/actions examples to accordion configurations.
docs/generated/component-apis/accordion.json	Updates generated API to include `type` and `actions` slot.
apps/prs/react/src/routes/features/feat3636.tsx	Adds a React feature demo route for filled + actions usage.
apps/prs/react/src/app/routes/features/feat3636.route.ts	Registers the React feature demo route.
apps/prs/react/src/routes/docs/accordion/accordion.tsx	Adds filled/actions examples to the React docs route.
apps/prs/angular/src/routes/features/feat3636/feat3636.route.json	Registers the Angular feature demo route metadata.
apps/prs/angular/src/routes/features/feat3636/feat3636.component.ts	Adds Angular feature demo component shell.
apps/prs/angular/src/routes/features/feat3636/feat3636.component.html	Adds Angular feature demo markup for filled/actions examples.
apps/prs/angular/src/routes/docs/accordion/accordion.component.html	Adds filled/actions examples to the Angular docs route.

Comments suppressed due to low confidence (1)

libs/web-components/src/components/accordion/Accordion.svelte:432

summary.filled:hover is overridden by the later summary:hover rule (same specificity, later wins), so the filled variant will never get its intended hover background. Move the filled hover rule below summary:hover, increase specificity, or switch to CSS variables so the filled variant can override the hover color cleanly.

  summary.filled:hover {
    background-color: var(
      --goa-accordion-color-filled-bg-heading-hover,
      var(--goa-color-greyscale-150)
    );
  }

  summary.iconRight {
    padding: var(--goa-accordion-padding-heading-icon-right);
  }

  summary:hover {
    background-color: var(--goa-accordion-color-bg-heading-hover);
    border: var(--goa-accordion-border-hover, var(--goa-accordion-border));
    color: var(--goa-accordion-color-heading-hover);
  }

bdfranck

I looked at the changes...

Action slot

✅ I can see an actions slot in the Svelte component
✅ I can see the actions reactNode in the React wrapper
✅ The React wrapper only renders the actions slot when the actions property is defined
✅ I can see the actions templateRef in the Angular wrapper
✅ The Angular wrapper only renders the actions slow with the actions property is defined

Filled heading

✅ I can see a property for setting the heading type
✅ I see the default is "normal"
✅ I see the React wrapper has an optional property
✅ I see the Angular wrapper has an optional property

Looks great! I left a couple minor comments.

bdfranck · 2026-05-01T18:42:31Z

      "default": "left",
      "description": "Sets the position of the expand/collapse icon."
+    },
+    {


We'll need to re-generate these files later once this PR is merged: #3754

bdfranck · 2026-05-01T18:44:44Z

  /** Sets the position of the expand/collapse icon. */
  export let iconposition: IconPosition = "left";
+  /** A variant for list view usage where the header has a filled background */
+  export let type: AccordionType = "normal";


Did you consider HeadingType as a name? I'm leaning towards it because it only impacts the heading and we already have HeadingSize.

bdfranck · 2026-05-01T18:48:43Z

  export let ml: Spacing = null;
  /** Sets the position of the expand/collapse icon. */
  export let iconposition: IconPosition = "left";
+  /** A variant for list view usage where the header has a filled background */


Suggested change

/** A variant for list view usage where the header has a filled background */

/** Sets the accordion heading style. */

We can simplify this description to match the wrappers. I don't think developers need to know about the list view origin.

bdfranck · 2026-05-01T18:54:53Z

+    display: flex;
+    align-items: center;
+    align-self: center;
+    padding-left: 0.5rem;


Suggested change

padding-left: 0.5rem;

padding-left: var(--goa-space-xs);

There's an opportunity to use a spacing token here.

bdfranck · 2026-05-01T19:08:23Z

+    );
+  }
+
+  summary.filled:hover {


This wasn't in the AC but I noticed a couple styling differences between this and the workspace list view that inspired the ticket:

The workspace border doesn't change on hover but the accordion border does

When the heading wraps, the workspace chevron icon is centre aligned while the accordion is top aligned.

My initial instinct is to keep the border but centre align the chevron. @twjeffery Do you have any thoughts here?

I'm agreed with @bdfranck, keep the border on hover and centre align the chevron.

willcodeforcoffee · 2026-05-04T23:06:54Z

I've addressed feedback from including:

renamed type to headingType, and named web component attribute to heading-type
used the same JSDoc description for headingType at all layers
updated spacing to use design-token (--goa-space-xs)

I have not changed the border or icon alignment yet.

willcodeforcoffee self-assigned this Apr 21, 2026

willcodeforcoffee added 2.0 P2 Priority 2 (should have): Improves completeness and reduces the post-launch support load. labels Apr 21, 2026

willcodeforcoffee force-pushed the eric/3636-accordion-actions-slot branch from 87a05c8 to b8339ab Compare April 23, 2026 01:41

willcodeforcoffee mentioned this pull request Apr 24, 2026

chore(#3636): Added the 'filled' Accordion header style GovAlta/design-tokens#155

Merged

willcodeforcoffee force-pushed the eric/3636-accordion-actions-slot branch from 5243090 to 2d51e3c Compare April 28, 2026 03:08

willcodeforcoffee force-pushed the eric/3636-accordion-actions-slot branch 2 times, most recently from 71b277d to f95fd71 Compare April 29, 2026 16:43

willcodeforcoffee requested a review from Copilot April 29, 2026 19:33

willcodeforcoffee marked this pull request as ready for review April 29, 2026 19:33

Copilot started reviewing on behalf of willcodeforcoffee April 29, 2026 19:34 View session

Copilot AI reviewed Apr 29, 2026

View reviewed changes

willcodeforcoffee force-pushed the eric/3636-accordion-actions-slot branch 3 times, most recently from 45f7e1f to 8ea2399 Compare April 30, 2026 16:09

willcodeforcoffee requested review from ArakTaiRoth and bdfranck April 30, 2026 22:08

bdfranck reviewed May 1, 2026

View reviewed changes

willcodeforcoffee force-pushed the eric/3636-accordion-actions-slot branch 3 times, most recently from 1f5d74b to 407ebec Compare May 4, 2026 22:30

ArakTaiRoth deleted the branch dev May 5, 2026 18:28

ArakTaiRoth closed this May 5, 2026

willcodeforcoffee reopened this May 5, 2026

chore(#3636): accordion actions slot and filled version

beebf22

willcodeforcoffee force-pushed the eric/3636-accordion-actions-slot branch from 407ebec to beebf22 Compare May 5, 2026 19:14

	/** A variant for list view usage where the header has a filled background */
	/** Sets the accordion heading style. */

Conversation

willcodeforcoffee commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before (the change)

After (the change)

Make sure that you've checked the boxes below before you submit the PR

Steps needed to test

Uh oh!

netlify Bot commented Apr 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for benji-docs-previews ready!

Uh oh!

github-actions Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-05-05 19:18 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

github-actions Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Preview links

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bdfranck left a comment

Choose a reason for hiding this comment

Action slot

Filled heading

Uh oh!

bdfranck May 1, 2026

Choose a reason for hiding this comment

Uh oh!

bdfranck May 1, 2026

Choose a reason for hiding this comment

Uh oh!

bdfranck May 1, 2026

Choose a reason for hiding this comment

Uh oh!

bdfranck May 1, 2026

Choose a reason for hiding this comment

Uh oh!

bdfranck May 1, 2026

Choose a reason for hiding this comment

Uh oh!

twjeffery May 5, 2026

Choose a reason for hiding this comment

Uh oh!

willcodeforcoffee commented May 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

willcodeforcoffee commented Apr 21, 2026 •

edited

Loading

netlify Bot commented Apr 21, 2026 •

edited

Loading

github-actions Bot commented Apr 28, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-05-05 19:18 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot commented Apr 28, 2026 •

edited

Loading