From 0c353b1f533f5301cd66680c964e1f48272ff176 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 7 Jun 2023 10:41:37 +0200
Subject: [PATCH 1/2] fix: Reduce MenuItem padding to fit design spec

There should be 12px spacing between the start of a MenuItem content and
the MenuPopover. Currently there is 17px. This is caused by:

- 1px transparent border for high contrast mode - This renders before
  the box-shadow making the MenuPopvoer 'wider'
- incorrect 10px padding on the MenuItem

This PR:

- Changes the MenuItem padding to 6px
- Changes the MenuPopover padding to 3px to account for the 1px
  transparent border.

The MenuItem `content` slot has a padding of 2px to align with the v9
icon 2px bounding box. 2px + 6px + 3px + 1px = 12px
---
 .../src/components/MenuItem/useMenuItemStyles.styles.ts       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index c81f1d88f38a57..13617ddad98703 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
+++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -24,8 +24,8 @@ const useStyles = makeStyles({
     position: 'relative',
     color: tokens.colorNeutralForeground2,
     backgroundColor: tokens.colorNeutralBackground1,
-    paddingRight: '10px',
-    paddingLeft: '10px',
+    paddingRight: '6px',
+    paddingLeft: '6px',
     height: '32px',
     display: 'flex',
     alignItems: 'center',

From cd924e5861a865373c3a9829b09563af0274298f Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Wed, 7 Jun 2023 10:53:53 +0200
Subject: [PATCH 2/2] changefiole

---
 ...ui-react-menu-aef37040-8637-4913-8689-7e7ffd018b46.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-menu-aef37040-8637-4913-8689-7e7ffd018b46.json

diff --git a/change/@fluentui-react-menu-aef37040-8637-4913-8689-7e7ffd018b46.json b/change/@fluentui-react-menu-aef37040-8637-4913-8689-7e7ffd018b46.json
new file mode 100644
index 00000000000000..a3241e263cad71
--- /dev/null
+++ b/change/@fluentui-react-menu-aef37040-8637-4913-8689-7e7ffd018b46.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: MenuItem content should be spaced 12px from the boundary",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}