@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.31

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

@@ -60,15 +60,20 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   display: flex;
   align-items: baseline;
   min-width: 0;
-  padding-left: var(--#{$table}__tree-view-main--PaddingLeft);
-  margin-left: var(--#{$table}__tree-view-main--MarginLeft);
-  text-align: left;
+  padding-inline-start: var(--#{$table}__tree-view-main--PaddingLeft);
+  margin-inline-start: var(--#{$table}__tree-view-main--MarginLeft);
+  text-align: start;
   cursor: pointer;
 
   > .#{$table}__toggle {
+    @include pf-v5-bidirectional-style (
+      $prop: 'transform',
+      $ltr-val: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX)),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$table}--m-tree-view__toggle--TranslateX))})
+    );
+
     position: var(--#{$table}--m-tree-view__toggle--Position);
-    left: var(--#{$table}--m-tree-view__toggle--Left);
-    transform: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX));
+    inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
 
     .#{$table}__toggle-icon {
       min-width: var(--#{$table}--m-tree-view__toggle__toggle-icon--MinWidth);
@@ -76,13 +81,16 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   }
 
   > .#{$table}__check {
-    margin-right: var(--#{$table}__tree-view-main--c-table__check--MarginRight);
+    margin-inline-end: var(--#{$table}__tree-view-main--c-table__check--MarginRight);
   }
 
   > .#{$table}__check label {
-    padding-right: var(--#{$table}__tree-view-main--c-table__check--PaddingRight);
-    padding-left: var(--#{$table}__tree-view-main--c-table__check--PaddingLeft);
-    margin: 0 calc(var(--#{$table}__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
+    padding-inline-start: var(--#{$table}__tree-view-main--c-table__check--PaddingLeft);
+    padding-inline-end: var(--#{$table}__tree-view-main--c-table__check--PaddingRight);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: calc(var(--#{$table}__tree-view-main--c-table__check--MarginRight) * -1);
   }
 }
 
@@ -92,14 +100,13 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 
 .#{$table}__tree-view-icon {
   min-width: var(--#{$table}__tree-view-icon--MinWidth);
-  margin-right: var(--#{$table}__tree-view-icon--MarginRight);
+  margin-inline-end: var(--#{$table}__tree-view-icon--MarginRight);
 }
 
 .#{$table}__tree-view-details-toggle {
   display: none;
 }
 
-// stylelint-disable
 @mixin pf-tree-view-grid {
   .pf-m-tree-view-grid.#{$table} {
     @content;
@@ -150,7 +157,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 
   // node cells
   --#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--#{$pf-global}--spacer--xl);
-  --#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
+  --#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr)); // use minmax func to contain possible text modifier width
   --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--#{$pf-global}--spacer--xs);
   --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--#{$pf-global}--spacer--xs);
 
@@ -175,17 +182,17 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 
   tbody:where(.#{$table}__tbody) tr:where(.#{$table}__tr) {
     position: relative;
-    outline-offset: var(--#{$table}--m-tree-view-grid--tr--OutlineOffset);
     border: none;
+    outline-offset: var(--#{$table}--m-tree-view-grid--tr--OutlineOffset);
 
     &::before {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
-      border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
+      inset-inline-end: 0;
       content: '';
+      border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
     }
   }
 
@@ -209,11 +216,11 @@ $pf-v5-c-tree-view--MaxDepth: 10;
     --#{$table}--cell--PaddingTop: var(--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
     --#{$table}--cell--PaddingBottom: var(--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
 
-    padding-left: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
+    padding-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
   }
 
   .#{$table}__tree-view-text {
-    padding-right: var(--#{$table}__tree-view-text--PaddingRight);
+    padding-inline-end: var(--#{$table}__tree-view-text--PaddingRight);
   }
 
   thead:where(.#{$table}__thead) th:where(.#{$table}__th) {
@@ -226,11 +233,9 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 
   // Standard td, in standard row (non-expandable)
   td:where(.#{$table}__td)[data-label] {
+    grid-template-columns: var(--#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns);
     grid-column: 1;
     grid-column-gap: var(--#{$table}--m-tree-view-grid__tbody--cell--GridColumnGap);
-
-    // use minmax func to contain possible text modifier width
-    grid-template-columns: var(--#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns);
     align-items: start;
 
     // set contents of td to start at column two of td grid
@@ -239,14 +244,14 @@ $pf-v5-c-tree-view--MaxDepth: 10;
     }
 
     &::before {
-      font-weight: bold;
-      text-align: left;
+      font-weight: var(--#{$pf-global}--FontWeight--bold);;
+      text-align: start;
       content: attr(data-label);
     }
   }
 
   tr:where(.#{$table}__tr).pf-m-tree-view-details-expanded {
-    padding-bottom: var(--#{$table}--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
+    padding-block-end: var(--#{$table}--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
 
     td:where(.#{$table}__td)[data-label] {
       display: grid;
@@ -268,24 +273,24 @@ $pf-v5-c-tree-view--MaxDepth: 10;
     --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingTop);
     --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingBottom);
 
-    grid-column: 2;
     grid-row: 1;
+    grid-column: 2;
 
     > .#{$dropdown} {
-      margin-top: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginTop);
-      margin-bottom: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginBottom);
+      margin-block-start: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginTop);
+      margin-block-end: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginBottom);
     }
   }
 
   .#{$table}__tree-view-main > .#{$table}__check {
-    margin-right: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
-    margin-left: auto;
     order: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--Order);
+    margin-inline-start: auto;
+    margin-inline-end: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
   }
 
   .#{$table}__tree-view-details-toggle {
-    margin-top: var(--#{$table}__tree-view-details-toggle--MarginTop);
-    margin-bottom: var(--#{$table}__tree-view-details-toggle--MarginBottom);
+    margin-block-start: var(--#{$table}__tree-view-details-toggle--MarginTop);
+    margin-block-end: var(--#{$table}__tree-view-details-toggle--MarginBottom);
   }
 
   @for $i from 2 through $pf-v5-c-tree-view--MaxDepth {