fix(FormControl): fix spacing in vertical layouts

primer · Jan 29, 2025 · 0e2dcd9 · 0e2dcd9
1 parent d14c48c
commit 0e2dcd9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/.changeset/sour-snakes-clap.md b/.changeset/sour-snakes-clap.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+fix(FormControl): fix spacing in vertical layouts"
diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
@@ -185,7 +185,11 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
           <StyledVerticalLayout
             ref={ref}
             data-has-label={!isLabelHidden ? '' : undefined}
-            sx={sx}
+            sx={
+              enabled
+                ? sx
+                : {...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}
+            }
             className={clsx(className, {
               [classes.ControlVerticalLayout]: enabled,
             })}
@@ -268,14 +272,6 @@ const StyledVerticalLayout = toggleStyledComponent(
     flex-direction: column;
     align-items: flex-start;
 
-    & > *:not(label) + * {
-      margin-top: var(--base-size-4);
-    }
-
-    &:where([data-has-label]) > * + * {
-      margin-top: var(--base-size-4);
-    }
-
     ${sx}
   `,
 )