@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

package/components/Table/table.scss

@@ -16,7 +16,7 @@
   --#{$table}--border-width--base: var(--pf-t--global--border--width--divider--default);
 
   // Caption
-  --#{$table}__caption--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}__caption--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}__caption--Color: var(--pf-t--global--text--color--subtle);
   --#{$table}__caption--PaddingTop: var(--#{$pf-global}--spacer--md);
   --#{$table}__caption--PaddingRight: var(--#{$pf-global}--spacer--lg);
@@ -31,7 +31,7 @@
   }
 
   // Thead
-  --#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Tbody cell
@@ -43,7 +43,7 @@
 
   // Th / td shared variables
   --#{$table}--cell--Padding--base: var(--#{$pf-global}--spacer--md);
-  --#{$table}--cell--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}--cell--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}--cell--FontWeight: var(--pf-t--global--font--weight--body);
   --#{$table}--cell--Color: var(--pf-t--global--text--color--regular);
   --#{$table}--cell--PaddingTop: var(--#{$table}--cell--Padding--base);
@@ -106,13 +106,14 @@
   --#{$table}--m-compact__toggle--PaddingBottom: 0;
 
   // Check
-  --#{$table}__check--input--MarginTop: #{pf-size-prem(4px)};
-  --#{$table}__check--input--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}__check--input--MarginTop: #{pf-size-prem(3px)};
+  --#{$table}__thead__check--input--TranslateY: var(--#{$table}__check--input--MarginTop);
+  --#{$table}__check--input--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Favorite
   --#{$table}--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
   --#{$table}__favorite--c-button--Color: var(--pf-t--global--text--color--subtle);
-  --#{$table}__favorite--c-button--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}__favorite--c-button--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
   --#{$table}__favorite--c-button--MarginRight: calc(var(--#{$pf-global}--spacer--md) * -1);
   --#{$table}__favorite--c-button--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
@@ -235,7 +236,7 @@
   --#{$table}--m-compact--cell--first-last-child--PaddingRight: var(--#{$pf-global}--spacer--md);
   --#{$table}--m-compact--cell--first-last-child--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
   --#{$table}--m-compact--cell--first-last-child--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$table}--m-compact--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}--m-compact--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}--m-compact__expandable-row-content--PaddingTop: var(--#{$pf-global}--spacer--lg);
   --#{$table}--m-compact__expandable-row-content--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$table}--m-compact__expandable-row-content--PaddingBottom: var(--#{$pf-global}--spacer--lg);
@@ -252,7 +253,6 @@
   --#{$table}__tr--m-clickable--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
   --#{$table}__tr--m-clickable--BackgroundColor: transparent;
   --#{$table}__tr--m-clickable--BoxShadow: none;
-  --#{$table}__tr--m-clickable--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$table}__tr--m-clickable--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
 
   // TODO Shadow tokens START HERE AGAIN
@@ -335,7 +335,7 @@
     position: relative;
 
     thead:where(.#{$table}__thead) tr:where(.#{$table}__tr) {
-      border-bottom: 0;
+      border-block-end: 0;
 
       > * {
         z-index: var(--#{$table}--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
@@ -346,17 +346,17 @@
     > thead:where(.#{$table}__thead):not(.pf-m-nested-column-header) {
       > tr:where(.#{$table}__tr) > * {
         position: sticky;
-        top: 0;
+       inset-block-start: 0;
         background: var(--#{$table}--BackgroundColor);
 
         // stylelint-disable-next-line
         &::after {
           position: absolute;
-          right: 0;
-          bottom: 0;
-          left: 0;
+          inset-block-end: 0;
+          inset-inline-start: 0;
+          inset-inline-end: 0;
           content: "";
-          border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+          border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
         }
       }
     }
@@ -364,7 +364,7 @@
     // nested column header
     > .pf-m-nested-column-header {
       position: sticky;
-      top: 0;
+     inset-block-start: 0;
       z-index: var(--#{$pf-global}--ZIndex--xs);
       background: var(--#{$table}--BackgroundColor);
 
@@ -388,7 +388,7 @@
 
   &:not(.pf-m-sticky-header) > .pf-m-nested-column-header {
     tr:where(.#{$table}__tr):not(:last-child) {
-      border-bottom: 0; // hard reset tr borders in nested headers
+      border-block-end: 0; // hard reset tr borders in nested headers
 
       // stylelint-disable max-nesting-depth
       th:where(.#{$table}__th),
@@ -417,7 +417,7 @@
   // Standard table row (non-expandable)
   // exclude expandable rows
   tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
-    border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+    border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
 
     // stylelint-disable-next-line
     &.pf-m-ghost-row {
@@ -435,7 +435,10 @@
     width: var(--#{$table}--cell--Width);
     min-width: var(--#{$table}--cell--MinWidth);
     max-width: var(--#{$table}--cell--MaxWidth);
-    padding: var(--#{$table}--cell--PaddingTop) var(--#{$table}--cell--PaddingRight) var(--#{$table}--cell--PaddingBottom) var(--#{$table}--cell--PaddingLeft);
+    padding-block-start: var(--#{$table}--cell--PaddingTop);
+    padding-block-end: var(--#{$table}--cell--PaddingBottom);
+    padding-inline-start: var(--#{$table}--cell--PaddingLeft);
+    padding-inline-end: var(--#{$table}--cell--PaddingRight);
 
     // default settings
     overflow: var(--#{$table}--cell--Overflow);
@@ -480,31 +483,31 @@
     &.pf-m-border-right::before,
     &.pf-m-border-left::before {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       pointer-events: none;
       content: "";
     }
 
     &.pf-m-border-right::before {
-      border-right: var(--#{$table}--cell--m-border-right--before--BorderRightWidth) solid var(--#{$table}--cell--m-border-right--before--BorderRightColor);
+      border-inline-end: var(--#{$table}--cell--m-border-right--before--BorderRightWidth) solid var(--#{$table}--cell--m-border-right--before--BorderRightColor);
     }
 
     &.pf-m-border-left::before {
-      border-left: var(--#{$table}--cell--m-border-left--before--BorderLeftWidth) solid var(--#{$table}--cell--m-border-left--before--BorderLeftColor);
+      border-inline-start: var(--#{$table}--cell--m-border-left--before--BorderLeftWidth) solid var(--#{$table}--cell--m-border-left--before--BorderLeftColor);
     }
   }
 
   // Table caption
   caption:where(.#{$table}__caption) {
-    padding-top: var(--#{$table}__caption--PaddingTop);
-    padding-bottom: var(--#{$table}__caption--PaddingBottom);
-    padding-left: var(--#{$table}__caption--PaddingLeft);
+    padding-block-start: var(--#{$table}__caption--PaddingTop);
+    padding-block-end: var(--#{$table}__caption--PaddingBottom);
+    padding-inline-start: var(--#{$table}__caption--PaddingLeft);
     font-size: var(--#{$table}__caption--FontSize);
     color: var(--#{$table}__caption--Color);
-    text-align: left;
+    text-align: start;
     background-color: var(--#{$table}--BackgroundColor);
   }
 
@@ -567,26 +570,26 @@
       position: absolute;
 
       // offset top to extend above tr border
-      top: var(--#{$table}__expandable-row--after--Top);
-      bottom: var(--#{$table}__expandable-row--after--Bottom);
-      left: 0;
+     inset-block-start: var(--#{$table}__expandable-row--after--Top);
+     inset-block-end: var(--#{$table}__expandable-row--after--Bottom);
+     inset-inline-start: 0;
       content: "";
 
       // add border left
       background-color: transparent;
-      border-left: var(--#{$table}__expandable-row--after--BorderLeftWidth) solid var(--#{$table}__expandable-row--after--BorderColor);
+      border-inline-start: var(--#{$table}__expandable-row--after--BorderLeftWidth) solid var(--#{$table}__expandable-row--after--BorderColor);
     }
 
     // Check table cell
     .#{$table}__check {
       input:where(.#{$check}__input) {
-        margin-top: var(--#{$table}__check--input--MarginTop);
+        margin-block-start: var(--#{$table}__check--input--MarginTop);
         vertical-align: top;
       }
     }
 
     &.pf-m-expanded > :first-child:not(.#{$table}__control-row) {
-      border-bottom-width: 0;
+      border-block-end-width: 0;
     }
   }
   // stylelint-enable
@@ -661,10 +664,10 @@
   // stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
   &.pf-m-no-border-rows > tbody:where(.#{$table}__tbody) {
     > tr:where(.#{$table}__tr) {
-      border-bottom: 0;
+      border-block-end: 0;
 
       > :first-child::after {
-        border-left: 0;
+        border-inline-start: 0;
       }
     }
 
@@ -673,32 +676,23 @@
     }
 
     &.pf-m-expanded > .#{$table}__control-row {
-      border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+      border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
     }
 
     .#{$table}__control-row > .#{$table}__compound-expansion-toggle:first-child > ::before {
-      border-left-width: 0;
+      border-inline-start-width: 0;
     }
   }
 
   tr.pf-m-clickable:last-child {
-    border-bottom-color: transparent;
+    border-block-end-color: transparent;
   }
 
   // tr clickable
   tr:where(.#{$table}__tr) {
-    position: relative;
-
-    &::before {
-      position: absolute;
-      inset:0;
-      content: "";
-      background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
-      border-radius: var(--#{$table}__tr--m-clickable--BorderRadius);
-    }
-
     &.pf-m-clickable {
       cursor: pointer;
+      background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
       outline-offset: var(--#{$table}__tr--m-clickable--OutlineOffset);
       box-shadow: var(--#{$table}__tr--m-clickable--BoxShadow);
 
@@ -836,11 +830,14 @@
 .#{$table}__button {
   position: static;
   width: 100%;
-  padding: var(--#{$table}--cell--PaddingTop) var(--#{$table}--cell--PaddingRight) var(--#{$table}--cell--PaddingBottom) var(--#{$table}--cell--PaddingLeft);
+  padding-block-start: var(--#{$table}--cell--PaddingTop);
+  padding-block-end: var(--#{$table}--cell--PaddingBottom);
+  padding-inline-start: var(--#{$table}--cell--PaddingLeft);
+  padding-inline-end: var(--#{$table}--cell--PaddingRight);
   font-size: inherit;
   font-weight: inherit;
   color: var(--#{$table}__button--Color);
-  text-align: left;
+  text-align: start;
   white-space: inherit;
   user-select: text;
   background-color: var(--#{$table}__button--BackgroundColor);
@@ -849,10 +846,10 @@
   // Define clickable area with invisible ::before pseudo
   &::before {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     cursor: pointer;
     content: "";
   }
@@ -951,8 +948,8 @@
   vertical-align: top;
 
   .#{$button} {
-    margin-top: var(--#{$table}__toggle--c-button--MarginTop);
-    margin-bottom: var(--#{$table}__toggle--c-button--MarginBottom);
+    margin-block-start: var(--#{$table}__toggle--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__toggle--c-button--MarginBottom);
 
     &.pf-m-expanded {
       .#{$table}__toggle-icon {
@@ -962,6 +959,8 @@
   }
 
   .#{$table}__toggle-icon {
+    @include pf-v5-mirror-inline-on-rtl;
+
     transition: var(--#{$table}__toggle--c-button__toggle-icon--Transition);
     transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
   }
@@ -981,9 +980,17 @@
   }
 
   label {
-    display: block;
+    display: inline-flex;
     padding: inherit;
-    margin: calc(var(--#{$table}--cell--PaddingTop) * -1) calc(var(--#{$table}--cell--PaddingRight) * -1) calc(var(--#{$table}--cell--PaddingBottom) * -1) calc(var(--#{$table}--cell--PaddingLeft) * -1);
+    margin-block-start: calc(var(--#{$table}--cell--PaddingTop) * -1);
+    margin-block-end: calc(var(--#{$table}--cell--PaddingBottom) * -1);
+    margin-inline-start: calc(var(--#{$table}--cell--PaddingLeft) * -1);
+    margin-inline-end: calc(var(--#{$table}--cell--PaddingRight) * -1);
+
+  }
+
+  @at-root .#{$table}__thead .#{$check}.pf-m-standalone {
+    --#{$check}__input--TranslateY: var(--#{$table}__thead__check--input--TranslateY);
   }
 }
 
@@ -993,7 +1000,10 @@
     --#{$button}--m-plain--Color: var(--#{$table}__favorite--c-button--Color);
     --#{$button}--FontSize: var(--#{$table}__favorite--c-button--FontSize);
 
-    margin: var(--#{$table}__favorite--c-button--MarginTop) var(--#{$table}__favorite--c-button--MarginRight) var(--#{$table}__favorite--c-button--MarginBottom) var(--#{$table}__favorite--c-button--MarginLeft);
+    margin-block-start: var(--#{$table}__favorite--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__favorite--c-button--MarginBottom);
+    margin-inline-start: var(--#{$table}__favorite--c-button--MarginLeft);
+    margin-inline-end: var(--#{$table}__favorite--c-button--MarginRight);
 
     @at-root .pf-m-favorited#{&} {
       --#{$button}--m-plain--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
@@ -1004,7 +1014,10 @@
 // Draggable
 .#{$table}__draggable {
   .#{$button} {
-    margin: var(--#{$table}__draggable--c-button--MarginTop) var(--#{$table}__draggable--c-button--MarginRight) var(--#{$table}__draggable--c-button--MarginBottom) var(--#{$table}__draggable--c-button--MarginLeft);
+    margin-block-start: var(--#{$table}__draggable--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__draggable--c-button--MarginBottom);
+    margin-inline-start: var(--#{$table}__draggable--c-button--MarginLeft);
+    margin-inline-end: var(--#{$table}__draggable--c-button--MarginRight);
     cursor: grab;
 
     &:active {
@@ -1021,13 +1034,13 @@
   --#{$table}--cell--PaddingBottom: 0;
   --#{$table}--cell--PaddingLeft: var(--#{$table}__action--PaddingLeft);
 
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
   vertical-align: middle;
 }
 
 .#{$table}__action {
-  text-align: right;
+  text-align: end;
 }
 
 // Inline edit
@@ -1035,7 +1048,7 @@
   --#{$table}--cell--PaddingLeft: 0;
   --#{$table}--cell--PaddingRight: 0;
 
-  text-align: right;
+  text-align: end;
 }
 
 // Compound expansion toggle
@@ -1068,28 +1081,28 @@
   .#{$table}__button::before,
   .#{$table}__button::after {
     position: absolute;
-    right: 0;
+   inset-inline-end: 0;
     content: "";
     border-style: solid;
     border-width: 0;
   }
 
   .#{$table}__button::before {
-    top: 0;
-    bottom: var(--#{$table}__compound-expansion-toggle__button--before--Bottom);
-    left: var(--#{$table}__compound-expansion-toggle__button--before--Left);
+   inset-block-start: 0;
+   inset-block-end: var(--#{$table}__compound-expansion-toggle__button--before--Bottom);
+   inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--before--Left);
     border-color: var(--#{$table}__compound-expansion-toggle__button--before--BorderColor);
-    border-right-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderRightWidth);
-    border-left-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth);
+    border-inline-start-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth);
+    border-inline-end-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderRightWidth);
   }
 
   .#{$table}__button::after {
     // overlap previous row's border
-    top: var(--#{$table}__compound-expansion-toggle__button--after--Top);
-    left: var(--#{$table}__compound-expansion-toggle__button--after--Left);
+   inset-block-start: var(--#{$table}__compound-expansion-toggle__button--after--Top);
+   inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--after--Left);
     pointer-events: none;
     border-color: var(--#{$table}__compound-expansion-toggle__button--after--BorderColor);
-    border-top-width: var(--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth);
+    border-block-start-width: var(--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth);
   }
 
   &:hover,
@@ -1107,7 +1120,7 @@
 
   &.pf-m-expanded {
     .#{$table}__button::before {
-      border-bottom: var(--#{$table}--BackgroundColor) solid var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
+      border-block-end: var(--#{$table}--BackgroundColor) solid var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
     }
 
     &:first-child {
@@ -1128,15 +1141,15 @@
 }
 
 .#{$table}__column-help-action {
-  margin-left: var(--#{$table}__column-help--MarginLeft);
+  margin-inline-start: var(--#{$table}__column-help--MarginLeft);
   transform: translateY(var(--#{$table}__column-help--TranslateY));
 
   .#{$button} {
     --#{$button}--PaddingRight: var(--#{$table}__column-help--c-button--PaddingRight);
     --#{$button}--PaddingLeft: var(--#{$table}__column-help--c-button--PaddingLeft);
 
-    margin-top: var(--#{$table}__column-help--c-button--MarginTop);
-    margin-bottom: var(--#{$table}__column-help--c-button--MarginBottom);
+    margin-block-start: var(--#{$table}__column-help--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__column-help--c-button--MarginBottom);
     font-size: inherit;
     line-height: 1;
   }
@@ -1153,9 +1166,9 @@
 
     display: flex;
     width: auto;
-    margin-top: var(--#{$table}__sort__button--MarginTop);
-    margin-bottom: var(--#{$table}__sort__button--MarginBottom);
-    margin-left: var(--#{$table}__sort__button--MarginLeft);
+    margin-block-start: var(--#{$table}__sort__button--MarginTop);
+    margin-block-end: var(--#{$table}__sort__button--MarginBottom);
+    margin-inline-start: var(--#{$table}__sort__button--MarginLeft);
 
     &:hover {
       --#{$table}__sort-indicator--Color: var(--#{$table}__sort__button--hover__sort-indicator--Color);
@@ -1201,7 +1214,7 @@
 // Sort indicator
 .#{$table}__sort-indicator {
   grid-column: 2;
-  margin-left: var(--#{$table}__sort-indicator--MarginLeft);
+  margin-inline-start: var(--#{$table}__sort-indicator--MarginLeft);
   color: var(--#{$table}__sort-indicator--Color);
   pointer-events: none;
 }
@@ -1213,7 +1226,7 @@
   --#{$table}--cell--PaddingBottom: 0;
 
   position: relative;
-  border-bottom: 0 solid transparent;
+  border-block-end: 0 solid transparent;
   box-shadow: 0 0 0 0 transparent;
 
   &,
@@ -1225,7 +1238,10 @@
   td:where(.#{$table}__td),
   th:where(.#{$table}__th) {
     &.pf-m-no-padding {
-      padding: 0 0 0 var(--#{$table}__expandable-row--after--border-width--base); // set padding-left to adjust for left border.
+      padding-block-start: 0;
+      padding-inline-end: 0;
+      padding-block-end: 0;
+      padding-inline-start: var(--#{$table}__expandable-row--after--border-width--base); // set padding-left to adjust for left border.
 
       .#{$table}__expandable-row-content {
         padding: 0;
@@ -1235,14 +1251,14 @@
   // stylelint-enable
 
   .#{$table}__expandable-row-content {
-    padding-top: var(--#{$table}__expandable-row-content--PaddingTop);
-    padding-bottom: var(--#{$table}__expandable-row-content--PaddingBottom);
+    padding-block-start: var(--#{$table}__expandable-row-content--PaddingTop);
+    padding-block-end: var(--#{$table}__expandable-row-content--PaddingBottom);
   }
 
   // Modifier - Expanded tr
   &.pf-m-expanded {
-    border-bottom-color: var(--#{$table}__expandable-row--m-expanded--BorderBottomColor);
-    border-bottom-width: var(--#{$table}--border-width--base);
+    border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBottomColor);
+    border-block-end-width: var(--#{$table}--border-width--base);
     box-shadow: var(--#{$table}__expandable-row--m-expanded--BoxShadow);
   }
 
@@ -1349,7 +1365,7 @@
   align-items: center;
 
   > :not(:last-child) {
-    margin-right: var(--#{$table}__icon-inline--MarginRight);
+    margin-inline-end: var(--#{$table}__icon-inline--MarginRight);
   }
 }