chore: cleanup remaining sx props (#6959)

Co-authored-by: Mike Perrotti <[email protected]>

Author: francinelucca

.changeset/lemon-onions-teach.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+chore(AvatarStack, CheckboxOrRadioGroup, UnstyledTextInput): cleanup remaining sx props

package-lock.json

@@ -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 (
-    <BoxWithFallback
-      as="span"
+    <span
       data-variant={variant}
       data-shape={shape}
       data-avatar-count={count > 3 ? '3+' : count}
@@ -187,7 +185,7 @@ const AvatarStack = ({
         {' '}
         {transformChildren(children, shape)}
       </AvatarStackBody>
-    </BoxWithFallback>
+    </span>
   )
 }
 

packages/react/src/AvatarStack/AvatarStack.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 = ({

packages/react/src/CheckboxGroup/CheckboxGroup.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',

packages/react/src/Radio/Radio.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.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<typeof UnderlineNav> = {
   title: 'Components/UnderlineNav',

packages/react/src/UnderlineNav/UnderlineNav.stories.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,
@@ -70,6 +67,8 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
 
   const isLegendVisible = React.isValidElement(labelChild) && !labelChild.props.visuallyHidden
 
+  const Component = labelChild ? 'fieldset' : 'div'
+
   return (
     <CheckboxOrRadioGroupContext.Provider
       value={{
@@ -80,16 +79,14 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
       }}
     >
       <div>
-        <BoxWithFallback
+        <Component
           className={clsx(className, classes.GroupFieldset)}
           data-validation={validationChild ? '' : undefined}
           {...(labelChild
             ? {
-                as: 'fieldset',
                 disabled,
               }
             : {})}
-          sx={sx}
         >
           {labelChild ? (
             /*
@@ -126,7 +123,7 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
           >
             {React.Children.toArray(rest).filter(child => React.isValidElement(child))}
           </div>
-        </BoxWithFallback>
+        </Component>
         {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/CheckboxOrRadioGroup.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<SxProp> & {className?: string}
+type CheckboxOrRadioGroupCaptionProps = React.PropsWithChildren<{className?: string}>
 
 const CheckboxOrRadioGroupCaption: React.FC<CheckboxOrRadioGroupCaptionProps> = ({className, children}) => {
   const {captionId} = React.useContext(CheckboxOrRadioGroupContext)

packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.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<React.PropsWithChildren<CheckboxOrRadioGroupValidationProps>> = ({
   children,
   variant,
-  sx,
 }) => {
   const {validationMessageId = ''} = React.useContext(CheckboxOrRadioGroupContext)
   return (
-    <InputValidation validationStatus={variant} id={validationMessageId} sx={sx}>
+    <InputValidation validationStatus={variant} id={validationMessageId}>
       {children}
     </InputValidation>
   )