feat: add support for className to FormControl.Validation (#5984)

Author: joshblack

.changeset/fine-bugs-shine.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for the `className` prop to `FormControl.Validation`

packages/react/src/FormControl/_FormControlValidation.tsx

@@ -7,17 +7,19 @@ import {useFormControlContext} from './_FormControlContext'
 export type FormControlValidationProps = {
   variant: FormValidationStatus
   id?: string
+  className?: string
 } & SxProp
 
 const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidationProps>> = ({
   children,
+  className,
   variant,
   sx,
   id,
 }) => {
   const {validationMessageId} = useFormControlContext()
   return (
-    <InputValidation validationStatus={variant} id={id || validationMessageId || ''} sx={sx}>
+    <InputValidation className={className} validationStatus={variant} id={id || validationMessageId || ''} sx={sx}>
       {children}
     </InputValidation>
   )

packages/react/src/FormControl/__tests__/FormControl.Validation.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import FormControl from '../FormControl'
+import {render} from '@testing-library/react'
+
+describe('FormControl.Validation', () => {
+  it('should provide support for `className` on the outermost element', () => {
+    const {container} = render(
+      <FormControl.Validation className="custom-class" variant="success">
+        Validation message
+      </FormControl.Validation>,
+    )
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+})

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

@@ -5,8 +5,10 @@ import Text from '../../Text'
 import type {SxProp} from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import classes from './InputValidation.module.css'
+import {clsx} from 'clsx'
 
 type Props = {
+  className?: string
   id: string
   validationStatus?: FormValidationStatus
 } & SxProp
@@ -19,7 +21,7 @@ const validationIconMap: Record<
   error: AlertFillIcon,
 }
 
-const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id, validationStatus, sx}) => {
+const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, className, id, validationStatus, sx}) => {
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
 
   // TODO: use `text-caption-lineHeight` token as a custom property when it's available
@@ -29,7 +31,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id
   const iconBoxMinHeight = iconSize * captionLineHeight
 
   return (
-    <Text className={classes.InputValidation} data-validation-status={validationStatus} sx={sx}>
+    <Text className={clsx(className, classes.InputValidation)} data-validation-status={validationStatus} sx={sx}>
       {IconComponent ? (
         <span
           aria-hidden="true"