From 519a8ba0392be9b4a11985176c6ca70d2075a069 Mon Sep 17 00:00:00 2001
From: mcoker <mcoker@redhat.com>
Date: Tue, 3 Jun 2025 17:38:41 -0500
Subject: [PATCH 1/4] feat(motion): added hamburger and settings animations

---
 .../components/Button/button-icon.hbs         |   4 +
 src/patternfly/components/Button/button.hbs   |  18 +--
 src/patternfly/components/Button/button.scss  | 105 +++++++++++++++++-
 .../components/Button/examples/Button.md      |  20 +++-
 .../components/Button/hamburger-icon.hbs      |   6 +
 .../components/Masthead/masthead-toggle.hbs   |   2 +-
 .../components/Masthead/masthead.scss         |   5 -
 .../MenuToggle/menu-toggle-icon.hbs           |   5 +-
 .../components/MenuToggle/menu-toggle.hbs     |   4 +-
 src/patternfly/components/Page/page.scss      |  29 +++++
 .../masthead-template-content-icon-group.hbs  |   2 +-
 src/patternfly/sass-utilities/mixins.scss     |  35 ++++++
 12 files changed, 213 insertions(+), 22 deletions(-)
 create mode 100644 src/patternfly/components/Button/hamburger-icon.hbs

diff --git a/src/patternfly/components/Button/button-icon.hbs b/src/patternfly/components/Button/button-icon.hbs
index 623e34a7be..e3e8b88d71 100644
--- a/src/patternfly/components/Button/button-icon.hbs
+++ b/src/patternfly/components/Button/button-icon.hbs
@@ -9,6 +9,10 @@
   {{#if button--IsFavorite}}
     <span class="{{pfv}}button__icon-favorite">{{> icon-outlined-star}}</span>
     <span class="{{pfv}}button__icon-favorited">{{> icon-star}}</span>
+  {{else if button--IsSettings}}
+    <i class="fas fa-cog" aria-hidden="true"></i>
+  {{else if button--IsHamburger}}
+    {{> hamburger-icon}}
   {{else if button--icon}}
     <i class="fas fa-{{button--icon}}" aria-hidden="true"></i>
   {{else if button--icon-template}}
diff --git a/src/patternfly/components/Button/button.hbs b/src/patternfly/components/Button/button.hbs
index a6e7ff5f22..cb64ef7cb2 100644
--- a/src/patternfly/components/Button/button.hbs
+++ b/src/patternfly/components/Button/button.hbs
@@ -25,6 +25,8 @@
     button--IsFavorited='pf-m-favorited'
     button--IsDisplayLg='pf-m-display-lg'
     button--IsBlock='pf-m-block'
+    button--IsSettings='pf-m-settings'
+    button--IsHamburger='pf-m-hamburger'
     button--modifier=button--modifier
   }}
   {{#if button--IsDisabled}}
@@ -81,16 +83,16 @@
   {{#if button--IsInProgress}}
     {{> button-progress}}
   {{/if}}
-  {{#ifAny button--IsIcon button--IsFavorite}} {{! button only has an icon - eg, no text}}
-    {{#ifAny button--icon button--icon-template button--IsFavorite}}
-      {{> button-icon}}
-    {{else if @partial-block}}
+  {{#if button--IsIcon}} {{! button only has an icon - eg, no text}}
+    {{#if @partial-block}}
       {{#> button-icon}}
         {{> @partial-block}}
       {{/button-icon}}
-    {{/ifAny}}
+    {{else}}
+      {{> button-icon}}
+    {{/if}}
   {{else}}
-    {{#ifAny button--icon button--icon-template button--IsFavorite}}
+    {{#ifAny button--icon button--icon-template}}
       {{#unless button-icon--IsEnd}}
         {{> button-icon}}
       {{/unless}}
@@ -104,12 +106,12 @@
         {{/button-text}}
       {{/if}}
     {{/if}}
-    {{#ifAny button--icon button--icon-template button--IsFavorite}}
+    {{#ifAny button--icon button--icon-template}}
       {{#if button-icon--IsEnd}}
         {{> button-icon}}
       {{/if}}
     {{/ifAny}}
-  {{/ifAny}}
+  {{/if}}
   {{#if button--count}}
     {{> button-count}}
   {{/if}}
diff --git a/src/patternfly/components/Button/button.scss b/src/patternfly/components/Button/button.scss
index fbc1b9bfb2..eaefcdb663 100644
--- a/src/patternfly/components/Button/button.scss
+++ b/src/patternfly/components/Button/button.scss
@@ -21,6 +21,7 @@
   --#{$button}--TextDecorationLine: none;
   --#{$button}--TextDecorationStyle: none;
   --#{$button}--TextDecorationColor: currentcolor;
+  --#{$button}--TransitionDelay: 0s;
   --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
   --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
   --#{$button}--TransitionProperty: color, background, border-width, border-color;
@@ -271,7 +272,7 @@
   --#{$button}--disabled--BorderColor: transparent;
   --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
 
-  // Icons
+  // Icon
   --#{$button}__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -281,6 +282,16 @@
   --#{$button}__icon--m-end--MarginInlineStart: 0;
   --#{$button}--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
   --#{$button}--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
+  --#{$button}__icon--TransitionDelay: 0s;
+  --#{$button}__icon--TransitionTimingFunction: auto;
+  --#{$button}__icon--TransitionDuration: 0s;
+  --#{$button}__icon--TransitionProperty: none;
+  --#{$button}__icon--Rotate: 0deg;
+  --#{$button}__icon--Scale: 1;
+  --#{$button}--hover__icon--TransitionTimingFunction: auto;
+  --#{$button}--hover__icon--TransitionDuration: 0s;
+  --#{$button}--hover__icon--TransitionProperty: none;
+  --#{$button}--hover__icon--Rotate: 0deg;
 
   // Favorite button
   --#{$button}--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -311,12 +322,35 @@
   --#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
 
+  // Settings
+  --#{$button}--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$button}--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$button}--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$button}--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$button}--m-settings--hover__icon--Rotate: 60deg;
+
   // Count
   --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
 
   // Block
   --#{$button}--m-block--Display: flex;
   --#{$button}--m-block--Width: 100%;
+
+  // Hamburger
+  --#{$button}--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$button}--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --#{$button}--hamburger-icon--top--path--base: path("M1,1 L9,1");
+  --#{$button}--hamburger-icon--middle--path--base: path("M1,5 L9,5");
+  --#{$button}--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
+  --#{$button}--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
+  --#{$button}--hamburger-icon--top--path: var(--#{$button}--hamburger-icon--top--path--base);
+  --#{$button}--hamburger-icon--middle--path: var(--#{$button}--hamburger-icon--middle--path--base);
+  --#{$button}--hamburger-icon--arrow--path: var(--#{$button}--hamburger-icon--arrow--path--base);
+  --#{$button}--hamburger-icon--bottom--path: var(--#{$button}--hamburger-icon--bottom--path--base);
+  --#{$button}--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
+  --#{$button}--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
+  --#{$button}--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
+  --#{$button}--m-hamburger__icon--m-expand--Scale: -1;
 }
 
 .#{$button} {
@@ -350,9 +384,11 @@
   border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
   border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
   border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
+  transition-delay: var(--#{$button}--TransitionDelay);
   transition-timing-function: var(--#{$button}--TransitionTimingFunction);
   transition-duration: var(--#{$button}--TransitionDuration);
   transition-property: var(--#{$button}--TransitionProperty);
+  scale: var(--#{$button}--Scale, revert);
 
   &::after {
     position: absolute;
@@ -632,7 +668,7 @@
 
   &.pf-m-block {
     --#{$button}--Display: var(--#{$button}--m-block--Display);
-
+ 
     width: var(--#{$button}--m-block--Width);
   }
 
@@ -661,7 +697,9 @@
   // Favorite button when favorited
   &.pf-m-favorited {
     --#{$button}__icon--Color: var(--#{$button}--m-favorited__icon--Color);
+    --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-favorited__icon--Color);
     --#{$button}--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
+    --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
     --#{$button}__icon--favorite--Opacity: var(--#{$button}--m-favorited__icon--favorite--Opacity);
     --#{$button}__icon--favorited--Opacity: var(--#{$button}--m-favorited__icon--favorited--Opacity);
   }
@@ -673,6 +711,33 @@
     animation-timing-function: var(--#{$button}--m-favorited__icon--AnimationTimingFunction);
   }
 
+  &.pf-m-settings {
+    --#{$button}__icon--TransitionProperty: rotate;
+    --#{$button}__icon--TransitionDuration: var(--#{$button}--m-settings__icon--TransitionDuration);
+    --#{$button}__icon--TransitionTimingFunction: var(--#{$button}--m-settings__icon--TransitionTimingFunction);
+    --#{$button}--hover__icon--TransitionProperty: rotate;
+    --#{$button}--hover__icon--TransitionDuration: var(--#{$button}--m-settings--hover__icon--TransitionDuration);
+    --#{$button}--hover__icon--TransitionTimingFunction: var(--#{$button}--m-settings--hover__icon--TransitionTimingFunction);
+    --#{$button}--hover__icon--Rotate: var(--#{$button}--m-settings--hover__icon--Rotate);
+  }
+
+  &.pf-m-hamburger {
+    --#{$button}__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+    --#{$button}__icon--TransitionDuration: 0s;
+    --#{$button}__icon--TransitionProperty: scale;
+    --#{$button}--hover__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+    --#{$button}--hover__icon--TransitionDuration: 0s;
+    --#{$button}--hover__icon--TransitionProperty: scale;
+
+    &.pf-m-expand {
+      @include pf-v6-hamburger;
+    }
+
+    &.pf-m-collapse {
+      @include pf-v6-hamburger($collapse: true);
+    }
+  }
+
   &:hover,
   &:focus {
     --#{$button}--Color: var(--#{$button}--hover--Color);
@@ -681,6 +746,10 @@
     --#{$button}--BorderWidth: var(--#{$button}--hover--BorderWidth);
     --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-plain--m-no-padding--hover__icon--Color);
     --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
+    --#{$button}__icon--TransitionTimingFunction: var(--#{$button}--hover__icon--TransitionTimingFunction);
+    --#{$button}__icon--TransitionDuration: var(--#{$button}--hover__icon--TransitionDuration);
+    --#{$button}__icon--TransitionProperty: var(--#{$button}--hover__icon--TransitionProperty);
+    --#{$button}__icon--Rotate: var(--#{$button}--hover__icon--Rotate);
 
     text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
     text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
@@ -765,6 +834,12 @@
   margin-inline-start: var(--#{$button}__icon--MarginInlineStart);
   margin-inline-end: var(--#{$button}__icon--MarginInlineEnd);
   color: var(--#{$button}__icon--Color);
+  transition-delay: var(--#{$button}__icon--TransitionDelay);
+  transition-timing-function: var(--#{$button}__icon--TransitionTimingFunction);
+  transition-duration: var(--#{$button}__icon--TransitionDuration);
+  transition-property: var(--#{$button}__icon--TransitionProperty);
+  rotate: var(--#{$button}__icon--Rotate);
+  scale: var(--#{$button}__icon--Scale);
 
   &.pf-m-start {
     --#{$button}__icon--MarginInlineEnd: var(--#{$button}__icon--m-start--MarginInlineEnd);
@@ -815,6 +890,32 @@
   align-items: center;
 }
 
+.#{$button}--hamburger-icon {
+  path {
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: d var(--#{$button}--hamburger-icon--TransitionDuration) var(--#{$button}--hamburger-icon--TransitionTimingFunction);
+  }
+}
+
+.#{$button}--hamburger-icon--top {
+  d: var(--#{$button}--hamburger-icon--top--path, var(--#{$button}--hamburger-icon--top--direction--path));
+}
+
+.#{$button}--hamburger-icon--middle {
+  d: var(--#{$button}--hamburger-icon--middle--path, var(--#{$button}--hamburger-icon--middle--direction--path));
+}
+
+.#{$button}--hamburger-icon--arrow {
+  d: var(--#{$button}--hamburger-icon--arrow--path, var(--#{$button}--hamburger-icon--arrow--direction--path));
+}
+
+.#{$button}--hamburger-icon--bottom {
+  d: var(--#{$button}--hamburger-icon--bottom--path, var(--#{$button}--hamburger-icon--bottom--direction--path));
+}
+
 @keyframes #{$button}-icon-notify {
   33% {
     transform: rotate(30deg);
diff --git a/src/patternfly/components/Button/examples/Button.md b/src/patternfly/components/Button/examples/Button.md
index cffcaddd5d..f5c6022faa 100644
--- a/src/patternfly/components/Button/examples/Button.md
+++ b/src/patternfly/components/Button/examples/Button.md
@@ -236,6 +236,18 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
 {{/button}}
 ```
 
+### Settings
+```hbs
+{{> button button--IsSettings=true button--IsPlain=true button--IsIcon=true button--aria-label="Settings"}}
+```
+
+### Hamburger
+```hbs
+{{> button button--IsHamburger=true button--IsPlain=true button--IsIcon=true button--aria-label="Hamburger"}}
+{{> button button--IsHamburger=true button--IsPlain=true button--IsIcon=true button--aria-label="Hamburger" button--modifier="pf-m-expand"}}
+{{> button button--IsHamburger=true button--IsPlain=true button--IsIcon=true button--aria-label="Hamburger" button--modifier="pf-m-collapse"}}
+```
+
 ## Documentation
 ### Overview
 Always add a modifier class to add color to the button.
@@ -285,5 +297,9 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
 | `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
 | `.pf-m-notify` | `.pf-v6-c-button` | Indicates that the button should show the user notification of an event. **Note:** This is intended for use with a bell icon in the notification badge. |
-| `.pf-m-favorite` | `.pf-v6-c-button .pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
-| `.pf-m-favorited` | `.pf-v6-c-button .pf-m-plain .pf-m-favorite` | Modifies a favorite button to indicate that item is favorited.  |
\ No newline at end of file
+| `.pf-m-favorite` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
+| `.pf-m-favorited` | `.pf-v6-c-button.pf-m-plain.pf-m-favorite` | Modifies a favorite button to indicate that item is favorited. |
+| `.pf-m-settings` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a settings button. |
+| `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
+| `.pf-m-expanded` | `.pf-v6-c-button.pf-m-plain.pf-m-expanded` | Modifies a hamburger button to indicate that it will expand a menu. |
+| `.pf-m-collapsed` | `.pf-v6-c-button.pf-m-plain.pf-m-collapsed` | Modifies a hamburger button to indicate that it will collapse a menu. |
diff --git a/src/patternfly/components/Button/hamburger-icon.hbs b/src/patternfly/components/Button/hamburger-icon.hbs
new file mode 100644
index 0000000000..198a14604e
--- /dev/null
+++ b/src/patternfly/components/Button/hamburger-icon.hbs
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 10 10" class="{{pfv}}button--hamburger-icon {{pfv "unset-prefix"}}svg" width="1em" height="1em">
+  <path class="{{pfv}}button--hamburger-icon--top" d="M1,1 L9,1"/>
+  <path class="{{pfv}}button--hamburger-icon--middle" d="M1,5 L9,5"/>
+  <path class="{{pfv}}button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5"/>
+  <path class="{{pfv}}button--hamburger-icon--bottom" d="M9,9 L1,9"/>
+</svg>
diff --git a/src/patternfly/components/Masthead/masthead-toggle.hbs b/src/patternfly/components/Masthead/masthead-toggle.hbs
index 53c69b856d..575ca1b874 100644
--- a/src/patternfly/components/Masthead/masthead-toggle.hbs
+++ b/src/patternfly/components/Masthead/masthead-toggle.hbs
@@ -5,6 +5,6 @@
   {{#if @partial-block}}
     {{> @partial-block}}
   {{else}}
-    {{> button button--IsPlain=true button--icon="bars" button--IsIcon=true button--aria-label="Global navigation"}}
+    {{> button button--IsHamburger=true button--IsPlain=true button--IsIcon=true button--aria-label="Global navigation"}}
   {{/if}}
 </span>
diff --git a/src/patternfly/components/Masthead/masthead.scss b/src/patternfly/components/Masthead/masthead.scss
index a506af4545..6f0a477cb0 100644
--- a/src/patternfly/components/Masthead/masthead.scss
+++ b/src/patternfly/components/Masthead/masthead.scss
@@ -217,11 +217,6 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
  }
 }
 
-// - Masthead toggle
-.#{$masthead}__toggle {
-  --#{$button}--FontSize: var(--#{$masthead}__toggle--Size);
-}
-
 // - Masthead expandable content
 .#{$masthead}__expandable-content {
   row-gap: var(--#{$masthead}__expandable-content-RowGap, var(--#{$masthead}--RowGap));
diff --git a/src/patternfly/components/MenuToggle/menu-toggle-icon.hbs b/src/patternfly/components/MenuToggle/menu-toggle-icon.hbs
index 5e2ccc4bea..400b54be54 100644
--- a/src/patternfly/components/MenuToggle/menu-toggle-icon.hbs
+++ b/src/patternfly/components/MenuToggle/menu-toggle-icon.hbs
@@ -5,7 +5,10 @@
   {{#if menu-toggle-icon--attribute}}
     {{{menu-toggle-icon--attribute}}}
   {{/if}}>
-  {{#if menu-toggle--icon}}
+  {{#if menu-toggle--icon-template}}
+    {{! renders a hbs partial if passed as the value for menu-toggle--icon-template}}
+    {{> (lookup . "menu-toggle--icon-template")}}
+  {{else if menu-toggle--icon}}
     <i class="fas fa-{{menu-toggle--icon}}" aria-hidden="true"></i>
   {{else if @partial-block}}
     {{> @partial-block}}
diff --git a/src/patternfly/components/MenuToggle/menu-toggle.hbs b/src/patternfly/components/MenuToggle/menu-toggle.hbs
index 82e32a2924..01f67d8778 100644
--- a/src/patternfly/components/MenuToggle/menu-toggle.hbs
+++ b/src/patternfly/components/MenuToggle/menu-toggle.hbs
@@ -75,9 +75,9 @@
         check--IsStandalone=true
       }}
   {{/if}}
-  {{#if menu-toggle--icon}}
+  {{#ifAny menu-toggle--icon menu-toggle--icon-template}}
     {{> menu-toggle-icon}}
-  {{/if}}
+  {{/ifAny}}
   {{#if menu-toggle--text}}
     {{> menu-toggle-text}}
   {{/if}}
diff --git a/src/patternfly/components/Page/page.scss b/src/patternfly/components/Page/page.scss
index 21df240a38..c9feb09eaa 100644
--- a/src/patternfly/components/Page/page.scss
+++ b/src/patternfly/components/Page/page.scss
@@ -149,8 +149,37 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
       "header header"
       "sidebar main";
     grid-template-columns: var(--#{$page}__sidebar--Width) 1fr;
+  }
+
+  // Hamburger menu animation
+  // mobile - show expand on hover
+  > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
+    @include pf-v6-hamburger;
+  }
+
+  // mobile - show collapse when sidebar expanded
+  &:where(:has(> .#{$page}__sidebar.pf-m-expanded)) > .#{$masthead} .#{$masthead}__toggle :is(.#{$button}.pf-m-hamburger, .#{$button}.pf-m-hamburger:hover, .#{$button}.pf-m-hamburger:focus-visible) {
+    @include pf-v6-hamburger($collapse: true);
+  }
+
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
+    // desktop - disable default arrow
+    > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger,
+    &:where(:has(> .#{$page}__sidebar.pf-m-expanded)) > .#{$masthead} .#{$masthead}__toggle :is(.#{$button}.pf-m-hamburger, .#{$button}.pf-m-hamburger:hover, .#{$button}.pf-m-hamburger:focus-visible) {
+      @include pf-v6-hamburger($reset: true);
+    }
+
+    // desktop - show collapse on hover
+    > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
+      @include pf-v6-hamburger($collapse: true);
+    }
+
+    // desktop - show expand on hover when sidebar collapsed
+    &:where(:has(> .#{$page}__sidebar.pf-m-collapsed)) > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
+      @include pf-v6-hamburger;
     }
   }
+}
 
 // Header
 .#{$page} > .#{$masthead} {
diff --git a/src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs b/src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs
index 5af83e91a3..9504d72569 100644
--- a/src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs
+++ b/src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs
@@ -9,7 +9,7 @@
       {{> masthead-template-application-launcher app-launcher--id=(concat toolbar-group--id '-app-launcher')}}
     {{/toolbar-item}}
     {{#> toolbar-item}}
-      {{> menu-toggle menu-toggle--IsPlain="true" menu-toggle--attribute='aria-label="Settings"' menu-toggle--icon="cog"}}
+      {{> button button--IsSettings=true}}
     {{/toolbar-item}}
     {{#> toolbar-item}}
       {{> menu-toggle menu-toggle--IsPlain="true" menu-toggle--attribute='aria-label="Help"' menu-toggle--icon="question-circle"}}
diff --git a/src/patternfly/sass-utilities/mixins.scss b/src/patternfly/sass-utilities/mixins.scss
index 95f0aac160..5166b57172 100644
--- a/src/patternfly/sass-utilities/mixins.scss
+++ b/src/patternfly/sass-utilities/mixins.scss
@@ -1,6 +1,7 @@
 @use '../sass-utilities/functions' as *;
 @use '../sass-utilities/init' as *;
 @use '../sass-utilities/scss-variables' as *;
+@use '../sass-utilities/namespaces-components' as *;
 
 // Media query used to create responsive classes
 @mixin pf-v6-media-query($point) {
@@ -410,6 +411,7 @@
   scale: -1 1;
 }
 
+
 @mixin pf-v6-mirror-inline-on-rtl {
   @include pf-v6-rtl {
     @include pf-v6-mirror-inline;
@@ -427,3 +429,36 @@
     @content
   }
 }
+
+// Sets hamburger styles. Defaults to expand styles (right arrow)
+// $collapse - if true, changes to left arrow
+// $reset - will reset the bars to the default (no arrow)
+@mixin pf-v6-hamburger($collapse: false, $reset: false) {
+  @if $reset {
+    --#{$button}--hamburger-icon--top--path: var(--#{$button}--hamburger-icon--top--path--base);
+    --#{$button}--hamburger-icon--arrow--path: var(--#{$button}--hamburger-icon--arrow--path--base);
+    --#{$button}--hamburger-icon--bottom--path: var(--#{$button}--hamburger-icon--bottom--path--base);
+    --#{$button}__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+    --#{$button}--hover__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
+  } @else {
+    // set direction vars
+    --#{$button}--hamburger-icon--top--path: var(--#{$button}--hamburger-icon--top--collapse--path);
+    --#{$button}--hamburger-icon--arrow--path: var(--#{$button}--hamburger-icon--arrow--collapse--path);
+    --#{$button}--hamburger-icon--bottom--path: var(--#{$button}--hamburger-icon--bottom--collapse--path);
+
+    // collapse
+    @if $collapse {
+      --#{$button}__icon--TransitionDelay: 0s;
+      --#{$button}__icon--Scale: 1;
+      --#{$button}--hover__icon--TransitionDelay: 0s;
+      --#{$button}--hover__icon--Scale: 1;
+
+    // expand
+    } @else {
+      --#{$button}__icon--TransitionDelay: 0s;
+      --#{$button}__icon--Scale: var(--#{$button}--m-hamburger__icon--m-expand--Scale);
+      --#{$button}--hover__icon--TransitionDelay: 0s;
+      --#{$button}--hover__icon--Scale: var(--#{$button}--m-hamburger__icon--m-expand--Scale);
+    }
+  }
+}

From 458d7772c78cf1d75d71eb88118ae52476abd15c Mon Sep 17 00:00:00 2001
From: mcoker <mcoker@redhat.com>
Date: Tue, 3 Jun 2025 20:14:47 -0500
Subject: [PATCH 2/4] feat(menu-toggle): add settings

---
 src/patternfly/components/Button/button.scss  |  8 +--
 .../components/Button/examples/Button.md      |  6 +--
 .../MenuToggle/examples/MenuToggle.md         |  9 ++++
 .../components/MenuToggle/menu-toggle.hbs     | 51 ++++++-------------
 .../components/MenuToggle/menu-toggle.scss    | 33 ++++++++++++
 5 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/src/patternfly/components/Button/button.scss b/src/patternfly/components/Button/button.scss
index eaefcdb663..c5cb6710cd 100644
--- a/src/patternfly/components/Button/button.scss
+++ b/src/patternfly/components/Button/button.scss
@@ -901,19 +901,19 @@
 }
 
 .#{$button}--hamburger-icon--top {
-  d: var(--#{$button}--hamburger-icon--top--path, var(--#{$button}--hamburger-icon--top--direction--path));
+  d: var(--#{$button}--hamburger-icon--top--path);
 }
 
 .#{$button}--hamburger-icon--middle {
-  d: var(--#{$button}--hamburger-icon--middle--path, var(--#{$button}--hamburger-icon--middle--direction--path));
+  d: var(--#{$button}--hamburger-icon--middle--path);
 }
 
 .#{$button}--hamburger-icon--arrow {
-  d: var(--#{$button}--hamburger-icon--arrow--path, var(--#{$button}--hamburger-icon--arrow--direction--path));
+  d: var(--#{$button}--hamburger-icon--arrow--path);
 }
 
 .#{$button}--hamburger-icon--bottom {
-  d: var(--#{$button}--hamburger-icon--bottom--path, var(--#{$button}--hamburger-icon--bottom--direction--path));
+  d: var(--#{$button}--hamburger-icon--bottom--path);
 }
 
 @keyframes #{$button}-icon-notify {
diff --git a/src/patternfly/components/Button/examples/Button.md b/src/patternfly/components/Button/examples/Button.md
index f5c6022faa..9ed8abe0fd 100644
--- a/src/patternfly/components/Button/examples/Button.md
+++ b/src/patternfly/components/Button/examples/Button.md
@@ -274,7 +274,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-v6-c-button` | `<button>, <span>` |  Initiates a button. Always use it with a modifier class. **Required** |
 | `.pf-v6-c-button__icon` | `<span>` | Initiates a button icon. |
 | `.pf-v6-c-button__progress` | `<span>` | Initiates a button progress container. |
-| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
+| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons. |
 | `.pf-m-primary` | `.pf-v6-c-button` | Modifies for primary styles. |
 | `.pf-m-secondary` | `.pf-v6-c-button` | Modifies for secondary styles. |
 | `.pf-m-tertiary` | `.pf-v6-c-button` | Modifies for tertiary styles. |
@@ -301,5 +301,5 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-favorited` | `.pf-v6-c-button.pf-m-plain.pf-m-favorite` | Modifies a favorite button to indicate that item is favorited. |
 | `.pf-m-settings` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a settings button. |
 | `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
-| `.pf-m-expanded` | `.pf-v6-c-button.pf-m-plain.pf-m-expanded` | Modifies a hamburger button to indicate that it will expand a menu. |
-| `.pf-m-collapsed` | `.pf-v6-c-button.pf-m-plain.pf-m-collapsed` | Modifies a hamburger button to indicate that it will collapse a menu. |
+| `.pf-m-expanded` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
+| `.pf-m-collapsed` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |
diff --git a/src/patternfly/components/MenuToggle/examples/MenuToggle.md b/src/patternfly/components/MenuToggle/examples/MenuToggle.md
index ea0b20257f..ce21ed0e5c 100644
--- a/src/patternfly/components/MenuToggle/examples/MenuToggle.md
+++ b/src/patternfly/components/MenuToggle/examples/MenuToggle.md
@@ -999,6 +999,15 @@ Shown with default, primary, and secondary styling
 {{/menu-toggle}}
 ```
 
+### Settings
+```hbs
+{{> menu-toggle menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog"}}
+
+{{> menu-toggle menu-toggle--IsExpanded="true" menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog"}}
+
+{{> menu-toggle menu-toggle--IsDisabled="true" menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog"}}
+```
+
 ## Documentation
 
 ### Accessibility
diff --git a/src/patternfly/components/MenuToggle/menu-toggle.hbs b/src/patternfly/components/MenuToggle/menu-toggle.hbs
index 01f67d8778..cc39a8008a 100644
--- a/src/patternfly/components/MenuToggle/menu-toggle.hbs
+++ b/src/patternfly/components/MenuToggle/menu-toggle.hbs
@@ -1,25 +1,19 @@
 <{{#ifAny menu-toggle--IsDiv menu-toggle--IsSplitButton}}div{{else}}button{{/ifAny}} class="{{pfv}}menu-toggle
-  {{#if menu-toggle--IsPrimary}}
-    pf-m-primary
-  {{/if}}
-  {{#if menu-toggle--IsSecondary}}
-    pf-m-secondary
-  {{/if}}
-  {{#if menu-toggle--IsPlain}}
-    pf-m-plain
-  {{/if}}
-  {{#if menu-toggle--IsSmall}}
-    pf-m-small
-  {{/if}}
-  {{#if menu-toggle--IsText}}
-    pf-m-text
-  {{/if}}
-  {{#if menu-toggle--IsExpanded}}
-    pf-m-expanded
-  {{/if}}
-  {{#if menu-toggle--IsTypeahead}}
-    pf-m-typeahead
-  {{/if}}
+  {{setModifiers
+    menu-toggle--IsPrimary='pf-m-primary'
+    menu-toggle--IsSecondary='pf-m-secondary'
+    menu-toggle--IsPlain='pf-m-plain'
+    menu-toggle--IsSmall='pf-m-small'
+    menu-toggle--IsText='pf-m-text'
+    menu-toggle--IsExpanded='pf-m-expanded'
+    menu-toggle--IsTypeahead='pf-m-typeahead'
+    menu-toggle--IsSuccess='pf-m-success'
+    menu-toggle--IsWarning='pf-m-warning'
+    menu-toggle--IsDanger='pf-m-danger'
+    menu-toggle--IsPlaceholder='pf-m-placeholder'
+    menu-toggle--IsSettings='pf-m-settings'
+    menu-toggle--modifier=menu-toggle--modifier
+  }}
   {{#unless menu-toggle--IsSplitButton}}
     {{#if menu-toggle--IsDisabled}}
       pf-m-disabled
@@ -30,20 +24,7 @@
     {{#if menu-toggle--IsDisabled}}
       pf-m-disabled
     {{/if}}
-  {{/if}}
-  {{#if menu-toggle--IsSuccess}}
-    pf-m-success
-  {{/if}}
-  {{#if menu-toggle--IsWarning}}
-    pf-m-warning
-  {{/if}}
-  {{#if menu-toggle--IsDanger}}
-    pf-m-danger
-  {{/if}}
-  {{#if menu-toggle--IsPlaceholder}}
-    pf-m-placeholder
-  {{/if}}
-  {{#if menu-toggle--modifier}} {{menu-toggle--modifier}}{{/if}}"
+  {{/if}}"
   {{#unless (concat menu-toggle--IsDiv menu-toggle--IsSplitButton)}}
     type="button"
     {{#if menu-toggle--IsExpanded}}
diff --git a/src/patternfly/components/MenuToggle/menu-toggle.scss b/src/patternfly/components/MenuToggle/menu-toggle.scss
index c35c995299..d584c2c934 100644
--- a/src/patternfly/components/MenuToggle/menu-toggle.scss
+++ b/src/patternfly/components/MenuToggle/menu-toggle.scss
@@ -43,6 +43,14 @@
   // * Menu toggle icon
   --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight));
   --#{$menu-toggle}__icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$menu-toggle}__icon--TransitionDelay: 0s;
+  --#{$menu-toggle}__icon--TransitionDuration: 0s;
+  --#{$menu-toggle}__icon--TransitionProperty: none;
+  --#{$menu-toggle}--hover__icon--TransitionDelay: 0s;
+  --#{$menu-toggle}--hover__icon--TransitionDuration: 0s;
+  --#{$menu-toggle}--hover__icon--TransitionProperty: none;
+  --#{$menu-toggle}__icon--Rotate: 0deg;
+  --#{$menu-toggle}--hover__icon--Rotate: 0deg;
 
   // * Menu toggle toggle icon
   --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight));
@@ -174,6 +182,13 @@
 
   // Controls
   --#{$menu-toggle}__controls--Gap: var(--pf-t--global--spacer--sm);
+
+  // Settings
+  --#{$menu-toggle}--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$menu-toggle}--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --#{$menu-toggle}--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$menu-toggle}--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --#{$menu-toggle}--m-settings--hover__icon--Rotate: 60deg;
 }
 
 .#{$menu-toggle} {
@@ -299,6 +314,10 @@
     --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--hover--BorderWidth);
     --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--hover--BorderColor);
     --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--hover__toggle-icon--Color);
+    --#{$menu-toggle}__icon--TransitionDelay: var(--#{$menu-toggle}--hover__icon--TransitionDelay);
+    --#{$menu-toggle}__icon--TransitionDuration: var(--#{$menu-toggle}--hover__icon--TransitionDuration);
+    --#{$menu-toggle}__icon--TransitionProperty: var(--#{$menu-toggle}--hover__icon--TransitionProperty);
+    --#{$menu-toggle}__icon--Rotate: var(--#{$menu-toggle}--hover__icon--Rotate);
   }
 
   &:is(.pf-m-expanded, [aria-expanded="true"]) {
@@ -369,6 +388,16 @@
     }
   }
 
+  &.pf-m-settings {
+    --#{$menu-toggle}__icon--TransitionProperty: rotate;
+    --#{$menu-toggle}__icon--TransitionDuration: var(--#{$menu-toggle}--m-settings__icon--TransitionDuration);
+    --#{$menu-toggle}__icon--TransitionTimingFunction: var(--#{$menu-toggle}--m-settings__icon--TransitionTimingFunction);
+    --#{$menu-toggle}--hover__icon--TransitionProperty: rotate;
+    --#{$menu-toggle}--hover__icon--TransitionDuration: var(--#{$menu-toggle}--m-settings--hover__icon--TransitionDuration);
+    --#{$menu-toggle}--hover__icon--TransitionTimingFunction: var(--#{$menu-toggle}--m-settings--hover__icon--TransitionTimingFunction);
+    --#{$menu-toggle}--hover__icon--Rotate: var(--#{$menu-toggle}--m-settings--hover__icon--Rotate);
+  }
+
   &.pf-m-placeholder {
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-placeholder--Color);
   }
@@ -574,6 +603,10 @@
 
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
+  transition-delay: var(--#{$menu-toggle}__icon--TransitionDelay);
+  transition-duration: var(--#{$menu-toggle}__icon--TransitionDuration);
+  transition-property: var(--#{$menu-toggle}__icon--TransitionProperty);
+  rotate: var(--#{$menu-toggle}__icon--Rotate);
   
   @at-root .#{$menu-toggle}:not(.pf-m-plain) & {
     @extend %pf-v6-menu-toggle__icon--MarginBlock;

From 5a96f957d6f3c3c9b0aee992d05515eb5bc3d92a Mon Sep 17 00:00:00 2001
From: mcoker <mcoker@redhat.com>
Date: Tue, 3 Jun 2025 20:30:02 -0500
Subject: [PATCH 3/4] chore(menu-toggle): docs, add back removed style

---
 src/patternfly/components/Button/examples/Button.md         | 4 ++--
 src/patternfly/components/Masthead/masthead.scss            | 5 +++++
 src/patternfly/components/MenuToggle/examples/MenuToggle.md | 6 +++---
 src/patternfly/components/MenuToggle/menu-toggle-icon.hbs   | 5 +----
 src/patternfly/components/MenuToggle/menu-toggle.hbs        | 2 +-
 .../demos/Masthead/masthead-template-content-icon-group.hbs | 2 +-
 6 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/patternfly/components/Button/examples/Button.md b/src/patternfly/components/Button/examples/Button.md
index 9ed8abe0fd..185177968c 100644
--- a/src/patternfly/components/Button/examples/Button.md
+++ b/src/patternfly/components/Button/examples/Button.md
@@ -301,5 +301,5 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-favorited` | `.pf-v6-c-button.pf-m-plain.pf-m-favorite` | Modifies a favorite button to indicate that item is favorited. |
 | `.pf-m-settings` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a settings button. |
 | `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
-| `.pf-m-expanded` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
-| `.pf-m-collapsed` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |
+| `.pf-m-expand` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
+| `.pf-m-collapse` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |
diff --git a/src/patternfly/components/Masthead/masthead.scss b/src/patternfly/components/Masthead/masthead.scss
index 6f0a477cb0..a506af4545 100644
--- a/src/patternfly/components/Masthead/masthead.scss
+++ b/src/patternfly/components/Masthead/masthead.scss
@@ -217,6 +217,11 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
  }
 }
 
+// - Masthead toggle
+.#{$masthead}__toggle {
+  --#{$button}--FontSize: var(--#{$masthead}__toggle--Size);
+}
+
 // - Masthead expandable content
 .#{$masthead}__expandable-content {
   row-gap: var(--#{$masthead}__expandable-content-RowGap, var(--#{$masthead}--RowGap));
diff --git a/src/patternfly/components/MenuToggle/examples/MenuToggle.md b/src/patternfly/components/MenuToggle/examples/MenuToggle.md
index ce21ed0e5c..9f46205500 100644
--- a/src/patternfly/components/MenuToggle/examples/MenuToggle.md
+++ b/src/patternfly/components/MenuToggle/examples/MenuToggle.md
@@ -1001,11 +1001,11 @@ Shown with default, primary, and secondary styling
 
 ### Settings
 ```hbs
-{{> menu-toggle menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog"}}
+{{> menu-toggle menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog" menu-toggle--aria-label="Settings"}}
 
-{{> menu-toggle menu-toggle--IsExpanded="true" menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog"}}
+{{> menu-toggle menu-toggle--IsExpanded="true" menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog" menu-toggle--aria-label="Settings"}}
 
-{{> menu-toggle menu-toggle--IsDisabled="true" menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog"}}
+{{> menu-toggle menu-toggle--IsDisabled="true" menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog" menu-toggle--aria-label="Settings"}}
 ```
 
 ## Documentation
diff --git a/src/patternfly/components/MenuToggle/menu-toggle-icon.hbs b/src/patternfly/components/MenuToggle/menu-toggle-icon.hbs
index 400b54be54..5e2ccc4bea 100644
--- a/src/patternfly/components/MenuToggle/menu-toggle-icon.hbs
+++ b/src/patternfly/components/MenuToggle/menu-toggle-icon.hbs
@@ -5,10 +5,7 @@
   {{#if menu-toggle-icon--attribute}}
     {{{menu-toggle-icon--attribute}}}
   {{/if}}>
-  {{#if menu-toggle--icon-template}}
-    {{! renders a hbs partial if passed as the value for menu-toggle--icon-template}}
-    {{> (lookup . "menu-toggle--icon-template")}}
-  {{else if menu-toggle--icon}}
+  {{#if menu-toggle--icon}}
     <i class="fas fa-{{menu-toggle--icon}}" aria-hidden="true"></i>
   {{else if @partial-block}}
     {{> @partial-block}}
diff --git a/src/patternfly/components/MenuToggle/menu-toggle.hbs b/src/patternfly/components/MenuToggle/menu-toggle.hbs
index cc39a8008a..2d87e098a3 100644
--- a/src/patternfly/components/MenuToggle/menu-toggle.hbs
+++ b/src/patternfly/components/MenuToggle/menu-toggle.hbs
@@ -39,7 +39,7 @@
 
   {{#if menu-toggle--IsPlain}}
     {{#unless menu-toggle--text}}
-      aria-label='Menu toggle'
+      aria-label="{{ternary menu-toggle--aria-label menu-toggle--aria-label "Menu toggle"}}"
     {{/unless}}
   {{/if}}
 
diff --git a/src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs b/src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs
index 9504d72569..2d21256e0d 100644
--- a/src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs
+++ b/src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs
@@ -9,7 +9,7 @@
       {{> masthead-template-application-launcher app-launcher--id=(concat toolbar-group--id '-app-launcher')}}
     {{/toolbar-item}}
     {{#> toolbar-item}}
-      {{> button button--IsSettings=true}}
+      {{> menu-toggle menu-toggle--IsPlain=true menu-toggle--IsSettings=true menu-toggle--icon="cog" menu-toggle--aria-label="Settings"}}
     {{/toolbar-item}}
     {{#> toolbar-item}}
       {{> menu-toggle menu-toggle--IsPlain="true" menu-toggle--attribute='aria-label="Help"' menu-toggle--icon="question-circle"}}

From 4b5e9b1c200b8a07cd81528b860a0e60f33f0300 Mon Sep 17 00:00:00 2001
From: mcoker <mcoker@redhat.com>
Date: Wed, 4 Jun 2025 09:19:59 -0500
Subject: [PATCH 4/4] chore(button): remove hardcoded classes

---
 src/patternfly/components/Button/button.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/patternfly/components/Button/button.scss b/src/patternfly/components/Button/button.scss
index c5cb6710cd..06603ef048 100644
--- a/src/patternfly/components/Button/button.scss
+++ b/src/patternfly/components/Button/button.scss
@@ -697,9 +697,9 @@
   // Favorite button when favorited
   &.pf-m-favorited {
     --#{$button}__icon--Color: var(--#{$button}--m-favorited__icon--Color);
-    --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-favorited__icon--Color);
+    --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-favorited__icon--Color);
     --#{$button}--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
-    --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
+    --#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
     --#{$button}__icon--favorite--Opacity: var(--#{$button}--m-favorited__icon--favorite--Opacity);
     --#{$button}__icon--favorited--Opacity: var(--#{$button}--m-favorited__icon--favorited--Opacity);
   }