@patternfly/patternfly 6.0.0-alpha.106 → 6.0.0-alpha.108

package/components/Toolbar/toolbar.scss

@@ -1,11 +1,11 @@
-$pf-v5-c-toolbar--spacer-map: build-spacer-map();
-$pf-v5-c-toolbar--inset-map: build-spacer-map();
-$pf-v5-c-toolbar--align-items--alignments: ('stretch', 'baseline', 'start', 'center', 'end');
-$pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map('base');
-$pf-v5--include-toolbar-breakpoints: true !default;
-
-@if $pf-v5--include-toolbar-breakpoints {
-  $pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map('base', 'sm', 'md', 'lg', 'xl', '2xl');
+$pf-v6-c-toolbar--spacer-map: build-spacer-map();
+$pf-v6-c-toolbar--inset-map: build-spacer-map();
+$pf-v6-c-toolbar--align-items--alignments: ('stretch', 'baseline', 'start', 'center', 'end');
+$pf-v6-c-toolbar--breakpoint-map: build-breakpoint-map('base');
+$pf-v6--include-toolbar-breakpoints: true !default;
+
+@if $pf-v6--include-toolbar-breakpoints {
+  $pf-v6-c-toolbar--breakpoint-map: build-breakpoint-map('base', 'sm', 'md', 'lg', 'xl', '2xl');
 }
 
 :where(:root),
@@ -62,7 +62,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
 .#{$toolbar}__item,
 .#{$toolbar}__group.pf-m-chip-group-container,
 .#{$toolbar}__group.pf-m-chip-group {
-  @include pf-v5-hidden-visible(flex);
+  @include pf-v6-hidden-visible(flex);
 
   flex-wrap: wrap;
 }
@@ -160,8 +160,8 @@ $pf-v5--include-toolbar-breakpoints: true !default;
 
 // - Toolbar item
 .#{$toolbar}__item {
-  @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--Width--base", "--#{$toolbar}__item--Width", $pf-v5-c-toolbar--breakpoint-map);
-  @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--MinWidth--base", "--#{$toolbar}__item--MinWidth", $pf-v5-c-toolbar--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$toolbar}__item--Width--base", "--#{$toolbar}__item--Width", $pf-v6-c-toolbar--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$toolbar}__item--MinWidth--base", "--#{$toolbar}__item--MinWidth", $pf-v6-c-toolbar--breakpoint-map);
 
   row-gap: var(--#{$toolbar}__item--RowGap, var(--#{$toolbar}--RowGap));
   column-gap: var(--#{$toolbar}__item--ColumnGap);
@@ -233,7 +233,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   background-color: var(--#{$toolbar}__expandable-content--BackgroundColor);
   box-shadow: var(--#{$toolbar}__expandable-content--BoxShadow);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     position: static;
     padding: 0;
     box-shadow: none;
@@ -255,7 +255,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   transition: var(--#{$toolbar}__expand-all-icon--Transition);
   transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
 
-  @include pf-v5-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change
+  @include pf-v6-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change
 }
 
 // - Toolbar group - Toolbar item
@@ -269,10 +269,10 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   }
 }
 
-@each $breakpoint, $breakpoint-value in $pf-v5-c-toolbar--breakpoint-map {
+@each $breakpoint, $breakpoint-value in $pf-v6-c-toolbar--breakpoint-map {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-  @include pf-v5-apply-breakpoint($breakpoint) {
+  @include pf-v6-apply-breakpoint($breakpoint) {
     .#{$toolbar}__group,
     .#{$toolbar}__item {
       &.pf-m-align-start#{$breakpoint-name} {
@@ -292,7 +292,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
         flex-grow: 1;
       }
 
-      @each $alignment in $pf-v5-c-toolbar--align-items--alignments {
+      @each $alignment in $pf-v6-c-toolbar--align-items--alignments {
         &.pf-m-align-self-#{$alignment}#{$breakpoint-name} {
           align-self: #{$alignment};
         }
@@ -304,7 +304,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
     .#{$toolbar}__content,
     .#{$toolbar}__content-section {
       // Inset modifiers
-      @each $inset, $inset-value in $pf-v5-c-toolbar--inset-map {
+      @each $inset, $inset-value in $pf-v6-c-toolbar--inset-map {
         &.pf-m-inset-#{$inset}#{$breakpoint-name} {
           --#{$toolbar}__content--PaddingInline: #{$inset-value};
         }
@@ -324,20 +324,20 @@ $pf-v5--include-toolbar-breakpoints: true !default;
         flex-wrap: nowrap;
       }
 
-      @each $alignment in $pf-v5-c-toolbar--align-items--alignments {
+      @each $alignment in $pf-v6-c-toolbar--align-items--alignments {
         &.pf-m-align-items-#{$alignment}#{$breakpoint-name} {
           align-items: #{$alignment};
         }
       }
 
-      @each $gap, $gap-value in $pf-v5-c-toolbar--spacer-map {
+      @each $gap, $gap-value in $pf-v6-c-toolbar--spacer-map {
         &.pf-m-gap-#{$gap}#{$breakpoint-name} {
           column-gap: #{$gap-value};
         }
       }
 
       // Row and column gap modifiers
-      @each $spacer, $spacer-value in $pf-v5-c-toolbar--spacer-map {
+      @each $spacer, $spacer-value in $pf-v6-c-toolbar--spacer-map {
         &.pf-m-column-gap-#{$spacer}#{$breakpoint-name} {
           column-gap: #{$spacer-value};
         }

package/components/TreeView/tree-view.scss

@@ -325,7 +325,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 }
 
 .#{$tree-view}__node-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
   min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
@@ -415,10 +415,10 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   background-color: var(--#{$tree-view}__node-toggle--BackgroundColor);
   border: 0;
 
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX)),
-    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
+    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
   );
 }
 
@@ -427,13 +427,13 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   &.pf-m-truncate {
     --#{$tree-view}__node-content--Overflow: hidden;
 
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
   }
 
   @at-root .#{$tree-view}.pf-m-truncate & {
     --#{$tree-view}__node-content--Overflow: hidden;
 
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
   }
 }
 

package/components/Truncate/truncate.scss

@@ -26,7 +26,7 @@
 
 // End
 .#{$truncate}__end {
-  @include pf-v5-bidirectional-style (
+  @include pf-v6-bidirectional-style (
     $prop: direction,
     $ltr-val: rtl,
     $rtl-val: ltr
@@ -36,7 +36,7 @@
 .#{$truncate}__start + .#{$truncate}__end {
   overflow: visible;
 
-  @include pf-v5-bidirectional-style (
+  @include pf-v6-bidirectional-style (
     $prop: direction,
     $ltr-val: ltr,
     $rtl-val: rtl
@@ -46,7 +46,7 @@
 // safari not supported
 @supports (-webkit-hyphens: none) {
   .#{$truncate}__end {
-    @include pf-v5-bidirectional-style (
+    @include pf-v6-bidirectional-style (
       $prop: direction,
       $ltr-val: ltr,
       $rtl-val: rtl

package/components/Wizard/wizard.scss

@@ -110,7 +110,7 @@
   --#{$wizard}__nav--lg--BorderRightWidth: var(--pf-t--global--border--width--regular);
   --#{$wizard}__nav--lg--BorderRightColor: var(--pf-t--global--border--color--default);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     --#{$wizard}__nav--Width: var(--#{$wizard}__nav--lg--Width);
     --#{$wizard}__nav--BoxShadow: none;
   }
@@ -222,7 +222,7 @@
   padding-block-start: var(--#{$wizard}__description--PaddingTop);
   color: var(--#{$wizard}__description--Color);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     display: block;
   }
 }
@@ -243,7 +243,7 @@
   border-inline-start: 0;
   border-inline-end: 0;
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     display: none;
   }
 
@@ -280,7 +280,7 @@
 }
 
 .#{$wizard}__toggle-separator {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   margin-inline-start: var(--#{$wizard}__toggle-separator--MarginLeft);
   color: var(--#{$wizard}__toggle-separator--Color);
@@ -298,7 +298,7 @@
   min-height: var(--#{$wizard}__outer-wrap--MinHeight);
   background-color: var(--#{$wizard}__outer-wrap--BackgroundColor);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     padding-inline-start: var(--#{$wizard}__outer-wrap--lg--PaddingLeft);
   }
 }
@@ -310,7 +310,7 @@
   flex-grow: 1;
   min-height: 0;
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     position: static;
   }
 }
@@ -332,7 +332,7 @@
     display: block;
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     display: block;
     height: 100%;
     border-inline-end: var(--#{$wizard}__nav--lg--BorderRightWidth) solid var(--#{$wizard}__nav--lg--BorderRightColor);
@@ -416,10 +416,10 @@
   // Common step number styles
   @at-root .#{$wizard}__toggle-num,
   &::before {
-    @include pf-v5-bidirectional-style(
+    @include pf-v6-bidirectional-style(
       $prop: transform,
       $ltr-val: translateX(var(--#{$wizard}__nav-link--before--TranslateX)) translateY(var(--#{$wizard}__nav-link--before--TranslateY)),
-      $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))}) translateY(var(--#{$wizard}__nav-link--before--TranslateY))
+      $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$wizard}__nav-link--before--TranslateX))}) translateY(var(--#{$wizard}__nav-link--before--TranslateY))
     );
 
     position: absolute;
@@ -485,7 +485,7 @@
 }
 
 .#{$wizard}__nav-link-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
   transition: var(--#{$wizard}__nav-link-toggle-icon--Transition);

package/docs/components/Badge/examples/Badge.md

@@ -36,26 +36,6 @@ cssPrefix: pf-v6-c-badge
 
 ```
 
-### Badge as toggle
-
-```html
-<span class="pf-v6-c-badge pf-m-read">
-  7
-  <span class="pf-v6-c-badge__toggle-icon">
-    <i class="fas fa-caret-down"></i>
-  </span>
-</span>
-<span class="pf-v6-c-badge pf-m-unread">
-  7
-  <span class="pf-v6-screen-reader">unread messages</span>
-
-  <span class="pf-v6-c-badge__toggle-icon">
-    <i class="fas fa-caret-down"></i>
-  </span>
-</span>
-
-```
-
 ## Documentation
 
 ### Overview
@@ -67,6 +47,5 @@ Always add a modifier class. Never use the class `.pf-v6-c-badge` on its own.
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v6-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
-| `.pf-v6-c-badge__toggle-icon` | `<span>` | Initiates a badge toggle icon. |
 | `.pf-m-read` | `.pf-v6-c-badge` | Applies read badge styling. |
 | `.pf-m-unread` | `.pf-v6-c-badge` | Applies unread badge styling. |

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -2,9 +2,7 @@
 id: Breadcrumb
 section: components
 cssPrefix: pf-v6-c-breadcrumb
----import './Breadcrumb.css'
-
-## Examples
+---## Examples
 
 ### Basic
 
@@ -162,62 +160,23 @@ cssPrefix: pf-v6-c-breadcrumb
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </span>
       <span class="pf-v6-c-breadcrumb__dropdown">
-        <div class="pf-v6-c-dropdown pf-m-expanded">
-          <button
-            class="pf-v6-c-dropdown__toggle pf-m-plain"
-            id="dropdown-badge-toggle-button"
-            aria-expanded="true"
-            type="button"
-          >
-            <span class="pf-v6-c-badge pf-m-read">
-              5
-              <span class="pf-v6-c-dropdown__toggle-icon">
-                <i class="fas fa-caret-down" aria-hidden="true"></i>
-              </span>
+        <button
+          class="pf-v6-c-menu-toggle pf-m-plain"
+          type="button"
+          aria-expanded="false"
+        >
+          <span class="pf-v6-c-menu-toggle__count">
+            <span class="pf-v6-c-badge pf-m-unread">
+              4
+              <span class="pf-v6-screen-reader">additional items</span>
+            </span>
+          </span>
+          <span class="pf-v6-c-menu-toggle__controls">
+            <span class="pf-v6-c-menu-toggle__toggle-icon">
+              <i class="fas fa-caret-down" aria-hidden="true"></i>
             </span>
-          </button>
-          <ul
-            class="pf-v6-c-dropdown__menu"
-            aria-labelledby="dropdown-badge-toggle-button"
-            role="menu"
-          >
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-          </ul>
-        </div>
+          </span>
+        </button>
       </span>
     </li>
     <li class="pf-v6-c-breadcrumb__item">

package/docs/components/Menu/examples/Menu.md

@@ -4592,9 +4592,13 @@ cssPrefix: pf-v6-c-menu
               type="button"
               aria-expanded="true"
             >
-              <span class="pf-v6-c-badge pf-m-read">
-                1
-                <i class="fas fa-caret-down" aria-hidden="true"></i>
+              <span class="pf-v6-c-menu-toggle__count">
+                <span class="pf-v6-c-badge pf-m-read">1</span>
+              </span>
+              <span class="pf-v6-c-menu-toggle__controls">
+                <span class="pf-v6-c-menu-toggle__toggle-icon">
+                  <i class="fas fa-caret-down" aria-hidden="true"></i>
+                </span>
               </span>
             </button>
             <div class="pf-v6-c-menu">
@@ -4845,9 +4849,13 @@ cssPrefix: pf-v6-c-menu
               type="button"
               aria-expanded="true"
             >
-              <span class="pf-v6-c-badge pf-m-read">
-                2
-                <i class="fas fa-caret-down" aria-hidden="true"></i>
+              <span class="pf-v6-c-menu-toggle__count">
+                <span class="pf-v6-c-badge pf-m-read">2</span>
+              </span>
+              <span class="pf-v6-c-menu-toggle__controls">
+                <span class="pf-v6-c-menu-toggle__toggle-icon">
+                  <i class="fas fa-caret-down" aria-hidden="true"></i>
+                </span>
               </span>
             </button>
             <div class="pf-v6-c-menu">

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -73,6 +73,25 @@ cssPrefix: pf-v6-c-menu-toggle
   </span>
 </button>
 
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-plain"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__count">
+    <span class="pf-v6-c-badge pf-m-unread">
+      4
+      <span class="pf-v6-screen-reader">additional items</span>
+    </span>
+  </span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
 ```
 
 ### Primary

package/docs/layouts/Bullseye/examples/Bullseye.css

@@ -1,5 +1,5 @@
-.ws-core-l-bullseye .pf-v5-l-bullseye,
-.ws-core-l-bullseye .pf-v5-l-bullseye__item {
-  padding: .5rem;
-  border: 2px dashed #393f44;
+.ws-core-l-bullseye .pf-v6-l-bullseye,
+.ws-core-l-bullseye .pf-v6-l-bullseye__item {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Flex/examples/Flex.css

@@ -1,6 +1,6 @@
 .ws-core-l-flex-border,
-.ws-core-l-flex .pf-v5-l-flex .pf-v5-l-flex,
-.ws-core-l-flex .pf-v5-l-flex__item {
-  padding: .5rem !important;
-  border: 2px dashed #393f44;
+.ws-core-l-flex .pf-v6-l-flex .pf-v6-l-flex,
+.ws-core-l-flex .pf-v6-l-flex__item {
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }