From b1d7b8c9eb829b93977c9ed6a0d9d423c756e588 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 7 Mar 2022 14:33:45 +0100
Subject: [PATCH] ActionMenu.Button: Fix spacing between text and caret (#1922)

* Fix spacing between Text and caret for ActionMenu.Button

* Improve changelog

* fix margin after design review

* unrelated change
---
 .changeset/actionmenu-button-caret-spacing.md |  5 ++++
 src/ActionMenu.tsx                            | 28 ++++++++++++++-----
 .../__snapshots__/ActionMenu.test.tsx.snap    |  5 ++++
 3 files changed, 31 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..7e58b5b8db3
--- /dev/null
+++ b/.changeset/actionmenu-button-caret-spacing.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu.Button: Fix spacing between text and caret
diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index 0fe4cced0e8..fa07408c99e 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]': {marginX: -1}
+            },
+            sxProp as SxProp
+          )}
+          {...props}
+        />
+      </Anchor>
+    )
+  }
+)
 
 type MenuOverlayProps = Partial<OverlayProps> &
   Pick<AnchoredOverlayProps, 'align'> & {
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"