Remove support for sx from Checkbox component (#6654)

Author: llastflowers

.changeset/tasty-cheetahs-pay.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update Checkbox component to no longer support sx

packages/react/src/Checkbox/Checkbox.docs.json

@@ -72,12 +72,7 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "\"input\""
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []
-}
+}

packages/react/src/Checkbox/Checkbox.stories.tsx

@@ -5,7 +5,7 @@ import FormControl from '../FormControl'
 import type {FormControlArgs} from '../utils/form-story-helpers'
 import {formControlArgTypesWithoutValidation, getFormControlArgsByChildComponent} from '../utils/form-story-helpers'
 
-const excludedControlKeys = ['required', 'value', 'validationStatus', 'sx']
+const excludedControlKeys = ['required', 'value', 'validationStatus']
 
 export default {
   title: 'Components/Checkbox',

packages/react/src/Checkbox/Checkbox.tsx

@@ -1,13 +1,11 @@
 import {clsx} from 'clsx'
 import {useProvidedRefOrCreate} from '../hooks'
 import React, {useContext, useEffect, type ChangeEventHandler, type InputHTMLAttributes, type ReactElement} from 'react'
-import {type SxProp} from '../sx'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 import {CheckboxGroupContext} from '../CheckboxGroup/CheckboxGroupContext'
 import classes from './Checkbox.module.css'
 import sharedClasses from './shared.module.css'
-import Box from '../Box'
 
 export type CheckboxProps = {
   /**
@@ -35,27 +33,14 @@ export type CheckboxProps = {
    * Used during form submission and to identify which checkbox inputs are selected
    */
   value?: string
-} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &
-  SxProp
+} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'>
 
 /**
  * An accessible, native checkbox component
  */
 const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (
-    {
-      checked,
-      className,
-      defaultChecked,
-      indeterminate,
-      disabled,
-      onChange,
-      sx: sxProp,
-      required,
-      validationStatus,
-      value,
-      ...rest
-    },
+    {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest},
     ref,
   ): ReactElement => {
     const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
@@ -99,16 +84,6 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       }
     })
 
-    if (sxProp) {
-      return (
-        <Box
-          as="input"
-          {...inputProps}
-          className={clsx(className, sharedClasses.Input, classes.Checkbox)}
-          sx={sxProp}
-        />
-      )
-    }
     return <input {...inputProps} className={clsx(className, sharedClasses.Input, classes.Checkbox)} />
   },
 )

packages/styled-react/src/index.tsx

@@ -3,6 +3,8 @@ import {
   Box,
   type BoxProps,
   type SxProp,
+  Checkbox as PrimerCheckbox,
+  type CheckboxProps as PrimerCheckboxProps,
   StateLabel as PrimerStateLabel,
   type StateLabelProps as PrimerStateLabelProps,
   SubNav as PrimerSubNav,
@@ -62,6 +64,12 @@ const SegmentedControl = Object.assign(SegmentedControlImpl, {
   IconButton: SegmentedControlIconButton,
 })
 
+type CheckboxProps = PrimerCheckboxProps & SxProp
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {
+  return <Box as={PrimerCheckbox} ref={ref} {...props} />
+})
+
 type StateLabelProps = PrimerStateLabelProps & SxProp
 
 const StateLabel = forwardRef<HTMLSpanElement, StateLabelProps>(function StateLabel(props, ref) {
@@ -90,7 +98,7 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {SegmentedControl, StateLabel, SubNav, ToggleSwitch}
+export {Checkbox, SegmentedControl, StateLabel, SubNav, ToggleSwitch}
 
 export {
   ActionList,
@@ -99,7 +107,6 @@ export {
   Avatar,
   Breadcrumbs,
   Button,
-  Checkbox,
   CheckboxGroup,
   CircleBadge,
   CounterLabel,