feat(accordion): align to Fusion DS by nuria1110 · Pull Request #7842 · Sage/carbon

nuria1110 · 2026-03-17T13:32:56Z

Proposed behaviour

Aligns Accordion with Fusion DS and updates styles with fusion-tokens.

Changes icon type depending on variant/size selected.
Sets "medium" size as default.
HeaderSpacing storybook example shows how to achieve 'No padding' variation.

"Standard" variant:

Supports size "small" and "medium"

"Simple" variant:

Renames "subtle" variant to "simple".
Renders "tertiary" next Button.
"Simple" variant supports size "small", "medium" and "large":

Deprecated props:

"full" option in borders
"subtle" option in variant
disableContentPadding
iconType
iconAlign
error
warning
info

Current behaviour

Accordion is not aligned with Fusion DS.

Checklist

QA

Tested in provided StackBlitz sandbox/Storybook
Add new Playwright test coverage if required
Carbon implementation matches Design System/designs
UI Tests GitHub check reviewed if required

Additional context

Testing instructions

tomdavies73 · 2026-03-18T14:21:48Z

+    );
+
+    // temporary wrapper for deprecated validation
+    const renderTitleWithValidation = () => (


suggestion (non-blocking): honestly we could drop this completely and just let the validation related props have no effect. Depends on how nice we want to be with this, could be worth testing the water to see what the actual consumer impact would be.

But if you want to leave this in, It's completely fine and won't be a blocker on my end.

I don't mind, thought I would be nice for this one but hopefully no one is using these anymore. I'll probably just remove to clean it up a bit more.

tomdavies73 · 2026-03-18T14:28:05Z

+          <Button
+            data-role="accordion-simple-button"
+            id={headerId}
+            aria-expanded={isExpanded}


suggestion (non-blocking): in this ternary here when we're rendering the "simple button" or the title container, bothy have a lot of shared props. We could potentially put all shared props between the two in an object like titleProps etc, then spread them onto both instances.

This is just personal preference though, if you prefer to do it like this feel free to leave it.

I personally avoid putting props into objects as I've seen in some legacy components they can get quite messy, I'll probably leave it like this, I also think it helps in terms of readability.

tomdavies73 · 2026-03-18T14:29:29Z

+            role="button"
+            $size={standardSize}
+            $iconAlign={iconAlign}
+            {...headerSpacing}


question: would consumers expect this header spacing to also be applied to the "simple button"?

Depends I guess, I was mainly repurposing this prop to apply the different header spacing variations in the DS so I didn't think it was really necessary to pass it to both variants. Since the title prop also accepts a node if someone really wanted to change the default button spacing they could just pass their own wrapper with spacing.

tomdavies73 · 2026-03-18T14:33:38Z

        >
+          {actualVariant === "simple" && <StyledAccordionLine />}
          <StyledAccordionContent
            role="region"


question: do we need a role of "region" here? I understand you didn't add this and its a legacy implementation, but an aria-live region seems unnecessary as the other aria- attributes we're using should be enough.

I don't think "region" roles come with an aria-live, but I agree that its probably not necessary. I'll double check with the accessibility team.

Yeah mb, got confused

tomdavies73 · 2026-03-18T14:39:52Z

-          isExpanded={isExpanded}
-          maxHeight={contentHeight}
+          $isExpanded={isExpanded}
+          $height={contentHeight}


suggestion: I see we're passing height down here, which we get from a useResizeObserver and a side effect. We then use this height in the styled component file like so

${$height}px;

I think we can avoid doing this by simply making the height of the accordion when expanded fit its content.

height: fit-content;

If this suggestion does work, we can remove this expensive computations which is re-triggered on every re-size event or when the component is expanded.

I'll have another look but I tested quite a few ways to set the height and they all seemed to break the animation in some way - I'll try to see if I can simplify the events anyways.

tomdavies73 · 2026-03-18T14:56:17Z

-  width?: string;
-  /** Sets accordion variant */
-  variant?: "standard" | "subtle";
+interface StyledAccordionContainerProps {


suggestion a similar sort of interface is declared a lot here with various different combinations of the transient $ prefix props you've used. You could benefit from using one shared interface, then just picking from that wherever you need below.

tomdavies73 · 2026-03-18T14:57:24Z

-  /** Sets accordion variant */
-  variant?: "standard" | "subtle";
+interface StyledAccordionContainerProps {
+  $borders?: "default" | "full" | "none";


suggestion (non-blocking): even though these are transient props you could link up their types to be that of the OG interface, therefore if more types are ever added in the actual prop these don't have to be updated manually.

tomdavies73 · 2026-03-18T15:16:36Z

-
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];

-test.describe("should render Accordion component", () => {


suggestion (non-blocking): after a quick glance through this file we could purge even more tests which are not strictly interaction tests (not including the accessibility tests) e.g. asserting the title or subtitle props work could be removed as these are covered in unit tests and chromatic snapshots

tomdavies73 · 2026-03-18T15:20:19Z

-  accordionContent,
-  accordion,
-};
+export default accordionDefaultTitle;


suggestion we no longer use this in accordions pw tests it seems, just seems to be left in action-popover and split-button. You could just replace those instances with a direct data-element check and delete this entire folder.

designerlisa · 2026-04-02T15:41:29Z

Hi @nuria1110 , all looks great, just a few finding here:

Control panel (1) still shows 'right' option in radio buttons
Control panel (2) still has manual icon selection (including down arrow icon)

These controls should be removed (if possible, so dev won't accidently change to a wrong icon like my screenshot using the wrong icon.)
The down arrow should be removed

designerlisa · 2026-04-13T08:42:43Z

Checked with @nuria1110 regarding these findings. Those options are deprecated and will be removed in the future breaking change as per the general approach. @ljemmo are we aligned to proceed as-is?

Once confirmed, I'll move this to QA passed.

ljemmo · 2026-04-13T08:49:45Z

@designerlisa yes thats the expectation. We want to give consuming teams a chance to understand that elements will be removed in the near future and have chance to migrate to alternative properties.

Aligns `Accordion` to Fusion DS. Deprecates props which are no longer relevant and updates styleswith fusion-tokens.

carbonci · 2026-04-16T15:19:37Z

🎉 This PR is included in version 158.42.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

nuria1110 self-assigned this Mar 17, 2026

nuria1110 added Pending Review Pending QA Pending UX QA Squad Front End labels Mar 17, 2026

nuria1110 force-pushed the accordion-audit branch from a8726e3 to 4f31706 Compare March 17, 2026 14:03

tomdavies73 self-requested a review March 18, 2026 13:43

tomdavies73 reviewed Mar 18, 2026

View reviewed changes

mihai-albu-sage previously approved these changes Mar 26, 2026

View reviewed changes

nuria1110 dismissed mihai-albu-sage’s stale review via 3e5f634 March 26, 2026 11:09

nuria1110 force-pushed the accordion-audit branch from 3e5f634 to 41c3e1a Compare March 26, 2026 11:23

mihai-albu-sage previously approved these changes Mar 27, 2026

View reviewed changes

tomdavies73 previously approved these changes Mar 30, 2026

View reviewed changes

nuria1110 added Passed Review and removed Pending Review labels Mar 30, 2026

nuria1110 marked this pull request as ready for review March 30, 2026 08:59

nuria1110 requested review from a team as code owners March 30, 2026 08:59

designerlisa added Passed UX QA and removed Pending UX QA labels Apr 13, 2026

nuria1110 dismissed stale reviews from mihai-albu-sage and tomdavies73 via cb6f2f6 April 15, 2026 10:50

nuria1110 force-pushed the accordion-audit branch from aacde63 to cb6f2f6 Compare April 15, 2026 10:50

nuria1110 marked this pull request as draft April 15, 2026 10:51

nuria1110 force-pushed the accordion-audit branch from cb6f2f6 to c76a9b3 Compare April 15, 2026 10:59

nuria1110 marked this pull request as ready for review April 15, 2026 11:36

paulrobinson88 approved these changes Apr 16, 2026

View reviewed changes

paulrobinson88 added Passed QA and removed Pending QA labels Apr 16, 2026

nuria1110 added 2 commits April 16, 2026 14:41

feat(accordion): align to Fusion DS

bbae09c

Aligns `Accordion` to Fusion DS. Deprecates props which are no longer relevant and updates styleswith fusion-tokens.

chore(tile-select): update internal accordion

735123a

nuria1110 force-pushed the accordion-audit branch from c76a9b3 to 735123a Compare April 16, 2026 13:41

tomdavies73 approved these changes Apr 16, 2026

View reviewed changes

mihai-albu-sage approved these changes Apr 16, 2026

View reviewed changes

nineteen88 approved these changes Apr 16, 2026

View reviewed changes

nuria1110 merged commit b0ab242 into master Apr 16, 2026
28 checks passed

nuria1110 deleted the accordion-audit branch April 16, 2026 14:08

carbonci added the released label Apr 16, 2026


		const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];

		test.describe("should render Accordion component", () => {

Conversation

nuria1110 commented Mar 17, 2026

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nuria1110 Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

designerlisa commented Apr 13, 2026

Uh oh!

ljemmo commented Apr 13, 2026

Uh oh!

Uh oh!

carbonci commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

8 participants

nuria1110 Mar 25, 2026 •

edited

Loading

designerlisa commented Apr 2, 2026 •

edited

Loading