From 6529c6eee4efbadf9e1b073b00b2360d9e8d1374 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Mar 2022 15:40:41 +0100
Subject: [PATCH 1/4] Fix spacing between Text and caret for ActionMenu.Button

---
 .changeset/actionmenu-button-caret-spacing.md |  5 ++++
 src/ActionMenu.tsx                            | 28 ++++++++++++++-----
 2 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/actionmenu-button-caret-spacing.md

diff --git a/.changeset/actionmenu-button-caret-spacing.md b/.changeset/actionmenu-button-caret-spacing.md
new file mode 100644
index 00000000000..566a642faf4
--- /dev/null
+++ b/.changeset/actionmenu-button-caret-spacing.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fix spacing between Text and caret for ActionMenu.Button
diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index 59735ff01c7..6b537e4b2a6 100644
--- a/src/ActionMenu.tsx
+++ b/src/ActionMenu.tsx
@@ -8,6 +8,7 @@ import {Divider} from './ActionList/Divider'
 import {ActionListContainerContext} from './ActionList/ActionListContainerContext'
 import {Button, ButtonProps} from './Button'
 import {MandateProps} from './utils/types'
+import {SxProp, merge} from './sx'
 
 type MenuContextProps = Pick<
   AnchoredOverlayProps,
@@ -73,13 +74,26 @@ const Anchor = React.forwardRef<AnchoredOverlayProps['anchorRef'], ActionMenuAnc
 
 /** this component is syntactical sugar 🍭 */
 export type ActionMenuButtonProps = ButtonProps
-const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ButtonProps>((props, anchorRef) => {
-  return (
-    <Anchor ref={anchorRef}>
-      <Button trailingIcon={TriangleDownIcon} type="button" {...props} />
-    </Anchor>
-  )
-})
+const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ButtonProps>(
+  ({sx: sxProp = {}, ...props}, anchorRef) => {
+    return (
+      <Anchor ref={anchorRef}>
+        <Button
+          type="button"
+          trailingIcon={TriangleDownIcon}
+          sx={merge(
+            {
+              // override the margin on caret for optical alignment
+              '[data-component=trailingIcon]': {marginLeft: 0, marginRight: -1}
+            },
+            sxProp as SxProp
+          )}
+          {...props}
+        />
+      </Anchor>
+    )
+  }
+)
 
 type MenuOverlayProps = Partial<OverlayProps> & {
   /**

From 4ab8cdc604cda7cdc19db0858c0415531f571744 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Mar 2022 15:41:30 +0100
Subject: [PATCH 2/4] Improve changelog

---
 .changeset/actionmenu-button-caret-spacing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/actionmenu-button-caret-spacing.md b/.changeset/actionmenu-button-caret-spacing.md
index 566a642faf4..7e58b5b8db3 100644
--- a/.changeset/actionmenu-button-caret-spacing.md
+++ b/.changeset/actionmenu-button-caret-spacing.md
@@ -2,4 +2,4 @@
 '@primer/react': patch
 ---
 
-Fix spacing between Text and caret for ActionMenu.Button
+ActionMenu.Button: Fix spacing between text and caret

From 18221abd6cde58c1db7acae1be411051ddc5f5f7 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Fri, 4 Mar 2022 16:33:55 +0100
Subject: [PATCH 3/4] fix margin after design review

---
 src/ActionMenu.tsx                                   | 2 +-
 src/__tests__/__snapshots__/ActionMenu.test.tsx.snap | 5 +++++
 src/__tests__/__snapshots__/themePreval.test.ts.snap | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index 6b537e4b2a6..83ac9a255d0 100644
--- a/src/ActionMenu.tsx
+++ b/src/ActionMenu.tsx
@@ -84,7 +84,7 @@ const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ButtonPro
           sx={merge(
             {
               // override the margin on caret for optical alignment
-              '[data-component=trailingIcon]': {marginLeft: 0, marginRight: -1}
+              '[data-component=trailingIcon]': {marginX: -1}
             },
             sxProp as SxProp
           )}
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index ccf46de1387..a5c623a3d19 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -91,6 +91,11 @@ exports[`ActionMenu renders consistently 1`] = `
   box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
+.c1 [data-component=trailingIcon] {
+  margin-left: -4px;
+  margin-right: -4px;
+}
+
 <div
   className="c0"
   color="fg.default"
diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap
index a864464835e..cd3091a1bfc 100644
--- a/src/__tests__/__snapshots__/themePreval.test.ts.snap
+++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`snapshot theme-preval.js 1`] = `
 "// this file was prevaled
-// This file needs to be a JavaScript file using CommonJS to be compatible with preval
+// This file needs to be a JavaScript file using CommonJS to be compatiable with preval
 // Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 module.exports = {
   \\"theme\\": {

From c509080e464e506c3898880ec636dd1ad6956ec1 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 7 Mar 2022 12:34:50 +0100
Subject: [PATCH 4/4] unrelated change

---
 src/__tests__/__snapshots__/themePreval.test.ts.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap
index cd3091a1bfc..a864464835e 100644
--- a/src/__tests__/__snapshots__/themePreval.test.ts.snap
+++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`snapshot theme-preval.js 1`] = `
 "// this file was prevaled
-// This file needs to be a JavaScript file using CommonJS to be compatiable with preval
+// This file needs to be a JavaScript file using CommonJS to be compatible with preval
 // Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 module.exports = {
   \\"theme\\": {