Skip to content

Commit d6d1ca4

Browse files
siddharthkpsiddharthkp
authored
Deprecate DropdownMenu v1 + Remove DropdownMenu v2 (#1898)
* 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 * Deprecate DropdownMenu * Use deprecated Dropdown for theme switcher * Delete drafts/DropdownMenu2 * Add changelog * remove debug statement :)
1 parent 87889b5 commit d6d1ca4

File tree

25 files changed

+225
-1367
lines changed

25 files changed

+225
-1367
lines changed

‎.changeset/deprecate-dropdownmenu.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
### DropdownMenu
6+
7+
DropdownMenu has been deprecated in favor of ActionMenu with ActionList
8+
9+
See example with selection: https://primer.style/react/ActionMenu#with-selection
10+
11+
Migration guide:
12+
13+
1. Instead of using `items` prop, use `ActionList` inside `ActionMenu`
14+
2. Use `selectionVariant="single"` on `ActionList` to set the right semantics for selection
15+
3. Instead of using `selectedItem` prop, use `selected` prop on `ActionList.Item`
16+
4. Instead of using `renderAnchor` and `placeholder` props on `DropdownMenu`, use `ActionMenu.Button` or `ActionMenu.Anchor`
17+
5. Instead of using `onChange` prop on `DropdownMenu`, use `onSelect` prop on `ActionList.Item`
18+
6. Instead of using `groupMetadata` on `DropdownMenu`, use `ActionList.Group`
19+
7. Instead of `overlayProps` on `DropdownMenu`, use `ActionMenu.Overlay`
20+
21+
<table>
22+
<tr>
23+
<th> Before (v34)</th> <th> After (v35)</th>
24+
</tr>
25+
<tr>
26+
<td valign="top">
27+
28+
```js
29+
const fieldTypes = [
30+
{key: 0, text: 'Text'},
31+
{key: 1, text: 'Number'},
32+
{key: 3, text: 'Date'},
33+
{key: 4, text: 'Single select'},
34+
{key: 5, text: 'Iteration'}
35+
]
36+
37+
const Example = () => {
38+
const [selectedType, setSelectedType] = React.useState()
39+
40+
return (
41+
<DropdownMenu
42+
renderAnchor={({children, ...anchorProps}) => (
43+
<ButtonInvisible {...anchorProps}>
44+
{children} <GearIcon />
45+
</ButtonInvisible>
46+
)}
47+
placeholder="Field type"
48+
items={fieldTypes}
49+
selectedItem={selectedType}
50+
onChange={setSelectedType}
51+
overlayProps={{width: 'medium'}}
52+
/>
53+
)
54+
}
55+
```
56+
57+
</td>
58+
<td valign="top">
59+
60+
```jsx
61+
const fieldTypes = [
62+
{id: 0, text: 'Text'},
63+
{id: 1, text: 'Number'},
64+
{id: 3, text: 'Date'},
65+
{id: 4, text: 'Single select'},
66+
{id: 5, text: 'Iteration'}
67+
]
68+
69+
const Example = () => {
70+
const [selectedType, setSelectedType] = React.useState()
71+
72+
render(
73+
<ActionMenu>
74+
<ActionMenu.Button aria-label="Select field type">{selectedType.name || 'Field type'}</ActionMenu.Button>
75+
<ActionMenu.Overlay width="medium">
76+
<ActionList selectionVariant="single">
77+
{fieldTypes.map(type => (
78+
<ActionList.Item
79+
key={type.id}
80+
selected={type.id === selectedType.id}
81+
onSelect={() => setSelectedType(type)}
82+
>
83+
{type.name}
84+
</ActionList.Item>
85+
))}
86+
</ActionList>
87+
</ActionMenu.Overlay>
88+
</ActionMenu>
89+
)
90+
}
91+
```
92+
93+
</td>
94+
</tr>
95+
</table>
96+
97+
To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
98+
99+
```js
100+
import {DropdownMenu} from '@primer/react/deprecated'
101+
```
102+
103+
You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.
104+
105+
### drafts/DropdownMenu2
106+
107+
DropdownMenu2 has been removed in favor of ActionMenu with ActionList

‎docs/content/ActionList.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: ActionList
44
status: Alpha
55
source: https://github.com/primer/react/tree/main/src/ActionList
66
storybook: '/react/storybook?path=/story/composite-components-actionlist'
7-
description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including DropdownMenu and ActionMenu.
7+
description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel.
88
---
99

1010
import {Avatar} from '@primer/react'
@@ -445,5 +445,4 @@ render(<SelectFields />)
445445
## Related components
446446

447447
- [ActionMenu](/ActionMenu)
448-
- [DropdownMenu](/DropdownMenu)
449448
- [SelectPanel](/SelectPanel)

‎docs/content/ActionMenu.mdx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,10 @@ const Example = () => {
199199
<ActionList selectionVariant="single">
200200
{fieldTypes.map((type, index) => (
201201
<ActionList.Item key={index} selected={index === selectedIndex} onSelect={() => setSelectedIndex(index)}>
202-
<type.icon /> {type.name}
202+
<ActionList.LeadingVisual>
203+
<type.icon />
204+
</ActionList.LeadingVisual>
205+
{type.name}
203206
</ActionList.Item>
204207
))}
205208
</ActionList>

‎docs/content/DropdownMenu.mdx‎ renamed to ‎docs/content/deprecated/DropdownMenu.mdx‎

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,91 @@
11
---
22
componentId: dropdown_menu
33
title: DropdownMenu
4-
status: Alpha
4+
status: Deprecated
55
---
66

77
A `DropdownMenu` provides an anchor (button by default) that will open a floating menu of selectable items. The menu can be opened and navigated using keyboard or mouse. When an item is selected, the menu will close and the `onChange` callback will be called. If the default anchor button is used, the anchor contents will be updated with the selection.
88

9+
## Deprecation
10+
11+
Use [new version of ActionMenu](/ActionMenu#with-selection) with composable API, design updates and accessibility fixes.
12+
13+
**Before**
14+
15+
```jsx
16+
const fieldTypes = [
17+
{key: 0, text: 'Text'},
18+
{key: 1, text: 'Number'},
19+
{key: 3, text: 'Date'},
20+
{key: 4, text: 'Single select'},
21+
{key: 5, text: 'Iteration'}
22+
]
23+
24+
const Example = () => {
25+
const [selectedType, setSelectedType] = React.useState()
26+
27+
return (
28+
<DropdownMenu
29+
renderAnchor={({children, ...anchorProps}) => (
30+
<ButtonInvisible {...anchorProps}>
31+
{children} <GearIcon />
32+
</ButtonInvisible>
33+
)}
34+
placeholder="Field type"
35+
items={fieldTypes}
36+
selectedItem={selectedType}
37+
onChange={setSelectedType}
38+
/>
39+
)
40+
}
41+
```
42+
43+
**After**
44+
45+
Instead of `DropdownMenu`, you can use the `ActionMenu` with `ActionList selectionVariant=single`, this will give menu items the correct semantics:
46+
47+
```jsx
48+
const fieldTypes = [
49+
{id: 0, text: 'Text'},
50+
{id: 1, text: 'Number'},
51+
{id: 3, text: 'Date'},
52+
{id: 4, text: 'Single select'},
53+
{id: 5, text: 'Iteration'}
54+
]
55+
56+
const Example = () => {
57+
const [selectedType, setSelectedType] = React.useState()
58+
59+
render(
60+
<ActionMenu>
61+
<ActionMenu.Button aria-label="Select field type">{selectedType.name || 'Field type'}</ActionMenu.Button>
62+
<ActionMenu.Overlay>
63+
<ActionList selectionVariant="single">
64+
{fieldTypes.map(type => (
65+
<ActionList.Item
66+
key={type.id}
67+
selected={type.id === selectedType.id}
68+
onSelect={() => setSelectedType(type)}
69+
>
70+
{type.name}
71+
</ActionList.Item>
72+
))}
73+
</ActionList>
74+
</ActionMenu.Overlay>
75+
</ActionMenu>
76+
)
77+
}
78+
```
79+
80+
Or continue using deprecated API:
81+
82+
```js
83+
import {DropdownMenu} from '@primer/react/deprecated'
84+
```
85+
986
## Example
1087

11-
```javascript live noinline
88+
```javascript live noinline deprecated
1289
function DemoComponent() {
1390
const items = React.useMemo(
1491
() => [

0 commit comments

Comments
 (0)