diff --git a/.changeset/angry-pants-brush.md b/.changeset/angry-pants-brush.md new file mode 100644 index 00000000000..827fda8ac54 --- /dev/null +++ b/.changeset/angry-pants-brush.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Add `className` prop to `FormControl.Label` component diff --git a/packages/react/src/FormControl/_FormControlLabel.tsx b/packages/react/src/FormControl/_FormControlLabel.tsx index 8c52c909c52..4d62b19e114 100644 --- a/packages/react/src/FormControl/_FormControlLabel.tsx +++ b/packages/react/src/FormControl/_FormControlLabel.tsx @@ -11,11 +11,12 @@ export type Props = { requiredText?: string requiredIndicator?: boolean id?: string + className?: string } & SxProp const FormControlLabel: React.FC< React.PropsWithChildren<{htmlFor?: string} & React.ComponentProps & Props> -> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, sx, ...props}) => { +> = ({as, children, htmlFor, id, visuallyHidden, requiredIndicator = true, requiredText, sx, className, ...props}) => { const {disabled, id: formControlId, required} = useFormControlContext() /** @@ -26,6 +27,7 @@ const FormControlLabel: React.FC< ? { as, id, + className, visuallyHidden, required, requiredText, @@ -37,6 +39,7 @@ const FormControlLabel: React.FC< : { as, id, + className, visuallyHidden, htmlFor: htmlFor || formControlId, required, diff --git a/packages/react/src/internal/components/InputLabel.tsx b/packages/react/src/internal/components/InputLabel.tsx index e932a4d5418..b4d2fa43aed 100644 --- a/packages/react/src/internal/components/InputLabel.tsx +++ b/packages/react/src/internal/components/InputLabel.tsx @@ -10,6 +10,7 @@ type BaseProps = SxProp & { requiredIndicator?: boolean visuallyHidden?: boolean id?: string + className?: string } export type LabelProps = BaseProps & { @@ -35,6 +36,7 @@ const InputLabel: React.FC> = ({ visuallyHidden, sx, as = 'label', + className, ...props }) => { return ( @@ -45,6 +47,7 @@ const InputLabel: React.FC> = ({ } htmlFor={htmlFor} id={id} + className={className} sx={{ fontWeight: 'bold', fontSize: 1,