feat(card): update card to use unified theme tokens by wise-king-sullyman · Pull Request #8219 · patternfly/patternfly

wise-king-sullyman · 2026-03-13T18:58:57Z

Figma: https://www.figma.com/design/qRn3S225WwGHIdgGZX0LTC/Unified-Theme--Design-Tokens--Styles---Specs?node-id=9552-14258&p=f&t=AmaPrRnVNe38gCx6-0

Convenience link: https://pf-pr-8180.surge.sh/components/card

Redo of #8180

Summary by CodeRabbit

Style
- Updated card component styling for improved border colors, box shadows, and interactive states (selectable, clickable, tile variants).
- Modernized icon rendering across card templates and examples with PatternFly icon components for consistent visual presentation.

…tatus-card.hbs

…y.hbs

…tatus.hbs

…ng-sullyman/patternfly into card-unified-theme-token-updates

coderabbitai · 2026-03-13T18:59:25Z

Walkthrough

Updates the Card component with new SCSS variables and state handling for selectable, plain, and tile variants, including BoxShadow and BorderColor tokens. Additionally, all Card demo templates are updated to replace inline Font Awesome icons with PatternFly pfIcon helper calls.

Changes

Cohort / File(s)	Summary
Card Styling `src/patternfly/components/Card/card.scss`	Introduced BoxShadow variable and enhanced selectable/plain/tile state handling with appropriate BorderColor, BorderWidth, and BoxShadow defaults. Added at-root rules for tile selectable interactions and color/width propagation for selectable/clickable combinations.
Card Demo Templates `src/patternfly/demos/Card/card-template-gallery.hbs`, `src/patternfly/demos/Card/Card.md`, `src/patternfly/demos/Card/templates/card-demo--popover-table.hbs`, `src/patternfly/demos/Card/templates/card-demo--status-card.hbs`, `src/patternfly/demos/Card/templates/card-demo--template-gallery.hbs`, `src/patternfly/demos/Card/templates/card-template-data-list.hbs`, `src/patternfly/demos/Card/templates/card-template-events.hbs`, `src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs`, `src/patternfly/demos/Card/templates/card-template-expandable-status.hbs`, `src/patternfly/demos/Card/templates/card-template-status.hbs`	Replaced inline FontAwesome icon markup (`<i class="fas ...">`) with PatternFly pfIcon helper calls (`{{pfIcon "rh-ui-..."}}`), including proper icon/icon-content wrapper structures and semantic modifiers (pf-m-success, pf-m-danger, pf-m-warning) across all Card demo templates.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

Issue #8086 (Card: Token updates for unified theme) — The SCSS changes directly implement the unified theme token updates with new BoxShadow variables and enhanced state handling for tile, selectable, and plain variants as specified in the design tokens.

Possibly related PRs

chore: add helper for react-icons #8147 — Updates Card demo templates to use the pfIcon helper for icon rendering, which aligns with the template changes for replacing Font Awesome icons throughout the Card component demonstrations.
fix(icons): updated status icons to rh-ui #8179 — Both PRs modify Card-related templates to replace inline Font Awesome icons with PatternFly pfIcon calls using rh-ui-* icon names.

Suggested labels

Needs design review

Suggested reviewers

lboehling
mcoker
andrew-ronaldson
kmcfaul

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title follows conventional commit guidelines with the correct format 'feat(card): ...' indicating a feature change to the card component.
Linked Issues check	✅ Passed	The PR successfully implements unified theme token updates for the Card component as specified in issue `#8086`, including SCSS changes and icon migrations.
Out of Scope Changes check	✅ Passed	All changes are directly related to card component token updates and icon migrations. No unrelated or out-of-scope modifications were detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can generate a title for your PR based on the changes with custom instructions.

Set the reviews.auto_title_instructions setting to generate a title for your PR based on the changes in the PR with custom instructions.

patternfly-build · 2026-03-13T19:02:27Z

Preview: https://pf-pr-8219.surge.sh

A11y report: https://pf-pr-8219-a11y.surge.sh

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/demos/Card/examples/Card.md`:
- Around line 633-636: The icon used for the success/Ready status is
inconsistent: inside the block that uses icon-content--modifier="pf-m-success"
and the pfIcon helper (the icon/icon-content pair rendering a "Ready" status),
replace the pfIcon argument "rh-ui-error-fill" with "rh-ui-check-circle-fill" so
the icon name matches the success modifier (look for the {{#> icon
icon--modifier="pf-m-inline"}} / {{#> icon-content
icon-content--modifier="pf-m-success"}} block and the {{pfIcon
"rh-ui-error-fill"}} call).
- Around line 582-585: The template uses the pfIcon helper inside the
icon-content block with icon-content--modifier="pf-m-success" but passes
"rh-ui-error-fill", which mismatches the success modifier; update the pfIcon
call to use "rh-ui-check-circle-fill" (replace the "rh-ui-error-fill" string) so
the icon matches the pf-m-success visual semantics in the Card example.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 10cdc23c-07c2-4200-9e9b-21fa1a8a7365

📥 Commits

Reviewing files that changed from the base of the PR and between 666007f and 68f2a25.

📒 Files selected for processing (11)

src/patternfly/components/Card/card.scss
src/patternfly/demos/Card/card-template-gallery.hbs
src/patternfly/demos/Card/examples/Card.md
src/patternfly/demos/Card/templates/card-demo--popover-table.hbs
src/patternfly/demos/Card/templates/card-demo--status-card.hbs
src/patternfly/demos/Card/templates/card-demo--template-gallery.hbs
src/patternfly/demos/Card/templates/card-template-data-list.hbs
src/patternfly/demos/Card/templates/card-template-events.hbs
src/patternfly/demos/Card/templates/card-template-expandable-status-card.hbs
src/patternfly/demos/Card/templates/card-template-expandable-status.hbs
src/patternfly/demos/Card/templates/card-template-status.hbs

coderabbitai · 2026-03-13T19:03:25Z

                    {{#> icon-content icon-content--modifier="pf-m-success"}}
-                      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                    {{pfIcon "rh-ui-error-fill"}}
                    {{/icon-content}}
                  {{/icon}}


⚠️ Potential issue | 🟡 Minor

Icon name and modifier mismatch.

The icon "rh-ui-error-fill" is used with the pf-m-success modifier, which appears inconsistent. For a "Ready" status with a success modifier, the icon should likely be "rh-ui-check-circle-fill" to match the visual semantics.

🐛 Proposed fix

{{#> icon icon--modifier="pf-m-inline"}} {{#> icon-content icon-content--modifier="pf-m-success"}} - {{pfIcon "rh-ui-error-fill"}} + {{pfIcon "rh-ui-check-circle-fill"}} {{/icon-content}} {{/icon}}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@src/patternfly/demos/Card/examples/Card.md` around lines 582 - 585, The template uses the pfIcon helper inside the icon-content block with icon-content--modifier="pf-m-success" but passes "rh-ui-error-fill", which mismatches the success modifier; update the pfIcon call to use "rh-ui-check-circle-fill" (replace the "rh-ui-error-fill" string) so the icon matches the pf-m-success visual semantics in the Card example.

coderabbitai · 2026-03-13T19:03:25Z

                  {{#> icon icon--modifier="pf-m-inline"}}
                    {{#> icon-content icon-content--modifier="pf-m-success"}}
-                      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                    {{pfIcon "rh-ui-error-fill"}}
                    {{/icon-content}}


⚠️ Potential issue | 🟡 Minor

Icon name and modifier mismatch (duplicate).

Same issue as line 583—using "rh-ui-error-fill" with pf-m-success for another "Ready" status. Should use "rh-ui-check-circle-fill" for consistency with success semantics.

🐛 Proposed fix

{{#> icon icon--modifier="pf-m-inline"}} {{#> icon-content icon-content--modifier="pf-m-success"}} - {{pfIcon "rh-ui-error-fill"}} + {{pfIcon "rh-ui-check-circle-fill"}} {{/icon-content}} {{/icon}}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

{{#> icon icon--modifier="pf-m-inline"}}

{{#> icon-content icon-content--modifier="pf-m-success"}}

<i class="fas fa-exclamation-circle" aria-hidden="true"></i>

{{pfIcon "rh-ui-error-fill"}}

{{/icon-content}}

{{#> icon icon--modifier="pf-m-inline"}}

{{#> icon-content icon-content--modifier="pf-m-success"}}

{{pfIcon "rh-ui-check-circle-fill"}}

{{/icon-content}}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@src/patternfly/demos/Card/examples/Card.md` around lines 633 - 636, The icon used for the success/Ready status is inconsistent: inside the block that uses icon-content--modifier="pf-m-success" and the pfIcon helper (the icon/icon-content pair rendering a "Ready" status), replace the pfIcon argument "rh-ui-error-fill" with "rh-ui-check-circle-fill" so the icon name matches the success modifier (look for the {{#> icon icon--modifier="pf-m-inline"}} / {{#> icon-content icon-content--modifier="pf-m-success"}} block and the {{pfIcon "rh-ui-error-fill"}} call).

mcoker

LGTM!

patternfly-build · 2026-03-13T23:53:17Z

🎉 This PR is included in version 6.5.0-prerelease.53 🎉

The release is available on:

Your semantic-release bot 📦🚀

wise-king-sullyman and others added 23 commits February 26, 2026 17:16

feat(card): update card to use unified theme tokens

0dc0130

feat(card): update card to use rh ui icons

accd575

chore(card): fix lint errors

7b59e35

fix(card): address feedback from coderabbit

0d60d24

Update to use micron caret and rotate from down to up

948651d

Prevent overriding border color for selected/clicked cards

cba2dd8

Update comment location to be accurate again

c548355

Fix lint errors

1283c0d

Update static secondary border color / width

e00d99a

feat(card): update card to use unified theme tokens

13e71ef

feat(card): update card to use rh ui icons

38722c6

chore(card): fix lint errors

c2f6e49

fix(card): address feedback from coderabbit

1f9e0d0

Prevent overriding border color for selected/clicked cards

455d2ad

Update comment location to be accurate again

f1a9366

Fix lint errors

18eec20

Update static secondary border color / width

7590ea1

Update src/patternfly/demos/Card/templates/card-template-expandable-s…

aa1f0a6

…tatus-card.hbs

Update src/patternfly/demos/Card/templates/card-demo--template-galler…

cf2d212

…y.hbs

Update src/patternfly/demos/Card/templates/card-template-expandable-s…

2c7bb14

…tatus.hbs

Update src/patternfly/demos/Card/templates/card-template-expandable-s…

602b0d2

…tatus.hbs

Merge branch 'card-unified-theme-token-updates' of github.com:wise-ki…

bc60d13

…ng-sullyman/patternfly into card-unified-theme-token-updates

chore: fix some icons

68f2a25

coderabbitai Bot reviewed Mar 13, 2026

View reviewed changes

mcoker approved these changes Mar 13, 2026

View reviewed changes

mcoker merged commit 4f854a3 into patternfly:main Mar 13, 2026
6 checks passed

mcoker mentioned this pull request Mar 13, 2026

feat(card): update card to use unified theme tokens #8180

Closed

patternfly-build added the released on @prerelease label Mar 13, 2026

This was referenced Mar 25, 2026

Breadcrumbs: update tokens and icons #8185

Closed

Progress: Update tokens and brand icons #8188

Closed

Jump links: update tokens and brand icons #8187

Closed

Drawer splitter: New rounded variant #8164

Closed

This was referenced Apr 10, 2026

AgentReady: patternfly (core) — assess + low-hanging fruit #8296

Open

feat(card): update clickable/selectable plain card border styles #8301

Merged

feat(card): limit box shadows to glass only, undo card view demo changes #8306

Merged

coderabbitai Bot mentioned this pull request May 1, 2026

Add baseline screenshots for all of the themes #8363

Closed

coderabbitai Bot mentioned this pull request May 21, 2026

Bug - Create component vars for banded masthead #8429

Open

coderabbitai Bot mentioned this pull request Jun 16, 2026

fix(patterns): fix status labels in dashboard demo #8455

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(card): update card to use unified theme tokens#8219

feat(card): update card to use unified theme tokens#8219
mcoker merged 23 commits into
patternfly:mainfrom
wise-king-sullyman:card-unified-theme-token-updates-2

wise-king-sullyman commented Mar 13, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 13, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Mar 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Mar 13, 2026

Uh oh!

coderabbitai Bot Mar 13, 2026

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

patternfly-build commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

wise-king-sullyman commented Mar 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

patternfly-build commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

wise-king-sullyman commented Mar 13, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 13, 2026 •

edited

Loading

patternfly-build commented Mar 13, 2026 •

edited

Loading