chore: add styles to FormControl and subcomponents

.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

@@ -40,10 +40,11 @@ export type FormControlProps = {
    */
   layout?: 'horizontal' | 'vertical'
   className?: string
+  style?: React.CSSProperties
 }
 
 const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
-  ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, className}, ref) => {
+  ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, className, style}, ref) => {
     const [slots, childrenWithoutSlots] = useSlots(children, {
       caption: FormControlCaption,
       label: FormControlLabel,
@@ -170,6 +171,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             ref={ref}
             data-has-leading-visual={slots.leadingVisual ? '' : undefined}
             className={clsx(className, classes.ControlHorizontalLayout)}
+            style={style}
           >
             {InputChildren}
           </div>
@@ -178,6 +180,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             ref={ref}
             data-has-label={!isLabelHidden ? '' : undefined}
             className={clsx(className, classes.ControlVerticalLayout)}
+            style={style}
           >
             {slots.label}
             {React.isValidElement(InputComponent) &&

packages/react/src/FormControl/FormControlCaption.tsx

@@ -7,16 +7,18 @@ import {useFormControlContext} from './_FormControlContext'
 export type FormControlCaptionProps = React.PropsWithChildren<{
   id?: string
   className?: string
+  style?: React.CSSProperties
 }>
 
-function FormControlCaption({id, children, className}: FormControlCaptionProps) {
+function FormControlCaption({id, children, className, style}: FormControlCaptionProps) {
   const {captionId, disabled} = useFormControlContext()
 
   return (
     <Text
       id={id ?? captionId}
       className={clsx(className, classes.Caption)}
       data-control-disabled={disabled ? '' : undefined}
+      style={style}
     >
       {children}
     </Text>

packages/react/src/FormControl/FormControlLabel.tsx

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

packages/react/src/FormControl/FormControlLeadingVisual.tsx

@@ -2,12 +2,16 @@ import type React from 'react'
 import {useFormControlContext} from './_FormControlContext'
 import classes from './FormControlLeadingVisual.module.css'
 
-const FormControlLeadingVisual: React.FC<React.PropsWithChildren> = ({children}) => {
+const FormControlLeadingVisual: React.FC<React.PropsWithChildren & {style?: React.CSSProperties}> = ({
+  children,
+  style,
+}) => {
   const {disabled, captionId} = useFormControlContext()
   return (
     <div
       className={classes.LeadingVisual}
       data-control-disabled={disabled ? '' : undefined}
+      style={style}
       data-has-caption={captionId ? '' : undefined}
     >
       {children}

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"