Add support for controlling which side ActionMenu renders on (via a…

… `side` prop on `ActionMenu.Overlay`) (#3714) * Deduplicate `ActionMenu.tsx` * Add `side` prop to `ActionMenu.Overlay` * Add changeset * Retrigger actions
primer · Sep 11, 2023 · 8834026 · 8834026
1 parent 3d7e72b
commit 8834026
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 2 deletions.
diff --git a/.changeset/brown-seahorses-melt.md b/.changeset/brown-seahorses-melt.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Add support for controlling which side `ActionMenu` renders on (via a `side` prop on `ActionMenu.Overlay`)
+
+<!-- Changed components: ActionMenu -->
diff --git a/src/ActionMenu/ActionMenu.docs.json b/src/ActionMenu/ActionMenu.docs.json
@@ -75,6 +75,12 @@
           "type": "start | center | end",
           "defaultValue": "start",
           "description": ""
+        },
+        {
+          "name": "side",
+          "type": "| 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right'",
+          "defaultValue": "'outside-bottom'",
+          "description": "Controls which side of the anchor the menu will appear"
         }
       ],
       "passthrough": {
@@ -83,4 +89,4 @@
       }
     }
   ]
-}
+}
diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -307,3 +307,30 @@ export const DelayedMenuClose = () => {
     </>
   )
 }
+
+export const OnRightSide = () => (
+  <ActionMenu>
+    <ActionMenu.Button>Open menu</ActionMenu.Button>
+    <ActionMenu.Overlay width="medium" side="outside-right">
+      <ActionList>
+        <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+          Copy link
+          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Item onSelect={() => alert('Quote reply clicked')}>
+          Quote reply
+          <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Item onSelect={() => alert('Edit comment clicked')}>
+          Edit comment
+          <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Divider />
+        <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+          Delete file
+          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+        </ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)
diff --git a/src/ActionMenu/ActionMenu.tsx b/src/ActionMenu/ActionMenu.tsx
@@ -85,7 +85,7 @@ const MenuButton = React.forwardRef(({...props}, anchorRef) => {
 }) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
 
 type MenuOverlayProps = Partial<OverlayProps> &
-  Pick<AnchoredOverlayProps, 'align'> & {
+  Pick<AnchoredOverlayProps, 'align' | 'side'> & {
     /**
      * Recommended: `ActionList`
      */
@@ -94,6 +94,7 @@ type MenuOverlayProps = Partial<OverlayProps> &
 const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({
   children,
   align = 'start',
+  side = 'outside-bottom',
   'aria-labelledby': ariaLabelledby,
   ...overlayProps
 }) => {
@@ -116,6 +117,7 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({
       onOpen={onOpen}
       onClose={onClose}
       align={align}
+      side={side}
       overlayProps={overlayProps}
       focusZoneSettings={{focusOutBehavior: 'wrap'}}
     >