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..9e0cf42a90 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,58 @@ 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 + +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) +
+ +#### 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) +
+ ## 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 17926409c7..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,242 +1,361 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + - - + + - - + + 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..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 @@ -1,268 +1,373 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - + + + + + + + - - + + + + + + + + + + + + + + + + + - - + + 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 @@ - + - + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - - + - + - + + + + + + + + + + + + + + + +