@patternfly/patternfly 6.0.0-alpha.100 → 6.0.0-alpha.102

package/components/Nav/nav.css

@@ -81,7 +81,6 @@
 }
 
 .pf-v6-c-nav {
-  --pf-v6-c-menu--MinWidth: 100%;
   position: relative;
   row-gap: var(--pf-v6-c-nav--RowGap);
   column-gap: var(--pf-v6-c-nav--ColumnGap);
@@ -104,6 +103,9 @@
 .pf-v6-c-nav.pf-m-fill {
   flex-grow: 1;
 }
+.pf-v6-c-nav .pf-v6-c-menu {
+  --pf-v6-c-menu--MinWidth: 100%;
+}
 
 [class^=pf-v6-c-nav][hidden] {
   display: none;

package/components/Nav/nav.scss

@@ -104,8 +104,6 @@
 
 // - Nav root
 .#{$nav} {
-  --#{$menu}--MinWidth: 100%;
-
   position: relative;
   row-gap: var(--#{$nav}--RowGap);
   column-gap: var(--#{$nav}--ColumnGap);
@@ -130,6 +128,10 @@
   &.pf-m-fill {
     flex-grow: 1;
   }
+
+  .#{$menu} {
+    --#{$menu}--MinWidth: 100%;
+  }
 }
 
 [class^="#{$nav}"][hidden] {

package/components/Table/table-scrollable.css

@@ -1,6 +1,6 @@
 :where(:root),
 :where(.pf-v6-c-table) {
-  --pf-v6-c-table__sticky-cell--MinWidth--base: 12.5rem;
+  --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
   --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
   --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v6-c-table__sticky-cell--Right: auto;
@@ -14,36 +14,33 @@
   --pf-v6-c-table__sticky-cell--m-left--Left: 0;
   --pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v6-c-table__sticky-cell--ZIndex) + 1);
 }
-:where(:root) .pf-v6-c-table__sticky-cell,
-:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell {
-  --pf-v6-c-table--cell--Overflow: visible;
-  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
+
+.pf-v6-c-table .pf-v6-c-table__sticky-cell {
   position: sticky;
   inset-inline-start: var(--pf-v6-c-table__sticky-cell--Left);
   inset-inline-end: var(--pf-v6-c-table__sticky-cell--Right);
   z-index: var(--pf-v6-c-table__sticky-cell--ZIndex);
   min-width: var(--pf-v6-c-table__sticky-cell--MinWidth);
+}
+
+.pf-v6-c-table__sticky-cell {
+  --pf-v6-c-table--cell--Overflow: visible;
+  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-v6-c-table--m-sticky-header__sticky-cell--ZIndex);
   background-color: var(--pf-v6-c-table__sticky-cell--BackgroundColor);
   background-clip: padding-box;
 }
-:where(:root) .pf-v6-c-table__sticky-cell.pf-m-border-right::before,
-:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-border-right::before {
+.pf-v6-c-table__sticky-cell.pf-m-border-right::before {
   --pf-v6-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
   --pf-v6-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-v6-c-table__sticky-cell--m-border-right--before--BorderRightColor);
 }
-:where(:root) .pf-v6-c-table__sticky-cell.pf-m-border-left::before,
-:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-border-left::before {
+.pf-v6-c-table__sticky-cell.pf-m-border-left::before {
   --pf-v6-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
   --pf-v6-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v6-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
 }
-:where(:root) .pf-v6-c-table__sticky-cell.pf-m-right, :where(:root) .pf-v6-c-table__sticky-cell.pf-m-inline-end,
-:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-right,
-:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-inline-end {
+.pf-v6-c-table__sticky-cell.pf-m-right, .pf-v6-c-table__sticky-cell.pf-m-inline-end {
   --pf-v6-c-table__sticky-cell--Right: var(--pf-v6-c-table__sticky-cell--m-right--Right);
 }
-:where(:root) .pf-v6-c-table__sticky-cell.pf-m-left, :where(:root) .pf-v6-c-table__sticky-cell.pf-m-inline-start,
-:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-left,
-:where(.pf-v6-c-table) .pf-v6-c-table__sticky-cell.pf-m-inline-start {
+.pf-v6-c-table__sticky-cell.pf-m-left, .pf-v6-c-table__sticky-cell.pf-m-inline-start {
   --pf-v6-c-table__sticky-cell--Left: var(--pf-v6-c-table__sticky-cell--m-left--Left);
 }
 

package/components/Table/table-scrollable.scss

@@ -1,7 +1,7 @@
 // * Table scrollable
 :where(:root),
 :where(.#{$table}) {
-  --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(200px)};
+  --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(140px)};
   --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
   --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
   --#{$table}__sticky-cell--Right: auto;
@@ -14,44 +14,47 @@
   --#{$table}__sticky-cell--m-right--Right: 0;
   --#{$table}__sticky-cell--m-left--Left: 0;
   --#{$table}--m-sticky-header__sticky-cell--ZIndex: calc(var(--#{$table}__sticky-cell--ZIndex) + 1);
+}
+
 
-  // * Table sticky cell
-  .#{$table}__sticky-cell {
-    --#{$table}--cell--Overflow: visible;
-    --#{$table}--m-sticky-header--cell--ZIndex: var(--#{$table}--m-sticky-header__sticky-cell--ZIndex);
+// - Table sticky cell
+.#{$table} .#{$table}__sticky-cell {
+  position: sticky;
+  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);
+}
 
-    position: sticky;
-    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);
-    background-clip: padding-box;
+.#{$table}__sticky-cell {
+  --#{$table}--cell--Overflow: visible;
+  --#{$table}--m-sticky-header--cell--ZIndex: var(--#{$table}--m-sticky-header__sticky-cell--ZIndex);
 
-    &.pf-m-border-right::before {
-      --#{$table}--cell--m-border-right--before--BorderRightWidth: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightWidth);
-      --#{$table}--cell--m-border-right--before--BorderRightColor: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightColor);
-    }
+  background-color: var(--#{$table}__sticky-cell--BackgroundColor);
+  background-clip: padding-box;
 
-    &.pf-m-border-left::before {
-      --#{$table}--cell--m-border-left--before--BorderLeftWidth: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftWidth);
-      --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
-    }
+  &.pf-m-border-right::before {
+    --#{$table}--cell--m-border-right--before--BorderRightWidth: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightWidth);
+    --#{$table}--cell--m-border-right--before--BorderRightColor: var(--#{$table}__sticky-cell--m-border-right--before--BorderRightColor);
+  }
 
-    &.pf-m-right,
-    &.pf-m-inline-end {
-      --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
-    }
+  &.pf-m-border-left::before {
+    --#{$table}--cell--m-border-left--before--BorderLeftWidth: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftWidth);
+    --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
+  }
 
-    &.pf-m-left,
-    &.pf-m-inline-start {
-      --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
-    }
+  &.pf-m-right,
+  &.pf-m-inline-end {
+    --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
+  }
 
+  &.pf-m-left,
+  &.pf-m-inline-start {
+    --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
   }
 }
 
-// * Scroll outer wrapper
+// - Scroll outer wrapper
 .#{$scroll-outer-wrapper} {
   --#{$scroll-outer-wrapper}--MinHeight: #{pf-size-prem(400px)};
   --#{$scroll-outer-wrapper}--MaxHeight: 100%;
@@ -64,7 +67,7 @@
   overflow: hidden;
 }
 
-// * Scroll inner wrapper
+// - Scroll inner wrapper
 .#{$scroll-inner-wrapper} {
   display: flex;
   flex-direction: column;

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

@@ -6,7 +6,6 @@
   --pf-v6-c-table__tree-view-main--PaddingLeft: var(--pf-v6-c-table__tree-view-main--indent--base);
   --pf-v6-c-table__tree-view-main--MarginLeft: calc(var(--pf-v6-c-table--cell--PaddingLeft) * -1);
   --pf-v6-c-table__tree-view-main--c-table__check--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__tree-view-main--c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__tree-view-icon--MinWidth: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__tree-view-icon--MarginRight: var(--pf-t--global--spacer--sm);
@@ -87,7 +86,6 @@
   margin-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--MarginRight);
 }
 .pf-v6-c-table__tree-view-main > .pf-v6-c-table__check label {
-  padding-inline-start: var(--pf-v6-c-table__tree-view-main--c-table__check--PaddingLeft);
   padding-inline-end: var(--pf-v6-c-table__tree-view-main--c-table__check--PaddingRight);
   margin-block-start: 0;
   margin-block-end: 0;

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

@@ -1,4 +1,4 @@
-$pf-v5-c-tree-view--MaxDepth: 10;
+$pf-v6-c-tree-view--MaxDepth: 10;
 
 // * Table tree view
 :where(:root),
@@ -9,28 +9,27 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   // * Table tree view main button
   --#{$table}__tree-view-main--c-button--MarginRight: var(--pf-t--global--spacer--sm);
 
-  // - Table tree view main
+  // * 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 check
+  // * 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 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 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--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 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;
 }
@@ -51,7 +50,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
     --#{$table}__tree-view-main--MarginLeft: var(--#{$table}--m-no-inset__tree-view-main--MarginLeft);
   }
 
-  @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));
     }
@@ -95,7 +94,6 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   }
 
   > .#{$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);
     margin-block-start: 0;
     margin-block-end: 0;
@@ -313,7 +311,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
     margin-block-end: var(--#{$table}__tree-view-details-toggle--MarginBottom);
   }
 
-  @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
     }