feat: v0 menu style migration from v9

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))

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

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 && {

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,
         }),

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,
   };
 };