Remove sx props and BoxWithFallback from RadioGroup (#6642)

Co-authored-by: liuliu-dev <[email protected]>

Author: liuliu-dev

.changeset/quick-bats-remain.md

@@ -0,0 +1,6 @@
+---
+'@primer/styled-react': patch
+'@primer/react': major
+---
+
+Update RadioGroup component to no longer support sx, add sx wrapper to @primer/styled-react.

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

@@ -8,6 +8,7 @@ import RadioGroup from '../RadioGroup'
 import Radio from '../Radio'
 import {Button} from '../Button'
 import React from 'react'
+import classes from './Banner.examples.stories.module.css'
 import {useFocus} from '../internal/hooks/useFocus'
 import {PageLayout} from '../PageLayout'
 
@@ -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/CheckboxGroup/CheckboxGroup.dev.stories.module.css

@@ -0,0 +1,19 @@
+.CheckboxGroup {
+  color: var(--fgColor-default, var(--color-fg-default));
+  /* stylelint-disable-next-line primer/spacing */
+  margin-top: 15px;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: 15px;
+}
+
+.MutedCaption {
+  color: var(--fgColor-muted);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--text-caption-weight);
+}
+
+.BoldLabel {
+  color: var(--fgColor-default, var(--color-fg-default));
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+}

packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx

@@ -1,5 +1,6 @@
 import type {Meta} from '@storybook/react-vite'
 import {Checkbox, CheckboxGroup, FormControl} from '..'
+import classes from './CheckboxGroup.dev.stories.module.css'
 
 export default {
   title: 'Components/CheckboxGroup/Dev',
@@ -8,30 +9,9 @@ export default {
 } as Meta
 
 export const SxProps = () => (
-  <CheckboxGroup
-    sx={{
-      color: 'var(--fgColor-default, var(--color-fg-default))',
-      my: '15px',
-    }}
-  >
-    <CheckboxGroup.Caption
-      sx={{
-        color: 'fg.muted',
-        fontSize: 0,
-        fontWeight: 400,
-      }}
-    >
-      Caption
-    </CheckboxGroup.Caption>
-    <CheckboxGroup.Label
-      sx={{
-        color: 'var(--fgColor-default, var(--color-fg-default))',
-        fontSize: ['14px'],
-        fontWeight: 600,
-      }}
-    >
-      Choices
-    </CheckboxGroup.Label>
+  <CheckboxGroup className={classes.CheckboxGroup}>
+    <CheckboxGroup.Caption className={classes.MutedCaption}>Caption</CheckboxGroup.Caption>
+    <CheckboxGroup.Label className={classes.BoldLabel}>Choices</CheckboxGroup.Label>
     <FormControl required>
       <Checkbox value="one" defaultChecked />
       <FormControl.Label>Choice one</FormControl.Label>

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 = ({

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

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<React.PropsWithChildren<CheckboxOrRadioGroupProps>> = ({
   'aria-labelledby': ariaLabelledby,
@@ -41,7 +39,6 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
   id: idProp,
   required = false,
   className,
-  sx,
 }) => {
   const [slots, rest] = useSlots(children, {
     caption: CheckboxOrRadioGroupCaption,
@@ -80,53 +77,48 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
       }}
     >
       <div>
-        <BoxWithFallback
-          className={clsx(className, classes.GroupFieldset)}
-          data-validation={validationChild ? '' : undefined}
-          {...(labelChild
-            ? {
-                as: 'fieldset',
-                disabled,
-              }
-            : {})}
-          sx={sx}
-        >
-          {labelChild ? (
-            /*
+        {labelChild ? (
+          <fieldset
+            className={clsx(className, classes.GroupFieldset)}
+            data-validation={validationChild ? '' : undefined}
+            disabled={disabled}
+          >
+            {/*
                   Placing the caption text and validation text in the <legend> provides a better user
                   experience for more screenreaders.
 
                   Reference: https://blog.tenon.io/accessible-validation-of-checkbox-and-radiobutton-groups/
-                */
+                */}
             <legend className={classes.GroupLegend} data-legend-visible={isLegendVisible ? '' : undefined}>
               {slots.label}
               {slots.caption}
               {React.isValidElement(slots.validation) && slots.validation.props.children && (
                 <VisuallyHidden>{slots.validation.props.children}</VisuallyHidden>
               )}
             </legend>
-          ) : (
-            /*
+
+            <div className={classes.Body}>
+              {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
+            </div>
+          </fieldset>
+        ) : (
+          <div className={clsx(className, classes.GroupFieldset)} data-validation={validationChild ? '' : undefined}>
+            {/*
                   If CheckboxOrRadioGroup.Label wasn't passed as a child, we don't render a <legend>
                   but we still want to render a caption
-                */
-            slots.caption
-          )}
+                */}
+            {slots.caption}
 
-          <div
-            className={classes.Body}
-            {...(!labelChild
-              ? {
-                  ['aria-labelledby']: ariaLabelledby,
-                  ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
-                  as: 'div',
-                  role: 'group',
-                }
-              : {})}
-          >
-            {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
+            <div
+              className={classes.Body}
+              aria-labelledby={ariaLabelledby}
+              aria-describedby={[validationMessageId, captionId].filter(Boolean).join(' ')}
+              role="group"
+            >
+              {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
+            </div>
           </div>
-        </BoxWithFallback>
+        )}
         {validationChild && (
           <ValidationAnimationContainer
             // If we have CheckboxOrRadioGroup.Label as a child, we render a screenreader-accessible validation message in the <legend>

packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx

@@ -1,16 +1,15 @@
 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<SxProp> & {className?: string}
+type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren<{className?: string}>
 
-const CheckboxOrRadioGroupCaption: React.FC<CheckboxOrRadioGroupCaptionProps> = ({className, children, sx}) => {
+const CheckboxOrRadioGroupCaption: React.FC<CheckboxOrRadioGroupCaptionProps> = ({className, children}) => {
   const {captionId} = React.useContext(CheckboxOrRadioGroupContext)
   return (
-    <Text className={clsx(className, classes.CheckboxOrRadioGroupCaption)} id={captionId} sx={sx}>
+    <Text className={clsx(className, classes.CheckboxOrRadioGroupCaption)} id={captionId}>
       {children}
     </Text>
   )

packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import VisuallyHidden from '../../../_VisuallyHidden'
-import type {SxProp} from '../../../sx'
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 import classes from './CheckboxOrRadioGroup.module.css'
 import {Stack} from '../../../Stack'
@@ -13,13 +12,12 @@ export type CheckboxOrRadioGroupLabelProps = {
    * Whether to visually hide the fieldset legend
    */
   visuallyHidden?: boolean
-} & SxProp
+}
 
 const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupLabelProps>> = ({
   children,
   className,
   visuallyHidden = false,
-  sx,
 }) => {
   const {required, disabled} = React.useContext(CheckboxOrRadioGroupContext)
 
@@ -29,7 +27,6 @@ const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadi
       isVisible={!visuallyHidden}
       title={required ? 'required field' : undefined}
       data-label-disabled={disabled ? '' : undefined}
-      sx={sx}
     >
       {required ? (
         <Stack direction="horizontal" gap="none">