fix: do not ignore labelsAside when using explicit rows (#8760)

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

@@ -55,6 +55,11 @@ export const formLayoutStyles = css`
   }
 
   :host([auto-responsive]) #layout {
+    /* By default, labels should be displayed above the fields */
+    --_form-item-labels-above: initial; /* true */
+    --_form-item-labels-aside: ' '; /* false */
+
+    /* CSS grid related properties */
     --_grid-column-gap: var(--vaadin-form-layout-column-spacing);
     --_grid-column-width: var(--_column-width-labels-above);
     --_grid-column-max-total-gap: calc((var(--_max-columns) - 1) * var(--_grid-column-gap));
@@ -100,8 +105,9 @@ export const formLayoutStyles = css`
   }
 
   :host([auto-responsive]) #layout ::slotted(*) {
-    --_form-item-labels-above: initial; /* true */
-    --_form-item-labels-aside: ' '; /* false */
+    /* Make form items inherit label position from the layout */
+    --_form-item-labels-above: inherit;
+    --_form-item-labels-aside: inherit;
 
     /* By default, place each child on a new row */
     grid-column: 1 / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
@@ -116,12 +122,9 @@ export const formLayoutStyles = css`
   }
 
   :host([auto-responsive][labels-aside]) #layout[fits-labels-aside] {
-    --_grid-column-width: var(--_column-width-labels-aside);
-  }
-
-  :host([auto-responsive][labels-aside]) #layout[fits-labels-aside] ::slotted(*) {
     --_form-item-labels-above: ' '; /* false */
     --_form-item-labels-aside: initial; /* true */
+    --_grid-column-width: var(--_column-width-labels-aside);
   }
 
   :host([auto-responsive][expand-columns]) #layout {
@@ -153,6 +156,10 @@ export const formRowStyles = css`
   }
 
   ::slotted(*) {
+    /* Make form items inherit label position from the layout */
+    --_form-item-labels-above: inherit;
+    --_form-item-labels-aside: inherit;
+
     grid-column: auto / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
   }
 
@@ -163,6 +170,7 @@ export const formRowStyles = css`
 
 export const formItemStyles = css`
   :host {
+    /* By default, when auto-responsive mode is disabled, labels should be displayed beside the fields. */
     --_form-item-labels-above: ' '; /* false */
     --_form-item-labels-aside: initial; /* true */
 

packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js

@@ -237,6 +237,50 @@ describe('form-layout auto responsive', () => {
     });
   });
 
+  describe('form items with explicit rows', () => {
+    beforeEach(async () => {
+      element = fixtureSync(
+        `
+          <vaadin-form-layout auto-responsive>
+            <vaadin-form-row>
+              <vaadin-form-item>
+                <label slot="label">First name</label>
+                <input />
+              </vaadin-form-item>
+              <vaadin-form-item>
+                <label slot="label">Last name</label>
+                <input />
+              </vaadin-form-item>
+            </vaadin-form-row>
+
+            <vaadin-form-row>
+              <vaadin-form-item>
+                <label slot="label">Email</label>
+                <input />
+              </vaadin-form-item>
+              <vaadin-form-item>
+                <label slot="label">Phone</label>
+                <input />
+              </vaadin-form-item>
+            </vaadin-form-row>
+          </vaadin-form-layout>
+        `,
+        container,
+      );
+      await nextFrame();
+    });
+
+    it('default', async () => {
+      await visualDiff(container, 'form-items-with-explicit-rows');
+    });
+
+    it('labelsAside', async () => {
+      element.labelsAside = true;
+      await nextResize(element);
+      await visualDiff(container, 'form-items-with-explicit-rows-labels-aside');
+    });
+  });
+
   describe('colspan', () => {
     beforeEach(async () => {
       element = fixtureSync(

packages/form-layout/test/visual/material/form-layout-auto-responsive.test.js

@@ -237,6 +237,50 @@ describe('form-layout auto responsive', () => {
     });
   });
 
+  describe('form items with explicit rows', () => {
+    beforeEach(async () => {
+      element = fixtureSync(
+        `
+          <vaadin-form-layout auto-responsive>
+            <vaadin-form-row>
+              <vaadin-form-item>
+                <label slot="label">First name</label>
+                <input />
+              </vaadin-form-item>
+              <vaadin-form-item>
+                <label slot="label">Last name</label>
+                <input />
+              </vaadin-form-item>
+            </vaadin-form-row>
+
+            <vaadin-form-row>
+              <vaadin-form-item>
+                <label slot="label">Email</label>
+                <input />
+              </vaadin-form-item>
+              <vaadin-form-item>
+                <label slot="label">Phone</label>
+                <input />
+              </vaadin-form-item>
+            </vaadin-form-row>
+          </vaadin-form-layout>
+        `,
+        container,
+      );
+      await nextFrame();
+    });
+
+    it('default', async () => {
+      await visualDiff(container, 'form-items-with-explicit-rows');
+    });
+
+    it('labelsAside', async () => {
+      element.labelsAside = true;
+      await nextResize(element);
+      await visualDiff(container, 'form-items-with-explicit-rows-labels-aside');
+    });
+  });
+
   describe('colspan', () => {
     beforeEach(async () => {
       element = fixtureSync(