Skip to content

Commit 0bba1ae

Browse files
committed
Update ActionMenu docs
1 parent 561aad8 commit 0bba1ae

File tree

1 file changed

+59
-20
lines changed

1 file changed

+59
-20
lines changed

docs/content/ActionMenu.mdx

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,7 @@ You can choose to have a different _anchor_ for the Menu dependending on the app
7979
```jsx live
8080
<ActionMenu>
8181
<ActionMenu.Anchor>
82-
<ButtonInvisible aria-label="Open column options">
83-
<KebabHorizontalIcon />
84-
</ButtonInvisible>
82+
<IconButton icon={KebabHorizontalIcon} variant="invisible" aria-label="Open column options" />
8583
</ActionMenu.Anchor>
8684

8785
<ActionMenu.Overlay>
@@ -284,32 +282,73 @@ render(
284282

285283
### ActionMenu
286284

287-
| Name | Type | Default | Description |
288-
| :----------- | :----------------------------- | :-----: | :----------------------------------------------------------------------------------------------------------------------- |
289-
| children\* | `React.ReactElement[]` | - | Required. Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay` |
290-
| open | `boolean` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`. |
291-
| onOpenChange | `(open: boolean) => void` | - | Optional. If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`. |
292-
| anchorRef | `React.RefObject<HTMLElement>` | - | Optional. Useful for defining an external anchor |
285+
<PropsTable>
286+
<PropsTableRow
287+
name="children"
288+
required
289+
type="React.ReactElement[]"
290+
description={
291+
<>
292+
Recommended: <InlineCode>ActionMenu.Button</InlineCode> or <InlineCode>ActionMenu.Anchor</InlineCode> with{' '}
293+
<InlineCode>ActionMenu.Overlay</InlineCode>
294+
</>
295+
}
296+
/>
297+
<PropsTableRow
298+
name="open"
299+
type="boolean"
300+
defaultValue="false"
301+
description={
302+
<>
303+
If defined, will control the open/closed state of the overlay. Must be used in conjuction with{' '}
304+
<InlineCode>onOpenChange</InlineCode>.
305+
</>
306+
}
307+
/>
308+
<PropsTableRow
309+
name="onOpenChange"
310+
type="(open: boolean) => void"
311+
description={
312+
<>
313+
If defined, will control the open/closed state of the overlay. Must be used in conjuction with{' '}
314+
<InlineCode>open</InlineCode>.
315+
</>
316+
}
317+
/>
318+
<PropsTableRow
319+
name="anchorRef"
320+
type="React.RefObject<HTMLElement>"
321+
description="Useful for defining an external anchor"
322+
/>
323+
</PropsTable>
293324

294325
### ActionMenu.Button
295326

296-
| Type | Default | Description |
297-
| :----------------------------------------------- | :-----: | :---------------------------------------------------------------------------------------------------------------- |
298-
| [Button v2 props](/drafts/Button2#api-reference) | - | You can pass all of the props that you would pass to a [`Button`](/drafts/Button2) component like `variant`, `sx` |
327+
<PropsTable>
328+
<PropsTableRow name="children" required type="React.ReactElement" />
329+
<PropsTablePassthroughPropsRow
330+
elementName="Button"
331+
isPolymorphic
332+
passthroughPropsLink={<Link href="/Button">Button docs</Link>}
333+
/>
334+
</PropsTable>
299335

300336
### ActionMenu.Anchor
301337

302-
| Name | Type | Default | Description |
303-
| :--------- | :------------------- | :-----: | :-------------------------------- |
304-
| children\* | `React.ReactElement` | - | Required. Accepts a single child. |
338+
<PropsTable>
339+
<PropsTableRow name="children" required type="React.ReactElement" description="Accepts a single child element" />
340+
</PropsTable>
305341

306342
### ActionMenu.Overlay
307343

308-
| Name | Type | Default | Description |
309-
| :--------------------------------------- | :------------------------------------------------- | :-----: | :-------------------------------------------------------------------------------------- |
310-
| children\* | `React.ReactElement` &#124; `React.ReactElement[]` | - | Required. Recommended: [`ActionList`](/ActionList) |
311-
| align | 'start' &#124; 'center' &#124; 'end' | 'start' | Optional. Passed down to internal [`AnchoredOverlay`](/AnchoredOverlay#props) component |
312-
| [OverlayProps](/Overlay#component-props) | - | - | Optional. Props to be spread on the internal [`Overlay`](/Overlay) component. |
344+
<PropsTable>
345+
<PropsTableRow name="children" required type="React.ReactElement | React.ReactElement[]" />
346+
<PropsTableRow name="align" type="start | center | end" defaultValue="start" />
347+
<PropsTablePassthroughPropsRow
348+
elementName="Overlay"
349+
passthroughPropsLink={<Link href="/Overlay">Overlay docs</Link>}
350+
/>
351+
</PropsTable>
313352

314353
## Status
315354

0 commit comments

Comments
 (0)