fix(FormControl): fix spacing in vertical layouts (#5618)

* fix(FormControl): fix spacing in vertical layouts * revert to using Box
primer · Jan 29, 2025 · d8a9e58 · d8a9e58
1 parent d14c48c
commit d8a9e58
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 23 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
@@ -8,6 +8,7 @@ import {SelectPanel} from '../SelectPanel'
 import TextInput from '../TextInput'
 import TextInputWithTokens from '../TextInputWithTokens'
 import Textarea from '../Textarea'
+import Box from '../Box'
 import {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup'
 import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer'
 import {useSlots} from '../hooks/useSlots'
@@ -182,10 +183,17 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
             </StyledLabelContainer>
           </StyledHorizontalLayout>
         ) : (
-          <StyledVerticalLayout
+          <Box
             ref={ref}
             data-has-label={!isLabelHidden ? '' : undefined}
-            sx={sx}
+            display="flex"
+            flexDirection="column"
+            alignItems="flex-start"
+            sx={
+              enabled
+                ? sx
+                : {...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}
+            }
             className={clsx(className, {
               [classes.ControlVerticalLayout]: enabled,
             })}
@@ -214,7 +222,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
               <ValidationAnimationContainer show>{slots.validation}</ValidationAnimationContainer>
             ) : null}
             {slots.caption}
-          </StyledVerticalLayout>
+          </Box>
         )}
       </FormControlContextProvider>
     )
@@ -260,26 +268,6 @@ const StyledLabelContainer = toggleStyledComponent(
   `,
 )
 
-const StyledVerticalLayout = toggleStyledComponent(
-  cssModulesFlag,
-  'div',
-  styled.div`
-    display: flex;
-    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}
-  `,
-)
-
 const StyledLeadingVisual = toggleStyledComponent(
   cssModulesFlag,
   'div',