@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.10

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

@@ -1,59 +1,59 @@
-$pf-v5-c-tree-view--MaxDepth: 10;
+@use '../../sass-utilities' as *;
+
+$pf-v6-c-tree-view--MaxDepth: 10;
 
 // * Table tree view
-:where(:root),
-:where(.#{$table}) {
+@include pf-root($table) {
   --#{$table}__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$table}__tree-view-icon--MinWidth)); // based off of the expected width of the toggle button
   --#{$table}__tree-view-main--nested-indent--base: calc(var(--#{$table}__tree-view-main--indent--base) - var(--pf-t--global--spacer--md)); // nested spacing that removes the toggle button's left padding, so the icon aligns with text on the node above it
 
   // * Table tree view main button
-  --#{$table}__tree-view-main--c-button--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$table}__tree-view-main--c-button--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
-  // - Table tree view main
-  --#{$table}__tree-view-main--PaddingLeft: var(--#{$table}__tree-view-main--indent--base);
-  --#{$table}__tree-view-main--MarginLeft: calc(var(--#{$table}--cell--PaddingLeft) * -1);
+  // * Table tree view main
+  --#{$table}__tree-view-main--PaddingInlineStart: var(--#{$table}__tree-view-main--indent--base);
+  --#{$table}__tree-view-main--MarginInlineStart: calc(var(--#{$table}--cell--PaddingInlineStart) * -1);
 
-  // - Table tree view check
-  --#{$table}__tree-view-main--c-table__check--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$table}__tree-view-main--c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$table}__tree-view-main--c-table__check--MarginRight: var(--pf-t--global--spacer--sm);
+  // * Table tree view check
+  --#{$table}__tree-view-main--c-table__check--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$table}__tree-view-main--c-table__check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
-  // - Table tree view icon
+  // * Table tree view icon
   --#{$table}__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md);
-  --#{$table}__tree-view-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$table}__tree-view-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
-  // - Table tree view toggle
+  // * Table tree view toggle
   --#{$table}--m-tree-view__toggle--Position: absolute;
-  --#{$table}--m-tree-view__toggle--Left: var(--#{$table}__tree-view-main--PaddingLeft);
+  --#{$table}--m-tree-view__toggle--InsetInlineStart: var(--#{$table}__tree-view-main--PaddingInlineStart);
   --#{$table}--m-tree-view__toggle--TranslateX: -100%;
 
-  // - Table tree view toggle toggle icon
+  // * Table tree view toggle toggle icon
   --#{$table}--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-t--global--spacer--md);
 
-  // - Table tree view no inset tree view main
-  --#{$table}--m-no-inset__tree-view-main--PaddingLeft: 0;
-  --#{$table}--m-no-inset__tree-view-main--MarginLeft: 0;
+  // * Table tree view no inset tree view main
+  --#{$table}--m-no-inset__tree-view-main--PaddingInlineStart: 0;
+  --#{$table}--m-no-inset__tree-view-main--MarginInlineStart: 0;
 }
 
 // - Table tree view
 .#{$table}.pf-m-tree-view {
   > tbody > tr {
-    --#{$table}--m-tree-view__toggle--Left: var(--#{$table}__tree-view-main--PaddingLeft);
+    --#{$table}--m-tree-view__toggle--InsetInlineStart: var(--#{$table}__tree-view-main--PaddingInlineStart);
 
     &.pf-m-no-inset {
-      --#{$table}__tree-view-main--PaddingLeft: var(--#{$table}--m-no-inset__tree-view-main--PaddingLeft);
-      --#{$table}__tree-view-main--MarginLeft: var(--#{$table}--m-no-inset__tree-view-main--MarginLeft);
+      --#{$table}__tree-view-main--PaddingInlineStart: var(--#{$table}--m-no-inset__tree-view-main--PaddingInlineStart);
+      --#{$table}__tree-view-main--MarginInlineStart: var(--#{$table}--m-no-inset__tree-view-main--MarginInlineStart);
     }
   }
 
   &.pf-m-no-inset {
-    --#{$table}__tree-view-main--PaddingLeft: var(--#{$table}--m-no-inset__tree-view-main--PaddingLeft);
-    --#{$table}__tree-view-main--MarginLeft: var(--#{$table}--m-no-inset__tree-view-main--MarginLeft);
+    --#{$table}__tree-view-main--PaddingInlineStart: var(--#{$table}--m-no-inset__tree-view-main--PaddingInlineStart);
+    --#{$table}__tree-view-main--MarginInlineStart: var(--#{$table}--m-no-inset__tree-view-main--MarginInlineStart);
   }
 
-  @for $i from 2 through $pf-v5-c-tree-view--MaxDepth {
+  @for $i from 2 through $pf-v6-c-tree-view--MaxDepth {
     tr:where(.#{$table}__tr)[aria-level="#{$i}"] {
-      --#{$table}__tree-view-main--PaddingLeft: calc(var(--#{$table}__tree-view-main--nested-indent--base) * #{$i - 1} + var(--#{$table}__tree-view-main--indent--base));
+      --#{$table}__tree-view-main--PaddingInlineStart: calc(var(--#{$table}__tree-view-main--nested-indent--base) * #{$i - 1} + var(--#{$table}__tree-view-main--indent--base));
     }
   }
 }
@@ -64,20 +64,20 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   display: flex;
   align-items: baseline;
   min-width: 0;
-  padding-inline-start: var(--#{$table}__tree-view-main--PaddingLeft);
-  margin-inline-start: var(--#{$table}__tree-view-main--MarginLeft);
+  padding-inline-start: var(--#{$table}__tree-view-main--PaddingInlineStart);
+  margin-inline-start: var(--#{$table}__tree-view-main--MarginInlineStart);
   text-align: start;
   cursor: pointer;
 
   > .#{$table}__toggle {
-    @include pf-v5-bidirectional-style (
+    @include pf-v6-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))})
+      $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$table}--m-tree-view__toggle--TranslateX))})
     );
 
     position: var(--#{$table}--m-tree-view__toggle--Position);
-    inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
+    inset-inline-start: var(--#{$table}--m-tree-view__toggle--InsetInlineStart);
 
     .#{$table}__toggle-icon {
       min-width: var(--#{$table}--m-tree-view__toggle__toggle-icon--MinWidth);
@@ -85,22 +85,21 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 
     .#{$button} {
       margin-block-start: -50%;
-      margin-inline-end: var(--#{$table}__tree-view-main--c-button--MarginRight);
+      margin-inline-end: var(--#{$table}__tree-view-main--c-button--MarginInlineEnd);
     }
   }
 
 
   > .#{$table}__check {
-    margin-inline-end: var(--#{$table}__tree-view-main--c-table__check--MarginRight);
+    margin-inline-end: var(--#{$table}__tree-view-main--c-table__check--MarginInlineEnd);
   }
 
   > .#{$table}__check label {
-    padding-inline-start: var(--#{$table}__tree-view-main--c-table__check--PaddingLeft);
-    padding-inline-end: var(--#{$table}__tree-view-main--c-table__check--PaddingRight);
+    padding-inline-end: var(--#{$table}__tree-view-main--c-table__check--PaddingInlineEnd);
     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);
+    margin-inline-end: calc(var(--#{$table}__tree-view-main--c-table__check--MarginInlineEnd) * -1);
   }
 }
 
@@ -112,7 +111,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 // - Table tree view icon
 .#{$table}__tree-view-icon {
   min-width: var(--#{$table}__tree-view-icon--MinWidth);
-  margin-inline-end: var(--#{$table}__tree-view-icon--MarginRight);
+  margin-inline-end: var(--#{$table}__tree-view-icon--MarginInlineEnd);
 }
 
 // - Table tree view details toggle
@@ -127,25 +126,25 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   }
 
   .pf-m-tree-view-grid-md.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--md) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--md) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-lg.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--lg) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--lg) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-xl.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--xl) {
       @content;
     }
   }
 
   .pf-m-tree-view-grid-2xl.#{$table} {
-    @media screen and (max-width: $pf-v5-global--breakpoint--2xl) {
+    @media screen and (max-width: $pf-v6-global--breakpoint--2xl) {
       @content;
     }
   }
@@ -155,44 +154,44 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   --#{$table}--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
 
   // tbody cells
-  --#{$table}--m-tree-view-grid__tbody--cell--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$table}--m-tree-view-grid__tbody--cell--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft: var(--#{$table}__tree-view-main--indent--base);
+  --#{$table}--m-tree-view-grid__tbody--cell--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$table}--m-tree-view-grid__tbody--cell--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$table}--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--#{$table}__tree-view-main--indent--base);
   --#{$table}--m-tree-view-grid__tbody--cell--GridColumnGap: var(--pf-t--global--spacer--sm);
 
   // action
-  --#{$table}--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$table}--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$table}--m-tree-view-grid--c-table__action--PaddingLeft: 0;
-  --#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-t--global--spacer--xl);
+  --#{$table}--m-tree-view-grid--c-table__action--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$table}--m-tree-view-grid--c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$table}--m-tree-view-grid--c-table__action--PaddingInlineStart: 0;
+  --#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart: var(--pf-t--global--spacer--xl);
 
   // details
-  --#{$table}--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --#{$table}--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
 
   // node cells
-  --#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-t--global--spacer--xl);
+  --#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xl);
   --#{$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-t--global--spacer--xs);
-  --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
 
   // main
-  --#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
+  --#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd: 0;
   --#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
 
   // text
-  --#{$table}__tree-view-text--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$table}__tree-view-text--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
 
   // tbody cells
-  --#{$table}__tbody--cell--PaddingTop: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingTop);
-  --#{$table}__tbody--cell--PaddingBottom: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingBottom);
+  --#{$table}__tbody--cell--PaddingBlockStart: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingBlockStart);
+  --#{$table}__tbody--cell--PaddingBlockEnd: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingBlockEnd);
 
   // toggle
-  --#{$table}__tree-view-details-toggle--MarginTop: calc(#{pf-size-prem(6px)} * -1);
-  --#{$table}__tree-view-details-toggle--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
+  --#{$table}__tree-view-details-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --#{$table}__tree-view-details-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
 
   // toggle
-  --#{$table}--m-tree-view-grid--c-dropdown--MarginTop: calc(#{pf-size-prem(6px)} * -1);
-  --#{$table}--m-tree-view-grid--c-dropdown--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
+  --#{$table}--m-tree-view-grid__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --#{$table}--m-tree-view-grid__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
 
   tbody:where(.#{$table}__tbody) tr:where(.#{$table}__tr) {
     position: relative;
@@ -203,7 +202,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
       position: absolute;
       inset-block-start: 0;
       inset-block-end: 0;
-      inset-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
+      inset-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingInlineStart);
       inset-inline-end: 0;
       content: '';
       border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
@@ -218,23 +217,23 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   // target node rows
   tr:where(.#{$table}__tr)[aria-expanded] {
     .#{$table}__tree-view-title-cell {
-      --#{$table}--cell--PaddingTop: var(--#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
+      --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingBlockStart);
     }
 
     .#{$table}__tree-view-title-cell ~ .#{$table}__action {
-      --#{$table}--cell--PaddingTop: var(--#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
+      --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingBlockStart);
     }
   }
 
   td:where(.#{$table}__td):not(.#{$table}__tree-view-title-cell) {
-    --#{$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);
+    --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart);
+    --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd);
 
-    padding-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
+    padding-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingInlineStart);
   }
 
   .#{$table}__tree-view-text {
-    padding-inline-end: var(--#{$table}__tree-view-text--PaddingRight);
+    padding-inline-end: var(--#{$table}__tree-view-text--PaddingInlineEnd);
   }
 
   thead:where(.#{$table}__thead) th:where(.#{$table}__th) {
@@ -258,24 +257,28 @@ $pf-v5-c-tree-view--MaxDepth: 10;
     }
 
     &::before {
+      position: revert;
       font-weight: var(--pf-t--global--font--weight--body--bold);
       text-align: start;
       content: attr(data-label);
     }
   }
 
+  .#{$table}__tr > :where(th, td).pf-m-border-right::before {
+    border-inline-end: 0;
+  }
+
   // - Table tree view tr tree view details expanded
   tr:where(.#{$table}__tr).pf-m-tree-view-details-expanded {
-    padding-block-end: 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--PaddingBlockEnd);
 
     td:where(.#{$table}__td)[data-label] {
       display: grid;
     }
   }
 
-  // - Table tree view title header cell
-  .#{$table}__tree-view-title-header-cell {
-    display: block;
+  .#{$table}__thead {
+    display: none;
   }
 
   // - Table tree view details toggle - Table tree view action
@@ -287,35 +290,32 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   // - Table tree view action
   .#{$table}__action {
     --#{$table}--cell--Width: auto;
-    --#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingLeft);
-    --#{$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);
+    --#{$table}--m-tree-view-grid__tbody--cell--PaddingInlineStart: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingInlineStart);
+    --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockStart: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingBlockStart);
+    --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBlockEnd: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingBlockEnd);
 
     grid-row: 1;
     grid-column: 2;
-
-    > .#{$dropdown} {
-      margin-block-start: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginTop);
-      margin-block-end: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginBottom);
-    }
+    margin-block-start: var(--#{$table}--m-tree-view-grid__action--MarginBlockStart);
+    margin-block-end: var(--#{$table}--m-tree-view-grid__action--MarginBlockEnd);
   }
 
   // - Table tree view table check
   .#{$table}__tree-view-main > .#{$table}__check {
     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);
+    margin-inline-end: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--MarginInlineEnd);
   }
 
   // - Table tree view details toggle
   .#{$table}__tree-view-details-toggle {
-    margin-block-start: var(--#{$table}__tree-view-details-toggle--MarginTop);
-    margin-block-end: var(--#{$table}__tree-view-details-toggle--MarginBottom);
+    margin-block-start: var(--#{$table}__tree-view-details-toggle--MarginBlockStart);
+    margin-block-end: var(--#{$table}__tree-view-details-toggle--MarginBlockEnd);
   }
 
-  @for $i from 2 through $pf-v5-c-tree-view--MaxDepth {
+  @for $i from 2 through $pf-v6-c-tree-view--MaxDepth {
     tr:where(.#{$table}__tr)[aria-level="#{$i}"] {
-      --#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft: calc(var(--#{$table}__tree-view-main--nested-indent--base) * #{$i - 1} + var(--#{$table}__tree-view-main--indent--base)); // indent, plus indent level, plus
+      --#{$table}--m-tree-view-grid__tbody--cell--PaddingInlineStart: calc(var(--#{$table}__tree-view-main--nested-indent--base) * #{$i - 1} + var(--#{$table}__tree-view-main--indent--base)); // indent, plus indent level, plus
     }
   }
 }