fix(card): card glass overrides#8307
Conversation
WalkthroughModified Card component SCSS to scope glass-card modifier styles within a Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ 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. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/patternfly/components/Card/card.scss (1)
146-155: Glass scoping correctly applied, but inconsistent with other components.The
:where(.pf-v6-theme-glass) &scoping properly isolates glass styles to the theme context with zero specificity. However, this creates a pattern inconsistency:PanelandDrawercomponents still apply.pf-m-glassstyling globally without.pf-v6-theme-glassscoping. Consider whether those components should follow the same scoping pattern for consistency across the component library.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/patternfly/components/Card/card.scss` around lines 146 - 155, Card's glass styles are correctly scoped using :where(.pf-v6-theme-glass) & with the .pf-m-glass modifier, but Panel and Drawer still apply .pf-m-glass globally; update those components (Panel and Drawer SCSS) to match Card by wrapping their .pf-m-glass rules inside the same zero-specificity scope pattern (use :where(.pf-v6-theme-glass) & { &.pf-m-glass { ... } }) so glass styling is consistently applied only within the theme context.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/patternfly/components/Card/card.scss`:
- Around line 146-155: Card's glass styles are correctly scoped using
:where(.pf-v6-theme-glass) & with the .pf-m-glass modifier, but Panel and Drawer
still apply .pf-m-glass globally; update those components (Panel and Drawer
SCSS) to match Card by wrapping their .pf-m-glass rules inside the same
zero-specificity scope pattern (use :where(.pf-v6-theme-glass) & { &.pf-m-glass
{ ... } }) so glass styling is consistently applied only within the theme
context.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 683669ba-eccb-4229-8ed5-683306449173
📒 Files selected for processing (1)
src/patternfly/components/Card/card.scss
|
Preview: https://pf-pr-8307.surge.sh A11y report: https://pf-pr-8307-a11y.surge.sh |
|
🎉 This PR is included in version 6.5.0-prerelease.69 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Fixes #8304 by scoping Card pf-m-glass styling to the glass theme and preventing style bleed in plain cards from backdrop-filter in that context.
Potential fix for #8260
Summary by CodeRabbit