From e199ac9f0ab18f11b5c3cac00dfbd74b69a4e054 Mon Sep 17 00:00:00 2001
From: Mitch-At-Work <mifraser@microsoft.com>
Date: Tue, 3 Oct 2023 09:43:59 -0700
Subject: [PATCH] Squish changes for rebase

---
 ...ton-200fdd74-ae66-410a-a525-daefec48abaa.json |  7 +++++++
 .../components/Button/useButtonStyles.styles.ts  | 16 ++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)
 create mode 100644 change/@fluentui-react-button-200fdd74-ae66-410a-a525-daefec48abaa.json

diff --git a/change/@fluentui-react-button-200fdd74-ae66-410a-a525-daefec48abaa.json b/change/@fluentui-react-button-200fdd74-ae66-410a-a525-daefec48abaa.json
new file mode 100644
index 0000000000000..c294bf41f06e7
--- /dev/null
+++ b/change/@fluentui-react-button-200fdd74-ae66-410a-a525-daefec48abaa.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix: Button focus borders were extending past bounding box causing overlap, focus border is now inset",
+  "packageName": "@fluentui/react-button",
+  "email": "mifraser@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
index 4947173b3a1c9..18cef1bca3c57 100644
--- a/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
+++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.styles.ts
@@ -95,12 +95,12 @@ const useRootBaseClassName = makeResetStyles({
   // Focus styles
 
   ...createCustomFocusIndicatorStyle({
-    borderColor: tokens.colorTransparentStroke,
+    borderColor: tokens.colorStrokeFocus2,
     borderRadius: tokens.borderRadiusMedium,
+    borderWidth: '1px',
     outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
-    boxShadow: `
-      ${tokens.shadow4},
-      0 0 0 2px ${tokens.colorStrokeFocus2}
+    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2}
+      inset
     `,
     zIndex: 1,
   }),
@@ -445,8 +445,12 @@ const useRootFocusStyles = makeStyles({
 
   // Primary styles
   primary: createCustomFocusIndicatorStyle({
-    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
-    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,
+    ...shorthands.borderColor(tokens.colorStrokeFocus2),
+    boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset,  0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralForegroundOnBrand} inset`,
+    ':hover': {
+      boxShadow: `${tokens.shadow2}, 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorStrokeFocus2} inset`,
+      ...shorthands.borderColor(tokens.colorStrokeFocus2),
+    },
   }),
 
   // Size variations