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
primer · Feb 25, 2022 · d402357 · d402357
1 parent 17ef5ef
commit d402357
Show file tree

Hide file tree

Showing 28 changed files with 1,340 additions and 1,078 deletions.
diff --git a/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md b/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md
@@ -0,0 +1,69 @@
+---
+'@primer/react': major
+---
+
+### ActionMenu
+
+ActionMenu has been rewritten with a composable API, design updates and accessibility fixes.
+
+See full list of props and examples: https://primer.style/react/ActionMenu
+
+Main changes:
+
+1. Instead of using `items` prop, use `ActionList` inside `ActionMenu`
+2. Instead of using `anchorContent` on `ActionMenu`, use `ActionMenu.Button` with `children`
+3. Instead of using `onAction` prop on `ActionMenu`, use `onSelect` prop on `ActionList.Item`
+4. Instead of using `groupMetadata` on `ActionMenu`, use `ActionList.Group`
+5. Instead of `overlayProps` on `ActionMenu`, use `ActionMenu.Overlay`
+
+<table>
+<tr>
+<th> Before (v34)</th> <th> After (v35)</th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<ActionMenu
+  anchorContent="Menu"
+  onAction={fn}
+  items={[
+    {text: 'New file'},
+    {text: 'Copy link'},
+    {text: 'Edit file'},
+    ActionMenu.Divider,
+    {text: 'Delete file', variant: 'danger'}
+  ]}
+  overlayProps={{width: 'small'}}
+/>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<ActionMenu>
+  <ActionMenu.Button>Menu</ActionMenu.Button>
+  <ActionMenu.Overlay width="small">
+    <ActionList>
+      <ActionList.Item onSelect={fn}>New file</ActionList.Item>
+      <ActionList.Item>Copy link</ActionList.Item>
+      <ActionList.Item>Edit file</ActionList.Item>
+      <ActionList.Divider />
+      <ActionList.Item variant="danger">Delete file</ActionList.Item>
+    </ActionList>
+  </ActionMenu.Overlay>
+</ActionMenu>
+```
+
+</td>
+</tr>
+</table>
+
+To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
+
+```js
+import {ActionMenu} from '@primer/react/deprecated'
+```
+
+You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
diff --git a/.changeset/empty-pillows-hunt.md b/.changeset/empty-pillows-hunt.md
@@ -2,4 +2,151 @@
 '@primer/react': major
 ---
 
-Prepare library for `v35`
+### ActionList
+
+ActionList now ships a composable API.
+
+See full list of props and examples: https://primer.style/react/ActionList
+
+<table>
+<tr>
+<th> Before </th> <th> After </th>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<ActionList
+  items={[
+    {text: 'New file'},
+    {text: 'Copy link'},
+    {text: 'Edit file'},
+    ActionList.Divider,
+    {text: 'Delete file', variant: 'danger'}
+  ]}
+/>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<ActionList>
+  <ActionList.Item>New file</ActionList.Item>
+  <ActionList.Item>Copy link</ActionList.Item>
+  <ActionList.Item>Edit file</ActionList.Item>
+  <ActionList.Divider />
+  <ActionList.Item variant="danger">Delete file</ActionList.Item>
+</ActionList>
+```
+
+</td>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<ActionList
+  showItemDividers
+  items={[
+    {
+      key: '0',
+      leadingVisual: LinkIcon,
+      text: 'github/primer'
+    },
+    {
+      key: '1',
+      leadingVisual: () => <Avatar src="https://github.com/mona.png" />,
+      text: 'mona',
+      description: 'Monalisa Octocat',
+      descriptionVariant: 'block'
+    },
+    {
+      key: '2',
+      leadingVisual: GearIcon,
+      text: 'View Settings',
+      trailingVisual: ArrowRightIcon
+    }
+  ]}
+/>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<ActionList showDividers>
+  <ActionList.Item>
+    <ActionList.LeadingVisual>
+      <LinkIcon />
+    </ActionList.LeadingVisual>
+    github/primer
+  </ActionList.Item>
+  <ActionList.Item>
+    <ActionList.LeadingVisual>
+      <Avatar src="https://github.com/mona.png" />
+    </ActionList.LeadingVisual>
+    mona
+    <ActionList.Description variant="block">Monalisa Octocat</ActionList.Description>
+  </ActionList.Item>
+  <ActionList.Item>
+    <ActionList.LeadingVisual>
+      <GearIcon />
+    </ActionList.LeadingVisual>
+    View settings
+    <ActionList.TrailingVisual>
+      <ArrowRightIcon />
+    </ActionList.TrailingVisual>
+  </ActionList.Item>
+</ActionList>
+```
+
+</td>
+</tr>
+<tr>
+<td valign="top">
+
+```jsx
+<ActionList
+  groupMetadata={[
+    {groupId: '0', header: {title: 'Live query'}},
+    {groupId: '1', header: {title: 'Layout'}}
+  ]}
+  items={[
+    {key: '0', text: 'repo:github/github', groupId: '0'},
+    {key: '1', text: 'Table', groupId: '1'},
+    {key: '2', text: 'Board', groupId: '1'},
+    {key: '3', text: 'View settings'}
+  ]}
+/>
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+<ActionList>
+  <ActionList.Group title="Live query">
+    <ActionList.Item>repo:github/github</ActionList.Item>
+  </ActionList.Group>
+  <ActionList.Divider />
+
+  <ActionList.Group title="Layout">
+    <ActionList.Item>Table</ActionList.Item>
+    <ActionList.Item>Board Description></ActionList.Item>
+  </ActionList.Group>
+  <ActionList.Divider />
+
+  <ActionList.Item>View settings</ActionList.Item>
+</ActionList>
+```
+
+</td>
+</tr>
+</table>
+
+To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
+
+```js
+import {ActionList} from '@primer/react/deprecated'
+```
diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx
@@ -444,6 +444,6 @@ render(<SelectFields />)
 
 ## Related components
 
-- [ActionMenu](/drafts/ActionMenu2)
+- [ActionMenu](/ActionMenu)
 - [DropdownMenu](/DropdownMenu)
 - [SelectPanel](/SelectPanel)