chore: add styles to FormControl and subcomponents (#6937)

Author: francinelucca

.changeset/sweet-owls-do.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+chore: add styles to formcontrol and subcomponents

packages/react/src/FormControl/FormControl.tsx

@@ -42,10 +42,11 @@ export type FormControlProps = {
    */
   layout?: 'horizontal' | 'vertical'
   className?: string
+  style?: React.CSSProperties
 } & 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, sx, className, style}, ref) => {
     const [slots, childrenWithoutSlots] = useSlots(children, {
       caption: FormControlCaption,
       label: FormControlLabel,
@@ -173,6 +174,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             data-has-leading-visual={slots.leadingVisual ? '' : undefined}
             sx={sx}
             className={clsx(className, classes.ControlHorizontalLayout)}
+            style={style}
           >
             {InputChildren}
           </BoxWithFallback>
@@ -182,6 +184,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             data-has-label={!isLabelHidden ? '' : undefined}
             sx={sx}
             className={clsx(className, classes.ControlVerticalLayout)}
+            style={style}
           >
             {slots.label}
             {React.isValidElement(InputComponent) &&

packages/react/src/FormControl/FormControlCaption.tsx

@@ -10,10 +10,11 @@ type FormControlCaptionProps = React.PropsWithChildren<
   {
     id?: string
     className?: string
+    style?: React.CSSProperties
   } & SxProp
 >
 
-function FormControlCaption({id, children, sx, className}: FormControlCaptionProps) {
+function FormControlCaption({id, children, sx, className, style}: FormControlCaptionProps) {
   const {captionId, disabled} = useFormControlContext()
 
   return (
@@ -23,6 +24,7 @@ function FormControlCaption({id, children, sx, className}: FormControlCaptionPro
       className={clsx(className, classes.Caption)}
       data-control-disabled={disabled ? '' : undefined}
       sx={sx}
+      style={style}
     >
       {children}
     </BoxWithFallback>

packages/react/src/FormControl/FormControlLabel.tsx

@@ -12,6 +12,7 @@ export type Props = {
   requiredIndicator?: boolean
   id?: string
   className?: string
+  style?: React.CSSProperties
 } & SxProp
 
 const FormControlLabel: React.FC<

packages/react/src/FormControl/FormControlLeadingVisual.tsx

@@ -5,11 +5,16 @@ import {useFormControlContext} from './_FormControlContext'
 import styled from 'styled-components'
 import sx from '../sx'
 
-const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp>> = ({children, sx}) => {
+const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp & {style?: React.CSSProperties}>> = ({
+  children,
+  sx,
+  style,
+}) => {
   const {disabled, captionId} = useFormControlContext()
   return (
     <StyledLeadingVisual
       data-control-disabled={disabled ? '' : undefined}
+      style={style}
       data-has-caption={captionId ? '' : undefined}
       sx={sx}
     >

packages/react/src/FormControl/_FormControlValidation.tsx

@@ -8,6 +8,7 @@ export type FormControlValidationProps = {
   variant: FormValidationStatus
   id?: string
   className?: string
+  style?: React.CSSProperties
 } & SxProp
 
 const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidationProps>> = ({
@@ -16,10 +17,17 @@ const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidat
   variant,
   sx,
   id,
+  style,
 }) => {
   const {validationMessageId} = useFormControlContext()
   return (
-    <InputValidation className={className} validationStatus={variant} id={id || validationMessageId || ''} sx={sx}>
+    <InputValidation
+      className={className}
+      validationStatus={variant}
+      id={id || validationMessageId || ''}
+      sx={sx}
+      style={style}
+    >
       {children}
     </InputValidation>
   )

packages/react/src/internal/components/InputValidation.tsx

@@ -11,6 +11,7 @@ type Props = {
   className?: string
   id: string
   validationStatus?: FormValidationStatus
+  style?: React.CSSProperties
 } & SxProp
 
 const validationIconMap: Record<
@@ -21,7 +22,13 @@ const validationIconMap: Record<
   error: AlertFillIcon,
 }
 
-const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, className, id, validationStatus}) => {
+const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({
+  children,
+  className,
+  id,
+  validationStatus,
+  style,
+}) => {
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
 
   // TODO: use `text-caption-lineHeight` token as a custom property when it's available
@@ -31,7 +38,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, cl
   const iconBoxMinHeight = iconSize * captionLineHeight
 
   return (
-    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus}>
+    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus} style={style}>
       {IconComponent ? (
         <span
           aria-hidden="true"