fix: set min-width in form-item content (#9457) (24.8) (#9478)

* fix: set min-width in form-item content (#9457)

* test: update references / add material test

Author: DiegoCardoso

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

@@ -238,6 +238,7 @@ export const formItemStyles = css`
 
   #content {
     flex: 1 1 auto;
+    min-width: 0;
   }
 
   #content ::slotted(.full-width) {

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

@@ -120,9 +120,6 @@ describe('form-layout auto responsive', () => {
       await visualDiff(container, 'min-columns-narrow-container');
     });
 
-    // TODO There is an issue with native inputs not shrinking, leading to
-    //  overflowing items. The baseline image should be updated one this
-    //  issue is fixed.
     it('labelsAside', async () => {
       element.labelsAside = true;
       container.style.width = '800px';

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

@@ -1,6 +1,7 @@
 import { nextFrame } from '@vaadin/testing-helpers';
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/text-field';
 import '../../../theme/lumo/vaadin-form-layout.js';
 import '../../../theme/lumo/vaadin-form-item.js';
 
@@ -100,6 +101,33 @@ describe('form-layout', () => {
     });
   });
 
+  describe('colspan alignment', () => {
+    beforeEach(() => {
+      element = fixtureSync(`
+        <vaadin-form-layout style="width: 645px; padding-inline: 2em;">
+          <vaadin-form-item colspan="2">
+            <label slot="label">Address</label>
+            <vaadin-text-field class="full-width"></vaadin-text-field>
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">First Name</label>
+            <vaadin-text-field class="full-width"></vaadin-text-field>
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">Last Name</label>
+            <vaadin-text-field class="full-width"></vaadin-text-field>
+          </vaadin-form-item>
+        </vaadin-form-layout>
+      `);
+    });
+
+    it('colspan alignment', async () => {
+      await visualDiff(element, 'colspan-alignment');
+    });
+  });
+
   describe('CSS properties', () => {
     let div;
 

packages/form-layout/test/visual/lumo/screenshots/form-layout-auto-responsive/baseline/min-columns-labels-aside.png

@@ -1,6 +1,7 @@
 import { nextFrame } from '@vaadin/testing-helpers';
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';
 import '../../../theme/material/vaadin-form-layout.js';
 import '../../../theme/material/vaadin-form-item.js';
 
@@ -100,6 +101,33 @@ describe('form-layout', () => {
     });
   });
 
+  describe('colspan alignment', () => {
+    beforeEach(() => {
+      element = fixtureSync(`
+        <vaadin-form-layout style="width: 645px; padding-inline: 2em;">
+          <vaadin-form-item colspan="2">
+            <label slot="label">Address</label>
+            <vaadin-text-field class="full-width"></vaadin-text-field>
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">First Name</label>
+            <vaadin-text-field class="full-width"></vaadin-text-field>
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">Last Name</label>
+            <vaadin-text-field class="full-width"></vaadin-text-field>
+          </vaadin-form-item>
+        </vaadin-form-layout>
+      `);
+    });
+
+    it('colspan alignment', async () => {
+      await visualDiff(element, 'colspan-alignment');
+    });
+  });
+
   describe('CSS properties', () => {
     let div;