fix(useFormControlForwardedProps): do not pass through validationStatus (#5376)

* fix(useFormControlForwardedProps): do not pass through validationStatus

* Create kind-kiwis-crash.md

---------

Co-authored-by: Jon Rohan <yes@jonrohan.codes>

Author: hussam-i-am

.changeset/kind-kiwis-crash.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+fix(useFormControlForwardedProps): do not pass through validationStatus

packages/react/src/FormControl/_FormControlContext.tsx

@@ -17,7 +17,7 @@ export function useFormControlContext(): FormControlContext {
   return useContext(FormControlContext) ?? {}
 }
 
-interface FormControlForwardedProps extends Omit<FormControlContext, 'captionId' | 'validationMessageId'> {
+interface FormControlForwardedProps extends Pick<FormControlProps, 'disabled' | 'id' | 'required'> {
   ['aria-describedby']?: string
 }
 
@@ -29,22 +29,14 @@ interface FormControlForwardedProps extends Omit<FormControlContext, 'captionId'
  * @param externalProps The external props passed to this component. If provided, these props will be merged with the
  * `FormControl` props, with external props taking priority.
  */
-export function useFormControlForwardedProps<P>(externalProps: P): P & FormControlForwardedProps
-/**
- * Make any component compatible with `FormControl`'s automatic wiring up of accessibility attributes & validation by
- * reading the props from this hook and handling them / assigning them to the underlying form control. If used outside
- * of `FormControl`, this hook has no effect.
- */
-export function useFormControlForwardedProps(): FormControlForwardedProps
-export function useFormControlForwardedProps(externalProps: FormControlForwardedProps = {}) {
+export function useFormControlForwardedProps<P>(externalProps: P): P & FormControlForwardedProps {
   const context = useContext(FormControlContext)
-  if (!context) return externalProps
+  if (!context) return externalProps as P & FormControlForwardedProps
 
   return {
     disabled: context.disabled,
     id: context.id,
     required: context.required,
-    validationStatus: context.validationStatus,
     ['aria-describedby']: [context.validationMessageId, context.captionId].filter(Boolean).join(' ') || undefined,
     ...externalProps,
   }

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

@@ -458,7 +458,7 @@ describe('FormControl', () => {
 describe('useFormControlForwardedProps', () => {
   describe('when used outside FormControl', () => {
     test('returns empty object when no props object passed', () => {
-      const result = renderHook(() => useFormControlForwardedProps())
+      const result = renderHook(() => useFormControlForwardedProps({}))
       expect(result.result.current).toEqual({})
     })
 
@@ -472,7 +472,7 @@ describe('useFormControlForwardedProps', () => {
   test('provides context value when no props object is passed', () => {
     const id = 'test-id'
 
-    const {result} = renderHook(() => useFormControlForwardedProps(), {
+    const {result} = renderHook(() => useFormControlForwardedProps({}), {
       wrapper: ({children}: {children: React.ReactNode}) => (
         <FormControl id={id} disabled required>
           <FormControl.Label>Label</FormControl.Label>