diff --git a/.changeset/changeset-for-1917.md b/.changeset/changeset-for-1917.md deleted file mode 100644 index cef6d6c7472..00000000000 --- a/.changeset/changeset-for-1917.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': major ---- - -Move remaining deprecated components to src/deprecated for full path imports like `@primer/react-lib-esm/deprecated/BorderBox` 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/heavy-points-marry.md b/.changeset/heavy-points-marry.md index 179ade21518..18821003286 100644 --- a/.changeset/heavy-points-marry.md +++ b/.changeset/heavy-points-marry.md @@ -2,6 +2,10 @@ '@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: @@ -14,7 +18,7 @@ If you were using the `Label` component to render issue/PR labels, use the [Issu - +
Before After Before (v34) After (v35)
@@ -39,3 +43,11 @@ import {Label} from "@primer/react"
+ +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 index 50bb79bc3f6..6a0aebbc653 100644 --- a/.changeset/many-roses-hammer.md +++ b/.changeset/many-roses-hammer.md @@ -1,11 +1,15 @@ --- '@primer/react': major --- -### Button deprecation -A new set of `Button` components brings a much needed update. Previously to `v35`, `Button` was a set of seven independent components. In `v35`, we now have common `Button` usage guidelines and more convenient API. +
+ +### Button + +Before `v35`, `Button` was a set of seven independent components. In `v35`, we now have common `Button` usage guidelines and a more convenient API. #### Button variants + We now support a variant property which takes values `primary`, `invisible`, `outline` and `danger` @@ -17,10 +21,10 @@ We now support a variant property which takes values `primary`, `invisible`, `ou ```jsx -import { ButtonPrimary, ButtonInvisible, - ButtonOutline, ButtonDanger } - from '@primer/react' - +import { ButtonPrimary, ButtonInvisible, +ButtonOutline, ButtonDanger } +from '@primer/react' + Primary Button @@ -41,7 +45,7 @@ import { ButtonPrimary, ButtonInvisible, ```jsx import { Button } from '@primer/react' - + @@ -60,10 +64,9 @@ import { Button } from '@primer/react'
-### Leading and Trailing icons +### Leading and trailing icons -In the previous component, we allowed icon components to be direct children. This results in a lot of custom styling for the icon components. -In the new one, we now have `leadinIcon` and `trailingIcon` properties. +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: @@ -92,7 +95,7 @@ In the new one, we now have `leadinIcon` and `trailingIcon` properties. ### Icon buttons -Icon only buttons are common usages in products. So we now have a component for the specific usecase +Icon-only buttons are common in many applications. We now have a component for this use-case:
@@ -120,7 +123,7 @@ Icon only buttons are common usages in products. So we now have a component for ### Size property -Earlier we used `variant` to mean size property. Now we have a new property called `size` which is more semantically correct. +Previously, we used a `variant` prop to set the size of buttons. We now have a prop called `size` which is more semantically correct.
diff --git a/.changeset/nervous-pets-sleep.md b/.changeset/nervous-pets-sleep.md index d8063834fc5..f503758a570 100644 --- a/.changeset/nervous-pets-sleep.md +++ b/.changeset/nervous-pets-sleep.md @@ -2,11 +2,13 @@ '@primer/react': major --- +
+ ### ChoiceFieldset and ChoiceFieldset -The `CheckboxGroup` and `RadioGroup` components will be used to deprecate the `ChoiceFieldset` component. The deprecation of `ChoiceFieldset` also allows us to deprecate `ChoiceInputField`. +The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldset` component. The deprecation of `ChoiceFieldset` also allows us to deprecate `ChoiceInputField`. -`CheckboxGroup` and `RadioGroup` have the ability to render contextual content with your fieldset: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology. +`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.
diff --git a/.changeset/olive-bears-act.md b/.changeset/olive-bears-act.md index 9a56a789ba9..94d16738b24 100644 --- a/.changeset/olive-bears-act.md +++ b/.changeset/olive-bears-act.md @@ -2,11 +2,15 @@ '@primer/react': major --- -The `FormControl` component will be used to deprecate 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. +
+ +### 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 After Before (v34) After (v35)
@@ -16,22 +20,22 @@ import {FormControl, Checkbox, TextInput} from "@primer/react" - Example text - + Example text + // OR - Example text - + Example text + // OR - Example text - + Example text + ``` @@ -83,6 +87,7 @@ import {FormControl} from '@primer/react'
+
Migration steps to FormControl