@patternfly/patternfly 5.0.0-alpha.14 → 5.0.0-alpha.19

package/docs/components/DataList/examples/DataList.md

@@ -42,26 +42,26 @@ cssPrefix: pf-c-data-list
 
 ### Accessibility
 
-| Attribute         | Applied to                                         | Outcome                                                             |
-| ----------------- | -------------------------------------------------- | ------------------------------------------------------------------- |
-| `role="list"`     | `.pf-c-data-list`                                  | Indicates that the data list is a list. **Required**                |
-| `aria-label`      | `.pf-c-data-list`                                  | Provides an accessible name for the data list. **Required**         |
-| `aria-labelledby` | `.pf-c-data-list__item`                            | Provides an accessible description for data list item. **Required** |
-| `id`              | `.pf-c-data-list__cell`, `.pf-c-data-list__cell *` | Provides a reference for data list item description. **Required**   |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="list"`       | `.pf-c-data-list` | Indicates that the data list is a list. **Required** |
+| `aria-label`        | `.pf-c-data-list`       | Provides an accessible name for the data list. **Required** |
+| `aria-labelledby`   | `.pf-c-data-list__item` | Provides an accessible description for data list item. **Required** |
+| `id`                | `.pf-c-data-list__cell`, `.pf-c-data-list__cell *`  | Provides a reference for data list item description. **Required** |
 
 ### Usage
 
-| Class                           | Applied to              | Outcome                                                                                            |
-| ------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------- |
-| `.pf-c-data-list`               | `<ul>`                  | Initiates a data list. **Required**                                                                |
-| `.pf-c-data-list__item`         | `<li>`                  | Initiates a data list item. **Required**                                                           |
-| `.pf-c-data-list__item-row`     | `<div>`                 | Initiates a data list item row. **Required**                                                       |
-| `.pf-c-data-list__item-content` | `<div>`                 | Initiates a container for data list content. **Required**                                          |
-| `.pf-c-data-list__cell`         | `*`                     | Initiates a data list content cell. **Required**                                                   |
-| `.pf-c-data-list__cell-text`    | `<span>`                | Initiates a data list content cell text element.                                                   |
-| `.pf-m-align-left`              | `.pf-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
-| `.pf-m-no-fill`                 | `.pf-c-data-list__cell` | Modifies a data list cell to not fill the available horizontal space.                              |
-| `.pf-m-align-right`             | `.pf-c-data-list__cell` | Modifies a data list cell to align-right.                                                          |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-data-list` | `<ul>` | Initiates a data list. **Required** |
+| `.pf-c-data-list__item` | `<li>` | Initiates a data list item. **Required** |
+| `.pf-c-data-list__item-row` | `<div>` | Initiates a data list item row. **Required** |
+| `.pf-c-data-list__item-content` | `<div>` | Initiates a container for data list content. **Required**|
+| `.pf-c-data-list__cell` | `*` | Initiates a data list content cell. **Required** |
+| `.pf-c-data-list__cell-text` | `<span>` | Initiates a data list content cell text element. |
+| `.pf-m-align-left` | `.pf-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
+| `.pf-m-no-fill` | `.pf-c-data-list__cell` | Modifies a data list cell to not fill the available horizontal space. |
+| `.pf-m-align-right` | `.pf-c-data-list__cell` | Modifies a data list cell to align-right. |
 
 ### With headings
 
@@ -372,23 +372,23 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ### Accessibility
 
-| Attribute                                                 | Applied to                                                                                                               | Outcome                                                                                              |
-| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
-| `aria-label="[descriptive text]"`                         | `.pf-c-data-list__action` > `.pf-c-button`                                                                               | Provides an accessible label buttons. **Required**                                                   |
-| `aria-labelledby="{title_cell_id}"`                       | `.pf-c-data-list__check` > `.pf-c-check__input`                                                                          | Creates an accessible label for the checkbox based on the title cell. **Required**                   |
-| `aria-labelledby="{title_cell_id} {data_list_action_id}"` | `.pf-c-data-list__action` > `.pf-c-button`                                                                               | Creates an accessible label for the action button using the title cell and button label **Required** |
-| `id`                                                      | `.pf-c-data-list__cell > *`, `.pf-c-data-list__check` > `.pf-c-check__input`, `.pf-c-data-list__action` > `.pf-c-button` | Provides a reference for interactive elements. **Required**                                          |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[descriptive text]"`  | `.pf-c-data-list__action` > `.pf-c-button`  | Provides an accessible label buttons. **Required** |
+| `aria-labelledby="{title_cell_id}"`  | `.pf-c-data-list__check` > `.pf-c-check__input`   | Creates an accessible label for the checkbox based on the title cell. **Required** |
+| `aria-labelledby="{title_cell_id} {data_list_action_id}"`  | `.pf-c-data-list__action` > `.pf-c-button`   | Creates an accessible label for the action button using the title cell and button label **Required** |
+| `id`  | `.pf-c-data-list__cell > *`, `.pf-c-data-list__check` > `.pf-c-check__input`, `.pf-c-data-list__action` > `.pf-c-button` | Provides a reference for interactive elements. **Required** |
 
 ### Usage
 
-| Class                             | Applied to                     | Outcome                                                                                                                                                                                     |
-| --------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-data-list__item-control`   | `<div>`                        | Initiates a container for data list controls. For example, add `.pf-c-data-list__check` here. **Required**                                                                                  |
-| `.pf-c-data-list__item-action`    | `<div>`                        | Initiates a container for the data list actions. For example, add `.pf-c-data-list__action` here. **Required**                                                                              |
-| `.pf-c-data-list__check`          | `<div>`                        | Initiates a data list check cell. **Required**                                                                                                                                              |
-| `.pf-c-data-list__action`         | `<div>`                        | Initiates a data list action button cell. **Required**                                                                                                                                      |
-| `.pf-m-hidden{-on-[breakpoint]}`  | `.pf-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-c-data-list__check` here. **Required** |
+| `.pf-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-c-data-list__action` here. **Required** |
+| `.pf-c-data-list__check`  | `<div>` | Initiates a data list check cell. **Required** |
+| `.pf-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 
 ### Expandable
 
@@ -1656,28 +1656,28 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ### Accessibility
 
-| Attribute                                       | Applied to                                 | Outcome                                                                          |
-| ----------------------------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------- |
-| `aria-expanded="true"`                          | `.pf-c-data-list__toggle` > `.pf-c-button` | Indicates that the expandable content is visible. **Required**                   |
-| `hidden`                                        | `.pf-c-data-list__expandable-content`      | Indicates that the expandable content is hidden. **Required**                    |
-| `aria-label="[descriptive text]"`               | `.pf-c-data-list__toggle` > `.pf-c-button` | Provides an accessible name for toggle button. **Required**                      |
-| `aria-labelledby="{title_cell_id} {button_id}"` | `.pf-c-data-list__toggle` > `.pf-c-button` | Establishes relationship between aria-label text and toggle button. **Required** |
-| `id="{button_id}"`                              | `.pf-c-data-list__toggle` > `.pf-c-button` | Provides a reference for toggle button description. **Required**                 |
-| `aria-controls="[id of element controlled]"`    | `.pf-c-data-list__toggle` > `.pf-c-button` | Identifies the section controlled by the toggle button. **Required**             |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="true"` | `.pf-c-data-list__toggle` > `.pf-c-button` | Indicates that the expandable content is visible. **Required**|
+| `hidden` | `.pf-c-data-list__expandable-content` | Indicates that the expandable content is hidden. **Required**|
+| `aria-label="[descriptive text]"` | `.pf-c-data-list__toggle` > `.pf-c-button` | Provides an accessible name for toggle button. **Required**|
+| `aria-labelledby="{title_cell_id} {button_id}"` | `.pf-c-data-list__toggle` > `.pf-c-button` | Establishes relationship between aria-label text and toggle button. **Required**
+| `id="{button_id}"` | `.pf-c-data-list__toggle` > `.pf-c-button` | Provides a reference for toggle button description. **Required** |
+| `aria-controls="[id of element controlled]"` | `.pf-c-data-list__toggle` > `.pf-c-button`    | Identifies the section controlled by the toggle button. **Required** |
 
 ### Usage
 
-| Class                                      | Applied to                                 | Outcome                                                                                                          |
-| ------------------------------------------ | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-data-list__item-control`            | `<div>`                                    | Initiates a container for data list controls. For example, add `.pf-c-data-list__toggle` here. **Required**      |
-| `.pf-c-data-list__toggle`                  | `<div>`                                    | Initiates a toggle button.                                                                                       |
-| `.pf-c-data-list__toggle-icon`             | `<span>`                                   | Initiates a toggle icon.                                                                                         |
-| `.pf-c-data-list__expandable-content`      | `<div>`                                    | Initiates an expandable content container.                                                                       |
-| `.pf-c-data-list__expandable-content-body` | `<div>`                                    | Initiates an expandable content container body. **Required** when `.pf-c-data-list__expandable-content` is used. |
-| `.pf-m-expanded`                           | `.pf-c-data-list__item`                    | Modifies for expanded state.                                                                                     |
-| `.pf-m-compact`                            | `.pf-c-data-list`                          | Modifies for compact variation.                                                                                  |
-| `.pf-m-no-padding`                         | `.pf-c-data-list__expandable-content-body` | Removes padding for the expandable content body.                                                                 |
-| `.pf-m-icon`                               | `.pf-c-data-list__cell`                    | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element.               |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-c-data-list__toggle` here. **Required** |
+| `.pf-c-data-list__toggle` | `<div>` | Initiates a toggle button. |
+| `.pf-c-data-list__toggle-icon` | `<span>` | Initiates a toggle icon. |
+| `.pf-c-data-list__expandable-content` | `<div>` | Initiates an expandable content container. |
+| `.pf-c-data-list__expandable-content-body` | `<div>` | Initiates an expandable content container body. **Required** when `.pf-c-data-list__expandable-content` is used. |
+| `.pf-m-expanded` | `.pf-c-data-list__item` | Modifies for expanded state. |
+| `.pf-m-compact` | `.pf-c-data-list` | Modifies for compact variation. |
+| `.pf-m-no-padding` | `.pf-c-data-list__expandable-content-body` | Removes padding for the expandable content body. |
+| `.pf-m-icon` | `.pf-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. |
 
 ### Modifiers
 
@@ -1939,14 +1939,14 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ### Accessibility
 
-| Attribute                                    | Applied to                                 | Outcome                                                              |
-| -------------------------------------------- | ------------------------------------------ | -------------------------------------------------------------------- |
-| `aria-controls="[id of element controlled]"` | `.pf-c-data-list__toggle` > `.pf-c-button` | Identifies the section controlled by the toggle button. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-controls="[id of element controlled]"` | `.pf-c-data-list__toggle` > `.pf-c-button`    | Identifies the section controlled by the toggle button. **Required** |
 
 ### Usage
 
-| Class                        | Applied to              | Outcome                                                       |
-| ---------------------------- | ----------------------- | ------------------------------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-flex-{1, 2, 3, 4, 5}` | `.pf-c-data-list__cell` | Percentage based modifier for `.pf-c-data-list__cell` widths. |
 
 ### Selectable rows
@@ -2007,16 +2007,16 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ### Accessibility
 
-| Attribute      | Applied to                              | Outcome                                                                                         |
-| -------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `tabindex="0"` | `.pf-c-data-list__item.pf-m-selectable` | Inserts the selectable row into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 
-| Class              | Applied to              | Outcome                                             |
-| ------------------ | ----------------------- | --------------------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-selectable` | `.pf-c-data-list__item` | Modifies a data list item so that it is selectable. |
-| `.pf-m-selected`   | `.pf-c-data-list__item` | Modifies a data list item for the selected state.   |
+| `.pf-m-selected` | `.pf-c-data-list__item` | Modifies a data list item for the selected state. |
 
 ### Selectable expandable rows
 
@@ -2378,24 +2378,24 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ### Accessibility
 
-| Attribute                                                                                                         | Applied to                                                             | Outcome                                                                                                                                                                                                                           |
-| ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-pressed="true or false"`                                                                                    | `.pf-c-data-list__item-draggable-button`                               | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state.                                                                                       |
-| `aria-live`                                                                                                       | `[element with live text]`                                             | Gives screen reader users live feedback about what's happening during interaction with the data list, both during drag and drop interactions and keyboard interactions. **Highly Recommended**                                    |
-| `aria-describedby="[id value of applicable content]"`                                                             | `.pf-c-data-list__item-draggable-button`                               | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a `<div id="draggable-help"></div>`. **Highly recommended** |
-| `aria-labelledby="[id value of .pf-c-data-list__item-draggable-button] [id value of .pf-c-data-list__cell-text]"` | `.pf-c-data-list__item-draggable-button`                               | Provides an accessible name for the draggable button.                                                                                                                                                                             |
-| `id="[]"`                                                                                                         | `.pf-c-data-list__item-draggable-button`, `.pf-c-data-list__cell-text` | Gives the button and the text element accessible IDs                                                                                                                                                                              |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-pressed="true or false"` | `.pf-c-data-list__item-draggable-button` | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. |
+| `aria-live` | `[element with live text]` | Gives screen reader users live feedback about what's happening during interaction with the data list, both during drag and drop interactions and keyboard interactions. **Highly Recommended** |
+| `aria-describedby="[id value of applicable content]"` | `.pf-c-data-list__item-draggable-button` | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a `<div id="draggable-help"></div>`. **Highly recommended** |
+| `aria-labelledby="[id value of .pf-c-data-list__item-draggable-button] [id value of .pf-c-data-list__cell-text]"` | `.pf-c-data-list__item-draggable-button` | Provides an accessible name for the draggable button. |
+| `id="[]"` | `.pf-c-data-list__item-draggable-button`, `.pf-c-data-list__cell-text` | Gives the button and the text element accessible IDs |
 
 ### Usage
 
-| Class                                    | Applied to                             | Outcome                                                                                       |
-| ---------------------------------------- | -------------------------------------- | --------------------------------------------------------------------------------------------- |
-| `.pf-c-data-list__item-draggable-button` | `<button>`                             | Initiates the draggable button. Use for drag and drop.                                        |
-| `.pf-c-data-list__item-draggable-icon`   | `<span>`                               | Initiates the draggable button icon.                                                          |
-| `.pf-m-draggable`                        | `.pf-c-data-list__item`                | Modifies a data list item so that it is draggable.                                            |
-| `.pf-m-ghost-row`                        | `.pf-c-data-list__item.pf-m-draggable` | Modifies a draggable data list item to be the ghost row.                                      |
-| `.pf-m-disabled`                         | `.pf-c-data-list__item.pf-m-draggable` | Modifies a data list draggable item for the disabled state.                                   |
-| `.pf-m-drag-over`                        | `.pf-c-data-list`                      | Modifies the data list to indicate that a draggable item is being dragged over the data list. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-data-list__item-draggable-button` | `<button>` | Initiates the draggable button. Use for drag and drop. |
+| `.pf-c-data-list__item-draggable-icon` | `<span>` | Initiates the draggable button icon. |
+| `.pf-m-draggable` | `.pf-c-data-list__item` | Modifies a data list item so that it is draggable. |
+| `.pf-m-ghost-row` | `.pf-c-data-list__item.pf-m-draggable` | Modifies a draggable data list item to be the ghost row. |
+| `.pf-m-disabled` | `.pf-c-data-list__item.pf-m-draggable` | Modifies a data list draggable item for the disabled state. |
+| `.pf-m-drag-over` | `.pf-c-data-list` | Modifies the data list to indicate that a draggable item is being dragged over the data list. |
 
 ### Text modifiers
 
@@ -2517,12 +2517,12 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ### Usage
 
-| Class                   | Applied to                                                                                       | Outcome                                                                              |
-| ----------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
-| `.pf-c-data-list__text` | `*`                                                                                              | Inserts the data list text element. Use this class to modify specific text directly. |
-| `.pf-m-truncate`        | `.pf-c-data-list`, `.pf-c-data-list__item-row`, `.pf-c-data-list__cell`, `.pf-c-data-list__text` | Modifies the data list element so that text is truncated.                            |
-| `.pf-m-break-word`      | `.pf-c-data-list`, `.pf-c-data-list__item-row`, `.pf-c-data-list__cell`, `.pf-c-data-list__text` | Modifies the data list element so that text breaks to the next line.                 |
-| `.pf-m-nowrap`          | `.pf-c-data-list`, `.pf-c-data-list__item-row`, `.pf-c-data-list__cell`, `.pf-c-data-list__text` | Modifies the data list element so that text does not wrap to the next line.          |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-data-list__text` | `*` | Inserts the data list text element. Use this class to modify specific text directly. |
+| `.pf-m-truncate` | `.pf-c-data-list`, `.pf-c-data-list__item-row`, `.pf-c-data-list__cell`, `.pf-c-data-list__text` | Modifies the data list element so that text is truncated. |
+| `.pf-m-break-word` | `.pf-c-data-list`, `.pf-c-data-list__item-row`, `.pf-c-data-list__cell`, `.pf-c-data-list__text` | Modifies the data list element so that text breaks to the next line. |
+| `.pf-m-nowrap` | `.pf-c-data-list`, `.pf-c-data-list__item-row`, `.pf-c-data-list__cell`, `.pf-c-data-list__text` | Modifies the data list element so that text does not wrap to the next line. |
 
 ## Documentation
 
@@ -2661,6 +2661,6 @@ The DataList component provides a flexible alternative to the Table component, w
 
 ### Usage
 
-| Class                                      | Applied to        | Outcome                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| ------------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |

package/docs/components/DatePicker/examples/DatePicker.md

@@ -183,13 +183,13 @@ cssPrefix: pf-c-date-picker
 
 ### Usage
 
-| Class                            | Applied to                       | Outcome                                                                                                      |
-| -------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-date-picker`              | `<div>`                          | Initiates the date picker component. **Required**                                                            |
-| `.pf-c-date-picker__input`       | `<div>`                          | Initiates the date picker input container. **Required**                                                      |
-| `.pf-c-date-picker__helper-text` | `<div>`                          | Initiates the date picker helper text.                                                                       |
-| `.pf-c-date-picker__calendar`    | `<div>`                          | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
-| `.pf-m-top`                      | `.pf-c-date-picker`              | Modifies to display the calendar above the date picker.                                                      |
-| `.pf-m-error`                    | `.pf-c-date-picker__helper-text` | Modifies the helper text for the invalid/error state.                                                        |
-| `.pf-m-align-right`              | `.pf-c-date-picker__calendar`    | Modifies the calendar to align the calendar to the right edge of the date picker.                            |
-| `.pf-m-static`                   | `.pf-c-date-picker__calendar`    | Modifies the calendar to be statically positioned to support custom positioning.                             |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-date-picker` | `<div>` | Initiates the date picker component. **Required** |
+| `.pf-c-date-picker__input` | `<div>` | Initiates the date picker input container. **Required** |
+| `.pf-c-date-picker__helper-text` | `<div>` | Initiates the date picker helper text. |
+| `.pf-c-date-picker__calendar` | `<div>` | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
+| `.pf-m-top` | `.pf-c-date-picker` | Modifies to display the calendar above the date picker. |
+| `.pf-m-error` | `.pf-c-date-picker__helper-text` | Modifies the helper text for the invalid/error state. |
+| `.pf-m-align-right` | `.pf-c-date-picker__calendar` | Modifies the calendar to align the calendar to the right edge of the date picker. |
+| `.pf-m-static` | `.pf-c-date-picker__calendar` | Modifies the calendar to be statically positioned to support custom positioning. |

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

@@ -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;
 }