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

package/components/Sidebar/sidebar.scss

@@ -1,9 +1,38 @@
 $pf-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
-
 .pf-c-sidebar {
+  --pf-c-sidebar--inset: var(--pf-global--spacer--md);
+  --pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);
+
+  // Panel
+  --pf-c-sidebar__panel--PaddingTop: 0;
+  --pf-c-sidebar__panel--PaddingRight: 0;
+  --pf-c-sidebar__panel--PaddingBottom: 0;
+  --pf-c-sidebar__panel--PaddingLeft: 0;
+  --pf-c-sidebar__panel--Order: -1;
+
+  // Panel padding
+  --pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
+
+  // Content
+  --pf-c-sidebar__content--PaddingTop: 0;
+  --pf-c-sidebar__content--PaddingRight: 0;
+  --pf-c-sidebar__content--PaddingBottom: 0;
+  --pf-c-sidebar__content--PaddingLeft: 0;
+  --pf-c-sidebar__content--Order: 1;
+
+  // Content padding
+  --pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
 
   // Main
   --pf-c-sidebar__main--FlexDirection: column;
@@ -11,15 +40,20 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar__main--AlignItems: stretch;
   --pf-c-sidebar__main--md--AlignItems: start;
   --pf-c-sidebar__main--child--MarginTop: 0;
-  --pf-c-sidebar__main--child--MarginLeft: 0;
 
   // Gutter
-  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
-  --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
+  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);
+
+  // Border
+  --pf-c-sidebar__main--m-border--before--Display: none;
+  --pf-c-sidebar__main--m-border--before--md--Display: block;
+  --pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
+  --pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);
 
   // Panel right
-  --pf-c-sidebar--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-panel-right__panel--Order: -1;
   --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
+  --pf-c-sidebar--m-panel-right__content--md--Order: -1;
 
   // Stack
   --pf-c-sidebar--m-stack__main--FlexDirection: column;
@@ -27,7 +61,7 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar--m-stack__panel--Position: sticky;
   --pf-c-sidebar--m-stack__panel--Top: 0;
   --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
-  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
 
   // Split
   --pf-c-sidebar--m-split__main--AlignItems: start;
@@ -35,6 +69,7 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar--m-split__panel--Position: static;
   --pf-c-sidebar--m-split__panel--Top: auto;
   --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
+  --pf-c-sidebar--m-split__main--m-border--before--Display: block;
 
   // Panel
   --pf-c-sidebar__panel--FlexBasis--base: auto;
@@ -50,7 +85,6 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
   --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
   --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-sidebar__panel--Order: 0;
   --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
 
   // Content
@@ -62,61 +96,51 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
   @media (min-width: $pf-global--breakpoint--md) {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
+    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
+    --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display); // show border starting at md breakpoint
     --pf-c-sidebar__panel--BoxShadow: none;
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
-    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
   }
 
   @media (min-width: $pf-global--breakpoint--xl) {
-    --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
+    --pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
   }
 
-  &.pf-m-gutter {
-    --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-    --pf-c-sidebar__main--child--MarginLeft: 0;
-
-    > .pf-c-sidebar__main > * + * {
-      margin-top: var(--pf-c-sidebar__main--child--MarginTop);
-      margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
-    }
-
-    @media (min-width: $pf-global--breakpoint--md) {
-      --pf-c-sidebar__main--child--MarginTop: 0;
-      --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
-    }
+  &.pf-m-gutter > .pf-c-sidebar__main {
+    gap: var(--pf-c-sidebar--m-gutter__main--Gap);
   }
 
   &.pf-m-panel-right {
     --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
+    --pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);
 
     @media (min-width: $pf-global--breakpoint--md) {
       --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
+      --pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
     }
   }
 
   &.pf-m-stack {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
     --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
-    --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-    --pf-c-sidebar__main--child--MarginLeft: 0;
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
     --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
+    --pf-c-sidebar__main--m-border--before--Display: none;
     --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
   }
 
   &.pf-m-split {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
     --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
-    --pf-c-sidebar__main--child--MarginTop: 0;
-    --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
     --pf-c-sidebar__panel--BoxShadow: none;
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
+    --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
     --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
   }
 
@@ -127,18 +151,34 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   display: flex;
   flex-direction: var(--pf-c-sidebar__main--FlexDirection);
   align-items: var(--pf-c-sidebar__main--AlignItems);
+
+  &.pf-m-border::before {
+    display: var(--pf-c-sidebar__main--m-border--before--Display);
+    flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
+    align-self: stretch;
+    content: "";
+    background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
+  }
 }
 
 .pf-c-sidebar__panel {
   position: var(--pf-c-sidebar__panel--Position);
   top: var(--pf-c-sidebar__panel--Top);
   z-index: var(--pf-c-sidebar__panel--ZIndex);
-  flex-shrink: 0;
   flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
+  flex-shrink: 0;
   order: var(--pf-c-sidebar__panel--Order);
+  padding: var(--pf-c-sidebar__panel--PaddingTop) var(--pf-c-sidebar__panel--PaddingRight) var(--pf-c-sidebar__panel--PaddingBottom) var(--pf-c-sidebar__panel--PaddingLeft);
   background-color: var(--pf-c-sidebar__panel--BackgroundColor);
   box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
 
+  &.pf-m-padding {
+    --pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
+    --pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
+    --pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
+    --pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
+  }
+
   &.pf-m-sticky {
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
@@ -152,11 +192,28 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 .pf-c-sidebar__content {
   flex-grow: 1;
+  order: var(--pf-c-sidebar__content--Order);
+  padding: var(--pf-c-sidebar__content--PaddingTop) var(--pf-c-sidebar__content--PaddingRight) var(--pf-c-sidebar__content--PaddingBottom) var(--pf-c-sidebar__content--PaddingLeft);
   background-color: var(--pf-c-sidebar__content--BackgroundColor);
 
+  &.pf-m-padding {
+    --pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+    --pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
+    --pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
+    --pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+  }
+
   &.pf-m-no-background {
     --pf-c-sidebar__content--BackgroundColor: transparent;
   }
+
+  & + .pf-c-sidebar__panel {
+    --pf-c-sidebar__panel--Order: 1;
+  }
+
+  :where(&:first-child) {
+    --pf-c-sidebar__content--Order: -1;
+  }
 }
 
 .pf-c-sidebar,

package/components/SimpleList/simple-list.css

@@ -40,9 +40,9 @@
   border: none;
 }
 .pf-c-simple-list__item-link:hover {
-  text-decoration: none;
   --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
   --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
+  text-decoration: none;
 }
 .pf-c-simple-list__item-link:focus {
   --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);

package/components/SimpleList/simple-list.scss

@@ -45,10 +45,10 @@
   border: none;
 
   &:hover {
-    text-decoration: none;
-
     --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
     --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
+
+    text-decoration: none;
   }
 
   &:focus {

package/components/Spinner/spinner.css

@@ -187,13 +187,13 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-spinner__path {
   width: 100%;
   height: 100%;
-  transform-origin: 50% 50%;
-  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
   stroke: var(--pf-c-spinner--Color);
-  stroke-linecap: round;
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
+  stroke-linecap: round;
   stroke-width: var(--pf-c-spinner--stroke-width);
+  transform-origin: 50% 50%;
+  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
 }
 
 @keyframes pf-c-spinner-animation-rotate {
@@ -213,8 +213,8 @@ svg.pf-c-spinner.pf-m-xl {
     stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
   }
   40% {
-    stroke-dashoffset: 150;
     stroke-dasharray: 220;
+    stroke-dashoffset: 150;
   }
   100% {
     stroke-dashoffset: 280;

package/components/Spinner/spinner.scss

@@ -252,13 +252,13 @@ svg.pf-c-spinner {
 .pf-c-spinner__path {
   width: 100%;
   height: 100%;
-  transform-origin: 50% 50%;
-  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
   stroke: var(--pf-c-spinner--Color);
-  stroke-linecap: round;
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
+  stroke-linecap: round;
   stroke-width: var(--pf-c-spinner--stroke-width);
+  transform-origin: 50% 50%;
+  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
 }
 
 @keyframes pf-c-spinner-animation-rotate {
@@ -282,8 +282,8 @@ svg.pf-c-spinner {
   }
 
   40% {
-    stroke-dashoffset: 150;
     stroke-dasharray: 220;
+    stroke-dashoffset: 150;
   }
 
   100% {

package/components/Table/table-grid.css

@@ -418,7 +418,7 @@
     border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
   }
   .pf-m-grid-md.pf-c-table tr:last-child,
-.pf-m-grid-md.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
+  .pf-m-grid-md.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
     border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
   }
   .pf-m-grid-md.pf-c-table tbody.pf-m-expanded {
@@ -563,7 +563,7 @@
     --pf-c-table--tbody--after--BorderLeftColor: transparent;
   }
   .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable,
-.pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr {
+  .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr {
     position: relative;
   }
   .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr::after {
@@ -593,9 +593,9 @@
     background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
   }
   .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
-.pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
-.pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
-.pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
+  .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
+  .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
+  .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
     width: auto;
     padding: 0;
   }
@@ -615,8 +615,8 @@
     --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
   }
   .pf-m-grid-md.pf-c-table .pf-c-table__check,
-.pf-m-grid-md.pf-c-table .pf-c-table__favorite,
-.pf-m-grid-md.pf-c-table .pf-c-table__action {
+  .pf-m-grid-md.pf-c-table .pf-c-table__favorite,
+  .pf-m-grid-md.pf-c-table .pf-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
   }
@@ -733,7 +733,7 @@
     border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
   }
   .pf-m-grid-lg.pf-c-table tr:last-child,
-.pf-m-grid-lg.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
+  .pf-m-grid-lg.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
     border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
   }
   .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded {
@@ -878,7 +878,7 @@
     --pf-c-table--tbody--after--BorderLeftColor: transparent;
   }
   .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable,
-.pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr {
+  .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr {
     position: relative;
   }
   .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr::after {
@@ -908,9 +908,9 @@
     background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
   }
   .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
-.pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
-.pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
-.pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
+  .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
+  .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
+  .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
     width: auto;
     padding: 0;
   }
@@ -930,8 +930,8 @@
     --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
   }
   .pf-m-grid-lg.pf-c-table .pf-c-table__check,
-.pf-m-grid-lg.pf-c-table .pf-c-table__favorite,
-.pf-m-grid-lg.pf-c-table .pf-c-table__action {
+  .pf-m-grid-lg.pf-c-table .pf-c-table__favorite,
+  .pf-m-grid-lg.pf-c-table .pf-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
   }
@@ -1048,7 +1048,7 @@
     border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
   }
   .pf-m-grid-xl.pf-c-table tr:last-child,
-.pf-m-grid-xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
+  .pf-m-grid-xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
     border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
   }
   .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded {
@@ -1193,7 +1193,7 @@
     --pf-c-table--tbody--after--BorderLeftColor: transparent;
   }
   .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable,
-.pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr {
+  .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr {
     position: relative;
   }
   .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr::after {
@@ -1223,9 +1223,9 @@
     background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
   }
   .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
-.pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
-.pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
-.pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
+  .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
+  .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
+  .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
     width: auto;
     padding: 0;
   }
@@ -1245,8 +1245,8 @@
     --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
   }
   .pf-m-grid-xl.pf-c-table .pf-c-table__check,
-.pf-m-grid-xl.pf-c-table .pf-c-table__favorite,
-.pf-m-grid-xl.pf-c-table .pf-c-table__action {
+  .pf-m-grid-xl.pf-c-table .pf-c-table__favorite,
+  .pf-m-grid-xl.pf-c-table .pf-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
   }
@@ -1363,7 +1363,7 @@
     border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
   }
   .pf-m-grid-2xl.pf-c-table tr:last-child,
-.pf-m-grid-2xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
+  .pf-m-grid-2xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
     border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
   }
   .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded {
@@ -1508,7 +1508,7 @@
     --pf-c-table--tbody--after--BorderLeftColor: transparent;
   }
   .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable,
-.pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr {
+  .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr {
     position: relative;
   }
   .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr::after {
@@ -1538,9 +1538,9 @@
     background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
   }
   .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
-.pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
-.pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
-.pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
+  .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
+  .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
+  .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
     width: auto;
     padding: 0;
   }
@@ -1560,8 +1560,8 @@
     --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
   }
   .pf-m-grid-2xl.pf-c-table .pf-c-table__check,
-.pf-m-grid-2xl.pf-c-table .pf-c-table__favorite,
-.pf-m-grid-2xl.pf-c-table .pf-c-table__action {
+  .pf-m-grid-2xl.pf-c-table .pf-c-table__favorite,
+  .pf-m-grid-2xl.pf-c-table .pf-c-table__action {
     grid-row-start: 1;
     grid-column-start: 2;
   }

package/components/Table/table-scrollable.css

@@ -1,37 +1,42 @@
 .pf-c-table {
-  --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
-  --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
-  --pf-c-table__sticky-column--Left: 0;
-  --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
-  --pf-c-table__sticky-column--Top: 0;
-  --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
-  --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
-  --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
+  --pf-c-table__sticky-cell--MinWidth--base: 12.5rem;
+  --pf-c-table__sticky-cell--MinWidth: var(--pf-c-table__sticky-cell--MinWidth--base);
+  --pf-c-table__sticky-cell--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-table__sticky-cell--Right: auto;
+  --pf-c-table__sticky-cell--Left: auto;
+  --pf-c-table__sticky-cell--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-cell--m-right--Right: 0;
+  --pf-c-table__sticky-cell--m-left--Left: 0;
+  --pf-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-c-table__sticky-cell--ZIndex) + 1);
 }
-.pf-c-table .pf-c-table__sticky-column {
+.pf-c-table .pf-c-table__sticky-cell {
+  --pf-c-table--cell--Overflow: visible;
+  --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-c-table--m-sticky-header__sticky-cell--ZIndex);
   position: sticky;
-  left: var(--pf-c-table__sticky-column--Left);
-  z-index: var(--pf-c-table__sticky-column--ZIndex);
-  min-width: var(--pf-c-table__sticky-column--MinWidth);
-  background-color: var(--pf-c-table__sticky-column--BackgroundColor);
+  right: var(--pf-c-table__sticky-cell--Right);
+  left: var(--pf-c-table__sticky-cell--Left);
+  z-index: var(--pf-c-table__sticky-cell--ZIndex);
+  min-width: var(--pf-c-table__sticky-cell--MinWidth);
+  background-color: var(--pf-c-table__sticky-cell--BackgroundColor);
   background-clip: padding-box;
 }
-.pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
-  --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
-  --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
+.pf-c-table .pf-c-table__sticky-cell.pf-m-border-right::before {
+  --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
+  --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightColor);
 }
-.pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
-  --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
-  --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
+.pf-c-table .pf-c-table__sticky-cell.pf-m-border-left::before {
+  --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
+  --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
 }
-.pf-c-table.pf-m-sticky-header {
-  --pf-c-table--cell--Overflow: visible;
+.pf-c-table .pf-c-table__sticky-cell.pf-m-right {
+  --pf-c-table__sticky-cell--Right: var(--pf-c-table__sticky-cell--m-right--Right);
 }
-.pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
-  z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
+.pf-c-table .pf-c-table__sticky-cell.pf-m-left {
+  --pf-c-table__sticky-cell--Left: var(--pf-c-table__sticky-cell--m-left--Left);
 }
 
 .pf-c-scroll-outer-wrapper {

package/components/Table/table-scrollable.scss

@@ -1,43 +1,48 @@
 .pf-c-table {
-  --pf-c-table__sticky-column--cell-min-width--base: #{pf-size-prem(200px)};
-  --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
-  --pf-c-table__sticky-column--Left: 0;
-  --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
-  --pf-c-table__sticky-column--Top: 0;
-  --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
-  --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
-  --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
-
-  .pf-c-table__sticky-column {
+  --pf-c-table__sticky-cell--MinWidth--base: #{pf-size-prem(200px)};
+  --pf-c-table__sticky-cell--MinWidth: var(--pf-c-table__sticky-cell--MinWidth--base);
+  --pf-c-table__sticky-cell--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-table__sticky-cell--Right: auto;
+  --pf-c-table__sticky-cell--Left: auto;
+  --pf-c-table__sticky-cell--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-cell--m-right--Right: 0;
+  --pf-c-table__sticky-cell--m-left--Left: 0;
+  --pf-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-c-table__sticky-cell--ZIndex) + 1);
+
+  .pf-c-table__sticky-cell {
+    --pf-c-table--cell--Overflow: visible;
+    --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-c-table--m-sticky-header__sticky-cell--ZIndex);
+
     position: sticky;
-    left: var(--pf-c-table__sticky-column--Left);
-    z-index: var(--pf-c-table__sticky-column--ZIndex);
-    min-width: var(--pf-c-table__sticky-column--MinWidth);
-    background-color: var(--pf-c-table__sticky-column--BackgroundColor);
+    right: var(--pf-c-table__sticky-cell--Right);
+    left: var(--pf-c-table__sticky-cell--Left);
+    z-index: var(--pf-c-table__sticky-cell--ZIndex);
+    min-width: var(--pf-c-table__sticky-cell--MinWidth);
+    background-color: var(--pf-c-table__sticky-cell--BackgroundColor);
     background-clip: padding-box;
 
     &.pf-m-border-right::before {
-      --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
-      --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
+      --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
+      --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightColor);
     }
 
     &.pf-m-border-left::before {
-      --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
-      --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
+      --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
+      --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
     }
-  }
 
-  &.pf-m-sticky-header {
-    --pf-c-table--cell--Overflow: visible;
+    &.pf-m-right {
+      --pf-c-table__sticky-cell--Right: var(--pf-c-table__sticky-cell--m-right--Right);
+    }
 
-    thead {
-      .pf-c-table__sticky-column {
-        z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
-      }
+    &.pf-m-left {
+      --pf-c-table__sticky-cell--Left: var(--pf-c-table__sticky-cell--m-left--Left);
     }
+
   }
 }