fix: Adding expanded styles for MenuButtons and making various other styling fixes for Button components

change/@fluentui-react-button-e76c5522-3581-4490-bc4c-6f5867a75f33.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Adding expanded styles for MenuButtons and making various other styling fixes for Button components.",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts

@@ -1,7 +1,8 @@
-import { mergeClasses, makeStyles } from '@griffel/react';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
 import { tokens } from '@fluentui/react-theme';
-import { useButtonStyles_unstable } from '../Button/useButtonStyles';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles';
 import type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';
 
 export const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {
@@ -10,6 +11,59 @@ export const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {
   menuIcon: 'fui-MenuButton__menuIcon',
 };
 
+const useRootExpandedStyles = makeStyles({
+  base: {
+    [`& .${iconFilledClassName}`]: {
+      display: 'inline',
+    },
+    [`& .${iconRegularClassName}`]: {
+      display: 'none',
+    },
+  },
+
+  // Appearance variations
+  outline: {
+    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),
+    ...shorthands.borderWidth(tokens.strokeWidthThicker),
+    color: tokens.colorNeutralForeground1Selected,
+  },
+  primary: {
+    backgroundColor: tokens.colorBrandBackgroundSelected,
+  },
+  secondary: {
+    backgroundColor: tokens.colorNeutralBackground1Selected,
+    ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),
+    color: tokens.colorNeutralForeground1Selected,
+  },
+  subtle: {
+    backgroundColor: tokens.colorSubtleBackgroundSelected,
+    color: tokens.colorNeutralForeground2Selected,
+  },
+  transparent: {
+    backgroundColor: tokens.colorTransparentBackgroundSelected,
+    color: tokens.colorNeutralForeground2BrandSelected,
+  },
+});
+
+const useIconExpandedStyles = makeStyles({
+  // Appearance variations
+  outline: {
+    color: tokens.colorNeutralForeground1Selected,
+  },
+  primary: {
+    /* The primary styles are exactly the same as the base styles. */
+  },
+  secondary: {
+    color: tokens.colorNeutralForeground1Selected,
+  },
+  subtle: {
+    color: tokens.colorNeutralForeground2BrandSelected,
+  },
+  transparent: {
+    color: tokens.colorNeutralForeground2BrandSelected,
+  },
+});
+
 const useMenuIconStyles = makeStyles({
   base: {
     lineHeight: 0,
@@ -42,12 +96,23 @@ const useMenuIconStyles = makeStyles({
 });
 
 export const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {
+  const rootExpandedStyles = useRootExpandedStyles();
+  const iconExpandedStyles = useIconExpandedStyles();
   const menuIconStyles = useMenuIconStyles();
 
-  state.root.className = mergeClasses(menuButtonClassNames.root, state.root.className);
+  state.root.className = mergeClasses(
+    menuButtonClassNames.root,
+    state.root['aria-expanded'] && rootExpandedStyles.base,
+    state.root['aria-expanded'] && rootExpandedStyles[state.appearance],
+    state.root.className,
+  );
 
   if (state.icon) {
-    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.icon.className);
+    state.icon.className = mergeClasses(
+      menuButtonClassNames.icon,
+      state.root['aria-expanded'] && iconExpandedStyles[state.appearance],
+      state.icon.className,
+    );
   }
 
   if (state.menuIcon) {

packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts

@@ -12,7 +12,7 @@ export const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {
   icon: 'fui-ToggleButton__icon',
 };
 
-const useCheckedStyles = makeStyles({
+const useRootCheckedStyles = makeStyles({
   // Base styles
   base: {
     backgroundColor: tokens.colorNeutralBackground1Selected,
@@ -74,6 +74,7 @@ const useCheckedStyles = makeStyles({
   // Appearance variations
   outline: {
     backgroundColor: tokens.colorTransparentBackgroundSelected,
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
     ...shorthands.borderWidth(tokens.strokeWidthThicker),
 
     ':hover': {
@@ -144,7 +145,7 @@ const useCheckedStyles = makeStyles({
   },
 });
 
-const useDisabledStyles = makeStyles({
+const useRootDisabledStyles = makeStyles({
   // Base styles
   base: {
     backgroundColor: tokens.colorNeutralBackgroundDisabled,
@@ -214,29 +215,29 @@ const useDisabledStyles = makeStyles({
 
 const useIconCheckedStyles = makeStyles({
   // Appearance variations
-  subtle: {
+  subtleOrTransparent: {
     color: tokens.colorNeutralForeground2BrandSelected,
   },
 });
 
 export const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {
-  const checkedStyles = useCheckedStyles();
-  const disabledStyles = useDisabledStyles();
-  const iconStyles = useIconCheckedStyles();
+  const rootCheckedStyles = useRootCheckedStyles();
+  const rootDisabledStyles = useRootDisabledStyles();
+  const iconCheckedStyles = useIconCheckedStyles();
 
   const { appearance, checked, disabled, disabledFocusable } = state;
 
   state.root.className = mergeClasses(
     toggleButtonClassNames.root,
 
     // Checked styles
-    checked && checkedStyles.base,
-    checked && checkedStyles.highContrast,
-    appearance && checked && checkedStyles[appearance],
+    checked && rootCheckedStyles.base,
+    checked && rootCheckedStyles.highContrast,
+    appearance && checked && rootCheckedStyles[appearance],
 
     // Disabled styles
-    (disabled || disabledFocusable) && disabledStyles.base,
-    appearance && (disabled || disabledFocusable) && disabledStyles[appearance],
+    (disabled || disabledFocusable) && rootDisabledStyles.base,
+    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
 
     // User provided class name
     state.root.className,
@@ -245,7 +246,7 @@ export const useToggleButtonStyles_unstable = (state: ToggleButtonState): Toggle
   if (state.icon) {
     state.icon.className = mergeClasses(
       toggleButtonClassNames.icon,
-      appearance === 'subtle' && checked && iconStyles.subtle,
+      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,
       state.icon.className,
     );
   }

packages/react-components/react-button/stories/MenuButton/MenuButtonAppearance.stories.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { makeStyles, Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const useStyles = makeStyles({
   wrapper: {
@@ -15,7 +18,7 @@ export const Appearance = () => {
     <div className={styles.wrapper}>
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <MenuButton>Default</MenuButton>
+          <MenuButton icon={<CalendarMonthRegular />}>Default</MenuButton>
         </MenuTrigger>
 
         <MenuPopover>
@@ -28,7 +31,9 @@ export const Appearance = () => {
 
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <MenuButton appearance="primary">Primary</MenuButton>
+          <MenuButton appearance="primary" icon={<CalendarMonthRegular />}>
+            Primary
+          </MenuButton>
         </MenuTrigger>
 
         <MenuPopover>
@@ -41,7 +46,9 @@ export const Appearance = () => {
 
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <MenuButton appearance="outline">Outline</MenuButton>
+          <MenuButton appearance="outline" icon={<CalendarMonth />}>
+            Outline
+          </MenuButton>
         </MenuTrigger>
 
         <MenuPopover>
@@ -54,7 +61,9 @@ export const Appearance = () => {
 
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <MenuButton appearance="subtle">Subtle</MenuButton>
+          <MenuButton appearance="subtle" icon={<CalendarMonth />}>
+            Subtle
+          </MenuButton>
         </MenuTrigger>
 
         <MenuPopover>
@@ -67,7 +76,9 @@ export const Appearance = () => {
 
       <Menu>
         <MenuTrigger disableButtonEnhancement>
-          <MenuButton appearance="transparent">Transparent</MenuButton>
+          <MenuButton appearance="transparent" icon={<CalendarMonth />}>
+            Transparent
+          </MenuButton>
         </MenuTrigger>
 
         <MenuPopover>