feat: add form layout row spacing, deprecate form item row spacing

packages/form-layout/src/vaadin-form-item-mixin.js

@@ -6,6 +6,8 @@
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 
+let itemRowSpacingDeprecationNotified = false;
+
 /**
  * @polymerMixin
  */
@@ -42,6 +44,19 @@ export const FormItemMixin = (superClass) =>
       this.__fieldNode = null;
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!itemRowSpacingDeprecationNotified) {
+        const spacing = getComputedStyle(this).getPropertyValue('--vaadin-form-item-row-spacing');
+        if (spacing !== '' && parseInt(spacing) !== 0) {
+          console.warn(
+            '`--vaadin-form-item-row-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-row-spacing` on <vaadin-form-layout> instead.',
+          );
+          itemRowSpacingDeprecationNotified = true;
+        }
+      }
+    }
+
     /**
      * Returns a target element to add ARIA attributes to for a field.
      *

packages/form-layout/src/vaadin-form-layout-styles.js

@@ -12,7 +12,7 @@ export const formLayoutStyles = css`
     /* CSS API for host */
     --vaadin-form-item-label-width: 8em;
     --vaadin-form-item-label-spacing: 1em;
-    --vaadin-form-item-row-spacing: 1em;
+    --vaadin-form-layout-row-spacing: 1em;
     --vaadin-form-layout-column-spacing: 2em; /* (default) */
     align-self: stretch;
   }
@@ -49,7 +49,7 @@ export const formItemStyles = css`
     display: inline-flex;
     flex-direction: row;
     align-items: baseline;
-    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, 1em)) 0;
+    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
   }
 
   :host([label-position='top']) {

packages/form-layout/test/form-layout.test.js

@@ -93,11 +93,25 @@ describe('form layout', () => {
     });
 
     it('should not have default row-spacing', () => {
-      expect(getComputedStyle(item).getPropertyValue('--vaadin-form-item-row-spacing').trim()).to.equal('0');
+      expect(getComputedStyle(item).getPropertyValue('--vaadin-form-layout-row-spacing').trim()).to.equal('0');
       expect(parseFloat(getComputedStyle(item).marginTop)).to.equal(0);
       expect(parseFloat(getComputedStyle(item).marginBottom)).to.equal(0);
     });
 
+    it('should apply form layout row spacing', () => {
+      const spacing = 8;
+      item.style.setProperty('--vaadin-form-layout-row-spacing', `${spacing}px`);
+      expect(parseFloat(getComputedStyle(item).marginTop)).to.equal(spacing / 2);
+      expect(parseFloat(getComputedStyle(item).marginBottom)).to.equal(spacing / 2);
+    });
+
+    it('should apply form item row spacing', () => {
+      const spacing = 8;
+      item.style.setProperty('--vaadin-form-item-row-spacing', `${spacing}px`);
+      expect(parseFloat(getComputedStyle(item).marginTop)).to.equal(spacing / 2);
+      expect(parseFloat(getComputedStyle(item).marginBottom)).to.equal(spacing / 2);
+    });
+
     it('should apply default column-spacing', async () => {
       // Override to not depend on the theme changes
       layout.style.setProperty('--lumo-space-l', '2rem');

packages/form-layout/theme/lumo/vaadin-form-item-styles.js

@@ -7,10 +7,6 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-form-item',
   css`
-    :host {
-      --vaadin-form-item-row-spacing: 0;
-    }
-
     /* font-weight, margin-bottom, transition and line-height same as for part label in text-field */
     [part='label'] {
       color: var(--lumo-secondary-text-color);

packages/form-layout/theme/lumo/vaadin-form-layout-styles.js

@@ -6,6 +6,7 @@ registerStyles(
   css`
     :host {
       --vaadin-form-layout-column-spacing: var(--lumo-space-l);
+      --vaadin-form-layout-row-spacing: 0;
     }
   `,
   { moduleId: 'lumo-form-layout' },