feat(card): align component with fusion design system - FE-7266#8073
Draft
DipperTheDan wants to merge 2 commits into
Draft
feat(card): align component with fusion design system - FE-7266#8073DipperTheDan wants to merge 2 commits into
DipperTheDan wants to merge 2 commits into
Conversation
DipperTheDan
commented
Jul 10, 2026
| } | ||
|
|
||
| const paddingSizes = { | ||
| none: "var(--spacing000)", |
Contributor
Author
There was a problem hiding this comment.
I have used the old DS tokens here to conform with the other spacing values in the declaration. This component is being deprecated too.
DipperTheDan
force-pushed
the
FE-7266_card-ds-audit
branch
from
a315f35 to
6458f6b
Compare
There was a problem hiding this comment.
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,CardFootervariant, 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed behaviour
Align component with Fusion Design System.
Current behaviour
Component is out of date with the latest Fusion Design System.
Checklist
d.tsfile added or updated if requiredQA
Additional context
N/A
Testing instructions
Component should match designs and specs provided in the ticket.