From 4408ef035edd3bdd216c3bb834ad183454b9caa7 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Wed, 27 Aug 2025 15:18:57 -0700 Subject: [PATCH 1/9] remove sx from RadioGroup and Truncate --- .../src/Banner/Banner.examples.stories.module.css | 3 +++ .../react/src/Banner/Banner.examples.stories.tsx | 3 ++- packages/react/src/RadioGroup/RadioGroup.tsx | 4 +--- packages/react/src/Truncate/Truncate.stories.tsx | 6 ------ packages/react/src/Truncate/Truncate.tsx | 13 ++++--------- 5 files changed, 10 insertions(+), 19 deletions(-) create mode 100644 packages/react/src/Banner/Banner.examples.stories.module.css diff --git a/packages/react/src/Banner/Banner.examples.stories.module.css b/packages/react/src/Banner/Banner.examples.stories.module.css new file mode 100644 index 00000000000..455e6573ae8 --- /dev/null +++ b/packages/react/src/Banner/Banner.examples.stories.module.css @@ -0,0 +1,3 @@ +.RadioGroupWithTopMargin { + margin-top: var(--base-size-24); +} diff --git a/packages/react/src/Banner/Banner.examples.stories.tsx b/packages/react/src/Banner/Banner.examples.stories.tsx index f487a3bb6bb..d90a51251bf 100644 --- a/packages/react/src/Banner/Banner.examples.stories.tsx +++ b/packages/react/src/Banner/Banner.examples.stories.tsx @@ -10,6 +10,7 @@ import {Button} from '../Button' import React from 'react' import {useFocus} from '../internal/hooks/useFocus' import {PageLayout} from '../PageLayout' +import classes from './Banner.examples.stories.module.css' const meta = { title: 'Experimental/Components/Banner/Examples', @@ -65,11 +66,11 @@ export const WithAnnouncement = () => { secondaryAction={Button} /> { setSelected(selected as Choice) }} + className={classes.RadioGroupWithTopMargin} > Choices diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx index d6de96490e0..97822470293 100644 --- a/packages/react/src/RadioGroup/RadioGroup.tsx +++ b/packages/react/src/RadioGroup/RadioGroup.tsx @@ -7,7 +7,6 @@ import CheckboxOrRadioGroupCaption from '../internal/components/CheckboxOrRadioG import CheckboxOrRadioGroupLabel from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel' import CheckboxOrRadioGroupValidation from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation' import {useRenderForcingRef} from '../hooks' -import type {SxProp} from '../sx' type RadioGroupProps = { /** @@ -18,8 +17,7 @@ type RadioGroupProps = { * The name used to identify this group of radios */ name: string -} & CheckboxOrRadioGroupProps & - SxProp +} & CheckboxOrRadioGroupProps export const RadioGroupContext = createContext<{ disabled?: boolean diff --git a/packages/react/src/Truncate/Truncate.stories.tsx b/packages/react/src/Truncate/Truncate.stories.tsx index 0f1d0b24e27..ea95707c01e 100644 --- a/packages/react/src/Truncate/Truncate.stories.tsx +++ b/packages/react/src/Truncate/Truncate.stories.tsx @@ -41,12 +41,6 @@ Playground.argTypes = { disable: true, }, }, - sx: { - controls: false, - table: { - disable: true, - }, - }, theme: { controls: false, table: { diff --git a/packages/react/src/Truncate/Truncate.tsx b/packages/react/src/Truncate/Truncate.tsx index 4ece1eaf59f..e9c3e27e9cd 100644 --- a/packages/react/src/Truncate/Truncate.tsx +++ b/packages/react/src/Truncate/Truncate.tsx @@ -1,27 +1,23 @@ import React from 'react' import {clsx} from 'clsx' import type {MaxWidthProps} from 'styled-system' -import type {SxProp} from '../sx' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' -import {BoxWithFallback} from '../internal/components/BoxWithFallback' import classes from './Truncate.module.css' type TruncateProps = React.HTMLAttributes & { title: string inline?: boolean expandable?: boolean -} & MaxWidthProps & - SxProp +} & MaxWidthProps const Truncate = React.forwardRef(function Truncate( - {as, children, className, title, inline, expandable, maxWidth = 125, style, sx, ...rest}, + {as: Component = 'div', children, className, title, inline, expandable, maxWidth = 125, style, ...rest}, ref, ) { return ( - {children} - + ) }) as PolymorphicForwardRefComponent<'div', TruncateProps> From 9bc1999cf9e0b8ae8692b564a5f59ba9ead1ef7e Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Wed, 27 Aug 2025 15:26:29 -0700 Subject: [PATCH 2/9] changeset --- .changeset/rude-cycles-scream.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rude-cycles-scream.md diff --git a/.changeset/rude-cycles-scream.md b/.changeset/rude-cycles-scream.md new file mode 100644 index 00000000000..6d413c9a591 --- /dev/null +++ b/.changeset/rude-cycles-scream.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove the sx prop from RadioGroup and Truncate. From 41424fcdbb8c7c5b2bbd723afc6dc8bc2eb754e4 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Wed, 27 Aug 2025 15:37:29 -0700 Subject: [PATCH 3/9] remove sx in Truncate --- packages/react/src/ActionList/Description.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/ActionList/Description.tsx b/packages/react/src/ActionList/Description.tsx index 2db37e74ac7..c4624c6f061 100644 --- a/packages/react/src/ActionList/Description.tsx +++ b/packages/react/src/ActionList/Description.tsx @@ -61,7 +61,6 @@ export const Description: React.FC Date: Wed, 10 Sep 2025 13:38:32 -0700 Subject: [PATCH 4/9] export props --- packages/react/src/RadioGroup/RadioGroup.tsx | 2 +- packages/react/src/RadioGroup/index.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/RadioGroup/RadioGroup.tsx b/packages/react/src/RadioGroup/RadioGroup.tsx index 97822470293..cc9b64b78b0 100644 --- a/packages/react/src/RadioGroup/RadioGroup.tsx +++ b/packages/react/src/RadioGroup/RadioGroup.tsx @@ -8,7 +8,7 @@ import CheckboxOrRadioGroupLabel from '../internal/components/CheckboxOrRadioGro import CheckboxOrRadioGroupValidation from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation' import {useRenderForcingRef} from '../hooks' -type RadioGroupProps = { +export type RadioGroupProps = { /** * An onChange handler that gets called when the selection changes */ diff --git a/packages/react/src/RadioGroup/index.ts b/packages/react/src/RadioGroup/index.ts index d29db1c955a..7c2be01c513 100644 --- a/packages/react/src/RadioGroup/index.ts +++ b/packages/react/src/RadioGroup/index.ts @@ -1 +1,3 @@ export {default, RadioGroupContext} from './RadioGroup' + +export type {RadioGroupProps} from './RadioGroup' From b41e82b10f7141fd1ff785e403101a2ad9a49446 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Fri, 12 Sep 2025 15:26:25 -0700 Subject: [PATCH 5/9] wip --- packages/react/src/index.ts | 1 + packages/styled-react/src/index.tsx | 16 ++++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index ad864dc1983..023e198659f 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -131,6 +131,7 @@ export type {PortalProps} from './Portal' export {ProgressBar} from './ProgressBar' export type {ProgressBarProps, ProgressBarItemProps} from './ProgressBar' export {default as RadioGroup} from './RadioGroup' +export type {RadioGroupProps} from './RadioGroup' export type {RelativeTimeProps} from './RelativeTime' export {default as RelativeTime} from './RelativeTime' export {SegmentedControl} from './SegmentedControl' diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 6bb625118f4..01718e0f9a1 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -5,6 +5,8 @@ import { Box, type BoxProps, type SxProp, + RadioGroup as PrimerRadioGroup, + type RadioGroupProps as PrimerRadioGroupProps, StateLabel as PrimerStateLabel, type StateLabelProps as PrimerStateLabelProps, SubNav as PrimerSubNav, @@ -14,6 +16,8 @@ import { type TextareaProps as PrimerTextareaProps, ToggleSwitch as PrimerToggleSwitch, type ToggleSwitchProps as PrimerToggleSwitchProps, + Truncate as PrimerTruncate, + type TruncateProps as PrimerTruncateProps, type SegmentedControlProps as PrimerSegmentedControlProps, SegmentedControl as PrimerSegmentedControl, type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps, @@ -47,6 +51,12 @@ type StyledProps = SxProp & PositionProps & ShadowProps +type RadioGroupProps = PropsWithChildren & SxProp + +const RadioGroup = (props: RadioGroupProps) => { + return +} + type SegmentedControlProps = PropsWithChildren & SxProp type SegmentedControlButtonProps = PropsWithChildren & SxProp type SegmentedControlIconButtonProps = PropsWithChildren & SxProp @@ -106,6 +116,12 @@ const Textarea: React.ForwardRefExoticComponent }) +type TruncateProps = PropsWithChildren & SxProp + +const Truncate = forwardRef(function Truncate(props, ref) { + return +}) + export {Autocomplete, SegmentedControl, Select, StateLabel, SubNav, TextInput, Textarea, ToggleSwitch} export { From 1b0c20d76197c8730518a8e66028d69c683cb986 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Mon, 15 Sep 2025 15:47:50 -0700 Subject: [PATCH 6/9] fix lint issue --- packages/styled-react/src/index.tsx | 34 ++++++++++++++--------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index f40a9843552..3a57b282d34 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -19,7 +19,8 @@ import { type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps, type SegmentedControlIconButtonProps as PrimerSegmentedControlIconButtonProps, } from '@primer/react' -import React, {forwardRef, type PropsWithChildren} from 'react' +import type React from 'react' +import {forwardRef, type PropsWithChildren} from 'react' import type { BackgroundProps, BorderProps, @@ -47,6 +48,10 @@ type StyledProps = SxProp & type RadioGroupProps = PropsWithChildren & SxProp +const RadioGroupImpl = (props: RadioGroupProps) => { + return +} + // Define local types based on the internal component props type CheckboxOrRadioGroupLabelProps = PropsWithChildren< { @@ -54,32 +59,27 @@ type CheckboxOrRadioGroupLabelProps = PropsWithChildren< visuallyHidden?: boolean } & SxProp > +const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => { + return +} + type CheckboxOrRadioGroupCaptionProps = PropsWithChildren< { className?: string } & SxProp > +const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => { + return +} + type CheckboxOrRadioGroupValidationProps = PropsWithChildren< { className?: string - variant?: 'error' | 'success' + variant: 'error' | 'success' } & SxProp > - -const RadioGroupImpl = (props: RadioGroupProps) => { - return -} - -const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => { - return -} - -const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => { - return -} - const CheckboxOrRadioGroupValidation = (props: CheckboxOrRadioGroupValidationProps) => { - return + return } const RadioGroup = Object.assign(RadioGroupImpl, { @@ -140,7 +140,7 @@ const ToggleSwitch = forwardRef(function T type TruncateProps = PropsWithChildren & SxProp const Truncate = forwardRef(function Truncate(props, ref) { - return + return }) export {RadioGroup, SegmentedControl, StateLabel, SubNav, ToggleSwitch, Truncate} From 86cf71baaabb93f7b0a7b56edac817bf167bc575 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Mon, 15 Sep 2025 16:14:17 -0700 Subject: [PATCH 7/9] update test snap --- packages/react/src/__tests__/__snapshots__/exports.test.ts.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index d34f9dce59c..a943f3888fd 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -125,6 +125,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] = "type ProgressBarProps", "Radio", "RadioGroup", + "type RadioGroupProps", "type RadioProps", "registerPortalRoot", "RelativeTime", From 5affaed36d523c39e176baa09224d306d812f792 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Tue, 16 Sep 2025 10:21:01 -0700 Subject: [PATCH 8/9] polymorphic --- packages/styled-react/src/index.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 3a57b282d34..05b16f6ba14 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -19,8 +19,8 @@ import { type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps, type SegmentedControlIconButtonProps as PrimerSegmentedControlIconButtonProps, } from '@primer/react' -import type React from 'react' -import {forwardRef, type PropsWithChildren} from 'react' +import React, {forwardRef, type PropsWithChildren} from 'react' +import type {ForwardRefComponent} from './polymorphic' import type { BackgroundProps, BorderProps, @@ -140,8 +140,9 @@ const ToggleSwitch = forwardRef(function T type TruncateProps = PropsWithChildren & SxProp const Truncate = forwardRef(function Truncate(props, ref) { - return -}) + // @ts-ignore - PrimerTruncate is polymorphic and functionally compatible with Box's as prop + return +}) as ForwardRefComponent<'div', TruncateProps> export {RadioGroup, SegmentedControl, StateLabel, SubNav, ToggleSwitch, Truncate} From 3968da081afb33ff415e8fd7bdef981e5f54de00 Mon Sep 17 00:00:00 2001 From: Liu Liu Date: Wed, 17 Sep 2025 11:49:08 -0700 Subject: [PATCH 9/9] apply the new pattern for polymorphic component --- packages/styled-react/src/index.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 05b16f6ba14..8ac596f1edf 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -18,6 +18,7 @@ import { SegmentedControl as PrimerSegmentedControl, type SegmentedControlButtonProps as PrimerSegmentedControlButtonProps, type SegmentedControlIconButtonProps as PrimerSegmentedControlIconButtonProps, + sx, } from '@primer/react' import React, {forwardRef, type PropsWithChildren} from 'react' import type {ForwardRefComponent} from './polymorphic' @@ -33,6 +34,7 @@ import type { SpaceProps, TypographyProps, } from 'styled-system' +import styled from 'styled-components' type StyledProps = SxProp & SpaceProps & @@ -139,10 +141,11 @@ const ToggleSwitch = forwardRef(function T type TruncateProps = PropsWithChildren & SxProp -const Truncate = forwardRef(function Truncate(props, ref) { - // @ts-ignore - PrimerTruncate is polymorphic and functionally compatible with Box's as prop - return -}) as ForwardRefComponent<'div', TruncateProps> +const Truncate: ForwardRefComponent<'div', TruncateProps> = styled(PrimerTruncate).withConfig({ + shouldForwardProp: prop => prop !== 'sx', +})` + ${sx} +` export {RadioGroup, SegmentedControl, StateLabel, SubNav, ToggleSwitch, Truncate}