AnchoredOverlay: Add support for CSS anchor positioning

.changeset/nine-buttons-lose.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+AnchoredOverlay: Add CSS Anchor Positioning to `AnchoredOverlay` (under a feature flag)

packages/react/package.json

@@ -78,6 +78,7 @@
     "@github/relative-time-element": "^4.5.0",
     "@github/tab-container-element": "^4.8.2",
     "@lit-labs/react": "1.2.1",
+    "@oddbird/css-anchor-positioning": "^0.9.0",
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.10.2",
     "@primer/live-region-element": "^0.7.1",

packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx

@@ -759,3 +759,95 @@ export const InsideDialog = () => {
     </FeatureFlags>
   )
 }
+
+export const CenteredOnPage = () => {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className={classes.CustomPositionMiddle}>
+      <ActionMenu open={open} onOpenChange={setOpen}>
+        <ActionMenu.Button>Open menu</ActionMenu.Button>
+        <ActionMenu.Overlay width="medium">
+          <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>
+    </div>
+  )
+}
+
+export const TwoActionMenus = () => {
+  return (
+    <div style={{display: 'flex', gap: '1rem', padding: '1rem'}}>
+      <ActionMenu>
+        <ActionMenu.Button className="Testing">First menu</ActionMenu.Button>
+        <ActionMenu.Overlay width="medium">
+          <ActionList>
+            <ActionList.Item onSelect={() => alert('Copy clicked')}>
+              <ActionList.LeadingVisual>
+                <CopyIcon />
+              </ActionList.LeadingVisual>
+              Copy
+              <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+            </ActionList.Item>
+            <ActionList.Item onSelect={() => alert('Archive clicked')}>
+              <ActionList.LeadingVisual>
+                <ArchiveIcon />
+              </ActionList.LeadingVisual>
+              Archive
+            </ActionList.Item>
+            <ActionList.Divider />
+            <ActionList.Item variant="danger" onSelect={() => alert('Delete clicked')}>
+              Delete
+              <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+            </ActionList.Item>
+          </ActionList>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+
+      <ActionMenu>
+        <ActionMenu.Button leadingVisual={GearIcon}>Second menu</ActionMenu.Button>
+        <ActionMenu.Overlay width="medium">
+          <ActionList>
+            <ActionList.Item onSelect={() => alert('Settings clicked')}>
+              <ActionList.LeadingVisual>
+                <GearIcon />
+              </ActionList.LeadingVisual>
+              Settings
+            </ActionList.Item>
+            <ActionList.Item onSelect={() => alert('Workflows clicked')}>
+              <ActionList.LeadingVisual>
+                <WorkflowIcon />
+              </ActionList.LeadingVisual>
+              Workflows
+            </ActionList.Item>
+            <ActionList.Divider />
+            <ActionList.LinkItem href="#">
+              <ActionList.LeadingVisual>
+                <BookIcon />
+              </ActionList.LeadingVisual>
+              Documentation
+            </ActionList.LinkItem>
+          </ActionList>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+    </div>
+  )
+}

packages/react/src/ActionMenu/ActionMenu.test.tsx

@@ -9,6 +9,7 @@ import {Tooltip as TooltipV2} from '../TooltipV2/Tooltip'
 import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories'
 import {MixedSelection} from '../ActionMenu/ActionMenu.examples.stories'
 import {SearchIcon, KebabHorizontalIcon} from '@primer/octicons-react'
+import anchoredOverlayClasses from '../AnchoredOverlay/AnchoredOverlay.module.css'
 import {getAnchoredPosition} from '@primer/behaviors'
 import type {AnchorPosition} from '@primer/behaviors'
 
@@ -648,6 +649,7 @@ describe('ActionMenu', () => {
       )
       const anchor = component.getByRole('button', {name: 'Toggle Menu'})
       expect(anchor).toHaveClass('test-class')
+      expect(anchor).toHaveClass(anchoredOverlayClasses.Anchor)
     })
 
     it('supports className prop on ActionMenu.Button', async () => {
@@ -674,6 +676,7 @@ describe('ActionMenu', () => {
       )
       const button = component.getByRole('button', {name: 'Toggle Menu'})
       expect(button).toHaveClass('test-class')
+      expect(button).toHaveClass(anchoredOverlayClasses.Anchor)
     })
   })
 

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -1,4 +1,5 @@
 import React, {useCallback, useContext, useMemo, useEffect, useState} from 'react'
+import {clsx} from 'clsx'
 import {TriangleDownIcon, ChevronRightIcon} from '@primer/octicons-react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
 import {AnchoredOverlay} from '../AnchoredOverlay'
@@ -73,6 +74,10 @@ const mergeAnchorHandlers = (anchorProps: React.HTMLAttributes<HTMLElement>, but
     mergedAnchorProps.onKeyDown = mergedOnAnchorKeyDown
   }
 
+  if (buttonProps.className) {
+    mergedAnchorProps.className = clsx(anchorProps.className, buttonProps.className)
+  }
+
   return mergedAnchorProps
 }
 
@@ -153,7 +158,11 @@ const Menu: FCWithSlotMarker<React.PropsWithChildren<ActionMenuProps>> = ({
           }
         }
       } else {
-        renderAnchor = anchorProps => React.cloneElement(child, anchorProps)
+        renderAnchor = anchorProps =>
+          React.cloneElement(child, {
+            ...anchorProps,
+            className: clsx(anchorProps.className, child.props.className),
+          })
       }
       return null
     } else if (child.type === MenuButton || isSlot(child, MenuButton)) {
@@ -234,6 +243,7 @@ const Anchor: WithSlotMarker<
       {React.cloneElement(child, {
         ...anchorProps,
         ref: anchorRef,
+        className: clsx(anchorProps.className, child.props.className),
         onClick: onButtonClick,
         onKeyDown: onButtonKeyDown,
       })}