fix: Using correct colors when MenuItem is pressed (#29951)

* fix: Using correct colors when MenuItem is pressed. * Adding change file.
microsoft · Nov 30, 2023 · 62312d1 · 62312d1
1 parent 16a455f
commit 62312d1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/change/@fluentui-react-menu-95a114de-8688-4d5e-8c26-30da9afd2e00.json b/change/@fluentui-react-menu-95a114de-8688-4d5e-8c26-30da9afd2e00.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Using correct colors when MenuItem is pressed.",
+  "packageName": "@fluentui/react-menu",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -49,6 +49,11 @@ const useRootBaseStyles = makeResetStyles({
     },
   },
 
+  ':hover:active': {
+    backgroundColor: tokens.colorNeutralBackground1Pressed,
+    color: tokens.colorNeutralForeground2Pressed,
+  },
+
   userSelect: 'none',
   ...createFocusOutlineStyle(),
 });