Remove support for sx from FormControl component

.changeset/grumpy-lobsters-obey.md

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

packages/react/src/FormControl/FormControl.docs.json

@@ -98,11 +98,6 @@
       "description": "Class name(s) for custom styling.",
       "defaultValue": ""
     },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
-    },
     {
       "name": "ref",
       "type": "React.RefObject<HTMLDivElement>"
@@ -152,11 +147,6 @@
           "type": "string",
           "description": "Class name(s) for custom styling.",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -174,11 +164,6 @@
           "type": "React.ReactNode",
           "defaultValue": "",
           "description": "The content (usually just text) that is rendered to give contextual info about the field"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -203,11 +188,6 @@
           "type": "string",
           "description": "May be used to override the ID assigned by FormControl's React Context",
           "defaultValue": ""
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -219,13 +199,8 @@
           "type": "React.ReactNode",
           "defaultValue": "",
           "description": "The visual to render before the choice input's label"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     }
   ]
-}
+}

packages/react/src/FormControl/FormControl.tsx

@@ -11,7 +11,6 @@ import Textarea from '../Textarea'
 import {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup'
 import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer'
 import {useSlots} from '../hooks/useSlots'
-import type {SxProp} from '../sx'
 import {useId} from '../hooks/useId'
 import {FormControlCaption} from './FormControlCaption'
 import FormControlLabel from './FormControlLabel'
@@ -20,7 +19,6 @@ import FormControlValidation from './_FormControlValidation'
 import {FormControlContextProvider} from './_FormControlContext'
 import {warning} from '../utils/warning'
 import classes from './FormControl.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type FormControlProps = {
   children?: React.ReactNode
@@ -42,10 +40,10 @@ export type FormControlProps = {
    */
   layout?: 'horizontal' | 'vertical'
   className?: string
-} & SxProp
+}
 
 const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
-  ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx, className}, ref) => {
+  ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, className}, ref) => {
     const [slots, childrenWithoutSlots] = useSlots(children, {
       caption: FormControlCaption,
       label: FormControlLabel,
@@ -168,19 +166,17 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
         }}
       >
         {isChoiceInput || layout === 'horizontal' ? (
-          <BoxWithFallback
+          <div
             ref={ref}
             data-has-leading-visual={slots.leadingVisual ? '' : undefined}
-            sx={sx}
             className={clsx(className, classes.ControlHorizontalLayout)}
           >
             {InputChildren}
-          </BoxWithFallback>
+          </div>
         ) : (
-          <BoxWithFallback
+          <div
             ref={ref}
             data-has-label={!isLabelHidden ? '' : undefined}
-            sx={sx}
             className={clsx(className, classes.ControlVerticalLayout)}
           >
             {slots.label}
@@ -207,7 +203,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
               <ValidationAnimationContainer show>{slots.validation}</ValidationAnimationContainer>
             ) : null}
             {slots.caption}
-          </BoxWithFallback>
+          </div>
         )}
       </FormControlContextProvider>
     )

packages/react/src/FormControl/FormControlCaption.tsx

@@ -1,31 +1,25 @@
 import {clsx} from 'clsx'
 import type React from 'react'
 import Text from '../Text'
-import type {SxProp} from '../sx'
 import classes from './FormControlCaption.module.css'
 import {useFormControlContext} from './_FormControlContext'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-type FormControlCaptionProps = React.PropsWithChildren<
-  {
-    id?: string
-    className?: string
-  } & SxProp
->
+export type FormControlCaptionProps = React.PropsWithChildren<{
+  id?: string
+  className?: string
+}>
 
-function FormControlCaption({id, children, sx, className}: FormControlCaptionProps) {
+function FormControlCaption({id, children, className}: FormControlCaptionProps) {
   const {captionId, disabled} = useFormControlContext()
 
   return (
-    <BoxWithFallback
-      as={Text}
+    <Text
       id={id ?? captionId}
       className={clsx(className, classes.Caption)}
       data-control-disabled={disabled ? '' : undefined}
-      sx={sx}
     >
       {children}
-    </BoxWithFallback>
+    </Text>
   )
 }
 

packages/react/src/FormControl/FormControlLabel.tsx

@@ -1,5 +1,4 @@
 import type React from 'react'
-import type {SxProp} from '../sx'
 import {useFormControlContext} from './_FormControlContext'
 import {InputLabel} from '../internal/components/InputLabel'
 
@@ -12,11 +11,11 @@ export type Props = {
   requiredIndicator?: boolean
   id?: string
   className?: string
-} & SxProp
+}
 
 const FormControlLabel: React.FC<
   React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps<typeof InputLabel> & Props>
-> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, sx, className, ...props}) => {
+> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, className, ...props}) => {
   const {disabled, id: formControlId, required} = useFormControlContext()
 
   /**
@@ -33,7 +32,6 @@ const FormControlLabel: React.FC<
           requiredText,
           requiredIndicator,
           disabled,
-          sx,
           ...props,
         }
       : {
@@ -46,7 +44,6 @@ const FormControlLabel: React.FC<
           requiredText,
           requiredIndicator,
           disabled,
-          sx,
           ...props,
         }
 

packages/react/src/FormControl/FormControlLeadingVisual.module.css

@@ -0,0 +1,21 @@
+.LeadingVisual {
+  --leadingVisual-size: 16px;
+
+  color: var(--fgColor-default);
+  display: flex;
+  align-items: center;
+
+  &:where([data-control-disabled]) {
+    color: var(--control-fgColor-disabled);
+  }
+
+  & > * {
+    min-width: var(--leadingVisual-size);
+    min-height: var(--leadingVisual-size);
+    fill: currentColor;
+  }
+
+  &:where([data-has-caption]) {
+    --leadingVisual-size: 24px;
+  }
+}

packages/react/src/FormControl/FormControlLeadingVisual.tsx

@@ -1,46 +1,18 @@
 import type React from 'react'
-import {get} from '../constants'
-import type {SxProp} from '../sx'
 import {useFormControlContext} from './_FormControlContext'
-import styled from 'styled-components'
-import sx from '../sx'
+import classes from './FormControlLeadingVisual.module.css'
 
-const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp>> = ({children, sx}) => {
+const FormControlLeadingVisual: React.FC<React.PropsWithChildren> = ({children}) => {
   const {disabled, captionId} = useFormControlContext()
   return (
-    <StyledLeadingVisual
+    <div
+      className={classes.LeadingVisual}
       data-control-disabled={disabled ? '' : undefined}
       data-has-caption={captionId ? '' : undefined}
-      sx={sx}
     >
       {children}
-    </StyledLeadingVisual>
+    </div>
   )
 }
 
-const StyledLeadingVisual = styled.div`
-  --leadingVisual-size: ${get('fontSizes.2')};
-
-  color: var(--fgColor-default);
-
-  display: flex;
-  align-items: center; /* Vertical alignment */
-
-  &:where([data-control-disabled]) {
-    color: var(--control-fgColor-disabled);
-  }
-
-  & > * {
-    min-width: var(--leadingVisual-size);
-    min-height: var(--leadingVisual-size);
-    fill: currentColor;
-  }
-
-  &:where([data-has-caption]) {
-    --leadingVisual-size: ${get('fontSizes.4')};
-  }
-
-  ${sx}
-`
-
 export default FormControlLeadingVisual

packages/react/src/FormControl/index.ts

@@ -1,2 +1,6 @@
 export {useFormControlForwardedProps} from './_FormControlContext'
 export {default} from './FormControl'
+export type {FormControlProps} from './FormControl'
+export type {FormControlCaptionProps} from './FormControlCaption'
+export type {Props as FormControlLabelProps} from './FormControlLabel'
+export type {FormControlValidationProps} from './_FormControlValidation'

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

@@ -73,6 +73,10 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type FocusTrapHookSettings",
   "type FocusZoneHookSettings",
   "FormControl",
+  "type FormControlCaptionProps",
+  "type FormControlLabelProps",
+  "type FormControlProps",
+  "type FormControlValidationProps",
   "Header",
   "type HeaderItemProps",
   "type HeaderLinkProps",

packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.module.css

@@ -56,3 +56,7 @@
   max-height: 0;
   overflow: hidden;
 }
+
+.FormControl {
+  margin-bottom: var(--base-size-8);
+}

packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx

@@ -1069,11 +1069,11 @@ const CreateNewLabelDialog = ({
         Note this Dialog is not accessible. Do not copy this.
       </Flash>
       <form onSubmit={onSubmit}>
-        <FormControl sx={{marginBottom: 2}}>
+        <FormControl className={classes.FormControl}>
           <FormControl.Label>Name</FormControl.Label>
           <TextInput name="name" block defaultValue={initialValue} autoFocus />
         </FormControl>
-        <FormControl sx={{marginBottom: 2}}>
+        <FormControl className={classes.FormControl}>
           <FormControl.Label>Color</FormControl.Label>
           <TextInput name="color" block defaultValue="fae17d" leadingVisual="#" />
         </FormControl>

packages/react/src/index.ts

@@ -97,6 +97,12 @@ export {ConfirmationDialog} from './ConfirmationDialog/ConfirmationDialog'
 export {default as Flash} from './Flash'
 export type {FlashProps} from './Flash'
 export {default as FormControl} from './FormControl'
+export type {
+  FormControlProps,
+  FormControlCaptionProps,
+  FormControlLabelProps,
+  FormControlValidationProps,
+} from './FormControl'
 export {useFormControlForwardedProps} from './FormControl'
 export {default as Header} from './Header'
 export type {HeaderProps, HeaderItemProps, HeaderLinkProps} from './Header'

packages/styled-react/src/components/FormControl.tsx

@@ -0,0 +1,44 @@
+import {
+  Box,
+  FormControl as PrimerFormControl,
+  type FormControlProps as PrimerFormControlProps,
+  type FormControlCaptionProps as PrimerFormControlCaptionProps,
+  type FormControlValidationProps as PrimerFormControlValidationProps,
+  type SxProp,
+} from '@primer/react'
+import {forwardRef, type PropsWithChildren} from 'react'
+
+type FormControlProps = PropsWithChildren<PrimerFormControlProps> & SxProp
+
+const FormControlImpl = forwardRef<HTMLDivElement, FormControlProps>(function FormControl(props, ref) {
+  return <Box ref={ref} as={PrimerFormControl} {...props} />
+})
+
+type FormControlCaptionProps = PropsWithChildren<PrimerFormControlCaptionProps> & SxProp
+const FormControlCaption = (props: FormControlCaptionProps) => {
+  return <Box as={PrimerFormControl.Caption} {...props} />
+}
+
+type FormControlValidationProps = PropsWithChildren<PrimerFormControlValidationProps> & SxProp
+
+const FormControlValidation = (props: FormControlValidationProps) => {
+  return <Box as={PrimerFormControl.Validation} {...props} />
+}
+
+const FormControlLeadingVisual = (props: PropsWithChildren<SxProp>) => {
+  return <Box as={PrimerFormControl.LeadingVisual} {...props} />
+}
+
+const FormControl = Object.assign(FormControlImpl, {
+  Caption: FormControlCaption,
+  LeadingVisual: FormControlLeadingVisual,
+  Validation: FormControlValidation,
+  Label: PrimerFormControl.Label,
+}) as typeof FormControlImpl & {
+  Caption: typeof FormControlCaption
+  LeadingVisual: typeof FormControlLeadingVisual
+  Validation: typeof FormControlValidation
+  Label: typeof PrimerFormControl.Label
+}
+
+export {FormControl, type FormControlProps}

packages/styled-react/src/index.tsx

@@ -8,7 +8,6 @@ export {Button} from '@primer/react'
 export {CheckboxGroup} from '@primer/react'
 export {CircleBadge} from '@primer/react'
 export {Details} from '@primer/react'
-export {FormControl} from '@primer/react'
 export {Heading} from '@primer/react'
 export {IconButton} from '@primer/react'
 export {Label} from '@primer/react'
@@ -36,6 +35,7 @@ export {Checkbox, type CheckboxProps} from './components/Checkbox'
 export {CounterLabel, type CounterLabelProps} from './components/CounterLabel'
 export {Dialog, type DialogProps} from './components/Dialog'
 export {Flash} from './components/Flash'
+export {FormControl, type FormControlProps} from './components/FormControl'
 export {Header, type HeaderProps} from './components/Header'
 export {Link, type LinkProps} from './components/Link'
 export {LinkButton, type LinkButtonProps} from './components/LinkButton'