From 9e46f653a911b5270a89d193d7cc611e0238a486 Mon Sep 17 00:00:00 2001 From: Kayla Chumley Date: Mon, 27 Jul 2026 12:42:19 -0400 Subject: [PATCH 1/4] Update drawer design guidelines SVG images --- .../components/drawer/img/drawer-inline.svg | 537 +++++++++------- .../components/drawer/img/drawer-overlay.svg | 574 +++++++++-------- .../drawer/img/drawer-placement-bottom.svg | 517 +++++++++------- .../drawer/img/drawer-placement-left.svg | 578 ++++++++++-------- .../drawer/img/drawer-placement-right.svg | 578 ++++++++++-------- .../components/drawer/img/drawer-splitter.svg | 527 +++++++++------- 6 files changed, 1832 insertions(+), 1479 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-inline.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-inline.svg index 17926409c7..37234b192e 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-inline.svg +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-inline.svg @@ -1,242 +1,315 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + - - + + - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-overlay.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-overlay.svg index 66b55bb874..808898bc28 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-overlay.svg +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-overlay.svg @@ -1,268 +1,328 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - + + + + + + + - - + + + + + + + + + + + + + + + + + - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-bottom.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-bottom.svg index d52e952aba..56dfecdaf7 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-bottom.svg +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-bottom.svg @@ -1,271 +1,314 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - + + + + + + - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - + + + + + + - - - + + + + + + + + - - - - + + + + + + - - - - + + + + + + + + - - - - - - - - + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + - - + + - - + + + + + + + + + + + + + + - - + + - - + + - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-left.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-left.svg index 3a62721c94..2156705c9f 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-left.svg +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-left.svg @@ -1,270 +1,326 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-right.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-right.svg index c02e7547f3..278bccbc4f 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-right.svg +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-placement-right.svg @@ -1,276 +1,322 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - + + - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-splitter.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-splitter.svg index 26efd25a1d..69468de570 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-splitter.svg +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-splitter.svg @@ -1,242 +1,317 @@ - + - + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - + - + - + + + + + + + + + + + + + + + + From 9dcb2bd75e48c59a9b51027e4e107b4aaa822585 Mon Sep 17 00:00:00 2001 From: Kayla Chumley Date: Mon, 27 Jul 2026 18:08:39 -0400 Subject: [PATCH 2/4] Add drawer pill variant guidelines and update drawer design guidelines - Add Overlay pill and Inline pill subsections with usage guidelines and images - Add pf-m-pill modifier documentation with token references - Add splitter placement guidance - Add floating background token for overlay drawers - Add primary background token for inline drawers - Add Compass layout and placement example images --- .../content/components/drawer/drawer.md | 56 +- .../img/Pill-Inline-without-masthead.svg | 103 ++++ .../components/drawer/img/Pill-Inline.svg | 132 +++++ .../drawer/img/Pill-Overlay-In-main-page.svg | 145 +++++ .../img/Pill-Overlay-over-main-page.svg | 103 ++++ .../components/drawer/img/Pill-Overlay.svg | 143 +++++ .../drawer/img/compass-inline-drawer.svg | 118 +++++ .../drawer/img/compass-overlay-drawer.svg | 147 ++++++ .../components/drawer/img/drawer-inline.svg | 494 ++++++++++-------- .../components/drawer/img/drawer-overlay.svg | 439 +++++++++------- 10 files changed, 1456 insertions(+), 424 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Inline-without-masthead.svg create mode 100644 packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Inline.svg create mode 100644 packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay-In-main-page.svg create mode 100644 packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay-over-main-page.svg create mode 100644 packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay.svg create mode 100644 packages/documentation-site/patternfly-docs/content/components/drawer/img/compass-inline-drawer.svg create mode 100644 packages/documentation-site/patternfly-docs/content/components/drawer/img/compass-overlay-drawer.svg diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md b/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md index 27a548e99a..409a79a7e2 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md @@ -15,7 +15,7 @@ In addition to primary-details, the drawer component is frequently used in [noti ### Splitter in a drawer -A splitter allows you to create a layout with resizable panes. The orientation of a splitter can be set to vertical or horizontal. +A splitter allows you to create a layout with resizable panes. The orientation of a splitter can be set to vertical or horizontal. Depending on the direction the drawer opens within the page, you can place a splitter at the start or end of a drawer. ### When to use a splitter Add a splitter to a drawer if you need to resize the width or height of a panel to give content more space. If data shown in a drawer has enough space, then you don’t need to use a splitter. @@ -30,7 +30,7 @@ There are 2 types of drawer displays: overlay and inline. ### Overlay drawer -An overlay drawer appears "on top" of page content, and must be minimized or closed in order for users to view the content that is covered by the expanded drawer. +An overlay drawer appears "on top" of page content, and must be minimized or closed in order for users to view the content that is covered by the expanded drawer. Overlay drawers in default and glass mode will have the `--pf-t--global--background--color--floating--default` token applied.
![A drawer overlays page content, displaying a shadow where the primary page content is overlaid.](./img/drawer-overlay.svg) @@ -38,12 +38,62 @@ An overlay drawer appears "on top" of page content, and must be minimized or clo ### Inline drawer -An inline drawer is placed beside page content, making the rest of the page content more compact (but still visible). +An inline drawer is placed beside page content, making the rest of the page content more compact (but still visible). All inline drawer variants have a `--pf-t--global--background--color--primary--default` token applied.
![A drawer is beside page content, similar to a split screen view.](./img/drawer-inline.svg)
+### Overlay pill + +A rounded overlay drawer is available across all themes. Apply the `pf-m-pill` modifier—either by applying the class or using the `isPill` prop for React—to enable the rounded style. The `--pf-t--global--border--radius--medium` (16px) border radius token and `--pf-t--global--border--color--subtle` border color token are applied to all rounded drawers. When placing a rounded drawer in a page, use the `global/spacer/inset/page-chrome` gutter token to ensure consistent spacing. + +The rounded overlay drawer has a `.pf-v6-u-box-shadow-md` (medium box shadow) applied to the entire drawer. + +For an overlay pill drawer sitting above the main content area, the margin around the overlay drawer should use gutter spacer `--pf-t--global--spacer--gutter--default` on the top, bottom, and right if possible (or look visually equivalent if another code implementation is needed). + +
+![Example of an overlay pill drawer.](./img/Pill-Overlay.svg) +
+ +#### Compass layout - Pill overlay + +
+![Example of an overlay pill drawer in a Compass layout.](./img/compass-overlay-drawer.svg) +
+ +#### Over main page content - Pill overlay + +
+![Example of an overlay pill drawer over main page content.](./img/Pill-Overlay-over-main-page.svg) +
+ +#### In main page area - Pill overlay + +
+![Example of an overlay pill drawer in the main page area.](./img/Pill-Overlay-In-main-page.svg) +
+ +### Inline pill + +The rounded inline drawer shares the same base styling as the rounded overlay drawer. In the glass theme, a `.pf-v6-u-box-shadow-md` (medium box shadow) is applied to the entire drawer. + +
+![Example of an inline pill drawer.](./img/Pill-Inline.svg) +
+ +#### Without masthead - Inline pill + +
+![Example of an inline pill drawer without a masthead.](./img/Pill-Inline-without-masthead.svg) +
+ +#### Compass layout - Inline pill + +
+![Example of an inline pill drawer in a Compass layout.](./img/compass-inline-drawer.svg) +
+ ## Placement By default, a drawer is placed on the right side of the UI. Depending on your user case, you can adjust this so that the drawer is on the left or at the bottom of the page instead. diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Inline-without-masthead.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Inline-without-masthead.svg new file mode 100644 index 0000000000..569448b0ab --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Inline-without-masthead.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Inline.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Inline.svg new file mode 100644 index 0000000000..7ac4dace1b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Inline.svg @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay-In-main-page.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay-In-main-page.svg new file mode 100644 index 0000000000..d1e7ea1317 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay-In-main-page.svg @@ -0,0 +1,145 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay-over-main-page.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay-over-main-page.svg new file mode 100644 index 0000000000..e29bd148d4 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay-over-main-page.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay.svg new file mode 100644 index 0000000000..22ea19d3d2 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/Pill-Overlay.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/compass-inline-drawer.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/compass-inline-drawer.svg new file mode 100644 index 0000000000..cdaa8a253c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/compass-inline-drawer.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/compass-overlay-drawer.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/compass-overlay-drawer.svg new file mode 100644 index 0000000000..c8cc254e01 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/compass-overlay-drawer.svg @@ -0,0 +1,147 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-inline.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-inline.svg index 37234b192e..746121964d 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-inline.svg +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-inline.svg @@ -1,314 +1,360 @@ - + - + - + - + - + - - + + - + - + - - + + - - + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - + + - - + + - - + + - + - + - + - + - - + + - - - + + + - + - + - + - + - + - + - + diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-overlay.svg b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-overlay.svg index 808898bc28..0a773bdbac 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-overlay.svg +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/img/drawer-overlay.svg @@ -16,7 +16,7 @@ - + @@ -25,252 +25,297 @@ - + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -283,11 +328,11 @@ - + - + @@ -313,7 +358,7 @@ - + From d34e745817b56737c08673fe897904c8e9863b0c Mon Sep 17 00:00:00 2001 From: Kayla Chumley Date: Tue, 28 Jul 2026 13:58:44 -0400 Subject: [PATCH 3/4] Refine drawer pill guidelines: remove compass inline section, add compass overlay link, update splitter text --- .../patternfly-docs/content/components/drawer/drawer.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md b/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md index 409a79a7e2..9e0cf42a90 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md @@ -58,6 +58,8 @@ For an overlay pill drawer sitting above the main content area, the margin aroun #### Compass layout - Pill overlay +To see the drawer in a compass layout, view the [compass layout demo](/components/compass/org-demos/card-and-data-view-layout/). +
![Example of an overlay pill drawer in a Compass layout.](./img/compass-overlay-drawer.svg)
@@ -88,12 +90,6 @@ The rounded inline drawer shares the same base styling as the rounded overlay dr ![Example of an inline pill drawer without a masthead.](./img/Pill-Inline-without-masthead.svg)
-#### Compass layout - Inline pill - -
-![Example of an inline pill drawer in a Compass layout.](./img/compass-inline-drawer.svg) -
- ## Placement By default, a drawer is placed on the right side of the UI. Depending on your user case, you can adjust this so that the drawer is on the left or at the bottom of the page instead. From 62b289f2eae02517ac09a32695fc698427fdfc67 Mon Sep 17 00:00:00 2001 From: Kayla Chumley Date: Thu, 30 Jul 2026 12:12:33 -0400 Subject: [PATCH 4/4] Update inline drawer glass mode description --- .../patternfly-docs/content/components/drawer/drawer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md b/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md index 9e0cf42a90..2a31e45548 100644 --- a/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md +++ b/packages/documentation-site/patternfly-docs/content/components/drawer/drawer.md @@ -38,7 +38,7 @@ An overlay drawer appears "on top" of page content, and must be minimized or clo ### Inline drawer -An inline drawer is placed beside page content, making the rest of the page content more compact (but still visible). All inline drawer variants have a `--pf-t--global--background--color--primary--default` token applied. +An inline drawer is placed beside page content, making the rest of the page content more compact (but still visible). All inline drawer variants have a `--pf-t--global--background--color--primary--default` token applied. In glass mode, inline drawers inherit the glass styling and have no background color.
![A drawer is beside page content, similar to a split screen view.](./img/drawer-inline.svg)