@patternfly/patternfly 5.0.0-alpha.13 → 5.0.0-alpha.18

package/docs/components/ContextSelector/examples/context-selector.md

@@ -24,23 +24,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu" hidden>
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -138,23 +139,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -260,23 +262,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu" hidden>
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -377,23 +380,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -496,23 +500,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -617,23 +622,24 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -729,32 +735,32 @@ cssPrefix: pf-c-context-selector
 
 ### Accessibility
 
-| Class                   | Applied to                                | Outcome                                                                                                        |
-| ----------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `aria-expanded="false"` | `.pf-c-context-selector__toggle`          | Indicates that the menu is hidden.                                                                             |
-| `aria-expanded="true"`  | `.pf-c-context-selector__toggle`          | Indicates that the menu is visible.                                                                            |
-| `aria-hidden="true"`    | `.pf-c-context-selector__toggle-icon > *` | Hides the icon from assistive technologies.                                                                    |
-| `disabled`              | `button.pf-c-context-selector__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
-| `aria-disabled="true"`  | `a.pf-c-context-selector__menu-item`      | When the menu item uses a link element, indicates that it is unavailable.                                      |
-| `tabindex="-1"`         | `a.pf-c-context-selector__menu-item`      | When the menu item uses a link element, removes it from keyboard focus.                                        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="false"` | `.pf-c-context-selector__toggle` |  Indicates that the menu is hidden. |
+| `aria-expanded="true"` | `.pf-c-context-selector__toggle` |  Indicates that the menu is visible. |
+| `aria-hidden="true"` | `.pf-c-context-selector__toggle-icon > *` | Hides the icon from assistive technologies. |
+| `disabled` | `button.pf-c-context-selector__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `aria-disabled="true"` | `a.pf-c-context-selector__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
+| `tabindex="-1"` | `a.pf-c-context-selector__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
 
 ### Usage
 
-| Class                                    | Applied to                                | Outcome                                                                         |
-| ---------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------- |
-| `.pf-c-context-selector`                 | `<div>`                                   | Initiates a context selector.                                                   |
-| `.pf-c-context-selector__toggle`         | `<button>`                                | Initiates a toggle.                                                             |
-| `.pf-c-context-selector__toggle-text`    | `<span>`                                  | Initiates text inside the toggle.                                               |
-| `.pf-c-context-selector__toggle-icon`    | `<span>`                                  | Inititiates the toggle icon wrapper.                                            |
-| `.pf-c-context-selector__menu`           | `<div>`                                   | Initiaties a menu.                                                              |
-| `.pf-c-context-selector__menu-search`    | `<div>`                                   | Initiates a container for the search input group.                               |
-| `.pf-c-context-selector__menu-list`      | `<ul>`                                    | Initiaties an unordered list of menu items that sits under the input container. |
-| `.pf-c-context-selector__menu-footer`    | `<div>`                                   | Initiaties a menu footer.                                                       |
-| `.pf-c-context-selector__menu-list-item` | `<li>`                                    | Initiaties a menu item.                                                         |
-| `.pf-m-expanded`                         | `.pf-c-context-selector`                  | Modifies for the expanded state.                                                |
-| `.pf-m-active`                           | `.pf-c-context-selector__toggle`          | Forces display of the active state of the toggle.                               |
-| `.pf-m-plain.pf-m-text`                  | `.pf-c-context-selector__toggle`          | Modifies the context selector toggle for plain text styles.                     |
-| `.pf-m-disabled`                         | `a.pf-c-context-selector__menu-list-item` | Modifies an item for the disabled state.                                        |
-| `.pf-m-full-height`                      | `.pf-c-context-selector`                  | Modifies a context selector to full height of parent. See masthead for use.     |
-| `.pf-m-large`                            | `.pf-c-context-selector`                  | Modifies toggle height to be large.                                             |
-| `.pf-m-page-insets`                      | `.pf-c-context-selector`                  | Modifies toggle and menu insets to match the responsive page chrome insets.     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-context-selector` | `<div>` | Initiates a context selector.|
+| `.pf-c-context-selector__toggle` | `<button>` | Initiates a toggle. |
+| `.pf-c-context-selector__toggle-text` | `<span>` | Initiates text inside the toggle. |
+| `.pf-c-context-selector__toggle-icon` | `<span>` | Inititiates the toggle icon wrapper. |
+| `.pf-c-context-selector__menu` | `<div>` | Initiaties a menu. |
+| `.pf-c-context-selector__menu-search` | `<div>` | Initiates a container for the search input group. |
+| `.pf-c-context-selector__menu-list` | `<ul>` | Initiaties an unordered list of menu items that sits under the input container. |
+| `.pf-c-context-selector__menu-footer` | `<div>` | Initiaties a menu footer. |
+| `.pf-c-context-selector__menu-list-item` | `<li>` | Initiaties a menu item. |
+| `.pf-m-expanded` | `.pf-c-context-selector` | Modifies for the expanded state. |
+| `.pf-m-active` | `.pf-c-context-selector__toggle` | Forces display of the active state of the toggle. |
+| `.pf-m-plain.pf-m-text` | `.pf-c-context-selector__toggle` | Modifies the context selector toggle for plain text styles. |
+| `.pf-m-disabled` | `a.pf-c-context-selector__menu-list-item` | Modifies an item for the disabled state.|
+| `.pf-m-full-height` | `.pf-c-context-selector` | Modifies a context selector to full height of parent. See masthead for use. |
+| `.pf-m-large` | `.pf-c-context-selector` | Modifies toggle height to be large. |
+| `.pf-m-page-insets` | `.pf-c-context-selector` | Modifies toggle and menu insets to match the responsive page chrome insets. |

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. |