@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/docs/components/OptionsMenu/examples/options-menu.md

@@ -1,6 +1,7 @@
 ---
 id: Options menu
 section: components
+subsection: menus
 cssPrefix: pf-c-options-menu
 ---import './options-menu.css'
 
@@ -721,35 +722,34 @@ cssPrefix: pf-c-options-menu
 
 ### Accessibility
 
-_This section to be updated once the React implementation is complete._
+*This section to be updated once the React implementation is complete.*
 
-| Attribute        | Applied to                                                        | Outcome                                                                                |
-| ---------------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| `role` or `aria` | `pf-c-options-menu`                                               | accessibility notes.                                                                   |
-| `disabled`       | `.pf-c-options-menu__toggle`, `.pf-c-options-menu__toggle-button` | Disables the options menu toggle and toggle button and removes it from keyboard focus. |
-
-_Note:_ The attribute `aria-selected="true"` should be set programmatically to the selected item(s).
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role` or `aria` | `pf-c-options-menu` |  accessibility notes. |
+| `disabled` | `.pf-c-options-menu__toggle`, `.pf-c-options-menu__toggle-button` | Disables the options menu toggle and toggle button and removes it from keyboard focus. |
+*Note:* The attribute `aria-selected="true"` should be set programmatically to the selected item(s).
 
 ### Usage
 
-| Class                                | Applied to                      | Outcome                                                                                                                                                                                                                                                                                                 |
-| ------------------------------------ | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-options-menu`                 | `<div>`                         | Initiates a custom options menu.                                                                                                                                                                                                                                                                        |
-| `.pf-c-options-menu__toggle`         | `<button>`                      | Initiates a custom toggle.                                                                                                                                                                                                                                                                              |
-| `.pf-c-options-menu__toggle-text`    | `<span>`                        | Initiates a wrapper for toggle text.                                                                                                                                                                                                                                                                    |
-| `.pf-c-options-menu__toggle-icon`    | `<i>`                           | Initiates the up/down arrow beside toggle text.                                                                                                                                                                                                                                                         |
-| `.pf-c-options-menu__toggle-button`  | `<button>`                      | Initiates a custom toggle button for use when `.pf-c-options-menu__toggle` is a `<div>` or non-interactive element.                                                                                                                                                                                     |
-| `.pf-c-options-menu__menu`           | `<ul>`                          | Initiates the custom options-menu menu.                                                                                                                                                                                                                                                                 |
-| `.pf-c-options-menu__menu-item`      | `<li>`                          | Initiates the items in the custom options-menu menu.                                                                                                                                                                                                                                                    |
-| `.pf-c-options-menu__menu-item-icon` | `<i>`                           | Initiates the icon to indicate selected menu items.                                                                                                                                                                                                                                                     |
-| `.pf-c-options-menu__group`          | `<section>`                     | Defines a group of items in an options menu. **Required when there is more than one group in an options menu**.                                                                                                                                                                                         |
-| `.pf-c-options-menu__group-title`    | `<h1>`                          | Defines the title for a group of items in an options menu.                                                                                                                                                                                                                                              |
-| `.pf-m-top`                          | `.pf-c-options-menu`            | Modifies to display the menu above the toggle.                                                                                                                                                                                                                                                          |
-| `.pf-m-align-right`                  | `.pf-c-options-menu__menu`      | Modifies to display the menu aligned to the right edge of the toggle                                                                                                                                                                                                                                    |
-| `.pf-m-expanded`                     | `.pf-c-options-menu`            | Modifies for the expanded state.                                                                                                                                                                                                                                                                        |
-| `.pf-m-static`                       | `.pf-c-options-menu__menu`      | Modifies the menu to be statically positioned to support custom positioning.                                                                                                                                                                                                                            |
-| `.pf-m-plain`                        | `.pf-c-options-menu__toggle`    | Modifies to display the toggle with no border. **Note:** Can be combined with `.pf-m-text` to create a normal text toggle with no border.                                                                                                                                                               |
-| `.pf-m-disabled`                     | `.pf-c-options-menu__toggle`    | Modifies to display the options menu toggle as disabled. This applies to `pf-c-options-menu__toggle` and should not be used in lieu of the `disabled` attribute on `pf-c-options-menu__toggle`. When this is used, `disabled` should also be added to any form elements in `.pf-c-options-menu__toggle` |
-| `.pf-m-text`                         | `.pf-c-options-menu__toggle`    | For use when the `.pf-c-options-menu__toggle` is a `<div>` or some non-interactive elment, and you're using a custom `.pf-c-options-menu__toggle-button` to toggle the options menu.                                                                                                                    |
-| `.pf-m-active`                       | `.pf-c-options-menu__toggle`    | Forces display of the active state of the toggle.                                                                                                                                                                                                                                                       |
-| `.pf-m-selected`                     | `.pf-c-options-menu__menu-item` | Modifies the menu item for the selected state.                                                                                                                                                                                                                                                          |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-options-menu` | `<div>` |  Initiates a custom options menu. |
+| `.pf-c-options-menu__toggle` | `<button>` |  Initiates a custom toggle. |
+| `.pf-c-options-menu__toggle-text` | `<span>` | Initiates a wrapper for toggle text.
+| `.pf-c-options-menu__toggle-icon` | `<i>` | Initiates the up/down arrow beside toggle text. |
+| `.pf-c-options-menu__toggle-button` | `<button>` | Initiates a custom toggle button for use when `.pf-c-options-menu__toggle` is a `<div>` or non-interactive element. |
+| `.pf-c-options-menu__menu` | `<ul>` |  Initiates the custom options-menu menu. |
+| `.pf-c-options-menu__menu-item` | `<li>` |  Initiates the items in the custom options-menu menu. |
+| `.pf-c-options-menu__menu-item-icon` | `<i>` |  Initiates the icon to indicate selected menu items. |
+| `.pf-c-options-menu__group` | `<section>` | Defines a group of items in an options menu. **Required when there is more than one group in an options menu**. |
+| `.pf-c-options-menu__group-title` | `<h1>` | Defines the title for a group of items in an options menu. |
+| `.pf-m-top` | `.pf-c-options-menu` | Modifies to display the menu above the toggle. |
+| `.pf-m-align-right` | `.pf-c-options-menu__menu` | Modifies to display the menu aligned to the right edge of the toggle |
+| `.pf-m-expanded` | `.pf-c-options-menu` |  Modifies for the expanded state. |
+| `.pf-m-static` | `.pf-c-options-menu__menu` | Modifies the menu to be statically positioned to support custom positioning. |
+| `.pf-m-plain` | `.pf-c-options-menu__toggle` |  Modifies to display the toggle with no border. **Note:** Can be combined with `.pf-m-text` to create a normal text toggle with no border. |
+| `.pf-m-disabled` | `.pf-c-options-menu__toggle` | Modifies to display the options menu toggle as disabled. This applies to `pf-c-options-menu__toggle` and should not be used in lieu of the `disabled` attribute on `pf-c-options-menu__toggle`. When this is used, `disabled` should also be added to any form elements in `.pf-c-options-menu__toggle` |
+| `.pf-m-text` | `.pf-c-options-menu__toggle` |  For use when the `.pf-c-options-menu__toggle` is a `<div>` or some non-interactive elment, and you're using a custom `.pf-c-options-menu__toggle-button` to toggle the options menu. |
+| `.pf-m-active` | `.pf-c-options-menu__toggle` | Forces display of the active state of the toggle. |
+| `.pf-m-selected` | `.pf-c-options-menu__menu-item` | Modifies the menu item for the selected state. |

package/docs/components/OverflowMenu/examples/overflow-menu.md

@@ -70,20 +70,20 @@ The overflow menu relies on groups (`.pf-c-overflow-menu__group`) and items (`.p
 
 ### Default spacing for items and groups:
 
-| Class                        | CSS Variable                          | Computed Value |
-| ---------------------------- | ------------------------------------- | -------------- |
-| `.pf-c-overflow-menu__group` | `--pf-c-overflow-menu__group--spacer` | `16px`         |
-| `.pf-c-overflow-menu__item`  | `--pf-c-overflow-menu__item--spacer`  | `16px`         |
+| Class | CSS Variable | Computed Value |
+| -- | -- | -- |
+| `.pf-c-overflow-menu__group` | `--pf-c-overflow-menu__group--spacer` | `16px` |
+| `.pf-c-overflow-menu__item` | `--pf-c-overflow-menu__item--spacer` | `16px` |
 
 ### Overflow menu item types
 
-| Class                          | Applied to | Outcome                                                  |
-| ------------------------------ | ---------- | -------------------------------------------------------- |
-| `.pf-c-overflow-menu`          | `<div>`    | Initiates an overflow menu. **Required**                 |
-| `.pf-c-overflow-menu__content` | `<div>`    | Initiates an overflow menu content section. **Required** |
-| `.pf-c-overflow-menu__control` | `<div>`    | Initiates the overflow menu control. **Required**        |
-| `.pf-c-overflow-menu__group`   | `<div>`    | Initiates an overflow menu group.                        |
-| `.pf-c-overflow-menu__item`    | `<div>`    | Initiates an overflow menu item. **Required**            |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-overflow-menu` | `<div>` | Initiates an overflow menu. **Required** |
+| `.pf-c-overflow-menu__content` | `<div>` | Initiates an overflow menu content section. **Required** |
+| `.pf-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. **Required** |
+| `.pf-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group. |
+| `.pf-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. **Required** |
 
 ### Group types
 
@@ -144,11 +144,11 @@ The action group consists of a primary and secondary action. Any additional acti
 
 ### Overflow menu group types
 
-| Class                        | Applied to                   | Outcome                                                                                                                                                                                                                                                           |
-| ---------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-overflow-menu__group` | `<div>`                      | Initiates an overflow menu component group.                                                                                                                                                                                                                       |
-| `.pf-m-button-group`         | `.pf-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-c-overflow-menu__group--m-button-group--spacer)`. Child `.pf-c-button` spacer value is set to `var(--pf-c-overflow-menu__group--m-button-group--space-items)`.                             |
-| `.pf-m-icon-button-group`    | `.pf-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-c-overflow-menu__group--m-icon-button-group--spacer)`. Child `.pf-c-button.pf-m-button-plain` spacer value is set to `var(--pf-c-overflow-menu__group--m-icon-button-group--space-items)`. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-overflow-menu__group` | `<div>` | Initiates an overflow menu component group. |
+| `.pf-m-button-group` | `.pf-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-c-overflow-menu__group--m-button-group--spacer)`. Child `.pf-c-button` spacer value is set to `var(--pf-c-overflow-menu__group--m-button-group--space-items)`. |
+| `.pf-m-icon-button-group` | `.pf-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-c-overflow-menu__group--m-icon-button-group--spacer)`. Child `.pf-c-button.pf-m-button-plain` spacer value is set to `var(--pf-c-overflow-menu__group--m-icon-button-group--space-items)`. |
 
 ### Additional options in dropdown (hidden)
 
@@ -362,12 +362,12 @@ The action group consists of a primary and secondary action. Any additional acti
 
 ### Usage
 
-| Class                          | Applied to                   | Outcome                                                                                                                                                                                                                          |
-| ------------------------------ | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-overflow-menu`          | `<div>`                      | Initiates an overflow menu. **Required**                                                                                                                                                                                         |
-| `.pf-c-overflow-menu__content` | `<div>`                      | Initiates an overflow menu content section. **Required**                                                                                                                                                                         |
-| `.pf-c-overflow-menu__control` | `<div>`                      | Initiates the overflow menu control. **Required**                                                                                                                                                                                |
-| `.pf-c-overflow-menu__group`   | `<div>`                      | Initiates an overflow menu group.                                                                                                                                                                                                |
-| `.pf-c-overflow-menu__item`    | `<div>`                      | Initiates an overflow menu item. **Required**                                                                                                                                                                                    |
-| `.pf-m-button-group`           | `.pf-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-c-overflow-menu__group--m-button-group--spacer)`. Child spacer value is set to `var(--pf-c-overflow-menu__group--m-button-group--space-items)`.           |
-| `.pf-m-icon-button-group`      | `.pf-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-c-overflow-menu__group--m-icon-button-group--spacer)`. Child spacer value is set to `var(--pf-c-overflow-menu__group--m-icon-button-group--space-items)`. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-overflow-menu` | `<div>` | Initiates an overflow menu. **Required** |
+| `.pf-c-overflow-menu__content` | `<div>` | Initiates an overflow menu content section. **Required** |
+| `.pf-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. **Required** |
+| `.pf-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group. |
+| `.pf-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. **Required** |
+| `.pf-m-button-group` | `.pf-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-c-overflow-menu__group--m-button-group--spacer)`. Child spacer value is set to `var(--pf-c-overflow-menu__group--m-button-group--space-items)`. |
+| `.pf-m-icon-button-group` | `.pf-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-c-overflow-menu__group--m-icon-button-group--spacer)`. Child spacer value is set to `var(--pf-c-overflow-menu__group--m-icon-button-group--space-items)`. |

package/docs/components/Page/examples/Page.css

@@ -6,6 +6,12 @@
   color: var(--pf-global--Color--dark-100);
 }
 
-#ws-core-c-page-with-or-without-fill .ws-preview-html {
+#ws-core-c-page-with-or-without-fill .ws-preview-html,
+#ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
   height: 500px;
 }
+
+#ws-core-c-page-multiple-sidebar-body-elements .ws-preview-html,
+#ws-core-c-page-using-flex-layout .ws-preview-html {
+  height: 100%;
+}

package/docs/components/Page/examples/Page.md

@@ -67,6 +67,31 @@ wrapperTag: div
 
 ```
 
+### Multiple sidebar body elements, padding, and fill
+
+```html
+<div class="pf-c-page">
+  <header class="pf-c-page__header">
+    <div class="pf-c-page__header-brand">
+      <div class="pf-c-page__header-brand-toggle">toggle</div>
+      <a href="#" class="pf-c-page__header-brand-link">Logo</a>
+    </div>
+    <div class="pf-c-page__header-tools">header-tools</div>
+  </header>
+  <div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body">Navigation</div>
+    <div
+      class="pf-c-page__sidebar-body pf-m-fill pf-m-page-insets"
+    >inset content</div>
+    <div class="pf-c-page__sidebar-body pf-m-page-insets">footer content</div>
+  </div>
+  <main class="pf-c-page__main" tabindex="-1">
+    <section class="pf-c-page__main-section pf-m-light"></section>
+  </main>
+</div>
+
+```
+
 ### With or without fill
 
 ```html
@@ -206,60 +231,62 @@ This component provides the basic chrome for a page, including sidebar, header,
 
 ### Accessibility
 
-| Attribute                     | Applied to                                       | Outcome                                                                                                                                                                                                                                                                           |
-| ----------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="banner"`               | `.pf-c-page__header`                             | Identifies the element that serves as the banner region.                                                                                                                                                                                                                          |
-| `role="main"`                 | `.pf-c-page__main`                               | Identifies the element that serves as the main region.                                                                                                                                                                                                                            |
-| `tabindex="-1"`               | `.pf-c-page__main`                               | Allows the main region to receive programmatic focus. **Required**                                                                                                                                                                                                                |
-| `id="[id]"`                   | `.pf-c-page__main`                               | Provides a hook for sending focus to new content. **Required**                                                                                                                                                                                                                    |
-| `aria-expanded="true/false"`  | `.pf-c-page__header-brand-toggle > .pf-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required**                                                                                                                                                                              |
-| `aria-controls="[id of nav]"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Identifies the element controlled by the toggle. **Required**                                                                                                                                                                                                                     |
-| `tabindex="0"`                | `.pf-c-page__main-section.pf-m-overflow-scroll`  | If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding `tabindex="0"`. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="banner"` | `.pf-c-page__header` | Identifies the element that serves as the banner region. |
+| `role="main"` | `.pf-c-page__main` | Identifies the element that serves as the main region. |
+| `tabindex="-1"` | `.pf-c-page__main` | Allows the main region to receive programmatic focus. **Required** |
+| `id="[id]"` | `.pf-c-page__main` | Provides a hook for sending focus to new content. **Required** |
+| `aria-expanded="true/false"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
+| `aria-controls="[id of nav]"` | `.pf-c-page__header-brand-toggle > .pf-c-button` | Identifies the element controlled by the toggle. **Required**
+| `tabindex="0"` | `.pf-c-page__main-section.pf-m-overflow-scroll` | If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding `tabindex="0"`. |
 
 ### Usage
 
-| Class                                                    | Applied to                                                        | Outcome                                                                                                                                                                                                                                                       |
-| -------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-page`                                             | `<div>`                                                           | Declares the page component.                                                                                                                                                                                                                                  |
-| `.pf-m-full-height`                                      | `.pf-c-page`                                                      | Sets the page to be full height. Eliminates the need to ensure that all ancestors of `.pf-c-page` have height of 100% set.                                                                                                                                    |
-| `.pf-c-page__header`                                     | `<header>`                                                        | Declares the page header.                                                                                                                                                                                                                                     |
-| `.pf-c-page__header-brand`                               | `<div>`                                                           | Creates a header container to nest the brand component.                                                                                                                                                                                                       |
-| `.pf-c-page__header-brand-toggle`                        | `<div>`                                                           | Creates a container to nest the sidebar toggle.                                                                                                                                                                                                               |
-| `.pf-c-page__header-brand-link`                          | `<a>`, `<span>`                                                   | Creates a link for the brand logo. Use a `<span>` if there is no link.                                                                                                                                                                                        |
-| `.pf-c-page__header-selector`                            | `<div>`                                                           | Creates a header container to nest the context selector component.                                                                                                                                                                                            |
-| `.pf-c-page__header-nav`                                 | `<div>`                                                           | Creates a container to nest the navigation component in the header.                                                                                                                                                                                           |
-| `.pf-c-page__header-tools`                               | `<div>`                                                           | Creates a container to nest the icons and menus in header.                                                                                                                                                                                                    |
-| `.pf-c-page__header-tools-group`                         | `<div>`                                                           | Creates a container for grouping sets of icons and menus in header.                                                                                                                                                                                           |
-| `.pf-c-page__header-tools-item`                          | `<div>`                                                           | Creates a container for an item in a header tools group.                                                                                                                                                                                                      |
-| `.pf-c-page__sidebar`                                    | `<aside>`                                                         | Declares the page sidebar.                                                                                                                                                                                                                                    |
-| `.pf-c-page__sidebar-body`                               | `<div>`                                                           | Creates a wrapper within the sidebar to hold content.                                                                                                                                                                                                         |
-| `.pf-c-page__main`                                       | `<main>`                                                          | Declares the main page area.                                                                                                                                                                                                                                  |
-| `.pf-c-page__main-nav`                                   | `<section>`                                                       | Creates a container to nest the navigation component in the main page area.                                                                                                                                                                                   |
-| `.pf-c-page__main-breadcrumb`                            | `<section>`                                                       | Creates a container to nest the breadcrumb component in the main page area.                                                                                                                                                                                   |
-| `.pf-c-page__main-section`                               | `<section>`                                                       | Creates a section container in the main page area. **Note: The last/only `.pf-c-page__main-section` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
-| `.pf-c-page__main-tabs`                                  | `<section>`                                                       | Creates a container to nest the tabs component in the main page area.                                                                                                                                                                                         |
-| `.pf-c-page__main-wizard`                                | `<section>`                                                       | Creates a container to nest the wizard component in the main page area.                                                                                                                                                                                       |
-| `.pf-c-page__main-body`                                  | `<div>`                                                           | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-c-page__main-section`**                                                                                                                                        |
-| `.pf-c-page__main-group`                                 | `<div>`                                                           | Creates the group of `.pf-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky.                                                                                                             |
-| `.pf-c-page__drawer`                                     | `<div>`                                                           | Creates a container for the drawer component when placing the main page element in the drawer body.                                                                                                                                                           |
-| `.pf-m-selected`                                         | `.pf-c-page__header-tools-item`                                   | Modifies a header tools item to indicate that the button inside is in the selected state.                                                                                                                                                                     |
-| `.pf-m-expanded`                                         | `.pf-c-page__sidebar`                                             | Modifies the sidebar for the expanded state.                                                                                                                                                                                                                  |
-| `.pf-m-collapsed`                                        | `.pf-c-page__sidebar`                                             | Modifies the sidebar for the collapsed state.                                                                                                                                                                                                                 |
-| `.pf-m-light`                                            | `.pf-c-page__sidebar`                                             | Modifies the sidebar the light variation. **Note: for use with a light themed nav component**                                                                                                                                                                 |
-| `.pf-m-light`                                            | `.pf-c-page__main-section`                                        | Modifies a main page section to have a light theme.                                                                                                                                                                                                           |
-| `.pf-m-dark-200`                                         | `.pf-c-page__main-section`                                        | Modifies a main page section to have a dark theme and a dark transparent background.                                                                                                                                                                          |
-| `.pf-m-dark-100`                                         | `.pf-c-page__main-section`                                        | Modifies a main page section to have a dark theme and a darker transparent background.                                                                                                                                                                        |
-| `.pf-m-light-200`                                        | `.pf-c-page__main-wizard`                                         | Modifies a wizard page section to have a light 200 theme.                                                                                                                                                                                                     |
-| `.pf-m-no-padding`, `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section`                                        | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                    |
-| `.pf-m-padding{-on-[breakpoint]}`                        | `.pf-c-page__main-section`                                        | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding.                                                    |
-| `.pf-m-fill`                                             | `.pf-c-page__main-section`                                        | Modifies a main page section to grow to fill the available vertical space.                                                                                                                                                                                    |
-| `.pf-m-no-fill`                                          | `.pf-c-page__main-section`                                        | Modifies a main page section to not grow to fill the available vertical space.                                                                                                                                                                                |
-| `.pf-m-hidden{-on-[breakpoint]}`                         | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`.                                                        |
-| `.pf-m-visible{-on-[breakpoint]}`                        | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                            |
-| `.pf-m-limit-width`                                      | `.pf-c-page__main-section`                                        | Modifies a page section to limit the `max-width` of the content inside.                                                                                                                                                                                       |
-| `.pf-m-align-center`                                     | `.pf-c-page__main-section.pf-m-limit-width`                       | Modifies a page section body to align center.                                                                                                                                                                                                                 |
-| `.pf-m-sticky-top{-on-[breakpoint]-height}`              | `.pf-c-page__main-*`                                              | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint.                                                                                                                                                           |
-| `.pf-m-sticky-bottom{-on-[breakpoint]-height}`           | `.pf-c-page__main-*`                                              | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint.                                                                                                                                                        |
-| `.pf-m-shadow-bottom`                                    | `.pf-c-page__main-*`                                              | Modifies a section/group to have a bottom shadow.                                                                                                                                                                                                             |
-| `.pf-m-shadow-top`                                       | `.pf-c-page__main-*`                                              | Modifies a section/group to have a top shadow.                                                                                                                                                                                                                |
-| `.pf-m-overflow-scroll`                                  | `.pf-c-page__main-*`                                              | Modifies a section/group to show a scrollbar if it has overflow content.                                                                                                                                                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-page` | `<div>` |   Declares the page component. |
+| `.pf-m-full-height` | `.pf-c-page` |   Sets the page to be full height. Eliminates the need to ensure that all ancestors of `.pf-c-page` have height of 100% set. |
+| `.pf-c-page__header` | `<header>` |   Declares the page header. |
+| `.pf-c-page__header-brand` | `<div>` |   Creates a header container to nest the brand component. |
+| `.pf-c-page__header-brand-toggle` | `<div>` |   Creates a container to nest the sidebar toggle. |
+| `.pf-c-page__header-brand-link` | `<a>`, `<span>` |   Creates a link for the brand logo. Use a `<span>` if there is no link. |
+| `.pf-c-page__header-selector` | `<div>` |   Creates a header container to nest the context selector component. |
+| `.pf-c-page__header-nav` | `<div>` |   Creates a container to nest the navigation component in the header. |
+| `.pf-c-page__header-tools` | `<div>` |   Creates a container to nest the icons and menus in header. |
+| `.pf-c-page__header-tools-group` | `<div>` |  Creates a container for grouping sets of icons and menus in header. |
+| `.pf-c-page__header-tools-item` | `<div>` |  Creates a container for an item in a header tools group. |
+| `.pf-c-page__sidebar` | `<aside>` |   Declares the page sidebar. |
+| `.pf-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-c-page__sidebar-body` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
+| `.pf-c-page__main` | `<main>` |   Declares the main page area. |
+| `.pf-c-page__main-nav` | `<section>` |   Creates a container to nest the navigation component in the main page area. |
+| `.pf-c-page__main-breadcrumb` | `<section>` |   Creates a container to nest the breadcrumb component in the main page area. |
+| `.pf-c-page__main-section` | `<section>` |  Creates a section container in the main page area. **Note: The last/only `.pf-c-page__main-section` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.**  |
+| `.pf-c-page__main-tabs` | `<section>` | Creates a container to nest the tabs component in the main page area. |
+| `.pf-c-page__main-wizard` | `<section>` | Creates a container to nest the wizard component in the main page area. |
+| `.pf-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-c-page__main-section`** |
+| `.pf-c-page__main-group` | `<div>` | Creates the group of `.pf-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
+| `.pf-c-page__drawer` | `<div>` |  Creates a container for the drawer component when placing the main page element in the drawer body. |
+| `.pf-m-selected` | `.pf-c-page__header-tools-item` | Modifies a header tools item to indicate that the button inside is in the selected state. |
+| `.pf-m-expanded` | `.pf-c-page__sidebar` |  Modifies the sidebar for the expanded state. |
+| `.pf-m-collapsed` | `.pf-c-page__sidebar` |  Modifies the sidebar for the collapsed state. |
+| `.pf-m-page-insets` | `.pf-c-page__sidebar-body` |  Modifies a sidebar body padding/inset to visually match padding of page elements. |
+| `.pf-m-inset-none` | `.pf-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
+| `.pf-m-light` | `.pf-c-page__sidebar` |  Modifies the sidebar the light variation. **Note: for use with a light themed nav component** |
+| `.pf-m-light` | `.pf-c-page__main-section` | Modifies a main page section to have a light theme. |
+| `.pf-m-dark-200` | `.pf-c-page__main-section` |  Modifies a main page section to have a dark theme and a dark transparent background. |
+| `.pf-m-dark-100` | `.pf-c-page__main-section` |  Modifies a main page section to have a dark theme and a darker transparent background. |
+| `.pf-m-light-200` | `.pf-c-page__main-wizard` | Modifies a wizard page section to have a light 200 theme. |
+| `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
+| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-fill` | `.pf-c-page__main-section`, `.pf-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
+| `.pf-m-no-fill` | `.pf-c-page__main-section`, `.pf-c-page__sidebar-body` | Modifies the element to not grow to fill the available vertical space. |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-limit-width` | `.pf-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
+| `.pf-m-align-center` | `.pf-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
+| `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
+| `.pf-m-sticky-bottom{-on-[breakpoint]-height}` | `.pf-c-page__main-*` | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint. |
+| `.pf-m-shadow-bottom` | `.pf-c-page__main-*` | Modifies a section/group to have a bottom shadow. |
+| `.pf-m-shadow-top` | `.pf-c-page__main-*` | Modifies a section/group to have a top shadow. |
+| `.pf-m-overflow-scroll` | `.pf-c-page__main-*` | Modifies a section/group to show a scrollbar if it has overflow content. |

package/docs/components/Pagination/examples/Pagination.md

@@ -1303,33 +1303,33 @@ Note: `<button>` or `<a>` elements can be used in `.pf-c-pagination__nav-page-se
 
 ### Accessibility
 
-| Attribute       | Applied to                                                 | Outcome                                                                     |
-| --------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------- |
-| `aria-label`    | `.pf-c-pagination__nav`                                    | Provides an accessible name for pagination navigation element. **Required** |
-| `type="number"` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Defines a field as a number. **Required**                                   |
-| `value`         | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required**                                |
-| `min`           | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required**                                |
-| `max`           | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required**                                    |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label`  | `.pf-c-pagination__nav` |  Provides an accessible name for pagination navigation element. **Required** |
+| `type="number"` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Defines a field as a number. **Required** |
+| `value` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides initial integer value. **Required** |
+| `min` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides minimum integer value. **Required** |
+| `max` | `.pf-c-pagination__nav-page-select` > `.pf-c-form-control` | Provides max integer value. **Required** |
 
 ### Usage
 
-| Class                                                       | Applied to                      | Outcome                                                                                                                                                                                                    |
-| ----------------------------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-pagination`                                          | `<div>`                         | Initiates pagination.                                                                                                                                                                                      |
-| `.pf-c-pagination__current`                                 | `<div>`                         | Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`.                                                                 |
-| `.pf-c-pagination__total-items`                             | `<div>`                         | Initiates element to replace the options menu on summary.                                                                                                                                                  |
-| `.pf-c-pagination__nav`                                     | `<nav>`                         | Initiates pagination nav.                                                                                                                                                                                  |
-| `.pf-c-pagination__nav-control`                             | `<div>`                         | Initiates pagination nav control.                                                                                                                                                                          |
-| `.pf-c-pagination__nav-page-select`                         | `<div>`                         | Initiates pagination nav page select.                                                                                                                                                                      |
-| `.pf-m-display-summary{-on-[breakpoint]}`                   | `.pf-c-pagination`              | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
-| `.pf-m-display-full{-on-[breakpoint]}`                      | `.pf-c-pagination`              | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                         |
-| `.pf-m-bottom`                                              | `.pf-c-pagination`              | Modifies for bottom pagination component styles.                                                                                                                                                           |
-| `.pf-m-compact`                                             | `.pf-c-pagination`              | Modifies for compact pagination component styles.                                                                                                                                                          |
-| `.pf-m-static`                                              | `.pf-c-pagination.pf-m-bottom`  | Modifies bottom pagination to not be positioned sticky on summary.                                                                                                                                         |
-| `.pf-m-sticky`                                              | `.pf-c-pagination`              | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-c-pagination.pf-m-bottom`. |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-pagination`              | Modifies pagination horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                        |
-| `.pf-m-page-insets`                                         | `.pf-c-pagination`              | Modifies the pagination component padding/inset to visually match padding of page elements.                                                                                                                |
-| `.pf-m-first`                                               | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button.                                                                                                                                                        |
-| `.pf-m-prev`                                                | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button.                                                                                                                                                     |
-| `.pf-m-next`                                                | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button.                                                                                                                                                         |
-| `.pf-m-last`                                                | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button.                                                                                                                                                         |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-pagination` | `<div>` |  Initiates pagination. |
+| `.pf-c-pagination__current` | `<div>` |  Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
+| `.pf-c-pagination__total-items` | `<div>` | Initiates element to replace the options menu on summary. |
+| `.pf-c-pagination__nav` | `<nav>` |  Initiates pagination nav. |
+| `.pf-c-pagination__nav-control` | `<div>` |  Initiates pagination nav control. |
+| `.pf-c-pagination__nav-page-select` | `<div>` |  Initiates pagination nav page select. |
+| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-bottom` | `.pf-c-pagination` | Modifies for bottom pagination component styles. |
+| `.pf-m-compact` | `.pf-c-pagination` | Modifies for compact pagination component styles. |
+| `.pf-m-static` | `.pf-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
+| `.pf-m-sticky` | `.pf-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-c-pagination.pf-m-bottom`. |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-page-insets` | `.pf-c-pagination` |  Modifies the pagination component padding/inset to visually match padding of page elements. |
+| `.pf-m-first` | `.pf-c-pagination__nav-control` | Indicates the control is for the first page button. |
+| `.pf-m-prev` | `.pf-c-pagination__nav-control` | Indicates the control is for the previous page button. |
+| `.pf-m-next` | `.pf-c-pagination__nav-control` | Indicates the control is for the next page button. |
+| `.pf-m-last` | `.pf-c-pagination__nav-control` | Indicates the control is for the last page button. |

package/docs/components/Panel/examples/Panel.md

@@ -150,13 +150,13 @@ cssPrefix: pf-c-panel
 
 ### Usage
 
-| Class                    | Applied to    | Outcome                                   |
-| ------------------------ | ------------- | ----------------------------------------- |
-| `.pf-c-panel`            | `<div>`       | Initiates the panel. **Required**         |
-| `.pf-c-panel__header`    | `<div>`       | Initiates the panel header.               |
-| `.pf-c-panel__main`      | `<div>`       | Initiates the panel main content.         |
-| `.pf-c-panel__main-body` | `<div>`       | Initiates a panel content body container. |
-| `.pf-c-panel__footer`    | `<div>`       | Initiates the panel footer.               |
-| `.pf-m-bordered`         | `.pf-c-panel` | Modifies the panel for bordered styles.   |
-| `.pf-m-raised`           | `.pf-c-panel` | Modifies the panel for raised styles.     |
-| `.pf-m-scrollable`       | `.pf-c-panel` | Modifies the panel for scrollable styles. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-panel` | `<div>` | Initiates the panel. **Required** |
+| `.pf-c-panel__header` | `<div>` | Initiates the panel header. |
+| `.pf-c-panel__main` | `<div>` | Initiates the panel main content. |
+| `.pf-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
+| `.pf-c-panel__footer` | `<div>` | Initiates the panel footer. |
+| `.pf-m-bordered` | `.pf-c-panel` | Modifies the panel for bordered styles. |
+| `.pf-m-raised` | `.pf-c-panel` | Modifies the panel for raised styles. |
+| `.pf-m-scrollable` | `.pf-c-panel` | Modifies the panel for scrollable styles. |