From fea71db22435157b2308d0f07188ba1b853473df Mon Sep 17 00:00:00 2001
From: Abdul Rehman <mehars.6925@gmail.com>
Date: Thu, 20 Jul 2023 01:09:58 +0500
Subject: [PATCH 1/4] #28576: [Bug]: Small <Button> is using 3px border radius

---
 .../src/components/Button/useButtonStyles.styles.ts            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 d57a6783b323e0..b6c497fa9765fb 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
@@ -13,6 +13,7 @@ export const buttonClassNames: SlotClassNames<ButtonSlots> = {
 const iconSpacingVar = '--fui-Button__icon--spacing';
 
 const buttonSpacingSmall = '3px';
+const buttonBorderRadiusSmall = '4px';
 const buttonSpacingSmallWithIcon = '1px';
 const buttonSpacingMedium = '5px';
 const buttonSpacingLarge = '8px';
@@ -243,7 +244,7 @@ const useRootStyles = makeStyles({
     minWidth: '64px',
     ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),
 
-    ...shorthands.borderRadius(buttonSpacingSmall),
+    ...shorthands.borderRadius(buttonBorderRadiusSmall),
 
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,

From e26e7121595b07d18d610ee39a3259ae899434bd Mon Sep 17 00:00:00 2001
From: Abdul Rehman <mehars.6925@gmail.com>
Date: Thu, 20 Jul 2023 01:10:47 +0500
Subject: [PATCH 2/4] run yarn change

---
 ...-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json

diff --git a/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json b/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json
new file mode 100644
index 00000000000000..7a07e2e6a9376c
--- /dev/null
+++ b/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "#28576: [Bug]: Small <Button> is using 3px border radius",
+  "packageName": "@fluentui/react-button",
+  "email": "mehars.6925@gmail.com",
+  "dependentChangeType": "patch"
+}

From 78bf80f441b242193ac4c520cb0707c46207c438 Mon Sep 17 00:00:00 2001
From: Abdul Rehman <mehars.6925@gmail.com>
Date: Fri, 21 Jul 2023 10:01:41 +0500
Subject: [PATCH 3/4] updated the code to use token for border-radius

---
 .../src/components/Button/useButtonStyles.styles.ts            | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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 b6c497fa9765fb..29e487b0288285 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
@@ -13,7 +13,6 @@ export const buttonClassNames: SlotClassNames<ButtonSlots> = {
 const iconSpacingVar = '--fui-Button__icon--spacing';
 
 const buttonSpacingSmall = '3px';
-const buttonBorderRadiusSmall = '4px';
 const buttonSpacingSmallWithIcon = '1px';
 const buttonSpacingMedium = '5px';
 const buttonSpacingLarge = '8px';
@@ -244,7 +243,7 @@ const useRootStyles = makeStyles({
     minWidth: '64px',
     ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),
 
-    ...shorthands.borderRadius(buttonBorderRadiusSmall),
+    ...shorthands.borderRadius(tokens.borderRadiusMedium),
 
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,

From 915e377f57acb507f36af92e4bd9a624c0599e41 Mon Sep 17 00:00:00 2001
From: Abdul Rehman <mehars.6925@gmail.com>
Date: Fri, 25 Aug 2023 04:47:55 +0500
Subject: [PATCH 4/4] updated the comment as per @sopranopillow's suggestion

---
 ...entui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json b/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json
index 7a07e2e6a9376c..7a572d97670d1b 100644
--- a/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json
+++ b/change/@fluentui-react-button-a033d25e-6861-40b4-a52e-eb4632568acb.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "#28576: [Bug]: Small <Button> is using 3px border radius",
+  "comment": "fix: Small Button now uses token for its border radius",
   "packageName": "@fluentui/react-button",
   "email": "mehars.6925@gmail.com",
   "dependentChangeType": "patch"