From dfed9f93782e7d655c8dd47adc1ba63d4f364751 Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 7 Aug 2024 17:44:52 +0000
Subject: [PATCH 1/2] Add `className` prop to `FormControl`

---
 packages/react/src/FormControl/FormControl.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
index e5504f83245..95129dc516f 100644
--- a/packages/react/src/FormControl/FormControl.tsx
+++ b/packages/react/src/FormControl/FormControl.tsx
@@ -38,10 +38,11 @@ export type FormControlProps = {
    * Vertical layout is used by default, and horizontal layout is used for checkbox and radio inputs.
    */
   layout?: 'horizontal' | 'vertical'
+  className?: string
 } & SxProp
 
 const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
-  ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx}, ref) => {
+  ({children, disabled: disabledProp, layout = 'vertical', id: idProp, required, sx, className}, ref) => {
     const [slots, childrenWithoutSlots] = useSlots(children, {
       caption: FormControlCaption,
       label: FormControlLabel,
@@ -124,7 +125,13 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
         }}
       >
         {isChoiceInput || layout === 'horizontal' ? (
-          <Box ref={ref} display="flex" alignItems={slots.leadingVisual ? 'center' : undefined} sx={sx}>
+          <Box
+            ref={ref}
+            display="flex"
+            alignItems={slots.leadingVisual ? 'center' : undefined}
+            sx={sx}
+            className={className}
+          >
             <Box sx={{'> input': {marginLeft: 0, marginRight: 0}}}>
               {React.isValidElement(InputComponent) &&
                 React.cloneElement(
@@ -179,6 +186,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             flexDirection="column"
             alignItems="flex-start"
             sx={{...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}}
+            className={className}
           >
             {slots.label}
             {React.isValidElement(InputComponent) &&

From f5d6fcee0b5ad083710380e3fd133555d7fa817e Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Wed, 7 Aug 2024 17:47:37 +0000
Subject: [PATCH 2/2] Changeset

---
 .changeset/tall-wasps-end.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tall-wasps-end.md

diff --git a/.changeset/tall-wasps-end.md b/.changeset/tall-wasps-end.md
new file mode 100644
index 00000000000..6b707fcc2a2
--- /dev/null
+++ b/.changeset/tall-wasps-end.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds new `className` prop to `FormControl` component