@patternfly/patternfly 5.0.0-alpha.37 → 5.0.0-alpha.38

package/components/Table/table.scss

@@ -246,50 +246,50 @@
   // Modifier - expandable row expanded
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
 
-  // tr hoverable
-  --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
-  --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
-  --pf-c-table--tr--m-hoverable--BoxShadow: none;
-  --pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
-  --pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
+  // tr clickable
+  --pf-c-table--tr--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+  --pf-c-table--tr--m-clickable--BackgroundColor: transparent;
+  --pf-c-table--tr--m-clickable--BoxShadow: none;
+  --pf-c-table--tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
+  --pf-c-table--tr--m-clickable--hover--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
+  --pf-c-table--tr--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table--tr--m-clickable--focus--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
+  --pf-c-table--tr--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table--tr--m-clickable--active--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
+  --pf-c-table--tr--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table--tr--m-clickable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
 
   // tr selected
   --pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
   --pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
-  --pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
+  --pf-c-table--tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
   --pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
   --pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
 
-  // tbody hoverable
-  --pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
-  --pf-c-table--tbody--m-hoverable--BoxShadow: none;
-  --pf-c-table--tbody--m-hoverable--BackgroundColor: transparent;
-  --pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
-  --pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400);
-  --pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
+  // tbody clickable
+  --pf-c-table--tbody--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
+  --pf-c-table--tbody--m-clickable--BoxShadow: none;
+  --pf-c-table--tbody--m-clickable--BackgroundColor: transparent;
+  --pf-c-table--tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
+  --pf-c-table--tbody--m-clickable--hover--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
+  --pf-c-table--tbody--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table--tbody--m-clickable--focus--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
+  --pf-c-table--tbody--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table--tbody--m-clickable--active--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
+  --pf-c-table--tbody--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table--tbody--m-clickable--m-expanded--BorderColor: var(--pf-global--active-color--400);
+  --pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
 
   // tbody selected
   --pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
   --pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
-  --pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
+  --pf-c-table--tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
   --pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
   --pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
@@ -580,6 +580,10 @@
         vertical-align: top;
       }
     }
+
+    &.pf-m-expanded > :first-child:not(.pf-c-table__control-row) {
+      border-bottom-width: 0;
+    }
   }
   // stylelint-enable
 
@@ -668,34 +672,34 @@
     }
   }
 
-  // tr hoverable
-  tr.pf-m-hoverable {
+  // tr clickable
+  tr.pf-m-clickable {
     cursor: pointer;
-    background-color: var(--pf-c-table--tr--m-hoverable--BackgroundColor);
-    outline-offset: var(--pf-c-table--tr--m-hoverable--OutlineOffset);
-    box-shadow: var(--pf-c-table--tr--m-hoverable--BoxShadow);
+    background-color: var(--pf-c-table--tr--m-clickable--BackgroundColor);
+    outline-offset: var(--pf-c-table--tr--m-clickable--OutlineOffset);
+    box-shadow: var(--pf-c-table--tr--m-clickable--BoxShadow);
 
     &:hover,
     &:focus,
     &:active {
       &:not(.pf-m-selected) + tr.pf-m-selected {
-        box-shadow: var(--pf-c-table--tr--m-hoverable--m-selected--BoxShadow);
+        box-shadow: var(--pf-c-table--tr--m-clickable--m-selected--BoxShadow);
       }
     }
 
     &:hover {
-      --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--hover--BoxShadow);
-      --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--hover--BackgroundColor);
+      --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--hover--BoxShadow);
+      --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--hover--BackgroundColor);
     }
 
     &:focus {
-      --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--focus--BoxShadow);
-      --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--focus--BackgroundColor);
+      --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--focus--BoxShadow);
+      --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--focus--BackgroundColor);
     }
 
     &:active {
-      --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--active--BoxShadow);
-      --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--active--BackgroundColor);
+      --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--active--BoxShadow);
+      --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--active--BackgroundColor);
     }
   }
 
@@ -726,38 +730,38 @@
     --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
   }
 
-  // tbody hoverable
-  tbody.pf-m-hoverable {
+  // tbody clickable
+  tbody.pf-m-clickable {
     cursor: pointer;
-    background-color: var(--pf-c-table--tbody--m-hoverable--BackgroundColor);
-    outline-offset: var(--pf-c-table--tbody--m-hoverable--OutlineOffset);
-    box-shadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow);
+    background-color: var(--pf-c-table--tbody--m-clickable--BackgroundColor);
+    outline-offset: var(--pf-c-table--tbody--m-clickable--OutlineOffset);
+    box-shadow: var(--pf-c-table--tbody--m-clickable--BoxShadow);
 
     &.pf-m-expanded:not(.pf-m-selected) {
-      --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor);
+      --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-clickable--m-expanded--BorderColor);
     }
 
     &:hover,
     &:focus,
     &:active {
       &:not(.pf-m-selected) + tbody.pf-m-selected {
-        box-shadow: var(--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow);
+        box-shadow: var(--pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow);
       }
     }
 
     &:hover {
-      --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--hover--BoxShadow);
-      --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--hover--BackgroundColor);
+      --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--hover--BoxShadow);
+      --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--hover--BackgroundColor);
     }
 
     &:focus {
-      --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--focus--BoxShadow);
-      --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--focus--BackgroundColor);
+      --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--focus--BoxShadow);
+      --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--focus--BackgroundColor);
     }
 
     &:active {
-      --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--active--BoxShadow);
-      --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--active--BackgroundColor);
+      --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--active--BoxShadow);
+      --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--active--BackgroundColor);
     }
   }
 
@@ -1239,14 +1243,6 @@
   }
 }
 
-// stylelint-disable
-.pf-c-table__compound-expansion-toggle.pf-m-expanded:first-child,
-.pf-c-table__expandable-row.pf-m-expanded > :first-child,
-.pf-c-table tbody.pf-m-expanded > tr > :not(.pf-c-table__compound-expansion-toggle) {
-  --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
-}
-// stylelint-enable
-
 // Nested table
 // ==================================================================
 .pf-c-table .pf-c-table {

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

@@ -1949,54 +1949,52 @@ When a list item includes more than one block of content, it can be difficult fo
 | -- | -- | -- |
 | `.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>
@@ -2009,27 +2007,27 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | 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** |
+| `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-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">
@@ -2038,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>
@@ -2053,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"
@@ -2070,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">
@@ -2080,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>
@@ -2095,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
@@ -2113,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">
@@ -2123,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>
@@ -2138,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"
@@ -2155,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">
@@ -2165,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>
@@ -2180,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