@patternfly/patternfly 6.0.0-alpha.86 → 6.0.0-alpha.88

package/components/MenuToggle/menu-toggle.css

@@ -73,8 +73,6 @@
   --pf-v5-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v5-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
   --pf-v5-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
-  --pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-menu-toggle__controls--MinWidth: calc(var(--pf-v5-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
   --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-t--global--spacer--lg);
   --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-t--global--spacer--lg);
@@ -102,9 +100,8 @@
   --pf-v5-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v5-c-menu-toggle--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v5-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
-  --pf-v5-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
-  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v5-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
   --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
 }
@@ -112,6 +109,7 @@
 .pf-v5-c-menu-toggle {
   position: relative;
   display: inline-flex;
+  column-gap: var(--pf-v5-c-menu-toggle--ColumnGap);
   align-items: center;
   justify-content: center;
   min-width: var(--pf-v5-c-menu-toggle--MinWidth);
@@ -196,22 +194,12 @@
   --pf-v5-c-menu-toggle--active--BackgroundColor: var(--pf-v5-c-menu-toggle--m-plain--active--BackgroundColor);
   --pf-v5-c-menu-toggle--expanded--BackgroundColor: var(--pf-v5-c-menu-toggle--m-plain--expanded--BackgroundColor);
   --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-c-menu-toggle--m-plain--disabled--Color);
+  --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-c-menu-toggle--m-plain--disabled--BackgroundColor);
   mix-blend-mode: var(--pf-v5-c-menu-toggle--m-plain--MixBlendMode);
 }
 .pf-v5-c-menu-toggle.pf-m-plain::before {
   border: none;
 }
-.pf-v5-c-menu-toggle:has(.pf-v5-c-button:only-child) {
-  padding: revert;
-}
-.pf-v5-c-menu-toggle:is(button),
-.pf-v5-c-menu-toggle .pf-v5-c-button {
-  background-color: var(--pf-v5-c-menu-toggle--BackgroundColor);
-}
-.pf-v5-c-menu-toggle:is(button):has(> i:only-child),
-.pf-v5-c-menu-toggle .pf-v5-c-button:has(> i:only-child) {
-  aspect-ratio: 1/1;
-}
 .pf-v5-c-menu-toggle:is(:hover, :focus) {
   --pf-v5-c-menu-toggle--Color: var(--pf-v5-c-menu-toggle--hover--Color);
   --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
@@ -249,6 +237,7 @@
 }
 
 .pf-v5-c-menu-toggle.pf-m-split-button {
+  --pf-v5-c-menu-toggle--ColumnGap: 0;
   padding: 0;
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > * {
@@ -282,7 +271,6 @@
 }
 
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action {
-  --pf-v5-c-menu-toggle--ColumnGap: 0;
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v5-c-menu-toggle--BorderColor);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
@@ -323,6 +311,7 @@
 
 .pf-v5-c-menu-toggle.pf-m-typeahead {
   --pf-v5-c-menu-toggle__button--AlignSelf: var(--pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf);
+  --pf-v5-c-menu-toggle--ColumnGap: 0;
   align-items: stretch;
   padding: 0;
 }
@@ -330,7 +319,6 @@
   --pf-v5-c-menu-toggle__button--PaddingRight: 0;
 }
 .pf-v5-c-menu-toggle.pf-m-typeahead .pf-v5-c-menu-toggle__controls {
-  --pf-v5-c-menu-toggle--ColumnGap: 0;
   --pf-v5-c-menu-toggle__button--PaddingRight: 0;
   display: flex;
   align-items: stretch;
@@ -357,8 +345,6 @@
 .pf-v5-c-menu-toggle__icon {
   flex-shrink: 0;
   align-self: center;
-  margin-inline-end: var(--pf-v5-c-menu-toggle__icon--MarginRight);
-  line-height: 1;
 }
 
 .pf-v5-c-menu-toggle__text {
@@ -371,7 +357,6 @@
 .pf-v5-c-menu-toggle__count {
   display: flex;
   flex-wrap: nowrap;
-  margin-inline-start: var(--pf-v5-c-menu-toggle__count--MarginLeft);
 }
 
 .pf-v5-c-menu-toggle__controls {
@@ -379,7 +364,7 @@
   align-items: center;
   justify-content: center;
   min-width: var(--pf-v5-c-menu-toggle__controls--MinWidth);
-  margin-inline-start: var(--pf-v5-c-menu-toggle--ColumnGap);
+  margin-inline-start: auto;
 }
 
 .pf-v5-c-menu-toggle__toggle-icon {

package/components/MenuToggle/menu-toggle.scss

@@ -105,12 +105,6 @@
   --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
   --#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
 
-  // Icon
-  --#{$menu-toggle}__icon--MarginRight: var(--pf-t--global--spacer--sm);
-
-  // Count
-  --#{$menu-toggle}__count--MarginLeft: var(--pf-t--global--spacer--sm);
-
   // Controls
   --#{$menu-toggle}__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
 
@@ -153,11 +147,10 @@
   --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$menu-toggle}--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
-  --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
+  --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled); // picking icon color rather than text...?
+  --#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent; // picking icon color rather than text...?
 
   // Typeahead
-  --#{$menu-toggle}--m-typeahead__controls--MarginRight: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--m-typeahead__controls--MarginLeft: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
 }
@@ -165,6 +158,7 @@
 .#{$menu-toggle} {
   position: relative;
   display: inline-flex;
+  column-gap: var(--#{$menu-toggle}--ColumnGap);
   align-items: center;
   justify-content: center;
   min-width: var(--#{$menu-toggle}--MinWidth);
@@ -259,6 +253,7 @@
     --#{$menu-toggle}--active--BackgroundColor: var(--#{$menu-toggle}--m-plain--active--BackgroundColor);
     --#{$menu-toggle}--expanded--BackgroundColor: var(--#{$menu-toggle}--m-plain--expanded--BackgroundColor);
     --#{$menu-toggle}--disabled--Color: var(--#{$menu-toggle}--m-plain--disabled--Color);
+    --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$menu-toggle}--m-plain--disabled--BackgroundColor);
 
     mix-blend-mode: var(--#{$menu-toggle}--m-plain--MixBlendMode);
 
@@ -267,22 +262,6 @@
     }
   }
 
-  // TODO: wrap all toggle icons with .menu-toggle__button to eliminate the need for this
-  &:has(.#{$button}:only-child) {
-    padding: revert;
-  }
-
-  // TODO: wrap all toggle icons with .menu-toggle__button to eliminate the need for this
-  // TODO: update menu toggle to consume .pf-v5-c-button
-  &:is(button),
-  .#{$button} {
-    background-color: var(--#{$menu-toggle}--BackgroundColor);
-
-    &:has(> i:only-child) {
-      aspect-ratio: 1 / 1;
-    }
-  }
-
   &:is(:hover, :focus) {
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--hover--Color);
     --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--hover--BackgroundColor);
@@ -331,6 +310,8 @@
 
 // - Menu toggle split button
 .#{$menu-toggle}.pf-m-split-button {
+  --#{$menu-toggle}--ColumnGap: 0;
+
   padding: 0; // pass padding to children
 
   > * {
@@ -373,7 +354,6 @@
 
 // - Menu toggle split button action
 .#{$menu-toggle}.pf-m-split-button.pf-m-action {
-  --#{$menu-toggle}--ColumnGap: 0;
   --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--BorderColor);
 
   // all subsequent buttons
@@ -435,6 +415,7 @@
 // - Menu toggle typeahead
 .#{$menu-toggle}.pf-m-typeahead {
   --#{$menu-toggle}__button--AlignSelf: var(--#{$menu-toggle}--m-typeahead__button--AlignSelf);
+  --#{$menu-toggle}--ColumnGap: 0;
 
   align-items: stretch;
   padding: 0;
@@ -444,7 +425,6 @@
   }
 
   .#{$menu-toggle}__controls {
-    --#{$menu-toggle}--ColumnGap: 0;
     --#{$menu-toggle}__button--PaddingRight: 0;
 
     display: flex;
@@ -477,8 +457,6 @@
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
   align-self: center;
-  margin-inline-end: var(--#{$menu-toggle}__icon--MarginRight);
-  line-height: 1;
 }
 
 .#{$menu-toggle}__text {
@@ -490,7 +468,6 @@
 .#{$menu-toggle}__count {
   display: flex;
   flex-wrap: nowrap;
-  margin-inline-start: var(--#{$menu-toggle}__count--MarginLeft);
 }
 
 .#{$menu-toggle}__controls {
@@ -498,7 +475,7 @@
   align-items: center;
   justify-content: center;
   min-width: var(--#{$menu-toggle}__controls--MinWidth);
-  margin-inline-start: var(--#{$menu-toggle}--ColumnGap);
+  margin-inline-start: auto; // TODO: possibly replace as part of one of the other TODOs at top of file
 }
 
 .#{$menu-toggle}__toggle-icon {

package/docs/components/LogViewer/examples/LogViewer.md

@@ -88,7 +88,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-basic-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -658,7 +660,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-line-number-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -1228,7 +1232,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-line-number-chars-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -1798,7 +1804,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-text-wrap-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -2368,7 +2376,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-text-nowrap-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -2938,7 +2948,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-search-results-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -3578,7 +3590,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-max-height-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -4148,7 +4162,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-dropdowns-expanded-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -4716,7 +4732,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-popover-expanded-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -5319,7 +5337,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-dark-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div