diff --git a/.changeset/actionlist2-actionmenu2-prefix-types.md b/.changeset/actionlist2-actionmenu2-prefix-types.md deleted file mode 100644 index b7d4cd11224..00000000000 --- a/.changeset/actionlist2-actionmenu2-prefix-types.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -'@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 -``` diff --git a/.changeset/deprecate-actionlistv1-promote-actionlistv2.md b/.changeset/deprecate-actionlistv1-promote-actionlistv2.md deleted file mode 100644 index 1979e50e66a..00000000000 --- a/.changeset/deprecate-actionlistv1-promote-actionlistv2.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -'@primer/react': major ---- - -### 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 - - - - - - - - - - - - - - - - - -
Before (v34) After (v35)
- -```jsx - -``` - - - -```jsx - - New file - Copy link - Edit file - - Delete file - -``` - -
- -```jsx - , - text: 'mona', - description: 'Monalisa Octocat', - descriptionVariant: 'block' - }, - { - key: '2', - leadingVisual: GearIcon, - text: 'View Settings', - trailingVisual: ArrowRightIcon - } - ]} -/> -``` - - - -```jsx - - - - - - github/primer - - - - - - mona - Monalisa Octocat - - - - - - View settings - - - - - -``` - -
- -```jsx - -``` - - - -```jsx - - - repo:github/github - - - - - Table - Board Description - - - - View settings - -``` - -
- -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. diff --git a/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md b/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md deleted file mode 100644 index 3fbec5cf4eb..00000000000 --- a/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -'@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` - - - - - - - - - -
Before (v34) After (v35)
- -```jsx - -``` - - - -```jsx - - Menu - - - New file - Copy link - Edit file - - Delete file - - - -``` - -
- -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/deprecate-dropdownmenu.md b/.changeset/deprecate-dropdownmenu.md deleted file mode 100644 index cc9e225639c..00000000000 --- a/.changeset/deprecate-dropdownmenu.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -'@primer/react': major ---- - -### 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` - - - - - - - - - -
Before (v34) After (v35)
- -```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 ( - ( - - {children} - - )} - placeholder="Field type" - items={fieldTypes} - selectedItem={selectedType} - onChange={setSelectedType} - overlayProps={{width: 'medium'}} - /> - ) -} -``` - - - -```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( - - {selectedType.name || 'Field type'} - - - {fieldTypes.map(type => ( - setSelectedType(type)} - > - {type.name} - - ))} - - - - ) -} -``` - -
- -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 diff --git a/.changeset/empty-pillows-hunt.md b/.changeset/empty-pillows-hunt.md deleted file mode 100644 index 14a2228fb78..00000000000 --- a/.changeset/empty-pillows-hunt.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -'@primer/react': major ---- - -### ActionList - -ActionList now ships a composable API. - -See full list of props and examples: https://primer.style/react/ActionList - - - - - - - - - - - - - - - - - -
Before After
- -```jsx - -``` - - - -```jsx - - New file - Copy link - Edit file - - Delete file - -``` - -
- -```jsx - , - text: 'mona', - description: 'Monalisa Octocat', - descriptionVariant: 'block' - }, - { - key: '2', - leadingVisual: GearIcon, - text: 'View Settings', - trailingVisual: ArrowRightIcon - } - ]} -/> -``` - - - -```jsx - - - - - - github/primer - - - - - - mona - Monalisa Octocat - - - - - - View settings - - - - - -``` - -
- -```jsx - -``` - - - -```jsx - - - repo:github/github - - - - - Table - Board Description - - - - View settings - -``` - -
- -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/.changeset/hip-buses-peel.md b/.changeset/hip-buses-peel.md deleted file mode 100644 index 8f801600bcd..00000000000 --- a/.changeset/hip-buses-peel.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -Adds CheckboxGroup and RadioGroup components to replace the ChoiceFieldset component diff --git a/.changeset/hot-toes-count.md b/.changeset/hot-toes-count.md deleted file mode 100644 index b485b99ddfb..00000000000 --- a/.changeset/hot-toes-count.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -Makes it possible to render leading and trailing visuals in TextInputWithTokens just like we do in TextInput diff --git a/.changeset/odd-apes-guess.md b/.changeset/odd-apes-guess.md deleted file mode 100644 index e15f28b4809..00000000000 --- a/.changeset/odd-apes-guess.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -"@primer/react": major ---- - -`PageLayout` is being graduated from the `drafts` bundle to the `main` bundle. - -To upgrade, rewrite your imports accordingly: - -```diff -- import {PageLayout} from '@primer/react/drafts' -+ import {PageLayout} from '@primer/react' -``` diff --git a/.changeset/smooth-cameras-prove.md b/.changeset/smooth-cameras-prove.md deleted file mode 100644 index f3d34b33be6..00000000000 --- a/.changeset/smooth-cameras-prove.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -'@primer/react': major ---- - -### SelectMenu - -⚠️ `SelectMenu` has been deprecated. Please use `ActionMenu` instead. - - - - - - - - - -
Before After
- -```jsx - - - - Projects - - Primer React bugs - Primer React roadmap - Project 3 - Project 4 - - - -``` - - - -```jsx - - Projects - - - - Primer React bugs - Primer React roadmap - Project three - Project four - - - - -``` - -
- -See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples. - -### Dropdown - -⚠️ `Dropdown` has been deprecated. Please use `ActionMenu` instead. - - - - - - - - - -
Before After
- -```jsx -const fieldTypes = [ - {leadingVisual: TypographyIcon, text: 'Text'}, - {leadingVisual: NumberIcon, text: 'Number'} -] - -const Example = () => { - const [selectedItem, setSelectedItem] = React.useState() - - return ( - {children}} - placeholder="Select a field type" - items={fieldTypes} - selectedItem={selectedItem} - onChange={() => setSelectedIndex(index)} - /> - ) -} -``` - - - -```jsx -const fieldTypes = [ - {icon: , name: 'Text'}, - {icon: , name: 'Number'} -] - -const Example = () => { - const [selectedItem, setSelectedItem] = React.useState() - - return ( - - {selectedItem ? selectedItem.name : 'Select a field type'} - - - {fieldTypes.map(field => ( - setSelectedItem(field)} key={field.name}> - {field.icon} - {field.name} - - ))} - - - - ) -} -``` - -
- -See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples. - -### Flex - -⚠️ `Flex` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. - - - - - - - - - -
Before After
- -```jsx - - - Item 1 - - -``` - - - -```jsx - - - Item 1 - - -``` - -
- -### Grid - -⚠️ `Grid` has been deprecated. Please use `ActionMenu` instead. - - - - - - - - - -
Before After
- -```jsx - - - 1 - - - 2 - - -``` - - - -```jsx - - - 1 - - - 2 - - -``` - -
- -### BorderBox - -⚠️ `BorderBox` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. - - - - - - - - - -
Before After
- -```jsx -Item 1 -``` - - - -```jsx - - Item 1 - -``` - -
- -### Position - -⚠️ `Position` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. - - - - - - - - - -
Before After
- -```jsx -<> - ... - ... - ... - ... - ... - -``` - - - -```jsx -<> - ... - ... - ... - ... - ... - -``` - -
diff --git a/CHANGELOG.md b/CHANGELOG.md index d1c66433df6..8521fe182a7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,773 @@ # @primer/components +## 35.0.0 + +### Major Changes + +- [#1883](https://github.com/primer/react/pull/1883) [`310e6553`](https://github.com/primer/react/commit/310e6553134cd333a96e67d434d3b07167d01ed1) Thanks [@siddharthkp](https://github.com/siddharthkp)! - `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 + ``` + +* [#1893](https://github.com/primer/react/pull/1893) [`17ef5ef8`](https://github.com/primer/react/commit/17ef5ef8908cc9b4a9992c709518025184105082) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ### 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 + + + + + + + + + + + + + + + + + +
Before (v34) After (v35)
+ + ```jsx + + ``` + + + + ```jsx + + New file + Copy link + Edit file + + Delete file + + ``` + +
+ + ```jsx + , + text: 'mona', + description: 'Monalisa Octocat', + descriptionVariant: 'block' + }, + { + key: '2', + leadingVisual: GearIcon, + text: 'View Settings', + trailingVisual: ArrowRightIcon + } + ]} + /> + ``` + + + + ```jsx + + + + + + github/primer + + + + + + mona + Monalisa Octocat + + + + + + View settings + + + + + + ``` + +
+ + ```jsx + + ``` + + + + ```jsx + + + repo:github/github + + + + + Table + Board Description + + + + View settings + + ``` + +
+ + 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. + +- [#1897](https://github.com/primer/react/pull/1897) [`d4023572`](https://github.com/primer/react/commit/d4023572804cf3d8ce6cd1e9480715ab855abefc) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ### 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` + + + + + + + + + +
Before (v34) After (v35)
+ + ```jsx + + ``` + + + + ```jsx + + Menu + + + New file + Copy link + Edit file + + Delete file + + + + ``` + +
+ + 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. + +* [#1898](https://github.com/primer/react/pull/1898) [`d6d1ca4c`](https://github.com/primer/react/commit/d6d1ca4c7ecf5276dd94f1da00a56c783e67e8d8) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ### 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` + + + + + + + + + +
Before (v34) After (v35)
+ + ```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 ( + ( + + {children} + + )} + placeholder="Field type" + items={fieldTypes} + selectedItem={selectedType} + onChange={setSelectedType} + overlayProps={{width: 'medium'}} + /> + ) + } + ``` + + + + ```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( + + {selectedType.name || 'Field type'} + + + {fieldTypes.map(type => ( + setSelectedType(type)} + > + {type.name} + + ))} + + + + ) + } + ``` + +
+ + 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 + +- [#1879](https://github.com/primer/react/pull/1879) [`fdd6915a`](https://github.com/primer/react/commit/fdd6915a4ba9a7c8195b05be602cb63cf271bd1c) Thanks [@rezrah](https://github.com/rezrah)! - ### ActionList + + ActionList now ships a composable API. + + See full list of props and examples: https://primer.style/react/ActionList + + + + + + + + + + + + + + + + + +
Before After
+ + ```jsx + + ``` + + + + ```jsx + + New file + Copy link + Edit file + + Delete file + + ``` + +
+ + ```jsx + , + text: 'mona', + description: 'Monalisa Octocat', + descriptionVariant: 'block' + }, + { + key: '2', + leadingVisual: GearIcon, + text: 'View Settings', + trailingVisual: ArrowRightIcon + } + ]} + /> + ``` + + + + ```jsx + + + + + + github/primer + + + + + + mona + Monalisa Octocat + + + + + + View settings + + + + + + ``` + +
+ + ```jsx + + ``` + + + + ```jsx + + + repo:github/github + + + + + Table + Board Description + + + + View settings + + ``` + +
+ + To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + + ```js + import {ActionList} from '@primer/react/deprecated' + ``` + +* [#1882](https://github.com/primer/react/pull/1882) [`df757521`](https://github.com/primer/react/commit/df757521a7a088628d96deeb263fbd0f0aefd9ca) Thanks [@colebemis](https://github.com/colebemis)! - `PageLayout` is being graduated from the `drafts` bundle to the `main` bundle. + + To upgrade, rewrite your imports accordingly: + + ```diff + - import {PageLayout} from '@primer/react/drafts' + + import {PageLayout} from '@primer/react' + ``` + +- [#1881](https://github.com/primer/react/pull/1881) [`8cd12439`](https://github.com/primer/react/commit/8cd12439703e39d38893e02df0ed84a45d846e55) Thanks [@pksjce](https://github.com/pksjce)! - ### SelectMenu + + ⚠️ `SelectMenu` has been deprecated. Please use `ActionMenu` instead. + + + + + + + + + +
Before After
+ + ```jsx + + + + Projects + + Primer React bugs + Primer React roadmap + Project 3 + Project 4 + + + + ``` + + + + ```jsx + + Projects + + + + Primer React bugs + Primer React roadmap + Project three + Project four + + + + + ``` + +
+ + See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples. + + ### Dropdown + + ⚠️ `Dropdown` has been deprecated. Please use `ActionMenu` instead. + + + + + + + + + +
Before After
+ + ```jsx + const fieldTypes = [ + {leadingVisual: TypographyIcon, text: 'Text'}, + {leadingVisual: NumberIcon, text: 'Number'} + ] + + const Example = () => { + const [selectedItem, setSelectedItem] = React.useState() + + return ( + {children}} + placeholder="Select a field type" + items={fieldTypes} + selectedItem={selectedItem} + onChange={() => setSelectedIndex(index)} + /> + ) + } + ``` + + + + ```jsx + const fieldTypes = [ + {icon: , name: 'Text'}, + {icon: , name: 'Number'} + ] + + const Example = () => { + const [selectedItem, setSelectedItem] = React.useState() + + return ( + + {selectedItem ? selectedItem.name : 'Select a field type'} + + + {fieldTypes.map(field => ( + setSelectedItem(field)} key={field.name}> + {field.icon} + {field.name} + + ))} + + + + ) + } + ``` + +
+ + See [https://primer.style/react/ActionMenu](https://primer.style/react/ActionMenu) for more migration examples. + + ### Flex + + ⚠️ `Flex` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ + ```jsx + + + Item 1 + + + ``` + + + + ```jsx + + + Item 1 + + + ``` + +
+ + ### Grid + + ⚠️ `Grid` has been deprecated. Please use `ActionMenu` instead. + + + + + + + + + +
Before After
+ + ```jsx + + + 1 + + + 2 + + + ``` + + + + ```jsx + + + 1 + + + 2 + + + ``` + +
+ + ### BorderBox + + ⚠️ `BorderBox` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ + ```jsx + Item 1 + ``` + + + + ```jsx + + Item 1 + + ``` + +
+ + ### Position + + ⚠️ `Position` has been deprecated. Please use [`Box`](https://primer.style/react/Box) instead. + + + + + + + + + +
Before After
+ + ```jsx + <> + ... + ... + ... + ... + ... + + ``` + + + + ```jsx + <> + ... + ... + ... + ... + ... + + ``` + +
+ +### Minor Changes + +- [#1862](https://github.com/primer/react/pull/1862) [`eebb3f27`](https://github.com/primer/react/commit/eebb3f27c54b68c4a8b4d46c555f7d603e9c8e7d) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds CheckboxGroup and RadioGroup components to replace the ChoiceFieldset component + +### Patch Changes + +- [#1886](https://github.com/primer/react/pull/1886) [`ecbf923e`](https://github.com/primer/react/commit/ecbf923e794498654e9e5d749e3593136a5790ff) Thanks [@mperrotti](https://github.com/mperrotti)! - Makes it possible to render leading and trailing visuals in TextInputWithTokens just like we do in TextInput + ## 34.6.0 ### Minor Changes diff --git a/package.json b/package.json index c09d8afcdc8..f9423032e27 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "34.6.0", + "version": "35.0.0", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js",