feat: v0 menu style migration from v9 (microsoft#25012)

* Add 4px border radius when hovering on menu item * Add 4px padding right and left to the menu * Add subMenuIconColor to menu variables * Add color to icons when hovering on menuItem * Add changelog entry * Change icon color when hovering only for Teams theme * Unchanged color in dark and high contrast themes * Use a token for the icon color * Removed check not needed * Removed useless check * Importing menuItemIconClassName * Empty-Commit Co-authored-by: Enrico <[email protected]>
Hotell · Feb 9, 2023 · c24db06 · c24db06
1 parent 79660cb
commit c24db06
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 1 deletion.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add a new comfy layout variation for `ChatMessage` @davezuko ([#23974](https://github.com/microsoft/fluentui/pull/23974))
 - Add `FocusTrapZone` prop `preventScrollOnRestoreFocus` to prevent scroll on focus when `FocusTrapZone` releases @yuanboxue-amber ([#24632](https://github.com/microsoft/fluentui/pull/24632))
 - Add new style to v0 Tooltip to match v9 Tooltip @GianoglioEnrico ([#24908](https://github.com/microsoft/fluentui/pull/24908))
+- Restyling v0 Menu to match v9 Menu @GianoglioEnrico ([#25012](https://github.com/microsoft/fluentui/pull/25012))
 - Limit keyboard detection in inputs @jurokapsiar ([#25087](https://github.com/microsoft/fluentui/pull/25087))
 - Dropdown Freeform search should be case insensitive @jurokapsiar ([#24879](https://github.com/microsoft/fluentui/pull/24879))
 - Update styles to v0 Loader to match v9 Spinner @GianoglioEnrico ([#25169](https://github.com/microsoft/fluentui/pull/25169))

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemStyles.ts
@@ -6,6 +6,7 @@ import { getColorScheme } from '../../colors';
 import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
 import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles';
 import { getBorderFocusStyles } from '../../getBorderFocusStyles';
+import { menuItemIconClassName } from '../../../../components/Menu/MenuItemIcon';
 
 export const verticalPillsBottomMargin = pxToRem(5);
 export const horizontalPillsRightMargin = pxToRem(8);
@@ -201,6 +202,14 @@ export const menuItemStyles: ComponentSlotStylesPrepared<MenuItemStylesProps, Me
 
         ...(underlined && { color: v.underlinedColorHover }),
 
+        ...(!disabled &&
+          !primary &&
+          vertical && {
+            [`&>.${menuItemIconClassName}`]: {
+              color: v.subMenuIconColor,
+              ...getIconFillOrOutlineStyles({ outline: false }),
+            },
+          }),
         ...(!disabled && {
           ...(iconOnly && getIconFillOrOutlineStyles({ outline: false })),
           ...(primary

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuItemWrapperStyles.ts
@@ -171,6 +171,7 @@ export const menuItemWrapperStyles: ComponentSlotStylesPrepared<MenuItemWrapperS
         ...(vertical && {
           color: v.wrapperColorHover,
           background: v.backgroundColorHover || colors.backgroundHover,
+          borderRadius: pxToRem(4),
         }),
 
         ...(primary && {

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuStyles.ts
@@ -23,7 +23,7 @@ export const menuStyles: ComponentSlotStylesPrepared<MenuStylesProps, MenuVariab
       ...(vertical && {
         flexDirection: 'column',
         backgroundColor: v.verticalBackgroundColor,
-        padding: `${pxToRem(8)} 0`,
+        padding: `${pxToRem(8)} ${pxToRem(4)}`,
         ...(submenu && {
           boxShadow: v.verticalBoxShadow,
         }),

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Menu/menuVariables.ts
@@ -97,6 +97,7 @@ export interface MenuVariables {
   indicatorColorHover: string;
 
   subMenuBorderColor: string;
+  subMenuIconColor: string;
 }
 
 export const menuVariables = (siteVars: any): MenuVariables => {
@@ -203,5 +204,6 @@ export const menuVariables = (siteVars: any): MenuVariables => {
     indicatorColorHover: siteVars.colors.grey[500],
 
     subMenuBorderColor: siteVars.colorScheme.default.borderTransparent,
+    subMenuIconColor: siteVars.colorScheme.brand.foregroundHover,
   };
 };