While reviewing the Select component's PR, it was noted that the FormHint component required an update to handle intrinsic HTML props correctly. Specifically, the component needed an id prop for its use within the Select component:
<FormHint text={helptext} id={helptextId} />
This change exposed a type error since the FormHint interface did not explicitly define id. However, id is an intrinsic HTML attribute for the
element that FormHint renders.
To avoid cluttering component interfaces with numerous intrinsic HTML attributes, our convention is for all components to have a generic props property obeject which is used to catch all of the internal HTML element's props and pass them on to it.
The proposed way to deal with this in our typescriptified components is to extend the interface with React.ComponentPropsWithoutRef<'element'> or React.ComponentPropsWithRef<'element'>, ensuring all intrinsic HTML props are passed correctly.
For example, the FormHint component was updated as follows:
This approach ensures all valid HTML props are handled without explicitly adding each to the component's interface.
Task
[ ] Review all components that have already been migrated to TypeScript.
[ ] Extend each component’s interface with React.ComponentPropsWithoutRef<'element'> or React.ComponentPropsWithRef<'element'>, as appropriate, to capture intrinsic HTML props. As 'element' choose the element which receives the {...props}
[ ] In cases where a component doesn't apply {...props} to an HTML element but to another component decide on a case-by-case basis what makes sense
[ ] Ensure this change does not introduce breaking changes in existing component usage.
Acceptance Criteria
[ ] Each migrated component should accept all intrinsic HTML props applicable to its rendered HTML element (or component).
[ ] Component interfaces should remain clean, only listing additional props specific to that component.
Description
While reviewing the Select component's PR, it was noted that the FormHint component required an update to handle intrinsic HTML props correctly. Specifically, the component needed an id prop for its use within the Select component:
This change exposed a type error since the FormHint interface did not explicitly define id. However, id is an intrinsic HTML attribute for the
To avoid cluttering component interfaces with numerous intrinsic HTML attributes, our convention is for all components to have a generic
propsproperty obeject which is used to catch all of the internal HTML element's props and pass them on to it.The proposed way to deal with this in our typescriptified components is to extend the interface with
React.ComponentPropsWithoutRef<'element'>orReact.ComponentPropsWithRef<'element'>, ensuring all intrinsic HTML props are passed correctly.For example, the FormHint component was updated as follows:
This approach ensures all valid HTML props are handled without explicitly adding each to the component's interface.
Task
React.ComponentPropsWithoutRef<'element'>orReact.ComponentPropsWithRef<'element'>, as appropriate, to capture intrinsic HTML props. As'element'choose the element which receives the{...props}{...props}to an HTML element but to another component decide on a case-by-case basis what makes senseAcceptance Criteria
References