Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/kind-kiwis-crash.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": minor
---

fix(useFormControlForwardedProps): do not pass through validationStatus
14 changes: 3 additions & 11 deletions packages/react/src/FormControl/_FormControlContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand All @@ -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,
}
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/__tests__/FormControl.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({})
})

Expand All @@ -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>
Expand Down
Loading