feat(FormControl.Label) add className prop (#5113)

* add className to FormControl.Label * add changeset
primer · Oct 14, 2024 · c28378e · c28378e
1 parent bd2c988
commit c28378e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/angry-pants-brush.md 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
@@ -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<typeof InputLabel> & 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
@@ -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<React.PropsWithChildren<Props>> = ({
   visuallyHidden,
   sx,
   as = 'label',
+  className,
   ...props
 }) => {
   return (
@@ -45,6 +47,7 @@ const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
       }
       htmlFor={htmlFor}
       id={id}
+      className={className}
       sx={{
         fontWeight: 'bold',
         fontSize: 1,