subtract form layout row spacing from form item margin

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

Hide file tree

Showing 4 changed files with 4 additions and 3 deletions.
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-layout-row-spacing: 1.25em;
             }
           </style>
           <vaadin-form-layout id="tests">

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