remove sx from RadioGroup and Truncate (#6685)

Author: liuliu-dev

.changeset/rude-cycles-scream.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove the sx prop from RadioGroup and Truncate.

packages/react/src/ActionList/Description.tsx

@@ -61,7 +61,6 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
         ref={containerRef}
         id={inlineDescriptionId}
         className={clsx(className, classes.Description)}
-        sx={sx}
         title={effectiveTitle}
         inline={true}
         maxWidth="100%"

packages/react/src/Banner/Banner.examples.stories.module.css

@@ -0,0 +1,3 @@
+.RadioGroupWithTopMargin {
+  margin-top: var(--base-size-24);
+}

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: 'Components/Banner/Examples',
@@ -65,11 +66,11 @@ export const WithAnnouncement = () => {
         secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}
       />
       <RadioGroup
-        sx={{marginTop: 4}}
         name="options"
         onChange={selected => {
           setSelected(selected as Choice)
         }}
+        className={classes.RadioGroupWithTopMargin}
       >
         <RadioGroup.Label>Choices</RadioGroup.Label>
         <FormControl>

packages/react/src/RadioGroup/RadioGroup.tsx

@@ -7,9 +7,8 @@ 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 = {
+export type RadioGroupProps = {
   /**
    * An onChange handler that gets called when the selection changes
    */
@@ -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

packages/react/src/RadioGroup/index.ts

@@ -1 +1,3 @@
 export {default, RadioGroupContext} from './RadioGroup'
+
+export type {RadioGroupProps} from './RadioGroup'

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: {

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<HTMLElement> & {
   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 (
-    <BoxWithFallback
+    <Component
       {...rest}
       ref={ref}
-      as={as}
       className={clsx(className, classes.Truncate)}
       data-expandable={expandable}
       data-inline={inline}
@@ -33,10 +29,9 @@ const Truncate = React.forwardRef(function Truncate(
             typeof maxWidth === 'number' ? `${maxWidth}px` : typeof maxWidth === 'string' ? maxWidth : undefined,
         } as React.CSSProperties
       }
-      sx={sx}
     >
       {children}
-    </BoxWithFallback>
+    </Component>
   )
 }) as PolymorphicForwardRefComponent<'div', TruncateProps>
 

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -124,6 +124,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type ProgressBarProps",
   "Radio",
   "RadioGroup",
+  "type RadioGroupProps",
   "type RadioProps",
   "registerPortalRoot",
   "RelativeTime",

packages/react/src/index.ts

@@ -129,6 +129,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'