diff --git a/.changeset/pre.json b/.changeset/pre.json index a0e864f42d1..a86aff18731 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -74,6 +74,7 @@ "pretty-emus-cover", "pretty-women-sing", "proud-chairs-study", + "purple-waves-pay", "rich-walls-fold", "rotten-carpets-raise", "rude-cycles-scream", diff --git a/.changeset/purple-waves-pay.md b/.changeset/purple-waves-pay.md new file mode 100644 index 00000000000..1d0da56050f --- /dev/null +++ b/.changeset/purple-waves-pay.md @@ -0,0 +1,5 @@ +--- +"@primer/styled-react": patch +--- + +chore: use styled wrapper instead of Box for Label, Token and Spinner diff --git a/package-lock.json b/package-lock.json index 79b4178ac3a..e801ee1675c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,7 +75,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "38.0.0-rc.4", + "@primer/react": "38.0.0-rc.5", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.3", @@ -88,7 +88,7 @@ "name": "example-nextjs", "version": "0.0.0", "dependencies": { - "@primer/react": "38.0.0-rc.4", + "@primer/react": "38.0.0-rc.5", "next": "^15.2.3", "react": "18.3.1", "react-dom": "18.3.1", @@ -104,7 +104,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.14.0", - "@primer/react": "38.0.0-rc.4", + "@primer/react": "38.0.0-rc.5", "clsx": "^2.1.1", "next": "^15.2.3", "react": "18.3.1", @@ -25843,7 +25843,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "38.0.0-rc.4", + "version": "38.0.0-rc.5", "license": "MIT", "dependencies": { "@github/mini-throttle": "^2.1.1", @@ -26419,11 +26419,11 @@ }, "packages/styled-react": { "name": "@primer/styled-react", - "version": "1.0.0-rc.4", + "version": "1.0.0-rc.6", "devDependencies": { "@babel/preset-react": "^7.27.1", "@babel/preset-typescript": "^7.27.1", - "@primer/react": "^38.0.0-rc.4", + "@primer/react": "^38.0.0-rc.5", "@rollup/plugin-babel": "^6.0.4", "@types/react": "18.3.11", "@types/react-dom": "18.3.1", @@ -26439,7 +26439,7 @@ "typescript": "^5.9.2" }, "peerDependencies": { - "@primer/react": "38.0.0-rc.4", + "@primer/react": "38.0.0-rc.5", "@types/react": "18.x || 19.x", "@types/react-dom": "18.x || 19.x", "@types/react-is": "18.x || 19.x", diff --git a/packages/styled-react/CHANGELOG.md b/packages/styled-react/CHANGELOG.md index f04ee9aa8ab..fad9384151e 100644 --- a/packages/styled-react/CHANGELOG.md +++ b/packages/styled-react/CHANGELOG.md @@ -1,5 +1,11 @@ # @primer/styled-react +## 1.0.0-rc.6 + +### Patch Changes + +- [`013c200`](https://github.com/primer/react/commit/013c200dd9969743c5e824f635964802ccfdcbfa) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: use styled wrapper instead of Box for Label, Token and Spinner + ## 1.0.0-rc.5 ### Minor Changes diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json index d7027375c32..e55ce7fb560 100644 --- a/packages/styled-react/package.json +++ b/packages/styled-react/package.json @@ -1,6 +1,6 @@ { "name": "@primer/styled-react", - "version": "1.0.0-rc.5", + "version": "1.0.0-rc.6", "type": "module", "exports": { ".": { diff --git a/packages/styled-react/src/components/Label.tsx b/packages/styled-react/src/components/Label.tsx index f62ed44e99a..dd5121acc82 100644 --- a/packages/styled-react/src/components/Label.tsx +++ b/packages/styled-react/src/components/Label.tsx @@ -1,13 +1,16 @@ -import {type LabelProps as PrimerLabelProps, Label as PrimerLabel, Box} from '@primer/react' -import {type SxProp} from '../sx' +import {type LabelProps as PrimerLabelProps, Label as PrimerLabel} from '@primer/react' +import {sx, type SxProp} from '../sx' import {forwardRef} from 'react' import type {ForwardRefComponent} from '../polymorphic' +import styled from 'styled-components' type LabelProps = PrimerLabelProps & SxProp & {as?: React.ElementType} -const StyledLabel = forwardRef(function Label(props, ref) { - return -}) as ForwardRefComponent<'span', LabelProps> +const StyledLabel: ForwardRefComponent<'span', LabelProps> = styled(PrimerLabel).withConfig({ + shouldForwardProp: prop => (prop as keyof LabelProps) !== 'sx', +})` + ${sx} +` const Label = forwardRef(({as, ...props}, ref) => { return diff --git a/packages/styled-react/src/components/Spinner.tsx b/packages/styled-react/src/components/Spinner.tsx index e6c007c68f1..4349262f6c3 100644 --- a/packages/styled-react/src/components/Spinner.tsx +++ b/packages/styled-react/src/components/Spinner.tsx @@ -1,9 +1,11 @@ -import {Box, Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react' -import React from 'react' -import type {SxProp} from '../sx' +import {Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react' +import {sx, type SxProp} from '../sx' +import styled from 'styled-components' export type SpinnerProps = PrimerSpinnerProps & SxProp -export function Spinner(props: SpinnerProps) { - return -} +export const Spinner = styled(PrimerSpinner).withConfig({ + shouldForwardProp: prop => (prop as keyof SpinnerProps) !== 'sx', +})` + ${sx} +` diff --git a/packages/styled-react/src/components/Token.tsx b/packages/styled-react/src/components/Token.tsx index 1a0e2102744..36d6884af9e 100644 --- a/packages/styled-react/src/components/Token.tsx +++ b/packages/styled-react/src/components/Token.tsx @@ -1,33 +1,20 @@ -import React from 'react' -import { - type TokenProps as PrimerTokenProps, - type SxProp, - Token as PrimerToken, - useTheme, - theme as defaultTheme, -} from '@primer/react' -import css from '@styled-system/css' +import React, {forwardRef} from 'react' +import {type TokenProps as PrimerTokenProps, Token as PrimerToken} from '@primer/react' +import {sx, type SxProp} from '../sx' import type {ForwardRefComponent} from '../polymorphic' import type {PropsWithChildren} from 'react' +import styled from 'styled-components' type TokenProps = PropsWithChildren & SxProp -const Token: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = React.forwardRef( - ({sx: sxProp, style, ...rest}, ref) => { - const contextTheme = useTheme() - const theme = contextTheme.theme || defaultTheme +const StyledToken: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = styled(PrimerToken).withConfig({ + shouldForwardProp: prop => (prop as keyof TokenProps) !== 'sx', +})` + ${sx} +` - // If no sx prop is provided, just return PrimerToken directly - if (!sxProp) { - return - } - - // Convert sx to CSS styles using the theme context - const sxStyles = css(sxProp)(theme) - const mergedStyle = {...sxStyles, ...style} - - return - }, -) as ForwardRefComponent<'a' | 'button' | 'span', TokenProps> +const Token = forwardRef(({as, ...props}, ref) => { + return +}) as ForwardRefComponent<'a' | 'button' | 'span', TokenProps> export {Token, type TokenProps}