Skip to content

fix(drawer): glass drawer placement and tokens update #8286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcoker merged 5 commits into from
Apr 20, 2026
+20 −3
Merged

fix(drawer): glass drawer placement and tokens update #8286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
459d4c3
update secondary background, pill drawer boarder, pill box-shadow
jcmill Apr 6, 2026
9f1e516
switch masthead bottom margin to sidebar and main container in page c…
jcmill Apr 6, 2026
a91c3e6
add splitter to pill variant examples
jcmill Apr 20, 2026
e468f27
add additional example that includes resizable pill variants
jcmill Apr 20, 2026
d76120f
Update src/patternfly/components/Drawer/examples/Drawer.md
jcmill Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/patternfly/components/Drawer/drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
--#{$drawer}__panel--BorderInlineEndWidth: 0;
--#{$drawer}__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
--#{$drawer}__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
--#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
--#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
--#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
--#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
--#{$drawer}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
Expand Down Expand Up @@ -64,9 +64,10 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
--#{$drawer}--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
--#{$drawer}--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
--#{$drawer}--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
--#{$drawer}--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
--#{$drawer}--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
--#{$drawer}--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
--#{$drawer}--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
--#{$drawer}--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
--#{$drawer}__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
--#{$drawer}__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
--#{$drawer}__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
Expand Down Expand Up @@ -355,6 +356,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
border-block-end-width: var(--#{$drawer}--m-pill__panel--BorderBlockEndWidth);
border-inline-start-width: var(--#{$drawer}--m-pill__panel--BorderInlineStartWidth);
border-inline-end-width: var(--#{$drawer}--m-pill__panel--BorderInlineEndWidth);
box-shadow: var(--#{$drawer}--m-pill--m-expanded__panel--BoxShadow);
}
}

Expand Down
12 changes: 12 additions & 0 deletions src/patternfly/components/Drawer/examples/Drawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,18 @@ import './Drawer.css'
{{/drawer}}
```

### Resizable Pill
```hbs isBeta
{{#> drawer drawer--id="resizable-pill" drawer--IsPill=true drawer-panel--IsOpen=true drawer-panel--IsResizable=true}}
{{#> drawer-main}}
{{#> drawer-content}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.
{{/drawer-content}}
{{> drawer-example-panel}}
{{/drawer-main}}
{{/drawer}}
```

### Pill inline
```hbs isBeta
{{#> drawer drawer--id="pill--inline" drawer--IsInline=true drawer--IsPill=true drawer-panel--IsOpen=true}}
Expand Down
1 change: 0 additions & 1 deletion src/patternfly/components/Masthead/masthead.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,6 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "

// placeholder for banded
@at-root :where(.pf-v6-theme-glass) &:not(.pf-m-docked) {
margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
background-color: var(--pf-t--global--background--color--glass--primary--default);
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
Expand Down
4 changes: 4 additions & 0 deletions src/patternfly/components/Page/page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
// Glass theme
--#{$page}--BackgroundColor--glass: transparent;
--#{$page}__sidebar--Width--base--glass: calc(#{pf-size-prem(290px)} + var(--pf-t--global--spacer--inset--page-chrome) * 2);
--#{$page}__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
--#{$page}__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
--#{$page}__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
--#{$page}__sidebar-main--PaddingBlockEnd--glass: var(--#{$page}__sidebar--PaddingBlockEnd);
Expand All @@ -253,10 +254,12 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
--#{$page}__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
--#{$page}__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
--#{$page}__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
--#{$page}__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);

:where(.pf-v6-theme-glass) & {
--#{$page}--BackgroundColor: var(--#{$page}--BackgroundColor--glass);
--#{$page}__sidebar--Width--base: var(--#{$page}__sidebar--Width--base--glass);
--#{$page}__sidebar--MarginBlockStart: var(--#{$page}__sidebar--MarginBlockStart--glass);
--#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--PaddingInlineStart--glass);
--#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--PaddingInlineEnd--glass);
--#{$page}__sidebar-main--PaddingBlockEnd: var(--#{$page}__sidebar-main--PaddingBlockEnd--glass);
Expand All @@ -272,6 +275,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
--#{$page}__sidebar-main--BorderColor: var(--#{$page}__sidebar-main--BorderColor--glass);
--#{$page}__sidebar-main--BorderRadius: var(--#{$page}__sidebar-main--BorderRadius--glass);
--#{$page}__sidebar-main--BoxShadow: var(--#{$page}__sidebar-main--BoxShadow--glass);
--#{$page}__main-container--MarginBlockStart: var(--#{$page}__main-container--MarginBlockStart--glass);
}

@media (min-width: $pf-v6-global--breakpoint--xl) {
Expand Down
Loading