feat(card): align component with fusion design system - FE-7266 by DipperTheDan · Pull Request #8073 · Sage/carbon

DipperTheDan · 2026-07-10T13:11:31Z

Proposed behaviour

Align component with Fusion Design System.

Current behaviour

Component is out of date with the latest Fusion Design System.

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

N/A

Testing instructions

Component should match designs and specs provided in the ticket.

DipperTheDan · 2026-07-10T13:14:06Z

 }

 const paddingSizes = {
+  none: "var(--spacing000)",


I have used the old DS tokens here to conform with the other spacing values in the declaration. This component is being deprecated too.

Copilot

Warning

Copilot's review of this pull request may be incomplete because some of the changed files are excluded by your Copilot content exclusion settings. See Excluding content from Copilot for details.

Pull request overview

Aligns the Card component implementation, styles, stories, and tests with the Fusion Design System by moving to new spacing/radius/depth tokens, introducing new API surface (cardType, header, draggableAccessory), and deprecating legacy subcomponents/props.

Changes:

Updated Card styling to use Fusion tokens (new spacing options, new roundness tokens/aliases, new depth tokens, updated content border-radius behavior with header/footer).
Added/updated APIs and examples (cardType, header, draggableAccessory, draggable layout row), and deprecated legacy pieces (CardRow, CardColumn, CardFooter variant, custom boxShadow props).
Refreshed Storybook stories/MDX docs and unit/Playwright tests to match the new design + behavior.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/components/card/components.test-pw.tsx	Updated Playwright component examples to new Card composition patterns (Box + Typography, new Button import).
src/components/card/card.test.tsx	Updated and expanded unit tests for new roundness tokens, draggable accessory, cardType shadows, extra-small spacing behavior.
src/components/card/card.style.ts	Migrated Card styling to Fusion tokens; added header-aware border radius logic and a draggable row style.
src/components/card/card.stories.tsx	Reworked stories to match new layout and tokens; added new stories (without footer, spacing variants, draggable).
src/components/card/card.mdx	Updated docs to reference new/added stories and updated roundness/draggable documentation.
src/components/card/card.config.ts	Expanded allowed spacing values to include `none` and `extra-small`.
src/components/card/card.component.tsx	Added `cardType`, `header`, `draggableAccessory`; updated defaults and draggable rendering structure.
src/components/card/card-test.stories.tsx	Updated test stories and added focused-state stories for Chromatic coverage.
src/components/card/card-row/card-row.test.tsx	Updated strict-context error message expectation.
src/components/card/card-row/card-row.style.ts	Added support for `none` and `extra-small` spacing.
src/components/card/card-row/card-row.component.tsx	Marked `CardRow` as deprecated.
src/components/card/card-footer/card-footer.test.tsx	Updated strict-context error message expectation and roundness expectations.
src/components/card/card-footer/card-footer.style.ts	Updated margin sizing and border-radius tokens to Fusion equivalents.
src/components/card/card-footer/card-footer.component.tsx	Marked `variant` prop as deprecated.
src/components/card/card-column/card-column.component.tsx	Marked `CardColumn` as deprecated.
src/components/card/internal/card.context.ts	Updated roundness type/default and strict-context error message.
skills/carbon-react/index.md	Content excluded by policy; not reviewed.
skills/carbon-react/components/card.md	Content excluded by policy; not reviewed.
skills/carbon-react/components/card-row.md	Content excluded by policy; not reviewed.
skills/carbon-react/components/card-footer.md	Content excluded by policy; not reviewed.
skills/carbon-react/components/card-column.md	Content excluded by policy; not reviewed.

Files excluded by content exclusion policy (5)

skills/carbon-react/components/card-column.md
skills/carbon-react/components/card-footer.md
skills/carbon-react/components/card-row.md
skills/carbon-react/components/card.md
skills/carbon-react/index.md

tomdavies73 · 2026-07-13T10:37:55Z

    expect(cardFooterElement).toHaveStyleRule(
      "border-bottom-left-radius",
-      `var(--borderRadius${roundness === "default" ? "1" : "2"}00)`,
+      roundness === "moderate"


suggestion: I'd add these respective values into the .each test params as we should really avoid conditions like these in tests

edleeks87

Nice work @DipperTheDan out of interest do we know if the deprecated sub-components still work with the updates? Might be worth adding something so we know we aren't about to break everything for everyone

edleeks87 · 2026-07-16T07:26:47Z

  rel,
  target,
  "aria-label": ariaLabel,
+  cardType = "standard",


suggestion: we could use variant here so we're consistent with how we've done this type of thing in other components

edleeks87 · 2026-07-16T07:28:46Z


-  ${({ roundness, hasFooter }) => css`
-    ${roundness === "default" &&
+  ${({ roundness, $hasHeader, $hasFooter }) => css`


Suggested change

${({ roundness, $hasHeader, $hasFooter }) => css`

${({ $roundness, $hasHeader, $hasFooter }) => css`

Nice one for making the others non-transitive

DipperTheDan · 2026-07-20T13:29:59Z

Nice work @DipperTheDan out of interest do we know if the deprecated sub-components still work with the updates? Might be worth adding something so we know we aren't about to break everything for everyone

Yeah, the old card-row and card-column still work. I hadn't documented any examples as I removed the deprecated components from the examples. What I'll do though is make some examples with deprecated card-row and card-column components and house the examples in the test folder. I'll make sure they're snapshotted with Chromatic too.

ljemmo · 2026-07-22T14:41:42Z

@DipperTheDan I've reviewed your build and these are the elements i found that need actioning:

Border color and border size etc is applied whereas i can't see any border in the card figma spec.
Top border color on card footer should bevar(--container-action-border-default). Currently its pointed to standard group as above.
The card BG token is currently pointing to the standard set. It should be consuming the action set. {container.action.bg-default}. This is an error on our side (sorry about that! - i've fixed in figma)
Footer appears to be consuming legacy border radius tokens: var(--borderRadius000). These need replacing with new global rad tokens.
The drag cursor appears when hovering over the interactive / clickable area of the card. Really this should only appear on the drag handle.
on your prop option list for roundness i wonder if we should follow the deprecated warning as above on hover boxshadow? Not initially vert clear that large and default are no longer used.

edleeks87 · 2026-08-06T06:23:23Z


-  ${({ roundness, hasFooter }) => css`
-    ${roundness === "default" &&
+  ${({ roundness, $hasHeader, $hasFooter }) => css`


edleeks87 · 2026-08-06T06:25:46Z

 ```


+### Playground


comment: we should remove these from the skills files as they're not much use if you can't interact with them etc. Happy for it to be done as separate ticket if you don't mind raising it

I'll do it as part of #8110

DipperTheDan self-assigned this Jul 10, 2026

DipperTheDan added Pending Review Pending QA Pending UX QA Squad Front End labels Jul 10, 2026

DipperTheDan commented Jul 10, 2026

View reviewed changes

DipperTheDan requested a review from Copilot July 10, 2026 13:19

Copilot started reviewing on behalf of DipperTheDan July 10, 2026 13:19 View session

feat(card): align component with fusion design system

6458f6b

DipperTheDan force-pushed the FE-7266_card-ds-audit branch from a315f35 to 6458f6b Compare July 10, 2026 13:20

Copilot AI reviewed Jul 10, 2026

View reviewed changes

chore: address copilot comments - tbs

735c139

tomdavies73 reviewed Jul 13, 2026

View reviewed changes

edleeks87 self-requested a review July 16, 2026 06:35

edleeks87 reviewed Jul 16, 2026

View reviewed changes

chore: address code review comments - tbs

f27f1de

tomdavies73 previously approved these changes Jul 21, 2026

View reviewed changes

edleeks87 previously approved these changes Jul 21, 2026

View reviewed changes

DipperTheDan added Passed Review and removed Pending Review labels Jul 21, 2026

DipperTheDan marked this pull request as ready for review July 21, 2026 14:25

DipperTheDan requested review from a team as code owners July 21, 2026 14:25

DipperTheDan marked this pull request as draft July 24, 2026 13:37

chore: address UXQA comments - tbs

35a6e2e

DipperTheDan dismissed edleeks87’s stale review via 530e671 July 24, 2026 14:30

DipperTheDan dismissed tomdavies73’s stale review via 530e671 July 24, 2026 14:30

docs(card): add a playground example - tbs

ca45e7e

DipperTheDan force-pushed the FE-7266_card-ds-audit branch from 530e671 to ca45e7e Compare July 24, 2026 14:51

DipperTheDan added 2 commits July 28, 2026 14:42

chore: address defect pointed out in UX QA - tbs

d49c23a

docs: fix a few issues with docs - tbs

20b3db0

DipperTheDan marked this pull request as ready for review July 29, 2026 08:32

ljemmo added Passed UX QA and removed Pending UX QA labels Aug 5, 2026

ljemmo previously approved these changes Aug 5, 2026

View reviewed changes

DipperTheDan marked this pull request as draft August 5, 2026 12:04

chore: add grab and grabbing mouse behaviour - tbs

e02b2bf

DipperTheDan dismissed ljemmo’s stale review via e02b2bf August 5, 2026 12:08

tomdavies73 previously approved these changes Aug 5, 2026

View reviewed changes

edleeks87 reviewed Aug 6, 2026

View reviewed changes

refactor: make roundness and spacing props transient - tbs

ac24dc1

DipperTheDan dismissed tomdavies73’s stale review via ac24dc1 August 6, 2026 08:57

edleeks87 approved these changes Aug 6, 2026

View reviewed changes

tomdavies73 approved these changes Aug 6, 2026

View reviewed changes

DipperTheDan marked this pull request as ready for review August 6, 2026 12:01

	${({ roundness, $hasHeader, $hasFooter }) => css`
	${({ $roundness, $hasHeader, $hasFooter }) => css`

Uh oh!

Conversation

DipperTheDan commented Jul 10, 2026

Proposed behaviour

Current behaviour

Checklist

QA

Additional context

Testing instructions

Uh oh!

Choose a reason for hiding this comment

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!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

edleeks87 left a comment

Choose a reason for hiding this comment

Uh oh!

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!

DipperTheDan commented Jul 20, 2026

Uh oh!

ljemmo commented Jul 22, 2026

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!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants