Skip to content

fix(drawer): addressed issue with inline/static and glass bgs#8397

Merged
jcmill merged 3 commits into
patternfly:mainfrom
mcoker:issue-8340
May 13, 2026
Merged

fix(drawer): addressed issue with inline/static and glass bgs#8397
jcmill merged 3 commits into
patternfly:mainfrom
mcoker:issue-8340

Conversation

@mcoker
Copy link
Copy Markdown
Contributor

@mcoker mcoker commented May 12, 2026

fixes #8340

Summary by CodeRabbit

  • Style
    • Inline drawer panels now use a floating default background at smaller sizes, with a medium+ breakpoint restoring the primary background for consistent visuals.
    • Glass effect rules for inline/static drawers are limited to medium+ breakpoints and refined for better theme scoping and visual cohesion.

Review Change Stack

@mcoker mcoker requested review from jcmill and thatblindgeye May 12, 2026 20:43
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 12, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: 53b03e18-d5f1-48f4-b2a5-e135b9492af8

📥 Commits

Reviewing files that changed from the base of the PR and between cceff04 and dca8504.

📒 Files selected for processing (1)
  • src/patternfly/components/Drawer/drawer.scss
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/patternfly/components/Drawer/drawer.scss

Walkthrough

This PR changes inline drawer panel default background from primary to floating, adds an md breakpoint override to use primary background at medium widths, and moves inline/static glass styling into the min-width: md responsive block with theme-scoped selectors and backdrop-filter rules.

Changes

Drawer Panel Theming and Glass Styling

Layer / File(s) Summary
Inline panel background tokens
src/patternfly/components/Drawer/drawer.scss
Default --panel--m-inline--BackgroundColor switches from primary to floating background; --panel--m-inline--md--BackgroundColor override uses primary background at md breakpoint.
Glass styling restructure
src/patternfly/components/Drawer/drawer.scss
Removed base .pf-m-inline, .pf-m-static .pf-m-glass block; added min-width: md scoped .pf-m-glass rules under theme-scoped selector to set glass background/border variables and backdrop-filter; plain panels handle transparency under the theme scope.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

released on @prerelease``

Suggested reviewers

  • thatblindgeye
  • jcmill
🚥 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 format with 'fix' prefix and includes the component scope, but uses unclear abbreviation 'bgs' instead of the full word 'backgrounds'.
Linked Issues check ✅ Passed The PR addresses the main glass styling validation objective from issue #8340 by reworking glass styling for inline/static drawers and adjusting background tokens as required.
Out of Scope Changes check ✅ Passed All changes are within scope—the drawer.scss modifications directly address the glass style validation and background token issues specified in issue #8340 without introducing unrelated changes.

✏️ 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
Copy link
Copy Markdown
Collaborator

patternfly-build commented May 12, 2026

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
src/patternfly/components/Drawer/drawer.scss (1)

959-961: 💤 Low value

Remove commented-out code.

This commented-out empty selector adds no value and should be removed to keep the codebase clean. If this is intended for future use, add a TODO comment explaining the purpose.

♻️ Proposed cleanup
-// :where(.pf-v6-theme-glass) {
-  
-// }
-
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/patternfly/components/Drawer/drawer.scss` around lines 959 - 961, Remove
the commented-out empty selector block in drawer.scss (the commented lines
containing :where(.pf-v6-theme-glass)), as it adds no value; delete the
commented code or, if it's intentionally reserved for future work, replace it
with a single-line TODO comment explaining the intended purpose and referencing
.pf-v6-theme-glass so the intent is explicit.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/patternfly/components/Drawer/drawer.scss`:
- Line 666: The selector `@at-root :where(:root(.pf-v6-theme-glass))
&.pf-m-glass` is invalid because `:root()` functional syntax is not allowed;
replace that pattern with the correct selector used elsewhere:
`:root.pf-v6-theme-glass` so the rule targeting `.pf-m-glass` inside the Drawer
glass theme is parsed correctly; update the `@at-root` line and keep the rest of
the rule intact so glass styling for inline/static drawer panels at md+ applies.

---

Nitpick comments:
In `@src/patternfly/components/Drawer/drawer.scss`:
- Around line 959-961: Remove the commented-out empty selector block in
drawer.scss (the commented lines containing :where(.pf-v6-theme-glass)), as it
adds no value; delete the commented code or, if it's intentionally reserved for
future work, replace it with a single-line TODO comment explaining the intended
purpose and referencing .pf-v6-theme-glass so the intent is explicit.
🪄 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: 1499991e-4ad7-4256-9650-ebc01c5b93d9

📥 Commits

Reviewing files that changed from the base of the PR and between e2ca06a and ee448f8.

📒 Files selected for processing (1)
  • src/patternfly/components/Drawer/drawer.scss

Comment thread src/patternfly/components/Drawer/drawer.scss Outdated
Copy link
Copy Markdown
Contributor

@jcmill jcmill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹

@jcmill jcmill merged commit e0a0da7 into patternfly:main May 13, 2026
5 checks passed
@patternfly-build
Copy link
Copy Markdown
Collaborator

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

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - Drawer - validate glass styles

4 participants