Revert "Remove sx props and BoxWithFallback from RadioGroup (#6642)" (#6684)

Author: joshblack

.changeset/quick-bats-remain.md

@@ -8,7 +8,6 @@ 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'
 
@@ -66,11 +65,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/Banner/Banner.examples.stories.module.css

@@ -1,6 +1,5 @@
 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',
@@ -9,9 +8,30 @@ export default {
 } as Meta
 
 export const SxProps = () => (
-  <CheckboxGroup className={classes.CheckboxGroup}>
-    <CheckboxGroup.Caption className={classes.MutedCaption}>Caption</CheckboxGroup.Caption>
-    <CheckboxGroup.Label className={classes.BoldLabel}>Choices</CheckboxGroup.Label>
+  <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>
     <FormControl required>
       <Checkbox value="one" defaultChecked />
       <FormControl.Label>Choice one</FormControl.Label>

packages/react/src/Banner/Banner.examples.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']}},
+  parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange', 'sx']}},
 } as Meta
 
 export const Playground = ({

packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.module.css

@@ -7,6 +7,7 @@ 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 = {
   /**
@@ -17,7 +18,8 @@ type RadioGroupProps = {
    * The name used to identify this group of radios
    */
   name: string
-} & CheckboxOrRadioGroupProps
+} & CheckboxOrRadioGroupProps &
+  SxProp
 
 export const RadioGroupContext = createContext<{
   disabled?: boolean

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

@@ -7,8 +7,10 @@ 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 */
@@ -30,7 +32,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,
@@ -39,6 +41,7 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
   id: idProp,
   required = false,
   className,
+  sx,
 }) => {
   const [slots, rest] = useSlots(children, {
     caption: CheckboxOrRadioGroupCaption,
@@ -77,48 +80,53 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
       }}
     >
       <div>
-        {labelChild ? (
-          <fieldset
-            className={clsx(className, classes.GroupFieldset)}
-            data-validation={validationChild ? '' : undefined}
-            disabled={disabled}
-          >
-            {/*
+        <BoxWithFallback
+          className={clsx(className, classes.GroupFieldset)}
+          data-validation={validationChild ? '' : undefined}
+          {...(labelChild
+            ? {
+                as: 'fieldset',
+                disabled,
+              }
+            : {})}
+          sx={sx}
+        >
+          {labelChild ? (
+            /*
                   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}
-              aria-labelledby={ariaLabelledby}
-              aria-describedby={[validationMessageId, captionId].filter(Boolean).join(' ')}
-              role="group"
-            >
-              {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
-            </div>
+          <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>
-        )}
+        </BoxWithFallback>
         {validationChild && (
           <ValidationAnimationContainer
             // If we have CheckboxOrRadioGroup.Label as a child, we render a screenreader-accessible validation message in the <legend>

packages/react/src/RadioGroup/RadioGroup.stories.tsx

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

packages/react/src/RadioGroup/RadioGroup.tsx

@@ -1,5 +1,6 @@
 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'
@@ -12,12 +13,13 @@ 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)
 
@@ -27,6 +29,7 @@ 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">