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

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 {

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

@@ -1,5 +1,4 @@
 .pf-c-text-input-group {
-  // Component
   --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
 
   // Base border
@@ -31,7 +30,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); // matches placeholder text color
-  --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;
 
   // Icon
   --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
@@ -106,9 +106,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;
 
   &::before,
   &::after {
@@ -155,6 +155,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;
 
   &,
@@ -167,7 +168,7 @@
   }
 
   &::placeholder {
-    color: var(--pf-c-text-input-group--placeholder--Color);
+    color: var(--pf-c-text-input-group__text-input--placeholder--Color);
   }
 }
 

package/components/Tile/tile.css

@@ -42,11 +42,11 @@
   --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
   position: relative;
   display: inline-grid;
+  grid-template-rows: min-content;
   padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
   text-align: center;
   cursor: pointer;
   background-color: var(--pf-c-tile--BackgroundColor);
-  grid-template-rows: min-content;
   transition: var(--pf-c-tile--Transition);
   transform: translateY(var(--pf-c-tile--TranslateY));
 }

package/components/Tile/tile.scss

@@ -63,11 +63,11 @@
 
   position: relative;
   display: inline-grid;
+  grid-template-rows: min-content;
   padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
   text-align: center;
   cursor: pointer;
   background-color: var(--pf-c-tile--BackgroundColor);
-  grid-template-rows: min-content;
   transition: var(--pf-c-tile--Transition);
   transform: translateY(var(--pf-c-tile--TranslateY));
 

package/components/Timestamp/timestamp.css

@@ -17,12 +17,12 @@
   outline-offset: var(--pf-c-timestamp--OutlineOffset);
 }
 .pf-c-timestamp.pf-m-help-text {
-  cursor: pointer;
   text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
-  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
   text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
-  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
   text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  cursor: pointer;
 }
 .pf-c-timestamp.pf-m-help-text:hover {
   --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);

package/components/Timestamp/timestamp.scss

@@ -20,12 +20,12 @@
   outline-offset: var(--pf-c-timestamp--OutlineOffset);
 
   &.pf-m-help-text {
-    cursor: pointer;
     text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
-    text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
     text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
-    text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+    text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
     text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+    text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+    cursor: pointer;
 
     &:hover {
       --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);