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

Author: siddharthkp

.changeset/actionmenu-button-caret-spacing.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu.Button: Fix spacing between text and caret

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'> & {

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"