diff --git a/.changeset/sour-snakes-clap.md b/.changeset/sour-snakes-clap.md deleted file mode 100644 index 13522cc780a..00000000000 --- a/.changeset/sour-snakes-clap.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -fix(FormControl): fix spacing in vertical layouts" diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json index b74e779b48a..830996c0698 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.3.3", - "@primer/react": "37.11.0", + "@primer/react": "37.11.2", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.18", diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 5795f208690..284bf7c6580 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -10,7 +10,7 @@ "type-check": "tsc --noEmit" }, "dependencies": { - "@primer/react": "37.11.0", + "@primer/react": "37.11.2", "next": "^15.1.4", "react": "^19.0.0", "react-dom": "^19.0.0", diff --git a/examples/theming/package.json b/examples/theming/package.json index 9c946747581..99eb8779757 100644 --- a/examples/theming/package.json +++ b/examples/theming/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "37.11.0", + "@primer/react": "37.11.2", "clsx": "^1.2.1", "next": "^14.2.15", "react": "^18.3.1", diff --git a/package-lock.json b/package-lock.json index f706dc9ac54..2d9aed0e7b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -83,7 +83,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "37.11.0", + "@primer/react": "37.11.2", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -101,7 +101,7 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "37.11.0", + "@primer/react": "37.11.2", "next": "^15.1.4", "react": "^19.0.0", "react-dom": "^19.0.0", @@ -257,6 +257,12 @@ "node": ">= 10" } }, + "examples/nextjs/node_modules/@primer/primitives": { + "version": "10.3.4", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-10.3.4.tgz", + "integrity": "sha512-f4tudg+MFpU4sH73Ha9wFOBwyN2b2WI7BkqMThqRIWQ/LFUturYkgt78YByJ6PJw8ZY0poPiefvBCdduyd20vA==", + "license": "MIT" + }, "examples/nextjs/node_modules/@swc/helpers": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz", @@ -426,7 +432,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "37.11.0", + "@primer/react": "37.11.2", "clsx": "^1.2.1", "next": "^14.2.15", "react": "^18.3.1", @@ -26858,7 +26864,7 @@ "version": "7.6.3", "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", - "dev": true, + "devOptional": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -30708,7 +30714,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "37.11.0", + "version": "37.11.2", "license": "MIT", "dependencies": { "@github/relative-time-element": "^4.4.3", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index e7487598591..e5065cd409d 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,15 @@ # @primer/react +## 37.11.2 + +N/A, re-release of v37.11.1 + +## 37.11.1 + +### Patch Changes + +- [`a12ab59`](https://github.com/primer/react/commit/a12ab599565651cf30233a2cd97357f07cf39cb8) Thanks [@hussam-i-am](https://github.com/hussam-i-am)! - fix(FormControl): fix spacing in vertical layouts" + ## 37.11.0 ### Minor Changes @@ -2817,7 +2827,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. @@ -2978,7 +2988,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 @@ -3119,11 +3129,11 @@ ```jsx ``` @@ -3151,21 +3161,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, }, ]} @@ -3188,9 +3198,7 @@ mona - - Monalisa Octocat - + Monalisa Octocat @@ -3212,14 +3220,14 @@ ```jsx ``` @@ -3251,7 +3259,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. @@ -3302,13 +3310,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'}} /> ``` @@ -3337,7 +3345,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. @@ -3369,19 +3377,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} @@ -3390,10 +3398,10 @@ items={fieldTypes} selectedItem={selectedType} onChange={setSelectedType} - overlayProps={{ width: "medium" }} + overlayProps={{width: 'medium'}} /> - ); - }; + ) + } ``` @@ -3401,24 +3409,22 @@ ```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 => ( , - ); - }; + ) + } ``` @@ -3441,7 +3447,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. @@ -3472,21 +3478,17 @@ ```jsx - import { Label } from "@primer/react"; + import {Label} from '@primer/react' function Example() { return ( <> - - ); + ) } ``` @@ -3515,7 +3517,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. @@ -3538,12 +3540,7 @@ ```jsx - import { - ButtonPrimary, - ButtonInvisible, - ButtonOutline, - ButtonDanger, - } from "@primer/react"; + import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react' function Example() { return ( @@ -3553,7 +3550,7 @@ Outline Button Danger Button - ); + ) } ``` @@ -3561,7 +3558,7 @@ ```jsx - import { Button } from "@primer/react"; + import {Button} from '@primer/react' function Example() { return ( @@ -3571,7 +3568,7 @@ - ); + ) } ``` @@ -3678,50 +3675,34 @@ ```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 - ); + ) } ``` @@ -3729,22 +3710,14 @@ ```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 @@ -3765,9 +3738,7 @@ {/* Single select */} - - Preferred Primer component interface - + Preferred Primer component interface Figma @@ -3786,7 +3757,7 @@ - ); + ) } ``` @@ -3797,7 +3768,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. @@ -3829,7 +3800,7 @@ ```jsx - import { FormControl, Checkbox, TextInput } from "@primer/react"; + import {FormControl, Checkbox, TextInput} from '@primer/react' function Example() { return ( @@ -3849,7 +3820,7 @@ - ); + ) } ``` @@ -3857,7 +3828,7 @@ ```jsx - import { FormGroup, TextInput } from "@primer/react"; + import {FormGroup, TextInput} from '@primer/react' function Example() { return ( @@ -3872,7 +3843,7 @@ - ); + ) } ``` @@ -3882,7 +3853,7 @@ ```jsx - import { InputField, TextInput } from "@primer/react"; + import {InputField, TextInput} from '@primer/react' function Example() { return ( @@ -3890,7 +3861,7 @@ Example text - ); + ) } ``` @@ -3898,7 +3869,7 @@ ```jsx - import { FormControl, TextInput } from "@primer/react"; + import {FormControl, TextInput} from '@primer/react' function Example() { return ( @@ -3906,7 +3877,7 @@ Example text - ); + ) } ``` @@ -3917,11 +3888,7 @@ 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. @@ -3992,25 +3959,23 @@ ```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)} /> - ); - }; + ) + } ``` @@ -4018,36 +3983,29 @@ ```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} ))} - ); - }; + ) + } ``` @@ -4149,12 +4107,7 @@ ```jsx - + Item 1 ``` @@ -5198,8 +5151,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 ( @@ -5208,7 +5161,7 @@
your app here
- ); + ) } ``` diff --git a/packages/react/package.json b/packages/react/package.json index 4adf933c6fc..24bf3941094 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "37.11.0", + "version": "37.11.2", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js",