diff --git a/change/@fluentui-react-button-e76c5522-3581-4490-bc4c-6f5867a75f33.json b/change/@fluentui-react-button-e76c5522-3581-4490-bc4c-6f5867a75f33.json new file mode 100644 index 00000000000000..d973e22842aa4f --- /dev/null +++ b/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": "humberto_makoto@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts index c40a8e257e7ee5..ce8c0866695e3f 100644 --- a/packages/react-components/react-button/src/components/MenuButton/useMenuButtonStyles.ts +++ b/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 = { @@ -10,6 +11,59 @@ export const menuButtonClassNames: SlotClassNames = { 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) { diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts index 6255bff36195e0..0dda2727942592 100644 --- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts +++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts @@ -12,7 +12,7 @@ export const toggleButtonClassNames: SlotClassNames = { 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,15 +215,15 @@ 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; @@ -230,13 +231,13 @@ export const useToggleButtonStyles_unstable = (state: ToggleButtonState): Toggle 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, ); } diff --git a/packages/react-components/react-button/stories/MenuButton/MenuButtonAppearance.stories.tsx b/packages/react-components/react-button/stories/MenuButton/MenuButtonAppearance.stories.tsx index ea464e824bd06c..6f0e63547787c5 100644 --- a/packages/react-components/react-button/stories/MenuButton/MenuButtonAppearance.stories.tsx +++ b/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 = () => {
- Default + }>Default @@ -28,7 +31,9 @@ export const Appearance = () => { - Primary + }> + Primary + @@ -41,7 +46,9 @@ export const Appearance = () => { - Outline + }> + Outline + @@ -54,7 +61,9 @@ export const Appearance = () => { - Subtle + }> + Subtle + @@ -67,7 +76,9 @@ export const Appearance = () => { - Transparent + }> + Transparent +