fix(sidebar): remove background in glass by mcoker · Pull Request #8446 · patternfly/patternfly

mcoker · 2026-06-09T03:42:42Z

fixes #8380

Summary by CodeRabbit

Documentation
- Added .pf-m-no-plain-on-glass docs for Sidebar panel/content and updated .pf-m-no-background usage to note deprecation and scope; updated .pf-m-secondary usage details; also added deprecation note for Drawer .pf-m-no-background.
Bug Fixes
- Improved Sidebar background handling across themes so panel/content backgrounds render correctly and avoid unintended "plain" styling under glass themes.

coderabbitai · 2026-06-09T03:47:15Z

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: a4fd77ba-25ee-447a-ab13-04658c4a458c

📥 Commits

Reviewing files that changed from the base of the PR and between a9ad82a and c98c6e0.

📒 Files selected for processing (3)

src/patternfly/components/Drawer/examples/Drawer.md
src/patternfly/components/Sidebar/examples/Sidebar.md
src/patternfly/components/Sidebar/sidebar.scss

✅ Files skipped from review due to trivial changes (1)

src/patternfly/components/Drawer/examples/Drawer.md

🚧 Files skipped from review as they are similar to previous changes (1)

src/patternfly/components/Sidebar/examples/Sidebar.md

Walkthrough

Refactors Sidebar SCSS so panel/content use transparent background CSS variables under glass/non-glass roots with plain/no-plain-on-glass precedence; removes the old direct background rule. Updates Sidebar and Drawer usage docs: adds .pf-m-no-plain-on-glass docs and deprecates .pf-m-no-background in favor of .pf-m-plain.

Changes

Glass-theme background fix and docs

Layer / File(s)	Summary
Sidebar panel background variable `src/patternfly/components/Sidebar/sidebar.scss`	Sets `--pf-c-sidebar__panel--BackgroundColor` to `transparent` via selectors that account for `:root.pf-v6-theme-glass` (excluding `.pf-m-no-plain-on-glass`) and `pf-m-plain` on non-glass roots.
Sidebar content background variable `src/patternfly/components/Sidebar/sidebar.scss`	Sets `--pf-c-sidebar__content--BackgroundColor` to `transparent` using combined selectors that replace the previous direct `.pf-m-no-background` block and account for `.pf-m-no-plain-on-glass`.
Remove legacy direct background rule `src/patternfly/components/Sidebar/sidebar.scss`	Deletes the older generic `.pf-m-no-background` rule that directly set `background-color: transparent` on the sidebar root/panel/content.
Sidebar docs: usage and new modifier `src/patternfly/components/Sidebar/examples/Sidebar.md`	Updates `.pf-m-no-background` usage to apply only to panel/content with a deprecation note to use `.pf-m-plain`, adjusts `.pf-m-secondary` entry formatting, and adds `.pf-m-no-plain-on-glass` usage row describing its effect on panel/content.
Drawer docs: deprecate `.pf-m-no-background` `src/patternfly/components/Drawer/examples/Drawer.md`	Adds a deprecation note in the Drawer usage table indicating `.pf-m-no-background` is deprecated and recommending `.pf-m-plain`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

patternfly/patternfly#8249: Introduces .pf-m-no-plain-on-glass migration used here for Sidebar selector precedence.
patternfly/patternfly#8266: Updates Sidebar/other components' selector logic for plain/no-plain-on-glass precedence.
patternfly/patternfly#8318: Drawer documentation updates around .pf-m-no-background deprecation.

Suggested labels

released on @prerelease``

Suggested reviewers

jcmill
andrew-ronaldson

🚥 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 PR title follows conventional commit format with type(scope): description, accurately summarizing the main fix for sidebar background in glass theme.
Linked Issues check	✅ Passed	The PR successfully addresses issue `#8380` by refactoring pf-m-no-background behavior and introducing pf-m-no-plain-on-glass modifier to properly handle sidebar panel/content background in glass theme.
Out of Scope Changes check	✅ Passed	All changes are in-scope: sidebar SCSS refactoring, sidebar documentation updates, and drawer documentation deprecation note are all directly related to fixing the sidebar background issue.

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

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

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-06-09T03:48:10Z

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

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

coderabbitai

Actionable comments posted: 1

🤖 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/Sidebar/examples/Sidebar.md`:
- Line 237: Update the Sidebar documentation row for the `.pf-m-no-background`
modifier to match the SCSS: remove `.pf-v6-c-sidebar` and list only
`.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` as the affected elements;
ensure the table cell text now reads exactly that selector list and keeps the
existing description "Modifies the element to have a transparent background." to
reflect the actual implementation in `sidebar.scss` where `.pf-m-no-background`
is applied to `.pf-v6-c-sidebar__panel` and `.pf-v6-c-sidebar__content`.

🪄 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: f7a3d397-decc-4cef-91d4-4c87f625464f

📥 Commits

Reviewing files that changed from the base of the PR and between 29ff711 and a9ad82a.

📒 Files selected for processing (2)

src/patternfly/components/Sidebar/examples/Sidebar.md
src/patternfly/components/Sidebar/sidebar.scss

jcmill

🤘

patternfly-build · 2026-06-09T16:09:43Z

🎉 This PR is included in version 6.6.0-prerelease.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

fix(sidebar): remove background in glass

a9ad82a

mcoker requested review from andrew-ronaldson and jcmill June 9, 2026 03:42

coderabbitai Bot reviewed Jun 9, 2026

View reviewed changes

Comment thread src/patternfly/components/Sidebar/examples/Sidebar.md Outdated

chore: deprecate no-background modifier for plain

c98c6e0

jcmill approved these changes Jun 9, 2026

View reviewed changes

mcoker merged commit 89a8dc6 into patternfly:main Jun 9, 2026
6 checks passed

mcoker deleted the issue-8380 branch June 9, 2026 15:56

patternfly-build added the released on @prerelease label Jun 9, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(sidebar): remove background in glass#8446

fix(sidebar): remove background in glass#8446
mcoker merged 2 commits into
patternfly:mainfrom
mcoker:issue-8380

mcoker commented Jun 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 9, 2026 •

edited

Loading

Review ran into problems

Uh oh!

patternfly-build commented Jun 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

jcmill left a comment

Uh oh!

Uh oh!

patternfly-build commented Jun 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

mcoker commented Jun 9, 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 Jun 9, 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

Review ran into problems

Uh oh!

patternfly-build commented Jun 9, 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!

jcmill left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Jun 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mcoker commented Jun 9, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 9, 2026 •

edited

Loading

patternfly-build commented Jun 9, 2026 •

edited

Loading