WHY IS COMPRESSED DOING NOTHING

elastic · Aug 15, 2024 · 19cf97a · 19cf97a
1 parent 960d141
commit 19cf97a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/packages/eui/src/components/form/form_row/_form_row.scss b/packages/eui/src/components/form/form_row/_form_row.scss
@@ -1,15 +1,3 @@
-/**
- * 2. For inline forms, we need to add margin if the label doesn't exist.
- */
-.euiFormRow--hasEmptyLabelSpace {
-  margin-top: $euiSize + $euiSizeXS; /* 2 */
-  // the following ensure that contents that aren't inherently the same height
-  // as inputs will align to the vertical center
-  min-height: $euiFormControlHeight;
-  padding-bottom: 0;
-  justify-content: center;
-}
-
 .euiFormRow__labelWrapper {
   display: flex;
   flex-wrap: wrap;

diff --git a/packages/eui/src/components/form/form_row/form_row.styles.ts b/packages/eui/src/components/form/form_row/form_row.styles.ts
@@ -9,19 +9,19 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../../services';
-import { logicalCSS } from '../../../global_styling';
-import { euiFormMaxWidth } from '../form.styles';
+import { logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiFormVariables } from '../form.styles';
 
 export const euiFormRowStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
-  const maxWidth = euiFormMaxWidth(euiThemeContext);
+  const { maxWidth, controlHeight, controlCompressedHeight } =
+    euiFormVariables(euiThemeContext);
 
   return {
     euiFormRow: css`
       /* Coerce inline form elements to behave as block-level elements */
       display: flex;
 
-      + .euiFormRow,
       + .euiButton {
         ${logicalCSS('margin-top', euiTheme.size.base)}
       }
@@ -38,14 +38,31 @@ export const euiFormRowStyles = (euiThemeContext: UseEuiTheme) => {
       // Skip css`` to avoid generating an Emotion className
       row: `
         flex-direction: column;
+
+        &:has(+ .euiFormRow) {
+          ${logicalCSS('margin-bottom', euiTheme.size.base)}
+        }
       `,
     },
 
     column: {
       column: css`
         flex-direction: row;
         align-items: stretch;
+
+        &:has(+ .euiFormRow) {
+          ${logicalCSS('margin-bottom', euiTheme.size.s)}
+        }
       `,
     },
+
+    hasEmptyLabelSpace: css`
+      ${logicalCSS(
+        // For inline forms, we need to add margin if the label doesn't exist.
+        'margin-top',
+        mathWithUnits([euiTheme.size.base, euiTheme.size.xs], (x, y) => x + y)
+      )}
+      justify-content: center;
+    `,
   };
 };