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

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
 
@@ -127,11 +127,14 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-checkboxes-actions-addl-cells-item-1-checkbox"
-            aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-checkboxes-actions-addl-cells-item-1-checkbox"
+              aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -209,11 +212,14 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-checkboxes-actions-addl-cells-item-2-checkbox"
-            aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-checkboxes-actions-addl-cells-item-2-checkbox"
+              aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -286,11 +292,14 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-checkboxes-actions-addl-cells-item-3-checkbox"
-            aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-checkboxes-actions-addl-cells-item-3-checkbox"
+              aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -363,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
 
@@ -1414,11 +1423,14 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-compact-item-1-checkbox"
-            aria-labelledby="data-list-compact-item-1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-compact-item-1-checkbox"
+              aria-labelledby="data-list-compact-item-1"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -1491,11 +1503,14 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-compact-item-2-checkbox"
-            aria-labelledby="data-list-compact-item-2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-compact-item-2-checkbox"
+              aria-labelledby="data-list-compact-item-2"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -1563,11 +1578,14 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-compact-item-3-checkbox"
-            aria-labelledby="data-list-compact-item-3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-compact-item-3-checkbox"
+              aria-labelledby="data-list-compact-item-3"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -1638,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
 
@@ -1678,11 +1696,14 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-default-fitting-item-1-checkbox"
-            aria-labelledby="data-list-default-fitting-item-1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-default-fitting-item-1-checkbox"
+              aria-labelledby="data-list-default-fitting-item-1"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -1716,11 +1737,14 @@ When a list item includes more than one block of content, it can be difficult fo
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-control">
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-flex-modifiers-item-1-checkbox"
-            aria-labelledby="data-list-flex-modifiers-item-1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-flex-modifiers-item-1-checkbox"
+              aria-labelledby="data-list-flex-modifiers-item-1"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -1816,11 +1840,14 @@ When a list item includes more than one block of content, it can be difficult fo
         </div>
 
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-flex-modifiers-2-item-1-checkbox"
-            aria-labelledby="data-list-flex-modifiers-2-item-1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-flex-modifiers-2-item-1-checkbox"
+              aria-labelledby="data-list-flex-modifiers-2-item-1"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -1912,64 +1939,62 @@ 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
+### Clickable rows
 
 ```html
 <ul
   class="pf-c-data-list"
   role="list"
-  aria-label="Selectable rows data list example"
-  id="data-list-selectable-rows"
+  aria-label="Clickable rows data list example"
+  id="data-list-clickable-rows"
 >
   <li
-    class="pf-c-data-list__item pf-m-expanded pf-m-selectable pf-m-selected"
-    aria-labelledby="data-list-selectable-rows-item-1"
+    class="pf-c-data-list__item pf-m-clickable pf-m-selected"
+    aria-labelledby="data-list-clickable-rows-item-1"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
-          <span id="data-list-selectable-rows-item-1">Primary content</span>
+          <span id="data-list-clickable-rows-item-1">Primary content (clicked)</span>
         </div>
       </div>
     </div>
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-expanded pf-m-selectable pf-m-selected"
-    aria-labelledby="data-list-selectable-rows-item-2"
+    class="pf-c-data-list__item pf-m-clickable"
+    aria-labelledby="data-list-clickable-rows-item-2"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
-          <span
-            id="data-list-selectable-rows-item-2"
-          >Secondary content (selected)</span>
+          <span id="data-list-clickable-rows-item-2">Secondary content</span>
         </div>
       </div>
     </div>
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-selectable"
-    aria-labelledby="data-list-selectable-rows-item-3"
+    class="pf-c-data-list__item pf-m-clickable"
+    aria-labelledby="data-list-clickable-rows-item-3"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
-          <span id="data-list-selectable-rows-item-3">Tertiary content</span>
+          <span id="data-list-clickable-rows-item-3">Tertiary content</span>
         </div>
       </div>
     </div>
@@ -1980,29 +2005,29 @@ When a list item includes more than one block of content, it can be difficult fo
 
 ### Accessibility
 
-| 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** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `tabindex="0"` | `.pf-c-data-list__item.pf-m-clickable` | Inserts the clickable row into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 
-| 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.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-clickable` | `.pf-c-data-list__item` | Modifies a data list item so that it is clickable. |
+| `.pf-m-selected` | `.pf-c-data-list__item` | Modifies a data list item for the selected state. |
 
-### Selectable expandable rows
+### Clickable expandable rows
 
 ```html
 <ul
   class="pf-c-data-list"
   role="list"
-  aria-label="Selectable, expandable data list example"
-  id="data-list-selectable-expandable-rows"
+  aria-label="Clickable, expandable data list example"
+  id="data-list-clickable-expandable-rows"
 >
   <li
-    class="pf-c-data-list__item pf-m-expanded pf-m-selectable"
-    aria-labelledby="data-list-selectable-expandable-rows-item-1"
+    class="pf-c-data-list__item pf-m-expanded pf-m-clickable pf-m-selected"
+    aria-labelledby="data-list-clickable-expandable-rows-item-1"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
@@ -2011,11 +2036,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-selectable-expandable-rows-toggle1 data-list-selectable-expandable-rows-item1"
-            id="data-list-selectable-expandable-rows-toggle1"
+            aria-labelledby="data-list-clickable-expandable-rows-toggle1 data-list-clickable-expandable-rows-item1"
+            id="data-list-clickable-expandable-rows-toggle1"
             aria-label="Toggle details for"
             aria-expanded="true"
-            aria-controls="data-list-selectable-expandable-rows-content1"
+            aria-controls="data-list-clickable-expandable-rows-content1"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2026,15 +2051,15 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
           <span
-            id="data-list-selectable-expandable-rows-item-1"
-          >Primary content (selected, expanded)</span>
+            id="data-list-clickable-expandable-rows-item-1"
+          >Primary content (clicked and expanded)</span>
         </div>
       </div>
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-selectable-expandable-rows-content1"
-      aria-label="Selectable expandable row primary content details"
+      id="data-list-clickable-expandable-rows-content1"
+      aria-label="Clickable expandable row primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"
@@ -2043,8 +2068,8 @@ When a list item includes more than one block of content, it can be difficult fo
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-selectable"
-    aria-labelledby="data-list-selectable-expandable-rows-item-2"
+    class="pf-c-data-list__item pf-m-clickable"
+    aria-labelledby="data-list-clickable-expandable-rows-item-2"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
@@ -2053,11 +2078,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-selectable-expandable-rows-toggle2 data-list-selectable-expandable-rows-item2"
-            id="data-list-selectable-expandable-rows-toggle2"
+            aria-labelledby="data-list-clickable-expandable-rows-toggle2 data-list-clickable-expandable-rows-item2"
+            id="data-list-clickable-expandable-rows-toggle2"
             aria-label="Toggle details for"
             aria-expanded="false"
-            aria-controls="data-list-selectable-expandable-rows-content2"
+            aria-controls="data-list-clickable-expandable-rows-content2"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2068,15 +2093,15 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
           <span
-            id="data-list-selectable-expandable-rows-item-2"
+            id="data-list-clickable-expandable-rows-item-2"
           >Secondary content</span>
         </div>
       </div>
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-selectable-expandable-rows-content2"
-      aria-label="Selectable expandable row secondary content details"
+      id="data-list-clickable-expandable-rows-content2"
+      aria-label="Clickable expandable row secondary content details"
       hidden
     >
       <div
@@ -2086,8 +2111,8 @@ When a list item includes more than one block of content, it can be difficult fo
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-expanded pf-m-selectable"
-    aria-labelledby="data-list-selectable-expandable-rows-item-3"
+    class="pf-c-data-list__item pf-m-expanded pf-m-clickable"
+    aria-labelledby="data-list-clickable-expandable-rows-item-3"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
@@ -2096,11 +2121,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-selectable-expandable-rows-toggle3 data-list-selectable-expandable-rows-item3"
-            id="data-list-selectable-expandable-rows-toggle3"
+            aria-labelledby="data-list-clickable-expandable-rows-toggle3 data-list-clickable-expandable-rows-item3"
+            id="data-list-clickable-expandable-rows-toggle3"
             aria-label="Toggle details for"
             aria-expanded="true"
-            aria-controls="data-list-selectable-expandable-rows-content3"
+            aria-controls="data-list-clickable-expandable-rows-content3"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2111,15 +2136,15 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
           <span
-            id="data-list-selectable-expandable-rows-item-3"
-          >Tertiary content (not selected, expanded)</span>
+            id="data-list-clickable-expandable-rows-item-3"
+          >Tertiary content (expanded)</span>
         </div>
       </div>
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-selectable-expandable-rows-content3"
-      aria-label="Selectable expandable row tertiary content details"
+      id="data-list-clickable-expandable-rows-content3"
+      aria-label="Clickable expandable row tertiary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -2128,8 +2153,8 @@ When a list item includes more than one block of content, it can be difficult fo
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-selectable"
-    aria-labelledby="data-list-selectable-expandable-rows-item-4"
+    class="pf-c-data-list__item pf-m-clickable"
+    aria-labelledby="data-list-clickable-expandable-rows-item-4"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
@@ -2138,11 +2163,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-selectable-expandable-rows-toggle4 data-list-selectable-expandable-rows-item4"
-            id="data-list-selectable-expandable-rows-toggle4"
+            aria-labelledby="data-list-clickable-expandable-rows-toggle4 data-list-clickable-expandable-rows-item4"
+            id="data-list-clickable-expandable-rows-toggle4"
             aria-label="Toggle details for"
             aria-expanded="false"
-            aria-controls="data-list-selectable-expandable-rows-content4"
+            aria-controls="data-list-clickable-expandable-rows-content4"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2153,15 +2178,15 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
           <span
-            id="data-list-selectable-expandable-rows-item-4"
-          >Quaternary content (selected)</span>
+            id="data-list-clickable-expandable-rows-item-4"
+          >Quaternary content</span>
         </div>
       </div>
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-selectable-expandable-rows-content4"
-      aria-label="Selectable expandable row quaternary content details"
+      id="data-list-clickable-expandable-rows-content4"
+      aria-label="Clickable expandable row quaternary content details"
       hidden
     >
       <div
@@ -2203,11 +2228,14 @@ When a list item includes more than one block of content, it can be difficult fo
           </span>
         </button>
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-draggable-item-1-checkbox"
-            aria-labelledby="data-list-draggable-item-1"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-draggable-item-1-checkbox"
+              aria-labelledby="data-list-draggable-item-1"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -2238,11 +2266,14 @@ When a list item includes more than one block of content, it can be difficult fo
           </span>
         </button>
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-draggable-item-2-checkbox"
-            aria-labelledby="data-list-draggable-item-2"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-draggable-item-2-checkbox"
+              aria-labelledby="data-list-draggable-item-2"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -2277,11 +2308,14 @@ When a list item includes more than one block of content, it can be difficult fo
           </span>
         </button>
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-draggable-item-3-checkbox"
-            aria-labelledby="data-list-draggable-item-3"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-draggable-item-3-checkbox"
+              aria-labelledby="data-list-draggable-item-3"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -2312,11 +2346,14 @@ When a list item includes more than one block of content, it can be difficult fo
           </span>
         </button>
         <div class="pf-c-data-list__check">
-          <input
-            type="checkbox"
-            name="data-list-draggable-item-4-checkbox"
-            aria-labelledby="data-list-draggable-item-4"
-          />
+          <div class="pf-c-check pf-m-standalone">
+            <input
+              class="pf-c-check__input"
+              type="checkbox"
+              name="data-list-draggable-item-4-checkbox"
+              aria-labelledby="data-list-draggable-item-4"
+            />
+          </div>
         </div>
       </div>
       <div class="pf-c-data-list__item-content">
@@ -2339,24 +2376,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
 
@@ -2478,12 +2515,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
 
@@ -2622,6 +2659,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. |