|
| 1 | +--- |
| 2 | +title: ActionMenu |
| 3 | +reactId: action_menu |
| 4 | +reactStatus: deprecated |
| 5 | +description: Action menu is composed of action list and overlay patterns used for quick actions and selections. |
| 6 | +--- |
| 7 | + |
| 8 | +import {ComponentPageNav} from '~/src/components/component-page-nav' |
| 9 | +import StatusMenu from '~/src/components/status-menu' |
| 10 | +import {AccessibilityLabel, StatusLabel} from '@primer/gatsby-theme-doctocat' |
| 11 | +import {Label} from '@primer/react' |
| 12 | +import { graphql } from "gatsby" |
| 13 | + |
| 14 | +export const query = graphql` |
| 15 | + query { |
| 16 | + primerReactVersion { |
| 17 | + version |
| 18 | + } |
| 19 | + allReactComponent(filter: {componentId: {eq: "action_menu"}}) { |
| 20 | + nodes { |
| 21 | + status |
| 22 | + } |
| 23 | + } |
| 24 | + } |
| 25 | +` |
| 26 | + |
| 27 | +<Box style={{marginBottom: "24px"}}> |
| 28 | + <ComponentPageNav |
| 29 | + basePath="/components/action-menu" |
| 30 | + includeReact={true} |
| 31 | + includeRails={true} |
| 32 | + includeFigma={true} |
| 33 | + current="react" |
| 34 | + /> |
| 35 | +</Box> |
| 36 | + |
| 37 | +<Box style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "25px"}}> |
| 38 | + <Box style={{display: "flex", gap: "5px"}}> |
| 39 | + <Label size="large">@primer/react@v{props.data.primerReactVersion.version}</Label> |
| 40 | + <StatusLabel status="Deprecated" /> |
| 41 | + <AccessibilityLabel a11yReviewed={false} short={false} /> |
| 42 | + </Box> |
| 43 | + <Box> |
| 44 | + <StatusMenu currentStatus="deprecated" statuses={[...props.data.allReactComponent.nodes.map((reactComponent) => reactComponent.status), "deprecated"]} parentPath="/components/action-menu/react" /> |
| 45 | + </Box> |
| 46 | +</Box> |
| 47 | + |
| 48 | +An `ActionMenu` is an ActionList-based component for creating a menu of actions that expands through a trigger button. |
| 49 | + |
| 50 | +## Deprecation |
| 51 | + |
| 52 | +Use [new version of ActionMenu](/components/action-menu/react) with composable API, design updates and accessibility fixes. |
| 53 | + |
| 54 | +### Before |
| 55 | + |
| 56 | +```jsx |
| 57 | +<ActionMenu |
| 58 | + anchorContent="Menu" |
| 59 | + onAction={fn} |
| 60 | + items={[ |
| 61 | + {text: 'New file'}, |
| 62 | + {text: 'Copy link'}, |
| 63 | + {text: 'Edit file'}, |
| 64 | + ActionMenu.Divider, |
| 65 | + {text: 'Delete file', variant: 'danger'}, |
| 66 | + ]} |
| 67 | + overlayProps={{width: 'small'}} |
| 68 | +/> |
| 69 | +``` |
| 70 | + |
| 71 | +### After |
| 72 | + |
| 73 | +```jsx |
| 74 | +<ActionMenu> |
| 75 | + <ActionMenu.Button>Menu</ActionMenu.Button> |
| 76 | + <ActionMenu.Overlay width="small"> |
| 77 | + <ActionList> |
| 78 | + <ActionList.Item onSelect={fn}>New file</ActionList.Item> |
| 79 | + <ActionList.Item>Copy link</ActionList.Item> |
| 80 | + <ActionList.Item>Edit file</ActionList.Item> |
| 81 | + <ActionList.Divider /> |
| 82 | + <ActionList.Item variant="danger">Delete file</ActionList.Item> |
| 83 | + </ActionList> |
| 84 | + </ActionMenu.Overlay> |
| 85 | +</ActionMenu> |
| 86 | +``` |
| 87 | + |
| 88 | +Or continue using deprecated API: |
| 89 | + |
| 90 | +```js |
| 91 | +import {ActionMenu} from '@primer/react/deprecated' |
| 92 | +``` |
| 93 | + |
| 94 | +## Default example |
| 95 | + |
| 96 | +```jsx live deprecated |
| 97 | +<ActionMenu |
| 98 | + anchorContent="Menu" |
| 99 | + onAction={({text}) => console.log(text)} |
| 100 | + items={[ |
| 101 | + {text: 'New file', key: 'new-file'}, |
| 102 | + ActionMenu.Divider, |
| 103 | + {text: 'Copy link', key: 'copy-link'}, |
| 104 | + {text: 'Edit file', key: 'edit-file'}, |
| 105 | + {text: 'Delete file', variant: 'danger', key: 'delete-file'}, |
| 106 | + ]} |
| 107 | +/> |
| 108 | +``` |
| 109 | + |
| 110 | +## Example with grouped items |
| 111 | + |
| 112 | +```jsx live deprecated |
| 113 | +<ActionMenu |
| 114 | + anchorContent="Menu" |
| 115 | + onAction={({text}) => console.log(text)} |
| 116 | + groupMetadata={[ |
| 117 | + {groupId: '0'}, |
| 118 | + {groupId: '1', header: {title: 'Live query', variant: 'subtle'}}, |
| 119 | + {groupId: '2', header: {title: 'Layout', variant: 'subtle'}}, |
| 120 | + {groupId: '3'}, |
| 121 | + {groupId: '4'}, |
| 122 | + ]} |
| 123 | + items={[ |
| 124 | + {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'}, |
| 125 | + {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'}, |
| 126 | + {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'}, |
| 127 | + { |
| 128 | + key: '4', |
| 129 | + leadingVisual: NoteIcon, |
| 130 | + text: 'Table', |
| 131 | + description: 'Information-dense table optimized for operations across teams', |
| 132 | + descriptionVariant: 'block', |
| 133 | + groupId: '2', |
| 134 | + }, |
| 135 | + { |
| 136 | + key: '5', |
| 137 | + leadingVisual: ProjectIcon, |
| 138 | + text: 'Board', |
| 139 | + description: 'Kanban-style board focused on visual states', |
| 140 | + descriptionVariant: 'block', |
| 141 | + groupId: '2', |
| 142 | + }, |
| 143 | + { |
| 144 | + key: '6', |
| 145 | + leadingVisual: FilterIcon, |
| 146 | + text: 'Save sort and filters to current view', |
| 147 | + disabled: true, |
| 148 | + groupId: '3', |
| 149 | + }, |
| 150 | + {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'}, |
| 151 | + {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4'}, |
| 152 | + ]} |
| 153 | +/> |
| 154 | +``` |
| 155 | + |
| 156 | +## Component props |
| 157 | + |
| 158 | +| Name | Type | Default | Description | |
| 159 | +| :------------ | :------------------------------------ | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 160 | +| items | `ItemProps[]` | `undefined` | Required. A list of item objects conforming to the `ActionList.Item` props interface. | |
| 161 | +| renderItem | `(props: ItemProps) => JSX.Element` | `ActionList.Item` | Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering. | |
| 162 | +| groupMetadata | `GroupProps[]` | `undefined` | Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property. | |
| 163 | +| renderAnchor | `(props: ButtonProps) => JSX.Element` | `Button` | Optional. If defined, provided component will be used to render the menu anchor. Will receive the selected `Item` text as `children` prop when an item is activated. | |
| 164 | +| anchorContent | React.ReactNode | `undefined` | Optional. If defined, it will be passed to the trigger as the elements child. | |
| 165 | +| onAction | (props: ItemProps) => void | `undefined` | Optional. If defined, this function will be called when a menu item is activated either by a click or a keyboard press. | |
| 166 | +| open | boolean | `undefined` | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `setOpen` prop. | |
| 167 | +| setOpen | (state: boolean) => void | `undefined` | Optional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the `open` prop. | |
0 commit comments