@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.21

package/docs/components/DescriptionList/examples/DescriptionList.md

@@ -1560,34 +1560,34 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ### Accessibility
 
-| Attribute      | Applied to                                    | Outcome                                                                                                                                       |
-| -------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`        | `.pf-c-description-list`                      | Provides an accessible title for the description list. **Required**                                                                           |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `title` | `.pf-c-description-list` | Provides an accessible title for the description list. **Required** |
 | `tabindex="0"` | `.pf-c-description-list__text.pf-m-help-text` | Inserts the `.pf-c-description-list__text` into the tab order of the page so that it is focusable. **Required when the element is clickable** |
 
 ### Usage
 
-| Class                                                                           | Applied to                               | Outcome                                                                                                                                                                        |
-| ------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-description-list`                                                        | `<dl>`                                   | Initiates the description list component. **Required**                                                                                                                         |
-| `.pf-c-description-list__group`                                                 | `<div>`                                  | Initiates a description list component group. **Required**                                                                                                                     |
-| `.pf-c-description-list__term`                                                  | `<dt>`                                   | Initiates a description list component term. **Required**                                                                                                                      |
-| `.pf-c-description-list__description`                                           | `<dd>`                                   | Initiates a description list component description. **Required**                                                                                                               |
-| `.pf-c-description-list__text`                                                  | `<span>`, `<div>`                        | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required**                                               |
-| `.pf-c-description-list__term-icon`                                             | `<span>`                                 | Initiates a description list component term icon element.                                                                                                                      |
-| `.pf-m-compact`                                                                 | `.pf-c-description-list`                 | Modifies the description list for compact horizontal and vertical spacing.                                                                                                     |
-| `.pf-m-display-lg`                                                              | `.pf-c-description-list`                 | Modifies the description list to have large display styling.                                                                                                                   |
-| `.pf-m-display-2xl`                                                             | `.pf-c-description-list`                 | Modifies the description list to have 2xl display styling.                                                                                                                     |
-| `.pf-m-fluid`                                                                   | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid.                                                                                                                          |
-| `.pf-m-help-text`                                                               | `.pf-c-description-list__text`           | Indicates there is more information available for the description list component term text.                                                                                    |
-| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}`                                   | `.pf-c-description-list`                 | Modifies the description list component term and description pair to a horizontal layout.                                                                                      |
-| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}`                                     | `.pf-c-description-list`                 | Modifies the description list component term and description pair to a vertical layout.                                                                                        |
-| `.pf-m-fill-columns`                                                            | `.pf-c-description-list`                 | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right.                                                                   |
-| `.pf-m-auto-column-widths`                                                      | `.pf-c-description-list`                 | Modifies the description list to format automatically.                                                                                                                         |
-| `.pf-m-inline-grid`                                                             | `.pf-c-description-list`                 | Modifies the description list display to inline-grid.                                                                                                                          |
-| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}`                                  | `.pf-c-description-list`                 | Modifies the description list number of columns.                                                                                                                               |
-| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}`  | `.pf-c-description-list`                 | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `--pf-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                          |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
+| `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
+| `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
+| `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
+| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
+| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
+| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
+| `.pf-m-display-lg` | `.pf-c-description-list` | Modifies the description list to have large display styling. |
+| `.pf-m-display-2xl` | `.pf-c-description-list` | Modifies the description list to have 2xl display styling. |
+| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
+| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
+| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
+| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
+| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
+| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
+| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
+| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
+| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 
 <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element. |
 | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element to -1. |

package/docs/components/Divider/examples/Divider.md

@@ -16,7 +16,7 @@ cssPrefix: pf-c-divider
 ### li
 
 ```html
-<ul>
+<ul role="list">
   <li>List item one</li>
   <li class="pf-c-divider" role="separator"></li>
   <li>List item two</li>
@@ -92,16 +92,16 @@ cssPrefix: pf-c-divider
 
 The divider renders as an `<hr>` by default. It is possible to make the divider render as an `li` or a `div` to match the HTML5 specification and context of the divider.
 
-| Attribute          | Applied to                            | Outcome                                      |
-| ------------------ | ------------------------------------- | -------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `role="separator"` | `li.pf-c-divider`, `div.pf-c-divider` | Indicates that the separator is a separator. |
 
 ### Usage
 
-| Class                                                                     | Applied to              | Outcome                                                                                                                                                                           |
-| ------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-divider`                                                           | `<hr>`, `<li>`, `<div>` | Defines the divider component.                                                                                                                                                    |
-| `.pf-m-vertical`                                                          | `.pf-c-divider`         | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-divider`         | Modifies divider padding/inset to visually match padding of other adjacent components.                                                                                            |
-| `.pf-m-hidden{-on-[breakpoint]}`                                          | `.pf-c-divider`         | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                     |
-| `.pf-m-visible{-on-[breakpoint]}`                                         | `.pf-c-divider`         | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-divider` | `<hr>`, `<li>`, `<div>` | Defines the divider component. |
+| `.pf-m-vertical` | `.pf-c-divider` | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-divider` | Modifies divider padding/inset to visually match padding of other adjacent components. |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/DragDrop/examples/DragDrop.md

@@ -59,9 +59,9 @@ cssPrefix: pf-c-drag-drop
 
 ### Usage
 
-| Class                | Applied to                           | Outcome                                                                  |
-| -------------------- | ------------------------------------ | ------------------------------------------------------------------------ |
-| `.pf-c-draggable`    | `*`                                  | Initiates a draggable element.                                           |
-| `.pf-c-droppable`    | `*`                                  | Initiates a droppable element.                                           |
-| `.pf-m-dragging`     | `.pf-c-draggable`, `.pf-c-droppable` | Indicates a draggable and droppable element are in the dragging state.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-draggable` | `*` | Initiates a draggable element. |
+| `.pf-c-droppable` | `*` | Initiates a droppable element. |
+| `.pf-m-dragging` | `.pf-c-draggable`, `.pf-c-droppable` | Indicates a draggable and droppable element are in the dragging state. |
 | `.pf-m-drag-outside` | `.pf-c-draggable`, `.pf-c-droppable` | Indicates a draggable element is dragged outside of a droppable element. |

package/docs/components/Drawer/examples/Drawer.md

@@ -690,57 +690,57 @@ cssPrefix: pf-c-drawer
 
 ### Accessibility
 
-| Class                           | Applied to                             | Outcome                                                                                   |
-| ------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `role="separator"`              | `.pf-c-drawer__splitter`               | Indicates that the splitter is a separator. **Required**                                  |
-| `tabindex="0"`                  | `.pf-c-drawer__splitter`               | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
-| `aria-orientation="horizontal"` | `.pf-c-drawer__splitter`               | Indicates that the splitter is oriented horizontally.                                     |
-| `aria-orientation="vertical"`   | `.pf-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically.                                       |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `role="separator"` | `.pf-c-drawer__splitter` | Indicates that the splitter is a separator. **Required** |
+| `tabindex="0"` | `.pf-c-drawer__splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
+| `aria-orientation="horizontal"` | `.pf-c-drawer__splitter` | Indicates that the splitter is oriented horizontally. |
+| `aria-orientation="vertical"` | `.pf-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. |
 
 ### Usage
 
-| Class                           | Applied to               | Outcome                                |
-| ------------------------------- | ------------------------ | -------------------------------------- |
-| `.pf-c-drawer__splitter`        | `<div>`                  | Initiates the splitter.                |
-| `.pf-c-drawer__splitter-handle` | `<div>`                  | Initiates the splitter handle element. |
-| `.pf-m-vertical`                | `.pf-c-drawer__splitter` | Modifies the splitter to be vertical.  |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-drawer__splitter` | `<div>` | Initiates the splitter. |
+| `.pf-c-drawer__splitter-handle` | `<div>` | Initiates the splitter handle element. |
+| `.pf-m-vertical` |  `.pf-c-drawer__splitter` | Modifies the splitter to be vertical. |
 
 ## Documentation
 
 ### Accessibility
 
-| Attribute               | Applied to                 | Outcome                                                          |
-| ----------------------- | -------------------------- | ---------------------------------------------------------------- |
-| `aria-expanded="true"`  | `action that opens drawer` | Indicates that the expandable content is visible. **Required**   |
-| `aria-expanded="false"` | `action that opens drawer` | Indicates that the expandable content is hidden. **Required**    |
-| `hidden`                | `.pf-c-drawer__panel`      | Hides the drawer panel from assistive technologies. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="true"` | `action that opens drawer` | Indicates that the expandable content is visible. **Required** |
+| `aria-expanded="false"` | `action that opens drawer` | Indicates that the expandable content is hidden. **Required** |
+| `hidden` | `.pf-c-drawer__panel` | Hides the drawer panel from assistive technologies. **Required** |
 
 ### Usage
 
-| Class                                                     | Applied to                                                              | Outcome                                                                                                                                                                                                                                                     |
-| --------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-drawer`                                            | `<div>`                                                                 | Initiates the drawer container. **Required**                                                                                                                                                                                                                |
-| `.pf-c-drawer__section`                                   | `<div>`                                                                 | Initiates a drawer section area. This element can be used above or below `.pf-c-drawer__main` for titles, toolbars, footers, etc.                                                                                                                           |
-| `.pf-c-drawer__main`                                      | `<div>`                                                                 | Initiates the drawer main area. **Required**                                                                                                                                                                                                                |
-| `.pf-c-drawer__content`                                   | `<div>`                                                                 | Initiates the drawer content container. **Required**                                                                                                                                                                                                        |
-| `.pf-c-drawer__panel`                                     | `<aside>`                                                               | Initiates the drawer panel container. **Required**                                                                                                                                                                                                          |
-| `.pf-c-drawer__panel-main`                                | `<div>`                                                                 | Initiates the drawer panel main container for resizable drawers only.                                                                                                                                                                                       |
-| `.pf-c-drawer__body`                                      | `<div>`                                                                 | Initiates a drawer body container and is the child of `.pf-c-drawer__content`, `.pf-c-drawer__panel` and `.pf-c-drawer__panel-main`. **Required**                                                                                                           |
-| `.pf-c-drawer__head`                                      | `<div>`                                                                 | Initiates a drawer head container. This container positions `.pf-c-drawer__actions`, if present.                                                                                                                                                            |
-| `.pf-c-drawer__actions`                                   | `<div>`                                                                 | Identifies the drawer close button.                                                                                                                                                                                                                         |
-| `.pf-c-drawer__close`                                     | `<div>`                                                                 | Identifies the drawer close button.                                                                                                                                                                                                                         |
-| `.pf-m-panel-left`                                        | `.pf-c-drawer`                                                          | Modifies the drawer panel to expand from the left.                                                                                                                                                                                                          |
-| `.pf-m-panel-bottom`                                      | `.pf-c-drawer`                                                          | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height.                                                                              |
-| `.pf-m-expanded`                                          | `.pf-c-drawer`                                                          | Modifies the drawer panel for the expanded state.                                                                                                                                                                                                           |
-| `.pf-m-static{-on-[lg, xl, 2xl]}`                         | `.pf-c-drawer`                                                          | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                          |
-| `.pf-m-inline{-on-[lg, xl, 2xl]}`                         | `.pf-c-drawer`                                                          | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
-| `.pf-m-no-border`                                         | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel border treatment to disable all border treatment.                                                                                                                                                                                 |
-| `.pf-m-padding`                                           | `.pf-c-drawer__body`                                                    | Modifies the element to add padding.                                                                                                                                                                                                                        |
-| `.pf-m-no-padding`                                        | `.pf-c-drawer__body`                                                    | Modifies the element to remove padding.                                                                                                                                                                                                                     |
-| `.pf-m-no-background`                                     | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to transparent.                                                                                                                                                                                             |
-| `.pf-m-light-200`                                         | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to light grey.                                                                                                                                                                                              |
-| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                |
-| `.pf-m-resizable`                                         | `.pf-c-drawer__panel`                                                   | Modifies the drawer panel to be resizable. Intended for use with the `.pf-c-drawer__splitter` element.                                                                                                                                                      |
-| `--pf-c-drawer__panel--md--FlexBasis--min`                | `.pf-c-drawer__panel`                                                   | Defines the drawer panel minimum size.                                                                                                                                                                                                                      |
-| `--pf-c-drawer__panel--md--FlexBasis`                     | `.pf-c-drawer__panel`                                                   | Defines the drawer panel size.                                                                                                                                                                                                                              |
-| `--pf-c-drawer__panel--md--FlexBasis--max`                | `.pf-c-drawer__panel`                                                   | Defines the drawer panel maximum size.                                                                                                                                                                                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-drawer` | `<div>` | Initiates the drawer container. **Required** |
+| `.pf-c-drawer__section` | `<div>` | Initiates a drawer section area. This element can be used above or below `.pf-c-drawer__main` for titles, toolbars, footers, etc. |
+| `.pf-c-drawer__main` | `<div>` | Initiates the drawer main area. **Required** |
+| `.pf-c-drawer__content` | `<div>` | Initiates the drawer content container. **Required** |
+| `.pf-c-drawer__panel` | `<aside>` | Initiates the drawer panel container. **Required** |
+| `.pf-c-drawer__panel-main` | `<div>` | Initiates the drawer panel main container for resizable drawers only. |
+| `.pf-c-drawer__body` | `<div>` | Initiates a drawer body container and is the child of `.pf-c-drawer__content`, `.pf-c-drawer__panel` and `.pf-c-drawer__panel-main`. **Required** |
+| `.pf-c-drawer__head` | `<div>` | Initiates a drawer head container. This container positions `.pf-c-drawer__actions`, if present. |
+| `.pf-c-drawer__actions` | `<div>` | Identifies the drawer close button. |
+| `.pf-c-drawer__close` | `<div>` | Identifies the drawer close button. |
+| `.pf-m-panel-left` | `.pf-c-drawer` | Modifies the drawer panel to expand from the left. |
+| `.pf-m-panel-bottom` | `.pf-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
+| `.pf-m-expanded` | `.pf-c-drawer` | Modifies the drawer panel for the expanded state. |
+| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
+| `.pf-m-no-border` | `.pf-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
+| `.pf-m-padding` | `.pf-c-drawer__body` | Modifies the element to add padding. |
+| `.pf-m-no-padding` | `.pf-c-drawer__body` | Modifies the element to remove padding. |
+| `.pf-m-no-background` | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to transparent. |
+| `.pf-m-light-200` | `.pf-c-drawer__section`, `.pf-c-drawer__content`, `.pf-c-drawer__panel` | Modifies the drawer body/panel background color to light grey. |
+| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-resizable` | `.pf-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-c-drawer__splitter` element. |
+| `--pf-c-drawer__panel--md--FlexBasis--min` | `.pf-c-drawer__panel` | Defines the drawer panel minimum size. |
+| `--pf-c-drawer__panel--md--FlexBasis` | `.pf-c-drawer__panel` | Defines the drawer panel size. |
+| `--pf-c-drawer__panel--md--FlexBasis--max` | `.pf-c-drawer__panel` | Defines the drawer panel maximum size. |

package/docs/components/Dropdown/examples/Dropdown.css

@@ -31,11 +31,14 @@
 }
 
 #ws-core-c-dropdown-with-groups,
-#ws-core-c-dropdown-with-groups-and-dividers-between-groups,
-#ws-core-c-dropdown-with-groups-and-dividers-between-items {
+#ws-core-c-dropdown-with-groups-and-dividers-between-groups {
   min-height: 440px;
 }
 
+#ws-core-c-dropdown-with-groups-and-dividers-between-items {
+  min-height: 460px;
+}
+
 #ws-core-c-dropdown-dropdown-with-image-and-text .ws-preview-html {
   min-height: 19rem;
 }