Skip to content

Commit ad14a40

Browse files
colebemisrezrahsiddharthkppksjcemperrotti
committed
Next major (#1910)
* prepare integration branch * Move deprecated components to deprecated folder (#1881) * prepare integration branch * Move deprecated components to deprecated folder * Add subpath exports for deprecated * Fix up the docs * Remove dialog and formgroup components * Fix up all the tests * Create smooth-cameras-prove.md Co-authored-by: Reza Rahman <rezrah@github.com> * Prefix component with types exported from ActionList2 and ActionMenu2 (#1883) * prefix component name to types * add changeset * Update .changeset/actionlist2-actionmenu2-prefix-types.md Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: Cole Bemis <colebemis@github.com> * Export PageLayout from main bundle (#1882) * Export PageLayout from main bundle * Create odd-apes-guess.md * Add PageLayout to sidenav * Update .changeset/odd-apes-guess.md Co-authored-by: Rez <rezrah@github.com> * Update PageLayout docs Co-authored-by: Rez <rezrah@github.com> * Update release notes and add deprecation notices for SelectMenu and Dropdown (#1887) * chore: add deprecation notices for SelectMenu and Dropdown * fix: deprecated metadata scope in docs * docs: update release notes for Flex and BorderBox * docs: update release notes for Position * chore: add deprecated scope to jsx snippets * chore: add release notes for Dropdown deprecation * chore: add Grid release notes * update release notes * Deprecate ActionMenu v1 & Promote drafts/ActionMenu v2 (#1895) * 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! * Revert "Deprecate ActionMenu v1 & Promote drafts/ActionMenu v2 (#1895)" (#1896) This reverts commit f366604. * 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 * 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 * 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 :) * Fix code examples in changeset (#1901) * Update .changeset/deprecate-actionlistv1-promote-actionlistv2.md * Add linebreaks to changesets * Button deprecation (#1908) * Move old button to deprecated * Move Button2 to main bundle * Add migration docs * More changes from the checklist * More deprecation * Update tests * Add deprecated details * Create many-roses-hammer.md * Update .changeset/many-roses-hammer.md Co-authored-by: Rez <rezrah@github.com> * Update many-roses-hammer.md * Update many-roses-hammer.md * Update many-roses-hammer.md Co-authored-by: Rez <rezrah@github.com> * Deprecate components replaced by FormControl (#1888) * moves InputField to deprecated package * adds jsdoc comments for deprecation * adds changeset * fixes bad autoformatting in changeset * fixes import path in test file * addresses PR feedback * fixes FormGroup import in test * addresses PR feedback * moves tests to depreacted directory * removes docs header image * fixes bad formatting in changelog markdown * Revert "fix merge conflicts with main" This reverts commit 363bb07, reversing changes made to f94dcd3. * Deprecate ChoiceFieldset and ChoiceInputField (#1900) * deprecates ChoiceFieldset and ChoiceInputField * update import paths in tests * addresses more PR feedback * fixes bad imports in docs * updates outdated story and test * moves components to deprecated directory * fixes broken docs pages * fixes bad formatting in changelog markdown * minor tweaks * moves deprecated notation for ChoiceInputField * Deprecate legacy Label component (#1889) * moves Label to deprecated bundle * graduates Label2 to main bundle * cleanup * adds changeset * fixes tests * update legacy label snapshots * Update .changeset/heavy-points-marry.md Co-authored-by: Rez <rezrah@github.com> * Update docs/content/Label.mdx Co-authored-by: Rez <rezrah@github.com> * addresses pr feedback * adds Label back to sidebar * updates tests, removes docs header image * removes docs header image * fixes tests * resets changed test Co-authored-by: Rez <rezrah@github.com> * Move remaining deprecated components to src/deprecated (#1917) * Move deprecated components to src/deprecated * Fix imports for tests * Various fixes for v35 (#1916) * chore: ad-hoc fixes for next-major branch * fix #1912 docs error * docs: remove reference to system props * Create changeset-for-1917.md (#1919) * Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay (#1921) * Allow ActionMenu.Overlay to pass through align prop to AnchoredOverlay * Add align prop to docs * Fix AnchoredOverlay docs * add changeset * ActionMenu.Button: Fix spacing between text and caret (#1922) * Fix spacing between Text and caret for ActionMenu.Button * Improve changelog * fix margin after design review * unrelated change * Update ActionMenu docs (#1931) * Button: Update active styles + use them for aria-expanded (#1915) * Add aria-expanded styles for Button * update default button active styles * update snapshot for button * Create healthy-dots-chew.md * fix broken test following main merging conflict resolution * Fixes for v35 (#1934) * fix ActioMenu story * backfill missing exports in root index * fix package-lock * add changeset * v35: Remove type aliases for ActionList (#1937) * Replace aliases for ActionList types * export types for LinkItem * update selection types * Next major changeset edits (#1939) * Remove unnecessary changesets * Edit changesets * Fixes for v35 (#1938) * add missing root exports * fix invalid export * add missing fragments to changesets (#1940) * Update changeset examples (#1941) * Fix table in changeset * Add missing comma * Fix grid changeset * Update button changeset Co-authored-by: Reza Rahman <rezrah@github.com> Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: Pavithra Kodmad <pksjce@github.com> Co-authored-by: Mike Perrotti <mperrotti@github.com>
1 parent 5f3bd4f commit ad14a40

File tree

235 files changed

+7996
-7528
lines changed

Some content is hidden

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

235 files changed

+7996
-7528
lines changed

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
`ActionList2` exported types are now prefixed with `ActionList`:
6+
7+
```
8+
ListProps → ActionListProps
9+
GroupProps → ActionListGroupProps
10+
ItemProps → ActionListItemProps
11+
DescriptionProps → ActionListDescriptionProps
12+
LeadingVisualProps → ActionListLeadingVisualProps,
13+
TrailingVisualProps → ActionListTrailingVisualProps
14+
```
15+
16+
`ActionMenu2` exported types are now prefixed with `ActionMenu`:
17+
18+
```
19+
MenuButtonProps → ActionMenuButtonProps
20+
MenuAnchorProps → ActionMenuAnchorProps
21+
```

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
ActionMenu.Button: Fix spacing between text and caret

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

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
'@primer/react': major
3+
---
4+
<br />
5+
6+
### ActionList
7+
8+
ActionList has been rewritten with a composable API, design updates and accessibility fixes.
9+
10+
See full list of props and examples: https://primer.style/react/ActionList
11+
12+
<table>
13+
<tr>
14+
<th> Before (v34)</th> <th> After (v35)</th>
15+
</tr>
16+
<tr>
17+
<td valign="top">
18+
19+
```jsx
20+
<ActionList
21+
items={[
22+
{text: 'New file'},
23+
{text: 'Copy link'},
24+
{text: 'Edit file'},
25+
ActionList.Divider,
26+
{text: 'Delete file', variant: 'danger'}
27+
]}
28+
/>
29+
```
30+
31+
</td>
32+
<td valign="top">
33+
34+
```jsx
35+
<ActionList>
36+
<ActionList.Item>New file</ActionList.Item>
37+
<ActionList.Item>Copy link</ActionList.Item>
38+
<ActionList.Item>Edit file</ActionList.Item>
39+
<ActionList.Divider />
40+
<ActionList.Item variant="danger">Delete file</ActionList.Item>
41+
</ActionList>
42+
```
43+
44+
</td>
45+
</tr>
46+
<tr>
47+
<td valign="top">
48+
49+
```jsx
50+
<ActionList
51+
showItemDividers
52+
items={[
53+
{
54+
key: '0',
55+
leadingVisual: LinkIcon,
56+
text: 'github/primer'
57+
},
58+
{
59+
key: '1',
60+
leadingVisual: () => <Avatar src="https://github.com/mona.png" />,
61+
text: 'mona',
62+
description: 'Monalisa Octocat',
63+
descriptionVariant: 'block'
64+
},
65+
{
66+
key: '2',
67+
leadingVisual: GearIcon,
68+
text: 'View Settings',
69+
trailingVisual: ArrowRightIcon
70+
}
71+
]}
72+
/>
73+
```
74+
75+
</td>
76+
<td valign="top">
77+
78+
```jsx
79+
<ActionList showDividers>
80+
<ActionList.Item>
81+
<ActionList.LeadingVisual>
82+
<LinkIcon />
83+
</ActionList.LeadingVisual>
84+
github/primer
85+
</ActionList.Item>
86+
<ActionList.Item>
87+
<ActionList.LeadingVisual>
88+
<Avatar src="https://github.com/mona.png" />
89+
</ActionList.LeadingVisual>
90+
mona
91+
<ActionList.Description variant="block">Monalisa Octocat</ActionList.Description>
92+
</ActionList.Item>
93+
<ActionList.Item>
94+
<ActionList.LeadingVisual>
95+
<GearIcon />
96+
</ActionList.LeadingVisual>
97+
View settings
98+
<ActionList.TrailingVisual>
99+
<ArrowRightIcon />
100+
</ActionList.TrailingVisual>
101+
</ActionList.Item>
102+
</ActionList>
103+
```
104+
105+
</td>
106+
</tr>
107+
<tr>
108+
<td valign="top">
109+
110+
```jsx
111+
<ActionList
112+
groupMetadata={[
113+
{groupId: '0', header: {title: 'Live query'}},
114+
{groupId: '1', header: {title: 'Layout'}}
115+
]}
116+
items={[
117+
{key: '0', text: 'repo:github/github', groupId: '0'},
118+
{key: '1', text: 'Table', groupId: '1'},
119+
{key: '2', text: 'Board', groupId: '1'},
120+
{key: '3', text: 'View settings'}
121+
]}
122+
/>
123+
```
124+
125+
</td>
126+
<td valign="top">
127+
128+
```jsx
129+
<ActionList>
130+
<ActionList.Group title="Live query">
131+
<ActionList.Item>repo:github/github</ActionList.Item>
132+
</ActionList.Group>
133+
<ActionList.Divider />
134+
135+
<ActionList.Group title="Layout">
136+
<ActionList.Item>Table</ActionList.Item>
137+
<ActionList.Item>Board Description</ActionList.Item>
138+
</ActionList.Group>
139+
<ActionList.Divider />
140+
141+
<ActionList.Item>View settings</ActionList.Item>
142+
</ActionList>
143+
```
144+
145+
</td>
146+
</tr>
147+
</table>
148+
149+
To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
150+
151+
```js
152+
import {ActionList} from '@primer/react/deprecated'
153+
```
154+
155+
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‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
<br />
6+
7+
### ActionMenu
8+
9+
ActionMenu has been rewritten with a composable API, design updates and accessibility fixes.
10+
11+
See full list of props and examples: https://primer.style/react/ActionMenu
12+
13+
Main changes:
14+
15+
1. Instead of using `items` prop, use `ActionList` inside `ActionMenu`
16+
2. Instead of using `anchorContent` on `ActionMenu`, use `ActionMenu.Button` with `children`
17+
3. Instead of using `onAction` prop on `ActionMenu`, use `onSelect` prop on `ActionList.Item`
18+
4. Instead of using `groupMetadata` on `ActionMenu`, use `ActionList.Group`
19+
5. Instead of `overlayProps` on `ActionMenu`, 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+
```jsx
29+
<ActionMenu
30+
anchorContent="Menu"
31+
onAction={fn}
32+
items={[
33+
{text: 'New file'},
34+
{text: 'Copy link'},
35+
{text: 'Edit file'},
36+
ActionMenu.Divider,
37+
{text: 'Delete file', variant: 'danger'}
38+
]}
39+
overlayProps={{width: 'small'}}
40+
/>
41+
```
42+
43+
</td>
44+
<td valign="top">
45+
46+
```jsx
47+
<ActionMenu>
48+
<ActionMenu.Button>Menu</ActionMenu.Button>
49+
<ActionMenu.Overlay width="small">
50+
<ActionList>
51+
<ActionList.Item onSelect={fn}>New file</ActionList.Item>
52+
<ActionList.Item>Copy link</ActionList.Item>
53+
<ActionList.Item>Edit file</ActionList.Item>
54+
<ActionList.Divider />
55+
<ActionList.Item variant="danger">Delete file</ActionList.Item>
56+
</ActionList>
57+
</ActionMenu.Overlay>
58+
</ActionMenu>
59+
```
60+
61+
</td>
62+
</tr>
63+
</table>
64+
65+
To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
66+
67+
```js
68+
import {ActionMenu} from '@primer/react/deprecated'
69+
```
70+
71+
You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.

‎.changeset/deprecate-dropdownmenu.md‎

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

‎.changeset/healthy-dots-chew.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
- Update styles for default variant of Button's active state
6+
- Use active state for Button when it is used to open an Overlay

0 commit comments

Comments
 (0)