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

package/components/Table/table-tree-view.css

@@ -12,10 +12,20 @@
   --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
   --pf-c-table--m-tree-view__toggle--TranslateX: -100%;
   --pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-global--FontSize--md);
+  --pf-c-table--m-no-inset__tree-view-main--PaddingLeft: 0;
+  --pf-c-table--m-no-inset__tree-view-main--MarginLeft: 0;
 }
 .pf-c-table.pf-m-tree-view > tbody > tr {
   --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
 }
+.pf-c-table.pf-m-tree-view > tbody > tr.pf-m-no-inset {
+  --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
+  --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
+}
+.pf-c-table.pf-m-tree-view.pf-m-no-inset {
+  --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
+  --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
+}
 .pf-c-table.pf-m-tree-view tr[aria-level="2"] {
   --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
 }
@@ -311,7 +321,7 @@
     display: block;
   }
   .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-details-toggle,
-.pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
+  .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
     display: inline-block;
   }
   .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
@@ -452,7 +462,7 @@
     display: block;
   }
   .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-details-toggle,
-.pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
+  .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
     display: inline-block;
   }
   .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
@@ -593,7 +603,7 @@
     display: block;
   }
   .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-details-toggle,
-.pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
+  .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
     display: inline-block;
   }
   .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
@@ -734,7 +744,7 @@
     display: block;
   }
   .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-details-toggle,
-.pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
+  .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
     display: inline-block;
   }
   .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {

package/components/Table/table-tree-view.scss

@@ -25,13 +25,28 @@ $pf-c-tree-view--MaxDepth: 10;
   // toggle icon
   --pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-global--FontSize--md);
 
+
+  // no node children
+  --pf-c-table--m-no-inset__tree-view-main--PaddingLeft: 0;
+  --pf-c-table--m-no-inset__tree-view-main--MarginLeft: 0;
+
   &.pf-m-tree-view {
     // stylelint-disable selector-no-qualifying-type
     > tbody > tr {
       --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
+
+      &.pf-m-no-inset {
+        --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
+        --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
+      }
     }
     // stylelint-enable
 
+    &.pf-m-no-inset {
+      --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
+      --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
+    }
+
     @for $i from 2 through $pf-c-tree-view--MaxDepth {
       tr[aria-level="#{$i}"] {
         --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * #{$i - 1} + var(--pf-c-table__tree-view-main--indent--base));

package/components/Table/table.css

@@ -215,43 +215,43 @@
   --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
   --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
-  --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);
+  --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);
   --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);
-  --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);
+  --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);
   --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);
@@ -261,6 +261,7 @@
   --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-table__subhead--Color: var(--pf-global--Color--200);
   --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+  --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-global--ZIndex--xs);
   color: var(--pf-global--Color--100);
   width: 100%;
   background-color: var(--pf-c-table--BackgroundColor);
@@ -289,7 +290,7 @@
   border-bottom: 0;
 }
 .pf-c-table.pf-m-sticky-header > thead > tr > * {
-  z-index: var(--pf-global--ZIndex--xs);
+  z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex);
 }
 .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
   position: sticky;
@@ -447,6 +448,9 @@
   margin-top: var(--pf-c-table__check--input--MarginTop);
   vertical-align: top;
 }
+.pf-c-table tbody.pf-m-expanded > :first-child:not(.pf-c-table__control-row) {
+  border-bottom-width: 0;
+}
 .pf-c-table .pf-c-table__compound-expansion-toggle, .pf-c-table .pf-c-table__compound-expansion-toggle:first-child, .pf-c-table .pf-c-table__compound-expansion-toggle:last-child {
   padding: 0;
 }
@@ -506,26 +510,26 @@
 .pf-c-table.pf-m-no-border-rows > tbody .pf-c-table__control-row > .pf-c-table__compound-expansion-toggle:first-child > ::before {
   border-left-width: 0;
 }
-.pf-c-table tr.pf-m-hoverable {
+.pf-c-table 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);
 }
-.pf-c-table tr.pf-m-hoverable:hover:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-hoverable:focus:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-hoverable:active:not(.pf-m-selected) + tr.pf-m-selected {
-  box-shadow: var(--pf-c-table--tr--m-hoverable--m-selected--BoxShadow);
+.pf-c-table tr.pf-m-clickable:hover:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-clickable:focus:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-clickable:active:not(.pf-m-selected) + tr.pf-m-selected {
+  box-shadow: var(--pf-c-table--tr--m-clickable--m-selected--BoxShadow);
 }
-.pf-c-table tr.pf-m-hoverable: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.pf-m-clickable:hover {
+  --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);
 }
-.pf-c-table tr.pf-m-hoverable: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.pf-m-clickable:focus {
+  --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);
 }
-.pf-c-table tr.pf-m-hoverable: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.pf-m-clickable:active {
+  --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);
 }
 .pf-c-table tr.pf-m-selected {
   --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
@@ -547,29 +551,29 @@
 .pf-c-table tr.pf-m-first-cell-offset-reset {
   --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
 }
-.pf-c-table tbody.pf-m-hoverable {
+.pf-c-table 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-c-table tbody.pf-m-hoverable.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 tbody.pf-m-clickable.pf-m-expanded:not(.pf-m-selected) {
+  --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-clickable--m-expanded--BorderColor);
 }
-.pf-c-table tbody.pf-m-hoverable:hover:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-hoverable:focus:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-hoverable:active:not(.pf-m-selected) + tbody.pf-m-selected {
-  box-shadow: var(--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow);
+.pf-c-table tbody.pf-m-clickable:hover:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-clickable:focus:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-clickable:active:not(.pf-m-selected) + tbody.pf-m-selected {
+  box-shadow: var(--pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow);
 }
-.pf-c-table tbody.pf-m-hoverable: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.pf-m-clickable:hover {
+  --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);
 }
-.pf-c-table tbody.pf-m-hoverable: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.pf-m-clickable:focus {
+  --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);
 }
-.pf-c-table tbody.pf-m-hoverable: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.pf-m-clickable:active {
+  --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);
 }
 .pf-c-table tbody.pf-m-selected {
   --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--BorderLeftWidth);
@@ -660,9 +664,9 @@
 .pf-c-table__button-content,
 .pf-c-table__column-help {
   display: grid;
+  grid-template-columns: auto max-content;
   align-items: end;
   justify-content: start;
-  grid-template-columns: auto max-content;
 }
 .pf-c-table__button-content .pf-c-table__text,
 .pf-c-table__column-help .pf-c-table__text {
@@ -768,6 +772,10 @@
   vertical-align: middle;
 }
 
+.pf-c-table__action {
+  text-align: right;
+}
+
 .pf-c-table__inline-edit-action {
   --pf-c-table--cell--PaddingLeft: 0;
   --pf-c-table--cell--PaddingRight: 0;
@@ -933,12 +941,6 @@
   display: none;
 }
 
-.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);
-}
-
 .pf-c-table .pf-c-table tr > *:first-child {
   --pf-c-table--cell--PaddingLeft: var(--pf-c-table--nested--first-last-child--PaddingLeft);
 }

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);
@@ -306,6 +306,9 @@
   // Striped
   --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
 
+  // Sticky
+  --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-global--ZIndex--xs);
+
   @media screen and (min-width: $pf-global--breakpoint--xl) {
     --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-c-table--cell--first-last-child--xl--PaddingRight);
     --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--cell--first-last-child--xl--PaddingLeft);
@@ -330,7 +333,7 @@
       border-bottom: 0;
 
       > * {
-        z-index: var(--pf-global--ZIndex--xs); // set z-index here to allow sticky column to override
+        z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
       }
     }
 
@@ -577,6 +580,10 @@
         vertical-align: top;
       }
     }
+
+    &.pf-m-expanded > :first-child:not(.pf-c-table__control-row) {
+      border-bottom-width: 0;
+    }
   }
   // stylelint-enable
 
@@ -665,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);
     }
   }
 
@@ -723,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);
     }
   }
 
@@ -874,9 +881,9 @@
 .pf-c-table__button-content,
 .pf-c-table__column-help {
   display: grid;
+  grid-template-columns: auto max-content;
   align-items: end;
   justify-content: start;
-  grid-template-columns: auto max-content;
 
   .pf-c-table__text {
     min-width: auto;
@@ -1010,6 +1017,10 @@
   vertical-align: middle;
 }
 
+.pf-c-table__action {
+  text-align: right;
+}
+
 // Inline edit
 .pf-c-table__inline-edit-action {
   --pf-c-table--cell--PaddingLeft: 0;
@@ -1232,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/components/Tabs/tabs.css

@@ -115,7 +115,6 @@
   --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
   --pf-c-tabs__item-action-icon--MarginTop: 0.125rem;
-  --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
   --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
   --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
@@ -589,9 +588,6 @@
   --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
   outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
 }
-.pf-c-tabs__item-action.pf-m-help {
-  --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
-}
 .pf-c-tabs__item-action:last-child {
   --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
 }

package/components/Tabs/tabs.scss

@@ -147,9 +147,6 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs__item-action--c-button--OutlineOffset: #{pf-size-prem(-3px)};
   --pf-c-tabs__item-action-icon--MarginTop: #{pf-size-prem(2px)};
 
-  // Item help
-  --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
-
   // Add button
   --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
@@ -707,10 +704,6 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
     outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
   }
 
-  &.pf-m-help {
-    --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
-  }
-
   &:last-child {
     --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
   }

package/components/TextInputGroup/text-input-group.css

@@ -20,7 +20,8 @@
   --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__text-input--MinWidth: 12ch;
   --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
-  --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
+  --pf-c-text-input-group__text-input--placeholder--Color: var(--pf-global--Color--dark-200);
+  --pf-c-text-input-group__text-input--BackgroundColor: transparent;
   --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
   --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -77,9 +78,9 @@
 
 .pf-c-text-input-group__text {
   display: inline-grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "text-input";
   flex: 1;
+  grid-template-areas: "text-input";
+  grid-template-columns: 1fr;
 }
 .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
   position: absolute;
@@ -120,6 +121,7 @@
   width: 100%;
   min-width: var(--pf-c-text-input-group__text-input--MinWidth);
   padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
+  background-color: var(--pf-c-text-input-group__text-input--BackgroundColor);
   border: 0;
 }
 .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
@@ -129,7 +131,7 @@
   color: var(--pf-c-text-input-group__text-input--m-hint--Color);
 }
 .pf-c-text-input-group__text-input::placeholder {
-  color: var(--pf-c-text-input-group--placeholder--Color);
+  color: var(--pf-c-text-input-group__text-input--placeholder--Color);
 }
 
 .pf-c-text-input-group__utilities {