Skip to content

Commit 5d8375b

Browse files
siddharthkpmperrotti
siddharthkp
authored and
mperrotti
committed
Deprecate ActionList v1 & Promote drafts/ActionList v2 (#1893)
* Deprecate ActionList v1 * Promote drafts/ActionList2 to main/ActionList * Add changelog * Undo package-lock change * update ActionList import for Menu2 docs * changelog oopsie * fix docs copy * Add @deprecated on deprecated/ActionList * oopsie on the link * PR feedback on deprecation message
1 parent 65f8db8 commit 5d8375b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+2454
-2263
lines changed

‎.changeset/deprecate-actionlistv1-promote-actionlistv2.md‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
### ActionList
6+
7+
ActionList 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/ActionList
10+
11+
<table>
12+
<tr>
13+
<th> Before (v34)</th> <th> After (v35)</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+
```
153+
154+
You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.

0 commit comments

Comments
 (0)