From 03acaffe196dd373d4c036c9990ff75073911004 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 6 Nov 2024 19:49:08 +0000 Subject: [PATCH] Version Packages --- .changeset/forty-rats-jog.md | 5 - .changeset/slow-shoes-wait.md | 5 - examples/app-router/package.json | 2 +- examples/codesandbox/package.json | 2 +- examples/consumer-test/package.json | 2 +- examples/theming/package.json | 2 +- packages/react/CHANGELOG.md | 279 +++++++++++++++++----------- packages/react/package.json | 2 +- 8 files changed, 178 insertions(+), 121 deletions(-) delete mode 100644 .changeset/forty-rats-jog.md delete mode 100644 .changeset/slow-shoes-wait.md diff --git a/.changeset/forty-rats-jog.md b/.changeset/forty-rats-jog.md deleted file mode 100644 index 68a7dea56f7..00000000000 --- a/.changeset/forty-rats-jog.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -Update Spinner component to correctly use the `size` prop when both `sx` and `size` are provided diff --git a/.changeset/slow-shoes-wait.md b/.changeset/slow-shoes-wait.md deleted file mode 100644 index 05c1f11c030..00000000000 --- a/.changeset/slow-shoes-wait.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -TreeView: Adds prop `truncate`, keeps default behavior of truncation but allows for text to wrap when turned off. diff --git a/examples/app-router/package.json b/examples/app-router/package.json index 4938f9b5012..e5e10bdd291 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.3.0", + "@primer/react": "37.4.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 35a575f7d44..00807cc27b3 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.3.0", + "@primer/react": "37.4.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 b1bad64ec15..124916509cf 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.3.0", + "@primer/react": "37.4.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 66baf650461..ca6e8d8c276 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.3.0", + "@primer/react": "37.4.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 91a35640f8f..1ef3bd26390 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,15 @@ # @primer/react +## 37.4.0 + +### Minor Changes + +- [#5122](https://github.com/primer/react/pull/5122) [`e021a8f`](https://github.com/primer/react/commit/e021a8f6f1a85e5f70b069674e02c40f56f674d7) Thanks [@TylerJDev](https://github.com/TylerJDev)! - TreeView: Adds prop `truncate`, keeps default behavior of truncation but allows for text to wrap when turned off. + +### Patch Changes + +- [#5236](https://github.com/primer/react/pull/5236) [`2e5c601`](https://github.com/primer/react/commit/2e5c601b8793c2f15604258b4f66371ea791cac7) Thanks [@jonrohan](https://github.com/jonrohan)! - Update Spinner component to correctly use the `size` prop when both `sx` and `size` are provided + ## 37.3.0 ### Minor Changes @@ -2461,7 +2471,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. @@ -2622,7 +2632,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 @@ -2763,11 +2773,11 @@ ```jsx ``` @@ -2795,21 +2805,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, }, ]} @@ -2832,7 +2842,9 @@ mona - Monalisa Octocat + + Monalisa Octocat + @@ -2854,14 +2866,14 @@ ```jsx ``` @@ -2893,7 +2905,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. @@ -2944,13 +2956,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" }} /> ``` @@ -2979,7 +2991,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. @@ -3011,19 +3023,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} @@ -3032,10 +3044,10 @@ items={fieldTypes} selectedItem={selectedType} onChange={setSelectedType} - overlayProps={{width: 'medium'}} + overlayProps={{ width: "medium" }} /> - ) - } + ); + }; ``` @@ -3043,22 +3055,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) => ( , - ) - } + ); + }; ``` @@ -3081,7 +3095,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. @@ -3112,17 +3126,21 @@ ```jsx - import {Label} from '@primer/react' + import { Label } from "@primer/react"; function Example() { return ( <> - - ) + ); } ``` @@ -3151,7 +3169,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. @@ -3174,7 +3192,12 @@ ```jsx - import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react' + import { + ButtonPrimary, + ButtonInvisible, + ButtonOutline, + ButtonDanger, + } from "@primer/react"; function Example() { return ( @@ -3184,7 +3207,7 @@ Outline Button Danger Button - ) + ); } ``` @@ -3192,7 +3215,7 @@ ```jsx - import {Button} from '@primer/react' + import { Button } from "@primer/react"; function Example() { return ( @@ -3202,7 +3225,7 @@ - ) + ); } ``` @@ -3309,34 +3332,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 + - ) + ); } ``` @@ -3344,14 +3383,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 @@ -3372,7 +3419,9 @@ {/* Single select */} - Preferred Primer component interface + + Preferred Primer component interface + Figma @@ -3391,7 +3440,7 @@ - ) + ); } ``` @@ -3402,7 +3451,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. @@ -3434,7 +3483,7 @@ ```jsx - import {FormControl, Checkbox, TextInput} from '@primer/react' + import { FormControl, Checkbox, TextInput } from "@primer/react"; function Example() { return ( @@ -3454,7 +3503,7 @@ - ) + ); } ``` @@ -3462,7 +3511,7 @@ ```jsx - import {FormGroup, TextInput} from '@primer/react' + import { FormGroup, TextInput } from "@primer/react"; function Example() { return ( @@ -3477,7 +3526,7 @@ - ) + ); } ``` @@ -3487,7 +3536,7 @@ ```jsx - import {InputField, TextInput} from '@primer/react' + import { InputField, TextInput } from "@primer/react"; function Example() { return ( @@ -3495,7 +3544,7 @@ Example text - ) + ); } ``` @@ -3503,7 +3552,7 @@ ```jsx - import {FormControl, TextInput} from '@primer/react' + import { FormControl, TextInput } from "@primer/react"; function Example() { return ( @@ -3511,7 +3560,7 @@ Example text - ) + ); } ``` @@ -3522,7 +3571,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. @@ -3593,23 +3646,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)} /> - ) - } + ); + }; ``` @@ -3617,29 +3672,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} ))} - ) - } + ); + }; ``` @@ -3741,7 +3803,12 @@ ```jsx - + Item 1 ``` @@ -4785,8 +4852,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 ( @@ -4795,7 +4862,7 @@
your app here
 - ) + ); } ``` diff --git a/packages/react/package.json b/packages/react/package.json index 6f761d83304..d2255c155f7 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@primer/react", - "version": "37.3.0", + "version": "37.4.0", "description": "An implementation of GitHub's Primer Design System using React", "main": "lib/index.js", "module": "lib-esm/index.js",