subtract form layout row spacing from form item margin

vaadin · Feb 5, 2025 · 2c660a6 · 2c660a6
1 parent 3b2043f
commit 2c660a6
Show file tree

Hide file tree

Showing 12 changed files with 4 additions and 3 deletions.
diff --git a/...isual/material/screenshots/custom-field/baseline/form-layout-item-text-area.png b/...isual/material/screenshots/custom-field/baseline/form-layout-item-text-area.png
diff --git a/packages/form-layout/src/vaadin-form-layout-styles.js b/packages/form-layout/src/vaadin-form-layout-styles.js
@@ -15,6 +15,7 @@ export const formLayoutStyles = css`
     --vaadin-form-layout-row-spacing: 1em;
     --vaadin-form-layout-column-spacing: 2em; /* (default) */
     align-self: stretch;
+    padding-block: calc(var(--vaadin-form-layout-row-spacing) / 2);
   }
 
   :host([hidden]) {
@@ -52,7 +53,7 @@ export const formItemStyles = css`
       1. Use --vaadin-form-layout-row-spacing on the <vaadin-form-layout> component to control the gap between rows.
       2. Use standard CSS margin on <vaadin-form-layout> to control the spacing around the form layout itself.
     */
-    margin: calc(0.5 * var(--vaadin-form-item-row-spacing)) 0;
+    margin: calc((var(--vaadin-form-item-row-spacing) - var(--vaadin-form-layout-row-spacing)) / 2) 0;
   }
 
   :host([label-position='top']) {

diff --git a/packages/form-layout/test/visual/lumo/form-layout.test.js b/packages/form-layout/test/visual/lumo/form-layout.test.js
@@ -109,12 +109,12 @@ describe('form-layout', () => {
           <style>
             vaadin-form-layout {
               --vaadin-form-layout-column-spacing: 4em;
-              --vaadin-form-layout-row-spacing: 1.25em;
             }
 
             vaadin-form-item {
               --vaadin-form-item-label-width: 6em;
               --vaadin-form-item-label-spacing: 1em;
+              --vaadin-form-item-row-spacing: 1.25em;
             }
           </style>
           <vaadin-form-layout id="tests">

diff --git a/packages/form-layout/test/visual/material/form-layout.test.js b/packages/form-layout/test/visual/material/form-layout.test.js
@@ -109,12 +109,12 @@ describe('form-layout', () => {
           <style>
             vaadin-form-layout {
               --vaadin-form-layout-column-spacing: 4em;
-              --vaadin-form-layout-row-spacing: 1.25em;
             }
 
             vaadin-form-item {
               --vaadin-form-item-label-width: 6em;
               --vaadin-form-item-label-spacing: 1em;
+              --vaadin-form-item-row-spacing: 1.25em;
             }
           </style>
           <vaadin-form-layout id="tests">

diff --git a/...ges/form-layout/test/visual/material/screenshots/form-layout/baseline/basic.png b/...ges/form-layout/test/visual/material/screenshots/form-layout/baseline/basic.png
diff --git a/packages/form-layout/test/visual/material/screenshots/form-layout/baseline/br.png b/packages/form-layout/test/visual/material/screenshots/form-layout/baseline/br.png
diff --git a/...s/form-layout/test/visual/material/screenshots/form-layout/baseline/colspan.png b/...s/form-layout/test/visual/material/screenshots/form-layout/baseline/colspan.png
diff --git a/...layout/test/visual/material/screenshots/form-layout/baseline/css-properties.png b/...layout/test/visual/material/screenshots/form-layout/baseline/css-properties.png
diff --git a/...l/material/screenshots/form-layout/baseline/required-indicator-labels-aside.png b/...l/material/screenshots/form-layout/baseline/required-indicator-labels-aside.png
diff --git a/.../material/screenshots/form-layout/baseline/required-indicator-labels-on-top.png b/.../material/screenshots/form-layout/baseline/required-indicator-labels-on-top.png
diff --git a/...yout/test/visual/material/screenshots/form-layout/baseline/responsive-steps.png b/...yout/test/visual/material/screenshots/form-layout/baseline/responsive-steps.png
diff --git a/...-layout/test/visual/material/screenshots/form-layout/baseline/single-column.png b/...-layout/test/visual/material/screenshots/form-layout/baseline/single-column.png