From ae41703590e6ad33298a1c4a27b6e37c63ce9933 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 7 Oct 2025 12:42:21 -0400 Subject: [PATCH 1/4] chore: cleanup remaining sx props Co-authored-by: Mike Perrotti --- package-lock.json | 14 +++++++------- packages/react/src/AvatarStack/AvatarStack.tsx | 6 ++---- .../src/CheckboxGroup/CheckboxGroup.stories.tsx | 2 +- packages/react/src/Radio/Radio.stories.tsx | 2 +- .../react/src/RadioGroup/RadioGroup.stories.tsx | 2 +- .../src/UnderlineNav/UnderlineNav.stories.tsx | 2 +- .../CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx | 13 +++++-------- .../CheckboxOrRadioGroupCaption.tsx | 3 +-- .../CheckboxOrRadioGroupValidation.tsx | 6 ++---- .../src/internal/components/UnstyledTextInput.tsx | 6 ++---- packages/react/src/utils/form-story-helpers.tsx | 2 +- packages/react/src/utils/story-helpers.tsx | 2 +- 12 files changed, 25 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 67271ec9dae..c3861cd460a 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", @@ -26316,7 +26316,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", @@ -26893,11 +26893,11 @@ }, "packages/styled-react": { "name": "@primer/styled-react", - "version": "1.0.0-rc.4", + "version": "1.0.0-rc.5", "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", @@ -26913,7 +26913,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/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx index 6ad04ffb750..9661161a24c 100644 --- a/packages/react/src/AvatarStack/AvatarStack.tsx +++ b/packages/react/src/AvatarStack/AvatarStack.tsx @@ -7,7 +7,6 @@ import {isResponsiveValue} from '../hooks/useResponsiveValue' import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys' import classes from './AvatarStack.module.css' import {hasInteractiveNodes} from '../internal/utils/hasInteractiveNodes' -import {BoxWithFallback} from '../internal/components/BoxWithFallback' const transformChildren = (children: React.ReactNode, shape: AvatarStackProps['shape']) => { return React.Children.map(children, child => { @@ -158,8 +157,7 @@ const AvatarStack = ({ } return ( - 3 ? '3+' : count} @@ -187,7 +185,7 @@ const AvatarStack = ({ {' '} {transformChildren(children, shape)} - + ) } diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.stories.tsx index ea7800d72c7..7c224f5cb31 100644 --- a/packages/react/src/CheckboxGroup/CheckboxGroup.stories.tsx +++ b/packages/react/src/CheckboxGroup/CheckboxGroup.stories.tsx @@ -5,7 +5,7 @@ import type {CheckboxOrRadioGroupArgs} from '../utils/form-story-helpers' export default { title: 'Components/CheckboxGroup', component: CheckboxGroup, - parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange', 'sx']}}, + parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange']}}, } as Meta export const Playground = ({ diff --git a/packages/react/src/Radio/Radio.stories.tsx b/packages/react/src/Radio/Radio.stories.tsx index b6e38f765e9..c7be73a83f4 100644 --- a/packages/react/src/Radio/Radio.stories.tsx +++ b/packages/react/src/Radio/Radio.stories.tsx @@ -8,7 +8,7 @@ import { getFormControlArgsByChildComponent, } from '../utils/form-story-helpers' -const excludedControlKeys = ['required', 'value', 'name', 'validationStatus', 'sx'] +const excludedControlKeys = ['required', 'value', 'name', 'validationStatus'] export default { title: 'Components/Radio', diff --git a/packages/react/src/RadioGroup/RadioGroup.stories.tsx b/packages/react/src/RadioGroup/RadioGroup.stories.tsx index bb8d9d5f666..7da9daeea13 100644 --- a/packages/react/src/RadioGroup/RadioGroup.stories.tsx +++ b/packages/react/src/RadioGroup/RadioGroup.stories.tsx @@ -5,7 +5,7 @@ import type {CheckboxOrRadioGroupArgs} from '../utils/form-story-helpers' export default { title: 'Components/RadioGroup', component: RadioGroup, - parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange', 'sx']}}, + parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange']}}, } as Meta export const Playground = ({ diff --git a/packages/react/src/UnderlineNav/UnderlineNav.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.stories.tsx index 05a5d0d60cc..de81d856e38 100644 --- a/packages/react/src/UnderlineNav/UnderlineNav.stories.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNav.stories.tsx @@ -2,7 +2,7 @@ import type {Meta, StoryFn} from '@storybook/react-vite' import {UnderlineNav} from './index' import {UnderlineNavItem} from './UnderlineNavItem' -const excludedControlKeys = ['sx', 'as', 'align', 'afterSelect'] +const excludedControlKeys = ['as', 'align', 'afterSelect'] const meta: Meta = { title: 'Components/UnderlineNav', diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx index e69139bb51d..a53899e3eb0 100644 --- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx +++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx @@ -7,10 +7,8 @@ import CheckboxOrRadioGroupValidation from './CheckboxOrRadioGroupValidation' import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext' import VisuallyHidden from '../../../_VisuallyHidden' import {useSlots} from '../../../hooks/useSlots' -import type {SxProp} from '../../../sx' import classes from './CheckboxOrRadioGroup.module.css' import {clsx} from 'clsx' -import {BoxWithFallback} from '../BoxWithFallback' export type CheckboxOrRadioGroupProps = { /** Class name for custom styling */ @@ -32,7 +30,7 @@ export type CheckboxOrRadioGroupProps = { * If true, the user must make a selection before the owning form can be submitted */ required?: boolean -} & SxProp +} const CheckboxOrRadioGroup: React.FC> = ({ 'aria-labelledby': ariaLabelledby, @@ -41,7 +39,6 @@ const CheckboxOrRadioGroup: React.FC { const [slots, rest] = useSlots(children, { caption: CheckboxOrRadioGroupCaption, @@ -70,6 +67,8 @@ const CheckboxOrRadioGroup: React.FC
- {labelChild ? ( /* @@ -126,7 +123,7 @@ const CheckboxOrRadioGroup: React.FC {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
- + {validationChild && ( diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx index 1aa1bcd45b3..52c4fbce457 100644 --- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx +++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx @@ -1,11 +1,10 @@ import React from 'react' import Text from '../../../Text' -import type {SxProp} from '../../../sx' import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext' import classes from './CheckboxOrRadioGroup.module.css' import {clsx} from 'clsx' -type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren & {className?: string} +type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren & {className?: string} const CheckboxOrRadioGroupCaption: React.FC = ({className, children}) => { const {captionId} = React.useContext(CheckboxOrRadioGroupContext) diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx index 34cc2c084cd..c42928622be 100644 --- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx +++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx @@ -1,22 +1,20 @@ import React from 'react' import InputValidation from '../InputValidation' -import type {SxProp} from '../../../sx' import type {FormValidationStatus} from '../../../utils/types/FormValidationStatus' import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext' export type CheckboxOrRadioGroupValidationProps = { /** Changes the visual style to match the validation status */ variant: FormValidationStatus -} & SxProp +} const CheckboxOrRadioGroupValidation: React.FC> = ({ children, variant, - sx, }) => { const {validationMessageId = ''} = React.useContext(CheckboxOrRadioGroupContext) return ( - + {children} ) diff --git a/packages/react/src/internal/components/UnstyledTextInput.tsx b/packages/react/src/internal/components/UnstyledTextInput.tsx index a86e9db9aac..bb419f84f71 100644 --- a/packages/react/src/internal/components/UnstyledTextInput.tsx +++ b/packages/react/src/internal/components/UnstyledTextInput.tsx @@ -1,17 +1,15 @@ -import {type SxProp} from '../../sx' import React from 'react' import styles from './UnstyledTextInput.module.css' import {clsx} from 'clsx' -import {BoxWithFallback} from './BoxWithFallback' -type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> & SxProp +type ToggledUnstyledTextInputProps = React.ComponentPropsWithoutRef<'input'> const UnstyledTextInput = React.forwardRef(function UnstyledTextInput( {className, ...rest}, forwardRef, ) { - return + return }) UnstyledTextInput.displayName = 'UnstyledTextInput' diff --git a/packages/react/src/utils/form-story-helpers.tsx b/packages/react/src/utils/form-story-helpers.tsx index f2a125c0553..899cbfe1015 100644 --- a/packages/react/src/utils/form-story-helpers.tsx +++ b/packages/react/src/utils/form-story-helpers.tsx @@ -109,7 +109,7 @@ export const getTextInputArgTypes = (category?: string) => return obj }, {}) -export const textInputExcludedControlKeys = ['as', 'icon', 'leadingVisual', 'sx', 'trailingVisual', 'trailingAction'] +export const textInputExcludedControlKeys = ['as', 'icon', 'leadingVisual', 'trailingVisual', 'trailingAction'] export const textInputWithTokensArgTypes: ArgTypes = { hideTokenRemoveButtons: { diff --git a/packages/react/src/utils/story-helpers.tsx b/packages/react/src/utils/story-helpers.tsx index b95d429733a..5c33c478289 100644 --- a/packages/react/src/utils/story-helpers.tsx +++ b/packages/react/src/utils/story-helpers.tsx @@ -110,7 +110,7 @@ export const getTextInputArgTypes = (category?: string) => return obj }, {}) -export const textInputExcludedControlKeys = ['as', 'icon', 'leadingVisual', 'sx', 'trailingVisual', 'trailingAction'] +export const textInputExcludedControlKeys = ['as', 'icon', 'leadingVisual', 'trailingVisual', 'trailingAction'] export const textInputWithTokensArgTypes: ArgTypes = { hideTokenRemoveButtons: { From b7e86443ac5cd752ef169b5fd48fd3a778282fa4 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Tue, 7 Oct 2025 12:44:41 -0400 Subject: [PATCH 2/4] Refactor sx props cleanup for specific components --- .changeset/lemon-onions-teach.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lemon-onions-teach.md diff --git a/.changeset/lemon-onions-teach.md b/.changeset/lemon-onions-teach.md new file mode 100644 index 00000000000..b2dcd29dc65 --- /dev/null +++ b/.changeset/lemon-onions-teach.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +chore(AvatarStack, CheckboxOrRadioGroup, UnstyledTextInput): cleanup remaining sx props From 68ea3050f51db12173a0bfedc6a8673cec61d92a Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 7 Oct 2025 12:45:38 -0400 Subject: [PATCH 3/4] type fix --- .../CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx index 52c4fbce457..7b89c12fc0a 100644 --- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx +++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx @@ -4,7 +4,7 @@ import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext' import classes from './CheckboxOrRadioGroup.module.css' import {clsx} from 'clsx' -type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren & {className?: string} +type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren<{className?: string}> const CheckboxOrRadioGroupCaption: React.FC = ({className, children}) => { const {captionId} = React.useContext(CheckboxOrRadioGroupContext) From 8dbc374c94e3e17d8baf0b971910e58a5e9583f7 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Tue, 7 Oct 2025 13:06:36 -0400 Subject: [PATCH 4/4] empty