Pass through FormControl.Label props

.changeset/polite-chicken-fix.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+passthrough form control label props

src/FormControl/_FormControlLabel.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import InputLabel, {LabelProps, LegendOrSpanProps} from '../_InputLabel'
+import InputLabel from '../_InputLabel'
 import {SxProp} from '../sx'
 import {FormControlContext} from './FormControl'
 
@@ -12,21 +12,35 @@ export type Props = {
 } & SxProp
 
 const FormControlLabel: React.FC<
-  React.PropsWithChildren<{htmlFor?: string} & (LegendOrSpanProps | LabelProps) & Props>
-> = ({children, htmlFor, id, visuallyHidden, sx}) => {
+  React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps<typeof InputLabel> & Props>
+> = ({as, children, htmlFor, id, visuallyHidden, sx, ...props}) => {
   const {disabled, id: formControlId, required} = React.useContext(FormControlContext)
-  return (
-    <InputLabel
-      htmlFor={htmlFor || formControlId}
-      id={id}
-      visuallyHidden={visuallyHidden}
-      required={required}
-      disabled={disabled}
-      sx={sx}
-    >
-      {children}
-    </InputLabel>
-  )
+
+  /**
+   * Ensure we can pass through props correctly, since legend/span accept no defined 'htmlFor'
+   */
+  const labelProps: React.ComponentProps<typeof InputLabel> =
+    as === 'legend' || as === 'span'
+      ? {
+          as,
+          id,
+          visuallyHidden,
+          required,
+          disabled,
+          sx,
+          ...props,
+        }
+      : {
+          as,
+          id,
+          visuallyHidden,
+          htmlFor: htmlFor || formControlId,
+          required,
+          disabled,
+          sx,
+          ...props,
+        }
+  return <InputLabel {...labelProps}>{children}</InputLabel>
 }
 
 export default FormControlLabel

src/_InputLabel.tsx

@@ -31,6 +31,7 @@ const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
   visuallyHidden,
   sx,
   as = 'label',
+  ...props
 }) => {
   return (
     <VisuallyHidden
@@ -49,6 +50,7 @@ const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
         alignSelf: 'flex-start',
         ...sx,
       }}
+      {...props}
     >
       {required ? (
         <Box display="flex" as="span">

src/__tests__/FormControl.test.tsx

@@ -199,6 +199,24 @@ describe('FormControl', () => {
         expect(input).toBeDefined()
         expect(label).toBeDefined()
       })
+
+      it('passes through props on the label element', () => {
+        const {getByLabelText, getByText} = render(
+          <SSRProvider>
+            <FormControl>
+              <FormControl.Label data-testid="some-test-id">{LABEL_TEXT}</FormControl.Label>
+              <Textarea />
+            </FormControl>
+          </SSRProvider>,
+        )
+
+        const input = getByLabelText(LABEL_TEXT)
+        const label = getByText(LABEL_TEXT)
+
+        expect(input).toBeDefined()
+        expect(label).toBeDefined()
+        expect(label).toHaveAttribute('data-testid', 'some-test-id')
+      })
     })
 
     describe('ARIA attributes', () => {