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/actionmenu-add-align-prop.md b/.changeset/actionmenu-add-align-prop.md deleted file mode 100644 index b790321d604..00000000000 --- a/.changeset/actionmenu-add-align-prop.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay diff --git a/.changeset/actionmenu-button-caret-spacing.md b/.changeset/actionmenu-button-caret-spacing.md deleted file mode 100644 index 7e58b5b8db3..00000000000 --- a/.changeset/actionmenu-button-caret-spacing.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': patch ---- - -ActionMenu.Button: Fix spacing between text and caret diff --git a/.changeset/deprecate-actionlistv1-promote-actionlistv2.md b/.changeset/deprecate-actionlistv1-promote-actionlistv2.md deleted file mode 100644 index d4f44de7b0d..00000000000 --- a/.changeset/deprecate-actionlistv1-promote-actionlistv2.md +++ /dev/null @@ -1,155 +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 d4f97523f19..00000000000 --- a/.changeset/deprecate-actionmenuv1-promote-actionmenuv2.md +++ /dev/null @@ -1,71 +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 4afcd361ad7..00000000000 --- a/.changeset/deprecate-dropdownmenu.md +++ /dev/null @@ -1,109 +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/healthy-dots-chew.md b/.changeset/healthy-dots-chew.md deleted file mode 100644 index 65e4bdcc842..00000000000 --- a/.changeset/healthy-dots-chew.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@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 diff --git a/.changeset/heavy-points-marry.md b/.changeset/heavy-points-marry.md deleted file mode 100644 index e2ab675ccde..00000000000 --- a/.changeset/heavy-points-marry.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -'@primer/react': major ---- - -
- -### Label - -The Label component's API and visual design have been updated to be consistent with its counterpart in [Primer ViewComponents' Label component](https://primer.style/view-components/components/label). - -Major changes in the new Label component: - -- No more `medium` size - only `small` and `large` -- Labels are outlined by default, so the `outline` prop has been removed -- Custom text and background colors are discouraged, but still possible via the `sx` prop - -If you were using the `Label` component to render issue/PR labels, use the [IssueLabelToken](https://primer.style/react/Token#issuelabeltoken) component instead. - - - - - - - - - -
Before (v34) After (v35)
- -```jsx -import {Label} from '@primer/react' - -function Example() { - return ( - <> - - - - ) -} -``` - - - -```jsx -import {Label} from '@primer/react' - -function Example() { - return ( - <> - - - - ) -} -``` - -
- -To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: - -```js -import {Label} 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/many-roses-hammer.md b/.changeset/many-roses-hammer.md deleted file mode 100644 index 6da3e28aa36..00000000000 --- a/.changeset/many-roses-hammer.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -'@primer/react': major ---- - -
- -### Button - -Before `v35`, `Button` was a set of seven independent components. In `v35`, we've simplified the `Button` API. - -#### Button variants - -We now support a variant property which takes values `primary`, `invisible`, `outline` and `danger` - - - - - - - - - -
Before (v34) After (v35)
- -```jsx -import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react' - -function Example() { - return ( - <> - Primary Button - Invisible Button - Outline Button - Danger Button - - ) -} -``` - - - -```jsx -import {Button} from '@primer/react' - -function Example() { - return ( - <> - - - - - - ) -} -``` - -
- -#### Leading and trailing icons - -Previously including icons inside buttons required a lot of custom styling. In the new `Button` component, we now support first-class `leadingIcon` and `trailingIcon` props: - - - - - - - - - -
Before (v34) After (v35)
- -```jsx - -``` - - - -```jsx - -``` - -
- -#### Icon buttons - -Icon-only buttons are common in many applications. We now have a component designed for this use-case: - - - - - - - - - -
Before (v34) After (v35)
- -```jsx - -``` - - - -```jsx - -``` - -
- -#### Size property - -Previously, we used a `variant` prop to set the size of buttons. We now have a prop called `size` which is more semantically correct. - - - - - - - - - -
Before (v34) After (v35)
- -```jsx - -``` - - - -```jsx - -``` - -
diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md deleted file mode 100644 index 3760edf640a..00000000000 --- a/.changeset/nervous-pets-sleep.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -'@primer/react': major ---- - -
- -### ChoiceFieldset - -The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldset` component. - -`CheckboxGroup` and `RadioGroup` have the ability to render contextual content with your fieldset: labels, validation statuses, captions. They also handle the ARIA attributes that make the form controls accessible to assistive technology. - - - - - - - - - -
Before (v34) After (v35)
- -```jsx -import {ChoiceFieldset} from '@primer/react' - -function Example() { - return ( - <> - {/* Multi-select */} - - Preferred Primer component interface - - Figma library - Primer CSS - Primer React components - Primer ViewComponents - - - - {/* Single select */} - - Preferred Primer component interface - - Figma library - Primer CSS - Primer React components - Primer ViewComponents - - - - ) -} -``` - - - -```jsx -import {CheckboxGroup, RadioGroup, FormControl, Checkbox, Radio} from '@primer/react' - -function Example() { - return ( - <> - {/* Multi-select */} - - Preferred Primer component interface - - - Figma - - - - CSS - - - - Primer React components - - - - Primer ViewComponents - - - - {/* Single select */} - - Preferred Primer component interface - - - Figma - - - - CSS - - - - Primer React components - - - - Primer ViewComponents - - - - ) -} -``` - -
- -To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: - -```js -import {ChoiceFieldset} 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/odd-apes-guess.md b/.changeset/odd-apes-guess.md deleted file mode 100644 index c92e0bb1a46..00000000000 --- a/.changeset/odd-apes-guess.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -"@primer/react": major ---- - -
- -### PageLayout - -`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/olive-bears-act.md b/.changeset/olive-bears-act.md deleted file mode 100644 index d946f2f815f..00000000000 --- a/.changeset/olive-bears-act.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -'@primer/react': major ---- - -
- -### FormGroup, InputField, ChoiceInputField - -The `FormControl` component is replacing the `FormGroup`, `InputField`, and `ChoiceInputField` components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology. - - - - - - - - - - - - - -
Before (v34) After (v35)
- -```jsx -import {FormControl, Checkbox, TextInput} from '@primer/react' - -function Example() { - return ( - <> - - Example text - - - {/* OR */} - - Example text - - - {/* OR */} - - Example text - - - - ) -} -``` - - - -```jsx -import {FormGroup, TextInput} from '@primer/react' - -function Example() { - return ( - <> - - Example text - - - {/* OR */} - - Example text - - - - ) -} -``` - -
- -```jsx -import {InputField, TextInput} from '@primer/react' - -function Example() { - return ( - - Example text - - - ) -} -``` - - - -```jsx -import {FormControl, TextInput} from '@primer/react' - -function Example() { - return ( - - Example text - - - ) -} -``` - -
- -To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: - -```js -import {FormGroup, ChoiceInputField, InputField} 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/smooth-cameras-prove.md b/.changeset/smooth-cameras-prove.md deleted file mode 100644 index 327e4850c58..00000000000 --- a/.changeset/smooth-cameras-prove.md +++ /dev/null @@ -1,264 +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 [`Box`](https://primer.style/react/Box) 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/.changeset/twenty-weeks-battle.md b/.changeset/twenty-weeks-battle.md deleted file mode 100644 index 6b732f806c9..00000000000 --- a/.changeset/twenty-weeks-battle.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -'@primer/react': patch ---- - -Surfaced the following components and hooks from the root index: - -- Portal -- AnchoredOverlay -- useFocusTrap -- useFocusZone (and types) -- sx (and types) -- ConfirmationDialogProps - -These exports can now be imported from the root index, rather than from their nested subfolders. - -E.g. - -```diff -- import { ConfirmationDialogProps } from '@primer/react/lib-esm/Dialog/ConfirmationDialog'; -+ import { ConfirmationDialogProps } from '@primer/react'; -``` diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d54f5f311d..0e45641188c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,1081 @@ # @primer/components +## 35.0.0 + +### Major Changes + +- [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! - `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 + ``` + +* [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! -
+ + ### 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. + +- [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! -
+ + ### 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. + +* [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! -
+ + ### 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 + +- [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! -
+ + ### Label + + The Label component's API and visual design have been updated to be consistent with its counterpart in [Primer ViewComponents' Label component](https://primer.style/view-components/components/label). + + Major changes in the new Label component: + + - No more `medium` size - only `small` and `large` + - Labels are outlined by default, so the `outline` prop has been removed + - Custom text and background colors are discouraged, but still possible via the `sx` prop + + If you were using the `Label` component to render issue/PR labels, use the [IssueLabelToken](https://primer.style/react/Token#issuelabeltoken) component instead. + + + + + + + + + +
Before (v34) After (v35)
+ + ```jsx + import {Label} from '@primer/react' + + function Example() { + return ( + <> + + + + ) + } + ``` + + + + ```jsx + import {Label} from '@primer/react' + + function Example() { + return ( + <> + + + + ) + } + ``` + +
+ + To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + + ```js + import {Label} from '@primer/react/deprecated' + ``` + + You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. + +* [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! -
+ + ### Button + + Before `v35`, `Button` was a set of seven independent components. In `v35`, we've simplified the `Button` API. + + #### Button variants + + We now support a variant property which takes values `primary`, `invisible`, `outline` and `danger` + + + + + + + + + +
Before (v34) After (v35)
+ + ```jsx + import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react' + + function Example() { + return ( + <> + Primary Button + Invisible Button + Outline Button + Danger Button + + ) + } + ``` + + + + ```jsx + import {Button} from '@primer/react' + + function Example() { + return ( + <> + + + + + + ) + } + ``` + +
+ + #### Leading and trailing icons + + Previously including icons inside buttons required a lot of custom styling. In the new `Button` component, we now support first-class `leadingIcon` and `trailingIcon` props: + + + + + + + + + +
Before (v34) After (v35)
+ + ```jsx + + ``` + + + + ```jsx + + ``` + +
+ + #### Icon buttons + + Icon-only buttons are common in many applications. We now have a component designed for this use-case: + + + + + + + + + +
Before (v34) After (v35)
+ + ```jsx + + ``` + + + + ```jsx + + ``` + +
+ + #### Size property + + Previously, we used a `variant` prop to set the size of buttons. We now have a prop called `size` which is more semantically correct. + + + + + + + + + +
Before (v34) After (v35)
+ + ```jsx + + ``` + + + + ```jsx + + ``` + +
+ +- [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! -
+ + ### ChoiceFieldset + + The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldset` component. + + `CheckboxGroup` and `RadioGroup` have the ability to render contextual content with your fieldset: labels, validation statuses, captions. They also handle the ARIA attributes that make the form controls accessible to assistive technology. + + + + + + + + + +
Before (v34) After (v35)
+ + ```jsx + import {ChoiceFieldset} from '@primer/react' + + function Example() { + return ( + <> + {/* Multi-select */} + + Preferred Primer component interface + + Figma library + Primer CSS + Primer React components + Primer ViewComponents + + + + {/* Single select */} + + Preferred Primer component interface + + Figma library + Primer CSS + Primer React components + Primer ViewComponents + + + + ) + } + ``` + + + + ```jsx + import {CheckboxGroup, RadioGroup, FormControl, Checkbox, Radio} from '@primer/react' + + function Example() { + return ( + <> + {/* Multi-select */} + + Preferred Primer component interface + + + Figma + + + + CSS + + + + Primer React components + + + + Primer ViewComponents + + + + {/* Single select */} + + Preferred Primer component interface + + + Figma + + + + CSS + + + + Primer React components + + + + Primer ViewComponents + + + + ) + } + ``` + +
+ + To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + + ```js + import {ChoiceFieldset} from '@primer/react/deprecated' + ``` + + You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. + +* [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! -
+ + ### PageLayout + + `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' + ``` + +- [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! -
+ + ### FormGroup, InputField, ChoiceInputField + + The `FormControl` component is replacing the `FormGroup`, `InputField`, and `ChoiceInputField` components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology. + + + + + + + + + + + + + +
Before (v34) After (v35)
+ + ```jsx + import {FormControl, Checkbox, TextInput} from '@primer/react' + + function Example() { + return ( + <> + + Example text + + + {/* OR */} + + Example text + + + {/* OR */} + + Example text + + + + ) + } + ``` + + + + ```jsx + import {FormGroup, TextInput} from '@primer/react' + + function Example() { + return ( + <> + + Example text + + + {/* OR */} + + Example text + + + + ) + } + ``` + +
+ + ```jsx + import {InputField, TextInput} from '@primer/react' + + function Example() { + return ( + + Example text + + + ) + } + ``` + + + + ```jsx + import {FormControl, TextInput} from '@primer/react' + + function Example() { + return ( + + Example text + + + ) + } + ``` + +
+ + To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: + + ```js + import {FormGroup, ChoiceInputField, InputField} from '@primer/react/deprecated' + ``` + + You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically. + +* [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! -
+ + ### 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 [`Box`](https://primer.style/react/Box) 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 + +- [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! - Add align prop on ActionMenu.Overlay to pass through to AnchoredOverlay + +### Patch Changes + +- [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! - ActionMenu.Button: Fix spacing between text and caret + +* [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! - - Update styles for default variant of Button's active state + - Use active state for Button when it is used to open an Overlay + +- [#1910](https://github.com/primer/react/pull/1910) [`e1e8d478`](https://github.com/primer/react/commit/e1e8d47845ad7879bd34e634319dd8c8745e1de0) Thanks [@colebemis](https://github.com/colebemis)! - Surfaced the following components and hooks from the root index: + + - Portal + - AnchoredOverlay + - useFocusTrap + - useFocusZone (and types) + - sx (and types) + - ConfirmationDialogProps + + These exports can now be imported from the root index, rather than from their nested subfolders. + + E.g. + + ```diff + - import { ConfirmationDialogProps } from '@primer/react/lib-esm/Dialog/ConfirmationDialog'; + + import { ConfirmationDialogProps } from '@primer/react'; + ``` + ## 34.7.1 ### Patch Changes diff --git a/package.json b/package.json index c38424360c5..f9423032e27 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "34.7.1", + "version": "35.0.0", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js",