@patternfly/patternfly 6.3.0-prerelease.5 → 6.3.0-prerelease.50

package/components/TreeView/tree-view.scss

@@ -28,6 +28,25 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
   --#{$tree-view}__node-content--RowGap: var(--pf-t--global--spacer--sm);
   --#{$tree-view}__node-content--Overflow: visible;
 
+  // List
+  --#{$tree-view}__list--TransitionDuration--expand--slide: 0s;
+  --#{$tree-view}__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$tree-view}__list--TransitionDuration--collapse--slide: 0s;
+  --#{$tree-view}__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$tree-view}__list--TransitionDuration--slide: var(--#{$tree-view}__list--TransitionDuration--collapse--slide);
+  --#{$tree-view}__list--TransitionDuration--fade: var(--#{$tree-view}__list--TransitionDuration--collapse--fade);
+  --#{$tree-view}__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$tree-view}__list--Opacity: 0;
+  --#{$tree-view}--m-expanded__list--Opacity: 1;
+  --#{$tree-view}__list--TranslateY: 0;
+  --#{$tree-view}--m-expanded__list--TranslateY: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$tree-view}__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$tree-view}__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$tree-view}__list--TranslateY: -.5rem;
+  }
+
   // Nested toggle
   --#{$tree-view}__list-item__list-item__node-toggle--InsetBlockStart: var(--#{$tree-view}__node--PaddingBlockStart);
   --#{$tree-view}__list-item__list-item__node-toggle--InsetInlineStart: var(--#{$tree-view}__node--PaddingInlineStart);
@@ -48,6 +67,8 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
   --#{$tree-view}__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$tree-view}__node-toggle--MarginBlockStart: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
   --#{$tree-view}__node-toggle--MarginBlockEnd: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
+  --#{$tree-view}__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --#{$tree-view}__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
 
   // Check
   --#{$tree-view}__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -330,11 +351,22 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
   display: inline-block;
   min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
   text-align: center;
+  transition: transform var(--#{$tree-view}__node-toggle-icon--TransitionDuration) var(--#{$tree-view}__node-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$tree-view}__node-toggle-icon--Rotate));
 }
 
-// stylelint-disable
 .#{$tree-view}__list-item {
+  .#{$tree-view}__list {
+    max-height: 0;
+    visibility: hidden;
+    opacity: var(--#{$tree-view}__list--Opacity);
+    transition-delay: 0s, 0s, var(--#{$tree-view}__list--TransitionDuration--fade), var(--#{$tree-view}__list--TransitionDuration--fade);
+    transition-timing-function: var(--#{$tree-view}__list--TransitionTimingFunction);
+    transition-duration: var(--#{$tree-view}__list--TransitionDuration--fade), var(--#{$tree-view}__list--TransitionDuration--slide), 0s, 0s;
+    transition-property: opacity, translate, visibility, max-height;
+    translate: 0 var(--#{$tree-view}__list--TranslateY);
+  }
+
   .#{$tree-view}__list-item {
     --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__node-toggle-icon--base--Rotate); // reset nested toggle icon rotate
     --#{$tree-view}__node-toggle--Color: var(--#{$tree-view}__node-toggle--Color--base); // reset nested toggle color
@@ -343,9 +375,17 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
   &.pf-m-expanded {
     --#{$tree-view}__node-toggle--Color: var(--#{$tree-view}__list-item--m-expanded__node-toggle--Color);
     --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate);
+
+    > .#{$tree-view}__list {
+      max-height: 99999px;
+      visibility: revert;
+      opacity: var(--#{$tree-view}--m-expanded__list--Opacity);
+      transition-delay: 0s;
+      transition-duration: var(--#{$tree-view}__list--TransitionDuration--expand--fade), var(--#{$tree-view}__list--TransitionDuration--expand--slide), 0s, 0s;
+      translate: 0 var(--#{$tree-view}--m-expanded__list--TranslateY);
+    }
   }
 }
-// stylelint-enable
 
 .#{$tree-view}__node,
 .#{$tree-view}__node-container {

package/components/Truncate/truncate.css

@@ -8,6 +8,7 @@
   grid-auto-flow: column;
   align-items: baseline;
   min-width: var(--pf-v6-c-truncate--MinWidth);
+  text-decoration: inherit;
 }
 .pf-v6-c-truncate.pf-m-fixed {
   display: inline;

package/components/Truncate/truncate.scss

@@ -10,6 +10,9 @@
   grid-auto-flow: column;
   align-items: baseline;
   min-width: var(--#{$truncate}--MinWidth);
+  // stylelint-disable property-disallowed-list
+  text-decoration: inherit; // enable inline link to have underline
+  // stylelint-enable property-disallowed-list
 
   &.pf-m-fixed {
     display: inline;

package/components/Wizard/wizard.css

@@ -56,6 +56,7 @@
   --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
   --pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
   --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -74,6 +75,7 @@
   --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
   --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
   --pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
   --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -234,6 +236,9 @@
 .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
   --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color);
 }
+.pf-v6-c-wizard__toggle-list-item.pf-m-warning {
+  --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color);
+}
 .pf-v6-c-wizard__toggle-list-item.pf-m-success {
   --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color);
 }
@@ -367,6 +372,7 @@
 .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
   position: relative;
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: var(--pf-v6-c-wizard__nav-link--before--Width);
@@ -391,12 +397,15 @@
   --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
 }
 
-.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-danger)::before {
+.pf-v6-c-wizard__nav-link:is(.pf-m-success, .pf-m-warning, .pf-m-danger)::before {
   display: none;
 }
 .pf-v6-c-wizard__nav-link.pf-m-success {
   --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color);
 }
+.pf-v6-c-wizard__nav-link.pf-m-warning {
+  --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color);
+}
 .pf-v6-c-wizard__nav-link.pf-m-danger {
   --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
 }
@@ -414,12 +423,9 @@
   --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--before--Color);
 }
 
-.pf-v6-c-wizard__nav-link-text {
-  flex-grow: 1;
-}
-
 .pf-v6-c-wizard__nav-link-main {
   display: flex;
+  flex-grow: 1;
   justify-content: space-between;
   padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);

package/components/Wizard/wizard.scss

@@ -84,6 +84,7 @@
   // Nav link status icon
   --#{$wizard}__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
   --#{$wizard}__nav-link--m-success__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --#{$wizard}__nav-link-status-icon--InsetBlockStart: 4px; // not spacer-based but needed to align
   --#{$wizard}__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -110,6 +111,7 @@
   --#{$wizard}__nav-link-status-icon--LineHeight: 1;
   --#{$wizard}__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$wizard}__toggle-list-item--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$wizard}__toggle-list-item--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
   --#{$wizard}__toggle-list-item--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --#{$wizard}__toggle-status-icon--InsetBlockStart: 2px; // not spacer-based but needed to align
   --#{$wizard}__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
@@ -302,6 +304,10 @@
     --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-danger__status-icon--Color);
   }
 
+  &.pf-m-warning {
+    --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-warning__status-icon--Color);
+  }
+
   &.pf-m-success {
     --#{$wizard}__toggle-status-icon--Color: var(--#{$wizard}__toggle-list-item--m-success__status-icon--Color);
   }
@@ -452,6 +458,7 @@
   &::before {
     position: relative;
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     width: var(--#{$wizard}__nav-link--before--Width);
@@ -480,7 +487,7 @@
     }
   }
 
-  &:is(.pf-m-success, .pf-m-danger) {
+  &:is(.pf-m-success, .pf-m-warning, .pf-m-danger) {
     &::before {
       display: none;
     }
@@ -490,6 +497,10 @@
     --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-success__nav-link-status-icon--Color);
   }
 
+  &.pf-m-warning {
+    --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-warning__nav-link-status-icon--Color);
+  }
+
   &.pf-m-danger {
     --#{$wizard}__nav-link-status-icon--Color: var(--#{$wizard}__nav-link--m-danger__nav-link-status-icon--Color);
   }
@@ -514,12 +525,9 @@
   }
 }
 
-.#{$wizard}__nav-link-text {
-  flex-grow: 1;
-}
-
 .#{$wizard}__nav-link-main {
   display: flex;
+  flex-grow: 1;
   justify-content: space-between;
   padding-block-start: var(--#{$wizard}__nav-link-main--PaddingBlockStart);
   padding-block-end: var(--#{$wizard}__nav-link-main--PaddingBlockEnd);