revert: Remove support for sx from FormControl component (#6681) (#6939)

Author: francinelucca

.changeset/grumpy-lobsters-obey.md

@@ -98,6 +98,11 @@
       "description": "Class name(s) for custom styling.",
       "defaultValue": ""
     },
+    {
+      "name": "sx",
+      "type": "SystemStyleObject",
+      "deprecated": true
+    },
     {
       "name": "ref",
       "type": "React.RefObject<HTMLDivElement>"
@@ -147,6 +152,11 @@
           "type": "string",
           "description": "Class name(s) for custom styling.",
           "defaultValue": ""
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject",
+          "deprecated": true
         }
       ]
     },
@@ -164,6 +174,11 @@
           "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
         }
       ]
     },
@@ -188,6 +203,11 @@
           "type": "string",
           "description": "May be used to override the ID assigned by FormControl's React Context",
           "defaultValue": ""
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject",
+          "deprecated": true
         }
       ]
     },
@@ -199,8 +219,13 @@
           "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.docs.json

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

packages/react/src/FormControl/FormControl.tsx

@@ -1,25 +1,31 @@
 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'
 
-export type FormControlCaptionProps = React.PropsWithChildren<{
-  id?: string
-  className?: string
-}>
+type FormControlCaptionProps = React.PropsWithChildren<
+  {
+    id?: string
+    className?: string
+  } & SxProp
+>
 
-function FormControlCaption({id, children, className}: FormControlCaptionProps) {
+function FormControlCaption({id, children, sx, className}: FormControlCaptionProps) {
   const {captionId, disabled} = useFormControlContext()
 
   return (
-    <Text
+    <BoxWithFallback
+      as={Text}
       id={id ?? captionId}
       className={clsx(className, classes.Caption)}
       data-control-disabled={disabled ? '' : undefined}
+      sx={sx}
     >
       {children}
-    </Text>
+    </BoxWithFallback>
   )
 }
 

packages/react/src/FormControl/FormControlCaption.tsx

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

packages/react/src/FormControl/FormControlLabel.tsx

@@ -1,18 +1,46 @@
 import type React from 'react'
+import {get} from '../constants'
+import type {SxProp} from '../sx'
 import {useFormControlContext} from './_FormControlContext'
-import classes from './FormControlLeadingVisual.module.css'
+import styled from 'styled-components'
+import sx from '../sx'
 
-const FormControlLeadingVisual: React.FC<React.PropsWithChildren> = ({children}) => {
+const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp>> = ({children, sx}) => {
   const {disabled, captionId} = useFormControlContext()
   return (
-    <div
-      className={classes.LeadingVisual}
+    <StyledLeadingVisual
       data-control-disabled={disabled ? '' : undefined}
       data-has-caption={captionId ? '' : undefined}
+      sx={sx}
     >
       {children}
-    </div>
+    </StyledLeadingVisual>
   )
 }
 
+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/FormControlLeadingVisual.module.css

@@ -1,6 +1,2 @@
 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/FormControl/FormControlLeadingVisual.tsx

@@ -74,10 +74,6 @@ 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/FormControl/index.ts

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