Add basic docs for AnchoredOverlay (#1192)

.changeset/selfish-cats-admire.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Add basic docs for `AnchoredOverlay`

docs/content/AnchoredOverlay.mdx

@@ -0,0 +1,39 @@
+---
+title: AnchoredOverlay
+status: Alpha
+---
+
+An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
+The overlay can be opened and navigated using keyboard or mouse.
+
+## Example
+
+```jsx live
+<State default={false}>
+  {([isOpen, setIsOpen]) => {
+    const openOverlay = React.useCallback(() => setIsOpen(true), [setIsOpen])
+    const closeOverlay = React.useCallback(() => setIsOpen(false), [setIsOpen])
+    return (
+      <AnchoredOverlay
+        renderAnchor={(anchorProps) => (
+          <DropdownButton {...anchorProps}>
+            Click me to open
+          </DropdownButton>
+        )}
+        open={isOpen}
+        onOpen={openOverlay}
+        onClose={closeOverlay}
+      >
+        <Flex flexDirection="column" maxWidth="300px" padding={2}>
+          <p>
+            This menu automatically receives a focus trap and focus zone.  Use up/down keys to navigate between buttons
+          </p>
+          <Button mb={1}>Button 1</Button>
+          <Button mb={1}>Button 2</Button>
+          <Button>Button 3</Button>
+        </Flex>
+      </AnchoredOverlay>
+    )
+  }}
+</State>
+```

docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -21,6 +21,7 @@ import {
 } from '@primer/octicons-react'
 import State from '../../../components/State'
 import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
+import {AnchoredOverlay} from '../../../../src/AnchoredOverlay'
 import {ConfirmationDialog, useConfirm} from '../../../../src/Dialog/ConfirmationDialog'
 
 export default {
@@ -46,5 +47,6 @@ export default {
   VersionsIcon,
   Dialog2,
   ConfirmationDialog,
-  useConfirm
+  useConfirm,
+  AnchoredOverlay
 }

src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -29,7 +29,7 @@ export interface AnchoredOverlayProps {
 }
 
 /**
- * An `AnchoredOverlay` provides an anchor (button by default) that will open a floating overlay.
+ * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
  * The overlay can be opened and navigated using keyboard or mouse.
  */
 export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({renderAnchor, children, open, onOpen, onClose}) => {