Skip to content

Commit d402357

Browse files
siddharthkpsiddharthkp
authored
Deprecate ActionMenu v1 & Promote drafts/ActionMenu v2 (#1897)
* Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * Deprecate ActionMenu - part 1 * Deprecate ActionMenu - part 2 * Promote drafts/ActionMenu2 to main/ActionMenu * Add changelog * Add @deprecated on deprecated/ActionMenu * docs fixed! * reorder deprecated components alphabetically * Update deprecation message * Fix missing icon that only broke on this PR for some reason
1 parent 17ef5ef commit d402357

28 files changed

+1340
-1078
lines changed

‎.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
### ActionMenu
6+
7+
ActionMenu has been rewritten with a composable API, design updates and accessibility fixes.
8+
9+
See full list of props and examples: https://primer.style/react/ActionMenu
10+
11+
Main changes:
12+
13+
1. Instead of using `items` prop, use `ActionList` inside `ActionMenu`
14+
2. Instead of using `anchorContent` on `ActionMenu`, use `ActionMenu.Button` with `children`
15+
3. Instead of using `onAction` prop on `ActionMenu`, use `onSelect` prop on `ActionList.Item`
16+
4. Instead of using `groupMetadata` on `ActionMenu`, use `ActionList.Group`
17+
5. Instead of `overlayProps` on `ActionMenu`, use `ActionMenu.Overlay`
18+
19+
<table>
20+
<tr>
21+
<th> Before (v34)</th> <th> After (v35)</th>
22+
</tr>
23+
<tr>
24+
<td valign="top">
25+
26+
```jsx
27+
<ActionMenu
28+
anchorContent="Menu"
29+
onAction={fn}
30+
items={[
31+
{text: 'New file'},
32+
{text: 'Copy link'},
33+
{text: 'Edit file'},
34+
ActionMenu.Divider,
35+
{text: 'Delete file', variant: 'danger'}
36+
]}
37+
overlayProps={{width: 'small'}}
38+
/>
39+
```
40+
41+
</td>
42+
<td valign="top">
43+
44+
```jsx
45+
<ActionMenu>
46+
<ActionMenu.Button>Menu</ActionMenu.Button>
47+
<ActionMenu.Overlay width="small">
48+
<ActionList>
49+
<ActionList.Item onSelect={fn}>New file</ActionList.Item>
50+
<ActionList.Item>Copy link</ActionList.Item>
51+
<ActionList.Item>Edit file</ActionList.Item>
52+
<ActionList.Divider />
53+
<ActionList.Item variant="danger">Delete file</ActionList.Item>
54+
</ActionList>
55+
</ActionMenu.Overlay>
56+
</ActionMenu>
57+
```
58+
59+
</td>
60+
</tr>
61+
</table>
62+
63+
To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
64+
65+
```js
66+
import {ActionMenu} from '@primer/react/deprecated'
67+
```
68+
69+
You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.

‎.changeset/empty-pillows-hunt.md‎

Lines changed: 148 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,151 @@
22
'@primer/react': major
33
---
44

5-
Prepare library for `v35`
5+
### ActionList
6+
7+
ActionList now ships a composable API.
8+
9+
See full list of props and examples: https://primer.style/react/ActionList
10+
11+
<table>
12+
<tr>
13+
<th> Before </th> <th> After </th>
14+
</tr>
15+
<tr>
16+
<td valign="top">
17+
18+
```jsx
19+
<ActionList
20+
items={[
21+
{text: 'New file'},
22+
{text: 'Copy link'},
23+
{text: 'Edit file'},
24+
ActionList.Divider,
25+
{text: 'Delete file', variant: 'danger'}
26+
]}
27+
/>
28+
```
29+
30+
</td>
31+
<td valign="top">
32+
33+
```jsx
34+
<ActionList>
35+
<ActionList.Item>New file</ActionList.Item>
36+
<ActionList.Item>Copy link</ActionList.Item>
37+
<ActionList.Item>Edit file</ActionList.Item>
38+
<ActionList.Divider />
39+
<ActionList.Item variant="danger">Delete file</ActionList.Item>
40+
</ActionList>
41+
```
42+
43+
</td>
44+
</tr>
45+
<tr>
46+
<td valign="top">
47+
48+
```jsx
49+
<ActionList
50+
showItemDividers
51+
items={[
52+
{
53+
key: '0',
54+
leadingVisual: LinkIcon,
55+
text: 'github/primer'
56+
},
57+
{
58+
key: '1',
59+
leadingVisual: () => <Avatar src="https://github.com/mona.png" />,
60+
text: 'mona',
61+
description: 'Monalisa Octocat',
62+
descriptionVariant: 'block'
63+
},
64+
{
65+
key: '2',
66+
leadingVisual: GearIcon,
67+
text: 'View Settings',
68+
trailingVisual: ArrowRightIcon
69+
}
70+
]}
71+
/>
72+
```
73+
74+
</td>
75+
<td valign="top">
76+
77+
```jsx
78+
<ActionList showDividers>
79+
<ActionList.Item>
80+
<ActionList.LeadingVisual>
81+
<LinkIcon />
82+
</ActionList.LeadingVisual>
83+
github/primer
84+
</ActionList.Item>
85+
<ActionList.Item>
86+
<ActionList.LeadingVisual>
87+
<Avatar src="https://github.com/mona.png" />
88+
</ActionList.LeadingVisual>
89+
mona
90+
<ActionList.Description variant="block">Monalisa Octocat</ActionList.Description>
91+
</ActionList.Item>
92+
<ActionList.Item>
93+
<ActionList.LeadingVisual>
94+
<GearIcon />
95+
</ActionList.LeadingVisual>
96+
View settings
97+
<ActionList.TrailingVisual>
98+
<ArrowRightIcon />
99+
</ActionList.TrailingVisual>
100+
</ActionList.Item>
101+
</ActionList>
102+
```
103+
104+
</td>
105+
</tr>
106+
<tr>
107+
<td valign="top">
108+
109+
```jsx
110+
<ActionList
111+
groupMetadata={[
112+
{groupId: '0', header: {title: 'Live query'}},
113+
{groupId: '1', header: {title: 'Layout'}}
114+
]}
115+
items={[
116+
{key: '0', text: 'repo:github/github', groupId: '0'},
117+
{key: '1', text: 'Table', groupId: '1'},
118+
{key: '2', text: 'Board', groupId: '1'},
119+
{key: '3', text: 'View settings'}
120+
]}
121+
/>
122+
```
123+
124+
</td>
125+
<td valign="top">
126+
127+
```jsx
128+
<ActionList>
129+
<ActionList.Group title="Live query">
130+
<ActionList.Item>repo:github/github</ActionList.Item>
131+
</ActionList.Group>
132+
<ActionList.Divider />
133+
134+
<ActionList.Group title="Layout">
135+
<ActionList.Item>Table</ActionList.Item>
136+
<ActionList.Item>Board Description></ActionList.Item>
137+
</ActionList.Group>
138+
<ActionList.Divider />
139+
140+
<ActionList.Item>View settings</ActionList.Item>
141+
</ActionList>
142+
```
143+
144+
</td>
145+
</tr>
146+
</table>
147+
148+
To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
149+
150+
```js
151+
import {ActionList} from '@primer/react/deprecated'
152+
```

‎docs/content/ActionList.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -444,6 +444,6 @@ render(<SelectFields />)
444444

445445
## Related components
446446

447-
- [ActionMenu](/drafts/ActionMenu2)
447+
- [ActionMenu](/ActionMenu)
448448
- [DropdownMenu](/DropdownMenu)
449449
- [SelectPanel](/SelectPanel)

0 commit comments

Comments
 (0)