|
2 | 2 | '@primer/react': major
|
3 | 3 | ---
|
4 | 4 |
|
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 |
| -``` |
| 5 | +Prepare library for `v35` |
0 commit comments