Next major

.changeset/actionlist2-actionmenu2-prefix-types.md

@@ -0,0 +1,21 @@
+---
+'@primer/react': major
+---
+
+`ActionList2` exported types are now prefixed with `ActionList`:
+
+```
+ListProps → ActionListProps
+GroupProps → ActionListGroupProps
+ItemProps → ActionListItemProps
+DescriptionProps → ActionListDescriptionProps
+LeadingVisualProps → ActionListLeadingVisualProps,
+TrailingVisualProps → ActionListTrailingVisualProps
+```
+
+`ActionMenu2` exported types are now prefixed with `ActionMenu`:
+
+```
+MenuButtonProps → ActionMenuButtonProps
+MenuAnchorProps → ActionMenuAnchorProps
+```

.changeset/actionmenu-add-align-prop.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay

.changeset/actionmenu-button-caret-spacing.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionMenu.Button: Fix spacing between text and caret

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

@@ -0,0 +1,155 @@
+---
+'@primer/react': major
+---
+<br />
+
+### ActionList
+
+ActionList has been rewritten with a composable API, design updates and accessibility fixes.
+
+See full list of props and examples: https://primer.style/react/ActionList
+
+<table>
+<tr>
+<th> Before (v34)</th> <th> After (v35)</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'
+```
+
+You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.

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

@@ -0,0 +1,71 @@
+---
+'@primer/react': major
+---
+
+<br />
+
+### 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.

.changeset/deprecate-dropdownmenu.md

@@ -0,0 +1,109 @@
+---
+'@primer/react': major
+---
+
+<br />
+
+### DropdownMenu
+
+DropdownMenu has been deprecated in favor of ActionMenu with ActionList
+
+See example with selection: https://primer.style/react/ActionMenu#with-selection
+
+Migration guide:
+
+1. Instead of using `items` prop, use `ActionList` inside `ActionMenu`
+2. Use `selectionVariant="single"` on `ActionList` to set the right semantics for selection
+3. Instead of using `selectedItem` prop, use `selected` prop on `ActionList.Item`
+4. Instead of using `renderAnchor` and `placeholder` props on `DropdownMenu`, use `ActionMenu.Button` or `ActionMenu.Anchor`
+5. Instead of using `onChange` prop on `DropdownMenu`, use `onSelect` prop on `ActionList.Item`
+6. Instead of using `groupMetadata` on `DropdownMenu`, use `ActionList.Group`
+7. Instead of `overlayProps` on `DropdownMenu`, use `ActionMenu.Overlay`
+
+<table>
+<tr>
+<th> Before (v34)</th> <th> After (v35)</th>
+</tr>
+<tr>
+<td valign="top">
+
+```js
+const fieldTypes = [
+  {key: 0, text: 'Text'},
+  {key: 1, text: 'Number'},
+  {key: 3, text: 'Date'},
+  {key: 4, text: 'Single select'},
+  {key: 5, text: 'Iteration'}
+]
+
+const Example = () => {
+  const [selectedType, setSelectedType] = React.useState()
+
+  return (
+    <DropdownMenu
+      renderAnchor={({children, ...anchorProps}) => (
+        <ButtonInvisible {...anchorProps}>
+          {children} <GearIcon />
+        </ButtonInvisible>
+      )}
+      placeholder="Field type"
+      items={fieldTypes}
+      selectedItem={selectedType}
+      onChange={setSelectedType}
+      overlayProps={{width: 'medium'}}
+    />
+  )
+}
+```
+
+ </td>
+<td valign="top">
+
+```jsx
+const fieldTypes = [
+  {id: 0, text: 'Text'},
+  {id: 1, text: 'Number'},
+  {id: 3, text: 'Date'},
+  {id: 4, text: 'Single select'},
+  {id: 5, text: 'Iteration'}
+]
+
+const Example = () => {
+  const [selectedType, setSelectedType] = React.useState()
+
+  render(
+    <ActionMenu>
+      <ActionMenu.Button aria-label="Select field type">{selectedType.name || 'Field type'}</ActionMenu.Button>
+      <ActionMenu.Overlay width="medium">
+        <ActionList selectionVariant="single">
+          {fieldTypes.map(type => (
+            <ActionList.Item
+              key={type.id}
+              selected={type.id === selectedType.id}
+              onSelect={() => setSelectedType(type)}
+            >
+              {type.name}
+            </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 {DropdownMenu} from '@primer/react/deprecated'
+```
+
+You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
+
+### drafts/DropdownMenu2
+
+DropdownMenu2 has been removed in favor of ActionMenu with ActionList

.changeset/healthy-dots-chew.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+---
+
+- Update styles for default variant of Button's active state
+- Use active state for Button when it is used to open an Overlay