feat(card): limit box shadows to glass only, undo card view demo changes by wise-king-sullyman · Pull Request #8306 · patternfly/patternfly

wise-king-sullyman · 2026-04-13T19:29:40Z

Assisted by Claude Code running Opus 4.6

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

Summary by CodeRabbit

Refactor
- Simplified card shadow behavior for more consistent rendering; glass-style cards now apply their shadow explicitly.
Documentation
- Added more card gallery examples, including additional selectable and disabled variations.
- Removed duplicate gallery examples from the CardView docs to reduce redundancy and improve clarity.

coderabbitai · 2026-04-13T19:31:05Z

Walkthrough

Removed shared box-shadow tokens and default box-shadow assignments from Card styles so only glass-variant cards explicitly apply a shadow. Updated gallery demo templates: removed a duplicate gallery, removed pf-m-secondary from first card, and added several new card instances (cards 4–10) with selectable/selected variations.

Changes

Cohort / File(s)	Summary
Card Styling `src/patternfly/components/Card/card.scss`	Removed root/shared `--*--BoxShadow` token assignments and `box-shadow` usage from the base card rules; added an explicit `box-shadow` declaration to the `.pf-m-glass` variant.
Demo Template Gallery `src/patternfly/demos/Card/card-template-gallery.hbs`	Removed `pf-m-secondary` from first gallery card; added card instances `-card-4` through `-card-10` with complete header/actions/title/body and selectable/selected state variants.
CardView Example `src/patternfly/demos/CardView/examples/CardView.md`	Removed duplicate gallery section renders, leaving a single gallery instance before pagination.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

feat(card): update card to use unified theme tokens #8219 — Modifies card.scss box-shadow token handling and related card variant token usage.

Suggested labels

released on @prerelease``

Suggested reviewers

mcoker
thatblindgeye
srambach

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title follows conventional commit format with 'feat' prefix and clearly describes the main changes: limiting box shadows to glass variant and reverting demo changes.
Linked Issues check	✅ Passed	The PR successfully implements issue `#8231` requirements: removes box-shadow from default/secondary/clickable card variants while preserving them only for glass-modified cards.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue: card SCSS modifications align with design requirements, and demo file changes explicitly revert earlier unrelated modifications.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

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.}

patternfly-build · 2026-04-13T19:31:35Z

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

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

coderabbitai

Actionable comments posted: 1

🤖 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/components/Card/card.scss`:
- Around line 305-306: The glass modifier in card.scss has box-shadow before
backdrop-filter which violates the configured property order; in the block
containing the variables var(--#{$card}--m-glass--BackdropFilter) and
var(--#{$card}--m-glass--BoxShadow) (search for box-shadow:
var(--#{$card}--m-glass--BoxShadow)), swap the two declarations so
backdrop-filter: var(--#{$card}--m-glass--BackdropFilter) appears before
box-shadow: var(--#{$card}--m-glass--BoxShadow) to satisfy stylelint.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: 6aaab6a0-ea17-4db4-8bec-27ef5e8704c0

📥 Commits

Reviewing files that changed from the base of the PR and between 8e414b8 and a619711.

📒 Files selected for processing (3)

src/patternfly/components/Card/card.scss
src/patternfly/demos/Card/card-template-gallery.hbs
src/patternfly/demos/CardView/examples/CardView.md

💤 Files with no reviewable changes (1)

src/patternfly/demos/CardView/examples/CardView.md

mcoker

Just one comment, otherwise lgtm!

mcoker · 2026-04-15T17:04:11Z

-    --#{$card}--BoxShadow: var(--#{$card}--m-glass--BoxShadow);

    backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
+    box-shadow: var(--#{$card}--m-glass--BoxShadow);


Looks like there is a conflict. Main should pull in a change where the .pf-m-glass modifier is wrapped in :where(.pf-v6-theme-glass) and the style block is at the top of the card CSS. IMO I'd remove this block here in favor of the block that comes from main, but you'd update that block to set box-shadow: var(--#{$card}--m-glass--BoxShadow); instead of --#{$card}--BoxShadow: var(--#{$card}--m-glass--BoxShadow); to work with the updates you've made here.

lboehling

design looks good to me! thank you!

mcoker

🔥

patternfly-build · 2026-04-15T22:44:38Z

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

The release is available on:

Your semantic-release bot 📦🚀

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

a619711

coderabbitai Bot reviewed Apr 13, 2026

View reviewed changes

Comment thread src/patternfly/components/Card/card.scss Outdated

Fix order of backdrop filter and box shadow

08f8a25

wise-king-sullyman requested review from a team, lboehling and mcoker April 13, 2026 20:09

mcoker reviewed Apr 15, 2026

View reviewed changes

Merge branch 'main' into card-glass-pr-design-followup

6fa35ea

wise-king-sullyman requested a review from mcoker April 15, 2026 20:08

lboehling approved these changes Apr 15, 2026

View reviewed changes

mcoker approved these changes Apr 15, 2026

View reviewed changes

mcoker merged commit d4780be into patternfly:main Apr 15, 2026
5 checks passed

patternfly-build added the released on @prerelease label Apr 15, 2026

wise-king-sullyman deleted the card-glass-pr-design-followup branch April 16, 2026 13:15

wise-king-sullyman mentioned this pull request Apr 22, 2026

Bug - Docked nav shadow shows when collapsed on mobile #8245

Closed

This was referenced Apr 29, 2026

Bug - Pagination - dynamic sticky updates #8348

Closed

feat(Hero): make glass styles glass-theme only #8365

Merged

coderabbitai Bot mentioned this pull request Jul 21, 2026

Modal/Backdrop - add animations #8517

Open

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

Navigation Menu

Uh oh!

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

feat(card): limit box shadows to glass only, undo card view demo changes#8306
mcoker merged 3 commits into
patternfly:mainfrom
wise-king-sullyman:card-glass-pr-design-followup

wise-king-sullyman commented Apr 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Apr 13, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

mcoker left a comment

Uh oh!

mcoker Apr 15, 2026

Uh oh!

lboehling left a comment

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

patternfly-build commented Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

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

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 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 PRs

Suggested labels

Suggested reviewers

Uh oh!

patternfly-build commented Apr 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!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

lboehling left a comment

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 Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wise-king-sullyman commented Apr 13, 2026 •

edited

Loading

coderabbitai Bot commented Apr 13, 2026 •

edited

Loading

patternfly-build commented Apr 13, 2026 •

edited

Loading