Bug - Drawer - validate glass styles

Need to review the drawer and ensure glass styles are applied properly. ~~We may look at making drawers smart and automatically applying glass/plain if the inline/static drawer is inside or outside of the page/compass components.~~ (we can look at this if there is feedback about it)

Also there is a .pf-m-no-glass modifier - see if that is needed. If glass is not applied automatically anywhere, we can get rid of it.

This is broken on a small screen: components/tabs/html-demos/tables-and-tabs/

Jira Issue: PF-4051

🔗 Related PRs

#8249 - fix: change no-plain to no-plain-on-glass [merged]
#8266 - fix: make plain and no-plain-on-glass work together [merged]
#8286 - fix(drawer): glass drawer placement and tokens update [merged]
#8318 - feat(drawer): add plain variant to section [merged]
#8345 - feat(page): add glass mode support for sticky page sections [merged]

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

Create Plan

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

Check if correct background is being used (floating for overlay, primary for inline/static non-glass and glass mobile or transparent in glass desktop, pf-m-glass applies glass background at all times)

All background colors/tokens noted below are on the .pf-v6-c-drawer__panel element

Desktop

Normal Contrast:
- Overlay
  - Dark
    - Default them: --pf-t--global--background--color--floating--default (rgb(56, 56, 56))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(56, 56, 56))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Pill
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(56, 56, 56))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(56, 56, 56))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Static
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
- Inline
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
Glass:
- Overlay
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Pill
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Static
  - Dark
    - Default theme: transparent
    - Felt theme: transparent
    - Default theme w/ pf-m-glass on panel: transparent (this is not getting the --#{$drawer}__panel--m-glass--BackgroundColor applied)
    - Felt theme w/ pf-m-glass on panel: transparent (this is not getting the --#{$drawer}__panel--m-glass--BackgroundColor applied)
  - Light
    - Default theme: transparent
    - Felt theme: transparent
    - Default theme w/ pf-m-glass on panel: transparent (this is not getting the --#{$drawer}__panel--m-glass--BackgroundColor applied)
    - Felt theme w/ pf-m-glass on panel: transparent (this is not getting the --#{$drawer}__panel--m-glass--BackgroundColor applied)
- Inline
  - Dark
    - Default theme: transparent
    - Felt theme: transparent
    - Default theme w/ pf-m-glass on panel: transparent (this is not getting the --#{$drawer}__panel--m-glass--BackgroundColor applied)
    - Felt theme w/ pf-m-glass on panel: transparent (this is not getting the --#{$drawer}__panel--m-glass--BackgroundColor applied)
  - Light
    - Default theme: transparent
    - Felt theme: transparent
    - Default theme w/ pf-m-glass on panel: transparent (this is not getting the --#{$drawer}__panel--m-glass--BackgroundColor applied)
    - Felt theme w/ pf-m-glass on panel: transparent (this is not getting the --#{$drawer}__panel--m-glass--BackgroundColor applied)
High Contrast:
- Overlay
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Pill
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Static
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgb(0, 0, 0))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(0, 0, 0))
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
- Inline
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgb(0, 0, 0))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(0, 0, 0))
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))

Mobile

Normal Contrast:
- Overlay
  - Dark
    - Default them: --pf-t--global--background--color--floating--default (rgb(56, 56, 56)
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(56, 56, 56)
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Pill
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(56, 56, 56))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(56, 56, 56))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Static
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
- Inline
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
Glass:
- Overlay
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Pill
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Static
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgba(41, 41, 41, 0.5))
    - Felt theme: --pf-t--global--background--color--primary--default (rgba(41, 41, 41, 0.5))
    - Default theme w/ pf-m-glass on panel: --pf-t--global--background--color--glass--primary--default (rgba(41, 41, 41, 0.5)) (this IS getting the --#{$drawer}__panel--m-glass--BackgroundColor token applied at line 265 in css)
    - Felt theme w/ pf-m-glass on panel: --pf-t--global--background--color--glass--primary--default (rgba(41, 41, 41, 0.5)) (this IS getting the --#{$drawer}__panel--m-glass--BackgroundColor token applied at line 265 in css)
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgba(255, 255, 255, 0.6))
    - Felt theme: --pf-t--global--background--color--primary--default (rgba(255, 255, 255, 0.6))
    - Default theme w/ pf-m-glass on panel: --pf-t--global--background--color--glass--primary--default (rgba(255, 255, 255, 0.5)) (this IS getting the --#{$drawer}__panel--m-glass--BackgroundColor token applied at line 265 in css)
    - Felt theme w/ pf-m-glass on panel: --pf-t--global--background--color--glass--primary--default (rgba(255, 255, 255, 0.5)) (this IS getting the --#{$drawer}__panel--m-glass--BackgroundColor token applied at line 265 in css)
- Inline
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgba(41, 41, 41, 0.5))
    - Felt theme: --pf-t--global--background--color--primary--default (rgba(41, 41, 41, 0.5))
    - Default theme w/ pf-m-glass on panel: --pf-t--global--background--color--glass--primary--default (rgba(41, 41, 41, 0.5)) (this IS getting the --#{$drawer}__panel--m-glass--BackgroundColor token applied at line 265 in css)
    - Felt theme w/ pf-m-glass on panel: --pf-t--global--background--color--glass--primary--default (rgba(41, 41, 41, 0.5)) (this IS getting the --#{$drawer}__panel--m-glass--BackgroundColor token applied at line 265 in css)
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgba(255, 255, 255, 0.6))
    - Felt theme: --pf-t--global--background--color--primary--default (rgba(255, 255, 255, 0.6))
    - Default theme w/ pf-m-glass on panel: --pf-t--global--background--color--glass--primary--default (rgba(255, 255, 255, 0.5)) (this IS getting the --#{$drawer}__panel--m-glass--BackgroundColor token applied at line 265 in css)
    - Felt theme w/ pf-m-glass on panel: --pf-t--global--background--color--glass--primary--default (rgba(255, 255, 255, 0.5)) (this IS getting the --#{$drawer}__panel--m-glass--BackgroundColor token applied at line 265 in css)
High Contrast:
- Overlay
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Pill
  - Dark
    - Default theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(41, 41, 41))
  - Light
    - Default theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--floating--default (rgb(255, 255, 255))
- Static
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgb(0, 0, 0))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(0, 0, 0))
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
- Inline
  - Dark
    - Default theme: --pf-t--global--background--color--primary--default (rgb(0, 0, 0))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(0, 0, 0))
  - Light
    - Default theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))
    - Felt theme: --pf-t--global--background--color--primary--default (rgb(255, 255, 255))

Navigation Menu

Bug - Drawer - validate glass styles #8340

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Bug - Drawer - validate glass styles #8340

Description

Activity

coderabbitai commented on Apr 28, 2026

thatblindgeye commented on May 11, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions