Unverified Commit fac2160c authored by nbriannl's avatar nbriannl Committed by GitHub
Browse files

Make FormLabel support `as` prop (#5044)

* Make FormLabel support as prop

Add test for FormLabel

* Update types
parent 6cea3bf3
......@@ -39,6 +39,9 @@ const propTypes = {
* read by assistive technologies.
*/
srOnly: PropTypes.bool,
/** Set a custom element for this component */
as: PropTypes.elementType,
};
const defaultProps = {
......@@ -47,7 +50,19 @@ const defaultProps = {
};
const FormLabel = React.forwardRef(
({ bsPrefix, column, srOnly, className, htmlFor, ...props }, ref) => {
(
{
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
as: Component = 'label',
bsPrefix,
column,
srOnly,
className,
htmlFor,
...props
},
ref,
) => {
const { controlId } = useContext(FormContext);
bsPrefix = useBootstrapPrefix(bsPrefix, 'form-label');
......@@ -74,7 +89,7 @@ const FormLabel = React.forwardRef(
return (
// eslint-disable-next-line jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control
<label ref={ref} className={classes} htmlFor={htmlFor} {...props} />
<Component ref={ref} className={classes} htmlFor={htmlFor} {...props} />
);
},
);
......
......@@ -71,6 +71,10 @@ describe('<FormLabel>', () => {
expect(instance.input.tagName).to.equal('LABEL');
});
it('accepts as prop', () => {
mount(<FormLabel as="legend">body</FormLabel>).assertSingle('legend');
});
it('should properly size itself when rendered as a Col', () => {
mount(<FormLabel column="sm">Label</FormLabel>).assertSingle(
'label.col-form-label-sm',
......
......@@ -20,6 +20,8 @@ export interface FormLabelWithColProps extends FormLabelBaseProps, ColProps {
export type FormLabelProps = FormLabelWithColProps | FormLabelOwnProps;
declare class FormLabel extends BsPrefixComponent<'label', FormLabelProps> {}
declare class FormLabel<
As extends React.ElementType = 'label'
> extends BsPrefixComponent<As, FormLabelProps> {}
export default FormLabel;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment