diff --git a/.changeset/clean-mails-accept.md b/.changeset/clean-mails-accept.md deleted file mode 100644 index 00d788b60fc0..000000000000 --- a/.changeset/clean-mails-accept.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Convert Details to css module behind feature flag diff --git a/.changeset/gold-items-shave.md b/.changeset/gold-items-shave.md deleted file mode 100644 index 3d45affb5f7e..000000000000 --- a/.changeset/gold-items-shave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -Move Checkbox css module feature flag to staff diff --git a/.changeset/itchy-paws-bake.md b/.changeset/itchy-paws-bake.md deleted file mode 100644 index 532507c7a46e..000000000000 --- a/.changeset/itchy-paws-bake.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -fix(SegmentedControl): set global focus styles diff --git a/.changeset/old-plums-explode.md b/.changeset/old-plums-explode.md deleted file mode 100644 index 494da343cbbf..000000000000 --- a/.changeset/old-plums-explode.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -fix(DataTable): export datatable utility types diff --git a/.changeset/shy-seahorses-mix.md b/.changeset/shy-seahorses-mix.md deleted file mode 100644 index 1819269fecf1..000000000000 --- a/.changeset/shy-seahorses-mix.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -AvatarStack: Adds keyboard support to `AvatarStack` diff --git a/.changeset/six-colts-admire.md b/.changeset/six-colts-admire.md deleted file mode 100644 index 91cdb94123ea..000000000000 --- a/.changeset/six-colts-admire.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": minor ---- - -Remove CSS modules feature flag from Label component diff --git a/.changeset/twelve-kings-confess.md b/.changeset/twelve-kings-confess.md deleted file mode 100644 index 7d55fca5497d..000000000000 --- a/.changeset/twelve-kings-confess.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -Adds NavList.GroupHeading component that can be used instead of the ActionList.Group 'title' prop if you need to render something besides a string diff --git a/.changeset/wild-maps-grow.md b/.changeset/wild-maps-grow.md deleted file mode 100644 index e3b514572c57..000000000000 --- a/.changeset/wild-maps-grow.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -fix(FormControl): allow required check boxes in CheckboxGroup diff --git a/.changeset/wise-llamas-exist.md b/.changeset/wise-llamas-exist.md deleted file mode 100644 index dbd3aeb645d3..000000000000 --- a/.changeset/wise-llamas-exist.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -Move CounterLabel css modules feature flag to staff diff --git a/examples/app-router/package.json b/examples/app-router/package.json index fa3f5b8c0359..c2cc9f0b3e78 100644 --- a/examples/app-router/package.json +++ b/examples/app-router/package.json @@ -10,7 +10,7 @@ "type-check": "tsc --noEmit" }, "dependencies": { - "@primer/react": "37.0.1", + "@primer/react": "37.1.0", "next": "^14.2.10", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json index db4f7d97123b..1ce8067fb071 100644 --- a/examples/codesandbox/package.json +++ b/examples/codesandbox/package.json @@ -20,7 +20,7 @@ "@typescript-eslint/eslint-plugin": "^7.11.0", "@typescript-eslint/parser": "^7.3.1", "@vitejs/plugin-react": "^4.2.1", - "@primer/react": "37.0.1", + "@primer/react": "37.1.0", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.7", diff --git a/examples/consumer-test/package.json b/examples/consumer-test/package.json index ac945c979260..848d2f117ff0 100644 --- a/examples/consumer-test/package.json +++ b/examples/consumer-test/package.json @@ -9,7 +9,7 @@ "@types/react": "^18.3.11", "@types/react-dom": "^18.2.19", "@types/styled-components": "^5.1.11", - "@primer/react": "37.0.1", + "@primer/react": "37.1.0", "react": "^18.0.0", "react-dom": "^18.0.0", "styled-components": "^5.3.11", diff --git a/examples/theming/package.json b/examples/theming/package.json index f8a15d27c5f2..c96996eae469 100644 --- a/examples/theming/package.json +++ b/examples/theming/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@primer/octicons-react": "^19.9.0", - "@primer/react": "37.0.1", + "@primer/react": "37.1.0", "clsx": "^1.2.1", "next": "^14.2.10", "react": "^18.3.1", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index fba871e038d6..b19c55f3eba5 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,29 @@ # @primer/react +## 37.1.0 + +### Minor Changes + +- [#5167](https://github.com/primer/react/pull/5167) [`07b75e7`](https://github.com/primer/react/commit/07b75e78f6842713fff12dad1e7a0502596e30bf) Thanks [@jonrohan](https://github.com/jonrohan)! - Convert Details to css module behind feature flag + +- [#5134](https://github.com/primer/react/pull/5134) [`6713e72`](https://github.com/primer/react/commit/6713e72124f4b9e594b31d5abc7dda258940c9cc) Thanks [@TylerJDev](https://github.com/TylerJDev)! - AvatarStack: Adds keyboard support to `AvatarStack` + +- [#5060](https://github.com/primer/react/pull/5060) [`33396ea`](https://github.com/primer/react/commit/33396ead24bb25dc042004cd82bbdbe235403c61) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove CSS modules feature flag from Label component + +- [#5106](https://github.com/primer/react/pull/5106) [`851c857`](https://github.com/primer/react/commit/851c857f1a69541b6b8b77dac714f2de51419936) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds NavList.GroupHeading component that can be used instead of the ActionList.Group 'title' prop if you need to render something besides a string + +### Patch Changes + +- [#5146](https://github.com/primer/react/pull/5146) [`ad554da`](https://github.com/primer/react/commit/ad554da1ed3907e5764f68190c0a3dd1cf7529b7) Thanks [@jonrohan](https://github.com/jonrohan)! - Move Checkbox css module feature flag to staff + +- [#5140](https://github.com/primer/react/pull/5140) [`73796d3`](https://github.com/primer/react/commit/73796d3b249ade8b69adb5aa720432d77a433103) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(SegmentedControl): set global focus styles + +- [#5182](https://github.com/primer/react/pull/5182) [`31d9a05`](https://github.com/primer/react/commit/31d9a0587eb76f8d786404881b1727213c55fdbc) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(DataTable): export datatable utility types + +- [#5027](https://github.com/primer/react/pull/5027) [`9a30c63`](https://github.com/primer/react/commit/9a30c63dc8e0c2923952f7ffea831446d0ed6122) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(FormControl): allow required check boxes in CheckboxGroup + +- [#5147](https://github.com/primer/react/pull/5147) [`e421f32`](https://github.com/primer/react/commit/e421f32002ad07582d0221862f7afb6e8afbbc51) Thanks [@jonrohan](https://github.com/jonrohan)! - Move CounterLabel css modules feature flag to staff + ## 37.0.1 ### Patch Changes @@ -2368,7 +2392,7 @@ ```jsx // Hide pane on narrow viewports - ... + ... ``` - [#2199](https://github.com/primer/react/pull/2199) [`fb385b63`](https://github.com/primer/react/commit/fb385b63f22c1eb76193e42e92ea2a056e61fdbb) Thanks [@colebemis](https://github.com/colebemis)! - \* Updated the `position` prop in `PageLayout.Pane` to use the new responsive prop API introduced in https://github.com/primer/react/pull/2174. @@ -2529,7 +2553,7 @@ - [#2112](https://github.com/primer/react/pull/2112) [`74e1d138`](https://github.com/primer/react/commit/74e1d1386bc6bb6326c3c2b64b5e31146f9cc56b) Thanks [@colebemis](https://github.com/colebemis)! - [NavList](https://primer.style/NavList) is ready to use. You can now import it from the main bundle: ```js - import {NavList} from '@primer/react' + import { NavList } from "@primer/react"; ``` ### Patch Changes @@ -2670,11 +2694,11 @@ ```jsx ``` @@ -2702,21 +2726,21 @@ showItemDividers items={[ { - key: '0', + key: "0", leadingVisual: LinkIcon, - text: 'github/primer', + text: "github/primer", }, { - key: '1', + key: "1", leadingVisual: () => , - text: 'mona', - description: 'Monalisa Octocat', - descriptionVariant: 'block', + text: "mona", + description: "Monalisa Octocat", + descriptionVariant: "block", }, { - key: '2', + key: "2", leadingVisual: GearIcon, - text: 'View Settings', + text: "View Settings", trailingVisual: ArrowRightIcon, }, ]} @@ -2739,7 +2763,9 @@ mona - Monalisa Octocat + + Monalisa Octocat + @@ -2761,14 +2787,14 @@ ```jsx ``` @@ -2800,7 +2826,7 @@ To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: ```js - import {ActionList} from '@primer/react/deprecated' + 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. @@ -2851,13 +2877,13 @@ anchorContent="Menu" onAction={fn} items={[ - {text: 'New file'}, - {text: 'Copy link'}, - {text: 'Edit file'}, + { text: "New file" }, + { text: "Copy link" }, + { text: "Edit file" }, ActionMenu.Divider, - {text: 'Delete file', variant: 'danger'}, + { text: "Delete file", variant: "danger" }, ]} - overlayProps={{width: 'small'}} + overlayProps={{ width: "small" }} /> ``` @@ -2886,7 +2912,7 @@ To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: ```js - import {ActionMenu} from '@primer/react/deprecated' + 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. @@ -2918,19 +2944,19 @@ ```js const fieldTypes = [ - {key: 0, text: 'Text'}, - {key: 1, text: 'Number'}, - {key: 3, text: 'Date'}, - {key: 4, text: 'Single select'}, - {key: 5, text: 'Iteration'}, - ] + { 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() + const [selectedType, setSelectedType] = React.useState(); return ( ( + renderAnchor={({ children, ...anchorProps }) => ( {children} @@ -2939,10 +2965,10 @@ items={fieldTypes} selectedItem={selectedType} onChange={setSelectedType} - overlayProps={{width: 'medium'}} + overlayProps={{ width: "medium" }} /> - ) - } + ); + }; ``` @@ -2950,22 +2976,24 @@ ```jsx const fieldTypes = [ - {id: 0, text: 'Text'}, - {id: 1, text: 'Number'}, - {id: 3, text: 'Date'}, - {id: 4, text: 'Single select'}, - {id: 5, text: 'Iteration'}, - ] + { 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() + const [selectedType, setSelectedType] = React.useState(); render( - {selectedType.name || 'Field type'} + + {selectedType.name || "Field type"} + - {fieldTypes.map(type => ( + {fieldTypes.map((type) => ( , - ) - } + ); + }; ``` @@ -2988,7 +3016,7 @@ To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: ```js - import {DropdownMenu} from '@primer/react/deprecated' + 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. @@ -3019,17 +3047,21 @@ ```jsx - import {Label} from '@primer/react' + import { Label } from "@primer/react"; function Example() { return ( <> default - + danger > - ) + ); } ``` @@ -3037,7 +3069,7 @@ ```jsx - import {Label} from '@primer/react' + import { Label } from "@primer/react"; function Example() { return ( @@ -3047,7 +3079,7 @@ danger > - ) + ); } ``` @@ -3058,7 +3090,7 @@ To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: ```js - import {Label} from '@primer/react/deprecated' + 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. @@ -3081,7 +3113,12 @@ ```jsx - import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react' + import { + ButtonPrimary, + ButtonInvisible, + ButtonOutline, + ButtonDanger, + } from "@primer/react"; function Example() { return ( @@ -3091,7 +3128,7 @@ Outline Button Danger Button > - ) + ); } ``` @@ -3099,7 +3136,7 @@ ```jsx - import {Button} from '@primer/react' + import { Button } from "@primer/react"; function Example() { return ( @@ -3109,7 +3146,7 @@ Outline Button Danger Button > - ) + ); } ``` @@ -3216,34 +3253,50 @@ ```jsx - import {ChoiceFieldset} from '@primer/react' + import { ChoiceFieldset } from "@primer/react"; function Example() { return ( <> {/* Multi-select */} - Preferred Primer component interface + + Preferred Primer component interface + - Figma library + + Figma library + Primer CSS - Primer React components - Primer ViewComponents + + Primer React components + + + Primer ViewComponents + {/* Single select */} - Preferred Primer component interface + + Preferred Primer component interface + - Figma library + + Figma library + Primer CSS - Primer React components - Primer ViewComponents + + Primer React components + + + Primer ViewComponents + > - ) + ); } ``` @@ -3251,14 +3304,22 @@ ```jsx - import {CheckboxGroup, RadioGroup, FormControl, Checkbox, Radio} from '@primer/react' + import { + CheckboxGroup, + RadioGroup, + FormControl, + Checkbox, + Radio, + } from "@primer/react"; function Example() { return ( <> {/* Multi-select */} - Preferred Primer component interface + + Preferred Primer component interface + Figma @@ -3279,7 +3340,9 @@ {/* Single select */} - Preferred Primer component interface + + Preferred Primer component interface + Figma @@ -3298,7 +3361,7 @@ > - ) + ); } ``` @@ -3309,7 +3372,7 @@ To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`: ```js - import {ChoiceFieldset} from '@primer/react/deprecated' + 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. @@ -3341,7 +3404,7 @@ ```jsx - import {FormControl, Checkbox, TextInput} from '@primer/react' + import { FormControl, Checkbox, TextInput } from "@primer/react"; function Example() { return ( @@ -3361,7 +3424,7 @@ > - ) + ); } ``` @@ -3369,7 +3432,7 @@ ```jsx - import {FormGroup, TextInput} from '@primer/react' + import { FormGroup, TextInput } from "@primer/react"; function Example() { return ( @@ -3384,7 +3447,7 @@ > - ) + ); } ``` @@ -3394,7 +3457,7 @@ ```jsx - import {InputField, TextInput} from '@primer/react' + import { InputField, TextInput } from "@primer/react"; function Example() { return ( @@ -3402,7 +3465,7 @@ Example text - ) + ); } ``` @@ -3410,7 +3473,7 @@ ```jsx - import {FormControl, TextInput} from '@primer/react' + import { FormControl, TextInput } from "@primer/react"; function Example() { return ( @@ -3418,7 +3481,7 @@ Example text - ) + ); } ``` @@ -3429,7 +3492,11 @@ 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' + 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. @@ -3500,23 +3567,25 @@ ```jsx const fieldTypes = [ - {leadingVisual: TypographyIcon, text: 'Text'}, - {leadingVisual: NumberIcon, text: 'Number'}, - ] + { leadingVisual: TypographyIcon, text: "Text" }, + { leadingVisual: NumberIcon, text: "Number" }, + ]; const Example = () => { - const [selectedItem, setSelectedItem] = React.useState() + const [selectedItem, setSelectedItem] = React.useState(); return ( {children}} + renderAnchor={({ children, ...anchorProps }) => ( + {children} + )} placeholder="Select a field type" items={fieldTypes} selectedItem={selectedItem} onChange={() => setSelectedIndex(index)} /> - ) - } + ); + }; ``` @@ -3524,29 +3593,36 @@ ```jsx const fieldTypes = [ - {icon: , name: 'Text'}, - {icon: , name: 'Number'}, - ] + { icon: , name: "Text" }, + { icon: , name: "Number" }, + ]; const Example = () => { - const [selectedItem, setSelectedItem] = React.useState() + const [selectedItem, setSelectedItem] = React.useState(); return ( - {selectedItem ? selectedItem.name : 'Select a field type'} + + {selectedItem ? selectedItem.name : "Select a field type"} + - {fieldTypes.map(field => ( - setSelectedItem(field)} key={field.name}> - {field.icon} + {fieldTypes.map((field) => ( + setSelectedItem(field)} + key={field.name} + > + + {field.icon} + {field.name} ))} - ) - } + ); + }; ``` @@ -3648,7 +3724,12 @@ ```jsx - + Item 1 ``` @@ -4692,8 +4773,8 @@ * [`beef075e`](https://github.com/primer/react/commit/beef075e0274396b77887adf0b912583fe564b3f) [#1094](https://github.com/primer/react/pull/1094) Thanks [@colebemis](https://github.com/colebemis)! - Components no longer have a default `theme` prop. To ensure components still render correctly, you'll need pass the Primer theme to a [styled-components](https://styled-components.com/) `` at the root of your application: ```jsx - import {ThemeProvider} from 'styled-components' - import {theme} from '@primer/react' + import { ThemeProvider } from "styled-components"; + import { theme } from "@primer/react"; function App(props) { return ( @@ -4702,7 +4783,7 @@ your app here - ) + ); } ``` diff --git a/packages/react/package.json b/packages/react/package.json index 32b37b76e727..b8035a453bdc 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "37.0.1", + "version": "37.1.0", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js",