@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.8

package/components/Table/table-grid.scss

@@ -38,19 +38,19 @@
   // ============================================================ //
 
   // Table
-  --#{$table}--responsive--BorderColor: var(--#{$pf-global}--BorderColor--300);
+  --#{$table}--responsive--BorderColor: var(--pf-t--global--border--color--default);
 
   // Body
-  --#{$table}__tbody--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --#{$table}__tbody--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
   --#{$table}__tbody--after--BorderLeftWidth: 0;
-  --#{$table}__tbody--after--BorderColor: var(--#{$pf-global}--active-color--100);
+  --#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
 
   // Row
-  --#{$table}__tr--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --#{$table}__tr--responsive--last-child--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
   --#{$table}__tr--responsive--GridColumnGap: var(--#{$pf-global}--spacer--md);
-  --#{$table}__tr--responsive--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
   --#{$table}__tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--md);
   --#{$table}__tr--responsive--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$table}__tr--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
@@ -76,7 +76,7 @@
 
   // selected
   --#{$table}__tbody--m-selected--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
-  --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--#{$pf-global}--active-color--100);
+  --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
 
   // Cell display
   --#{$table}--m-grid--cell--hidden-visible--Display: grid;
@@ -100,6 +100,7 @@
   --#{$table}--m-compact__tr--responsive--PaddingBottom: var(--#{$pf-global}--spacer--sm);
   --#{$table}--m-compact__tr__td--responsive--PaddingTop: var(--#{$pf-global}--spacer--xs);
   --#{$table}--m-compact__tr__td--responsive--PaddingBottom: var(--#{$pf-global}--spacer--xs);
+  --#{$table}--m-compact__check--responsive--MarginTop: #{pf-size-prem(7px)};
   --#{$table}--m-compact__action--responsive--MarginTop: calc(var(--#{$pf-global}--spacer--xs) * -1);
   --#{$table}--m-compact__action--responsive--MarginBottom: calc(var(--#{$pf-global}--spacer--xs) * -1);
   --#{$table}--m-compact__toggle--c-button--responsive--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
@@ -109,7 +110,7 @@
   --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--#{$pf-global}--spacer--lg);
   --#{$table}__expandable-row-content--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
   --#{$table}__expandable-row-content--responsive--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$table}__expandable-row-content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$table}__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
     --#{$table}__expandable-row-content--responsive--PaddingRight: var(--#{$table}__expandable-row-content--responsive--xl--PaddingRight);
@@ -117,7 +118,7 @@
   }
 
   // Check
-  --#{$table}__check--responsive--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
   --#{$table}__check--responsive--MarginTop: #{pf-size-prem(14px)};
 
   // Favorite
@@ -181,35 +182,35 @@
     display: block;
 
     &:first-of-type {
-      border-top: var(--#{$table}__tbody--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
+      border-block-start: var(--#{$table}__tbody--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
     }
   }
 
   // Remove the border from the body inside of the nested table
   .#{$table}.pf-m-compact > tbody:where(.#{$table}__tbody) {
-    border-top: 0;
+    border-block-start: 0;
   }
 
   // Table row
   tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
-    border-bottom: var(--#{$table}__tr--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
+    border-block-end: var(--#{$table}__tr--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
   }
 
   // The last tr should always have a border width of 1px
   tr:where(.#{$table}__tr):last-child,
   tbody:where(.#{$table}__tbody):last-of-type:not(:only-of-type) > tr:where(.#{$table}__tr) {
-    border-bottom-width: var(--#{$table}__tr--responsive--last-child--BorderBottomWidth);
+    border-block-end-width: var(--#{$table}__tr--responsive--last-child--BorderBottomWidth);
   }
 
   tbody:where(.#{$table}__tbody).pf-m-expanded {
-    border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+    border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
 
     tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
-      border-bottom: 0;
+      border-block-end: 0;
     }
 
     &:not(:last-of-type) {
-      border-bottom: var(--#{$table}__tbody--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
+      border-block-end: var(--#{$table}__tbody--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
     }
   }
 
@@ -230,11 +231,17 @@
     grid-column-gap: var(--#{$table}__tr--responsive--GridColumnGap);
 
     // set base variables to reset later
-    padding: var(--#{$table}__tr--responsive--PaddingTop) var(--#{$table}__tr--responsive--PaddingRight) var(--#{$table}__tr--responsive--PaddingBottom) var(--#{$table}__tr--responsive--PaddingLeft);
+    padding-block-start: var(--#{$table}__tr--responsive--PaddingTop);
+    padding-inline-end: var(--#{$table}__tr--responsive--PaddingRight);
+    padding-block-end: var(--#{$table}__tr--responsive--PaddingBottom);
+    padding-inline-start: var(--#{$table}__tr--responsive--PaddingLeft);
 
     // Reset td padding
     & > * {
-      padding: var(--#{$table}--cell--responsive--PaddingTop) var(--#{$table}--cell--responsive--PaddingRight) var(--#{$table}--cell--responsive--PaddingBottom) var(--#{$table}--cell--responsive--PaddingLeft);
+      padding-block-start: var(--#{$table}--cell--responsive--PaddingTop);
+      padding-inline-end: var(--#{$table}--cell--responsive--PaddingRight);
+      padding-block-end: var(--#{$table}--cell--responsive--PaddingBottom);
+      padding-inline-start: var(--#{$table}--cell--responsive--PaddingLeft);
 
       // remove padding from first child to align with kebab
       &:first-child {
@@ -248,20 +255,21 @@
     --#{$table}__tr--responsive--PaddingBottom: var(--#{$table}--m-compact__tr--responsive--PaddingBottom);
     --#{$table}--cell--responsive--PaddingTop: var(--#{$table}--m-compact__tr__td--responsive--PaddingTop);
     --#{$table}--cell--responsive--PaddingBottom: var(--#{$table}--m-compact__tr__td--responsive--PaddingBottom);
+    --#{$table}__check--responsive--MarginTop: var(--#{$table}--m-compact__check--responsive--MarginTop);
     --#{$table}__check--input--MarginTop: 0;
 
     .#{$table}__action {
-      margin-top: var(--#{$table}--m-compact__action--responsive--MarginTop);
-      margin-bottom: var(--#{$table}--m-compact__action--responsive--MarginTop);
+      margin-block-start: var(--#{$table}--m-compact__action--responsive--MarginTop);
+      margin-block-end: var(--#{$table}--m-compact__action--responsive--MarginTop);
     }
 
     .#{$table}__toggle .#{$button} {
-      margin-bottom: var(--#{$table}--m-compact__toggle--c-button--responsive--MarginBottom);
+      margin-block-end: var(--#{$table}--m-compact__toggle--c-button--responsive--MarginBottom);
     }
   }
 
   .#{$table}__icon > * {
-    text-align: left;
+    text-align: start;
   }
 
   // Standard td, in standard row (non-expandable)
@@ -283,7 +291,7 @@
 
     &::before {
       font-weight: bold;
-      text-align: left;
+      text-align: start;
       content: attr(data-label);
     }
   }
@@ -327,12 +335,12 @@
 
     &::after {
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
+     inset-block-start: 0;
+     inset-block-end: 0;
+     inset-inline-start: 0;
       content: "";
       border: 0;
-      border-left: var(--#{$table}__tbody--after--BorderLeftWidth) solid var(--#{$table}__tbody--after--BorderColor);
+      border-inline-start: var(--#{$table}__tbody--after--BorderLeftWidth) solid var(--#{$table}__tbody--after--BorderColor);
     }
 
     &.pf-m-expanded {
@@ -364,7 +372,7 @@
     display: block;
     max-height: var(--#{$table}__expandable-row--MaxHeight);  // Overflow scroll should only happen on responsive
     overflow-y: auto;
-    border-bottom: none;
+    border-block-end: none;
     box-shadow: none;
 
     // cells
@@ -375,7 +383,7 @@
 
     // Modifier - expanded tr
     &.pf-m-expanded {
-      border-top-color: var(--#{$table}--BorderColor);
+      border-block-start-color: var(--#{$table}--BorderColor);
     }
 
     > :first-child:not(.#{$table}__check)::after {
@@ -397,8 +405,8 @@
     }
 
     .#{$table}__expandable-row-content {
-      padding-right: var(--#{$table}__expandable-row-content--responsive--PaddingRight);
-      padding-left: var(--#{$table}__expandable-row-content--responsive--PaddingLeft);
+      padding-inline-end: var(--#{$table}__expandable-row-content--responsive--PaddingRight);
+      padding-inline-start: var(--#{$table}__expandable-row-content--responsive--PaddingLeft);
     }
   }
 
@@ -415,9 +423,9 @@
     > tr:where(.#{$table}__tr)::after {
       content: '';
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
+     inset-block-start: 0;
+     inset-block-end: 0;
+     inset-inline-start: 0;
       width: var(--#{$table}__tbody--after__tr--BorderLeftWidth);
       background-color: var(--#{$table}__tbody--after__tr--BorderLeftColor);
     }
@@ -439,9 +447,9 @@
     &::after {
       content: '';
       position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
+     inset-block-start: 0;
+     inset-block-end: 0;
+     inset-inline-start: 0;
       width: var(--#{$table}__tr--m-selected--after--BorderLeftWidth);
       background-color: var(--#{$table}__tr--m-selected--after--BorderLeftColor);
     }
@@ -462,7 +470,7 @@
     grid-row-start: 20;
     grid-column: -1;
     justify-self: end;
-    padding-right: 0;
+    padding-inline-end: 0;
 
     &::after {
       content: none;
@@ -485,40 +493,46 @@
 
   // Check table cell
   .#{$table}__check {
-    margin-top: var(--#{$table}__check--responsive--MarginTop);
-    margin-left: var(--#{$table}__check--responsive--MarginLeft);
+    margin-block-start: var(--#{$table}__check--responsive--MarginTop);
+    margin-inline-start: var(--#{$table}__check--responsive--MarginLeft);
+    line-height: 1;
 
     ~ .#{$table}__favorite {
-      margin-left: var(--#{$table}--m-grid__check--favorite--MarginLeft);
+      margin-inline-start: var(--#{$table}--m-grid__check--favorite--MarginLeft);
 
       ~ .#{$table}__action {
-        margin-left: var(--#{$table}--m-grid__check--favorite--action--MarginLeft);
+        margin-inline-start: var(--#{$table}--m-grid__check--favorite--action--MarginLeft);
       }
     }
 
     ~ .#{$table}__action {
-      margin-left: var(--#{$table}__action--responsive--MarginLeft);
+      margin-inline-start: var(--#{$table}__action--responsive--MarginLeft);
+    }
+
+    label {
+      display: inline-block;
+      margin: 0;
     }
   }
 
   .#{$table}__favorite {
-    margin-top: var(--#{$table}--m-grid__favorite--MarginTop);
+    margin-block-start: var(--#{$table}--m-grid__favorite--MarginTop);
 
     ~ .#{$table}__action {
-      margin-left: var(--#{$table}--m-grid__favorite--action--MarginLeft);
+      margin-inline-start: var(--#{$table}--m-grid__favorite--action--MarginLeft);
     }
   }
 
   // Action cell
   .#{$table}__action {
-    margin-top: var(--#{$table}--m-grid__action--MarginTop);
-    text-align: right;
+    margin-block-start: var(--#{$table}--m-grid__action--MarginTop);
+    text-align: end;
 
     // @smallest breakpoint
     @media screen and (max-width: $pf-v5-global--breakpoint--sm) {
       grid-row-start: 1;
       grid-column-start: 2;
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 

package/components/Table/table-scrollable.css

@@ -17,8 +17,8 @@
   --pf-v5-c-table--cell--Overflow: visible;
   --pf-v5-c-table--m-sticky-header--cell--ZIndex: var(--pf-v5-c-table--m-sticky-header__sticky-cell--ZIndex);
   position: sticky;
-  right: var(--pf-v5-c-table__sticky-cell--Right);
-  left: var(--pf-v5-c-table__sticky-cell--Left);
+  inset-inline-start: var(--pf-v5-c-table__sticky-cell--Left);
+  inset-inline-end: var(--pf-v5-c-table__sticky-cell--Right);
   z-index: var(--pf-v5-c-table__sticky-cell--ZIndex);
   min-width: var(--pf-v5-c-table__sticky-cell--MinWidth);
   background-color: var(--pf-v5-c-table__sticky-cell--BackgroundColor);
@@ -32,10 +32,10 @@
   --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
   --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
 }
-.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right {
+.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-end {
   --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
 }
-.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left {
+.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-start {
   --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
 }
 

package/components/Table/table-scrollable.scss

@@ -18,8 +18,8 @@
     --#{$table}--m-sticky-header--cell--ZIndex: var(--#{$table}--m-sticky-header__sticky-cell--ZIndex);
 
     position: sticky;
-    right: var(--#{$table}__sticky-cell--Right);
-    left: var(--#{$table}__sticky-cell--Left);
+    inset-inline-start: var(--#{$table}__sticky-cell--Left);
+    inset-inline-end: var(--#{$table}__sticky-cell--Right);
     z-index: var(--#{$table}__sticky-cell--ZIndex);
     min-width: var(--#{$table}__sticky-cell--MinWidth);
     background-color: var(--#{$table}__sticky-cell--BackgroundColor);
@@ -35,11 +35,13 @@
       --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
     }
 
-    &.pf-m-right {
+    &.pf-m-right, 
+    &.pf-m-inline-end {
       --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
     }
 
-    &.pf-m-left {
+    &.pf-m-left, 
+    &.pf-m-inline-start {
       --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
     }