From f30d5f24054935b19dbc1401147a6dce8372c65d Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Thu, 30 Jan 2025 16:30:59 -0500 Subject: [PATCH] patch 37.11.2 --- examples/app-router/package.json | 2 +- examples/codesandbox/package.json | 2 +- examples/theming/package.json | 2 +- package-lock.json | 8 +- packages/react/CHANGELOG.md | 273 ++++++++++++------------------ packages/react/package.json | 2 +- 6 files changed, 118 insertions(+), 171 deletions(-) diff --git a/examples/app-router/package.json b/examples/app-router/package.json index bcbe3d495a6..ffb980d1973 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.11.1", + "@primer/react": "37.11.2", "next": "^14.2.15", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json index 2b89d7bd34c..3bc07ec8dbe 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.1", + "@primer/react": "37.11.2", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.7", diff --git a/examples/theming/package.json b/examples/theming/package.json index 5a8b1a5817d..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.1", + "@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 434333063c4..438e38cf86c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,7 +63,7 @@ "name": "example-app-router", "version": "0.0.0", "dependencies": { - "@primer/react": "37.11.1", + "@primer/react": "37.11.2", "next": "^14.2.15", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -82,7 +82,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "37.11.1", + "@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 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "37.11.1", + "@primer/react": "37.11.2", "clsx": "^1.2.1", "next": "^14.2.15", "react": "^18.3.1", @@ -29976,7 +29976,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "37.11.1", + "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 2902d2733a1..e5065cd409d 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,9 @@ # @primer/react +## 37.11.2 + +N/A, re-release of v37.11.1 + ## 37.11.1 ### Patch Changes @@ -2823,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. @@ -2984,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 @@ -3125,11 +3129,11 @@ ```jsx ``` @@ -3157,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, }, ]} @@ -3194,9 +3198,7 @@ mona - - Monalisa Octocat - + Monalisa Octocat @@ -3218,14 +3220,14 @@ ```jsx ``` @@ -3257,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. @@ -3308,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'}} /> ``` @@ -3343,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. @@ -3375,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} @@ -3396,10 +3398,10 @@ items={fieldTypes} selectedItem={selectedType} onChange={setSelectedType} - overlayProps={{ width: "medium" }} + overlayProps={{width: 'medium'}} /> - ); - }; + ) + } ``` @@ -3407,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 => ( , - ); - }; + ) + } ``` @@ -3447,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. @@ -3478,21 +3478,17 @@ ```jsx - import { Label } from "@primer/react"; + import {Label} from '@primer/react' function Example() { return ( <> - - ); + ) } ``` @@ -3521,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. @@ -3544,12 +3540,7 @@ ```jsx - import { - ButtonPrimary, - ButtonInvisible, - ButtonOutline, - ButtonDanger, - } from "@primer/react"; + import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react' function Example() { return ( @@ -3559,7 +3550,7 @@ Outline Button Danger Button - ); + ) } ``` @@ -3567,7 +3558,7 @@ ```jsx - import { Button } from "@primer/react"; + import {Button} from '@primer/react' function Example() { return ( @@ -3577,7 +3568,7 @@ - ); + ) } ``` @@ -3684,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 - ); + ) } ``` @@ -3735,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 @@ -3771,9 +3738,7 @@ {/* Single select */} - - Preferred Primer component interface - + Preferred Primer component interface Figma @@ -3792,7 +3757,7 @@ - ); + ) } ``` @@ -3803,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. @@ -3835,7 +3800,7 @@ ```jsx - import { FormControl, Checkbox, TextInput } from "@primer/react"; + import {FormControl, Checkbox, TextInput} from '@primer/react' function Example() { return ( @@ -3855,7 +3820,7 @@ - ); + ) } ``` @@ -3863,7 +3828,7 @@ ```jsx - import { FormGroup, TextInput } from "@primer/react"; + import {FormGroup, TextInput} from '@primer/react' function Example() { return ( @@ -3878,7 +3843,7 @@ - ); + ) } ``` @@ -3888,7 +3853,7 @@ ```jsx - import { InputField, TextInput } from "@primer/react"; + import {InputField, TextInput} from '@primer/react' function Example() { return ( @@ -3896,7 +3861,7 @@ Example text - ); + ) } ``` @@ -3904,7 +3869,7 @@ ```jsx - import { FormControl, TextInput } from "@primer/react"; + import {FormControl, TextInput} from '@primer/react' function Example() { return ( @@ -3912,7 +3877,7 @@ Example text - ); + ) } ``` @@ -3923,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. @@ -3998,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)} /> - ); - }; + ) + } ``` @@ -4024,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} ))} - ); - }; + ) + } ``` @@ -4155,12 +4107,7 @@ ```jsx - + Item 1 ``` @@ -5204,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 ( @@ -5214,7 +5161,7 @@
your app here
 - ); + ) } ``` diff --git a/packages/react/package.json b/packages/react/package.json index 9acd0ec99e1..29a3c7b5acc 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "37.11.1", + "version": "37.11.2", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js",