feat: ensure fields always stay within column boundaries (#8762)

vursen · web-flow · commit d05f821d2671 · 2025-03-05T14:24:59.000+02:00
diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.d.ts b/packages/form-layout/src/vaadin-form-layout-mixin.d.ts
@@ -5,6 +5,7 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 
 export type FormLayoutLabelsPosition = 'aside' | 'top';
 
@@ -19,7 +20,7 @@ export type FormLayoutResponsiveStep = {
  */
 export declare function FormLayoutMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ResizeMixinClass> & Constructor<FormLayoutMixinClass> & T;
+): Constructor<ResizeMixinClass> & Constructor<FormLayoutMixinClass> & Constructor<SlotStylesMixinClass> & T;
 
 export declare class FormLayoutMixinClass {
   /**
diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js
@@ -5,6 +5,8 @@
  */
 import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
+import { formLayoutSlotStyles } from './vaadin-form-layout-styles.js';
 
 function isValidCSSLength(value) {
   // Check if the value is a valid CSS length and not `inherit` or `normal`,
@@ -27,7 +29,7 @@ function isBreakLine(el) {
  * @mixes ResizeMixin
  */
 export const FormLayoutMixin = (superClass) =>
-  class extends ResizeMixin(superClass) {
+  class extends SlotStylesMixin(ResizeMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -250,6 +252,14 @@ export const FormLayoutMixin = (superClass) =>
       this.__childrenAttributesObserver.disconnect();
     }
 
+    /**
+     * @override
+     * @protected
+     */
+    get slotStyles() {
+      return [`${formLayoutSlotStyles}`.replace('vaadin-form-layout', this.localName)];
+    }
+
     /** @private */
     _naturalNumberOrOne(n) {
       if (typeof n === 'number' && n >= 1 && n < Infinity) {
diff --git a/packages/form-layout/src/vaadin-form-layout-styles.js b/packages/form-layout/src/vaadin-form-layout-styles.js
@@ -111,6 +111,8 @@ export const formLayoutStyles = css`
 
     /* By default, place each child on a new row */
     grid-column: 1 / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
+    box-sizing: border-box;
+    max-width: 100%;
   }
 
   :host([auto-responsive][auto-rows]) #layout ::slotted(*) {
@@ -146,6 +148,14 @@ export const formLayoutStyles = css`
   }
 `;
 
+export const formLayoutSlotStyles = css`
+  /* Using :where to ensure user styles always take precedence */
+  :where(vaadin-form-layout[auto-responsive] vaadin-form-item > *) {
+    box-sizing: border-box;
+    max-width: 100%;
+  }
+`;
+
 export const formRowStyles = css`
   :host {
     display: contents;
@@ -161,6 +171,8 @@ export const formRowStyles = css`
     --_form-item-labels-aside: inherit;
 
     grid-column: auto / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
+    box-sizing: border-box;
+    max-width: 100%;
   }
 
   ::slotted(:first-child) {
diff --git a/packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js b/packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js
@@ -354,4 +354,35 @@ describe('form-layout auto responsive', () => {
       await visualDiff(container, 'colspan-with-explicit-rows');
     });
   });
+
+  describe('fields with explicit width', () => {
+    beforeEach(async () => {
+      element = fixtureSync(
+        `
+          <vaadin-form-layout auto-responsive column-width="15em">
+            <vaadin-form-row>
+              <input placeholder="First name" style="width: 10em" />
+              <input placeholder="Last Name" style="width: 20em" />
+            </vaadin-form-row>
+            <vaadin-form-row>
+              <vaadin-form-item>
+                <label slot="label">Phone</label>
+                <input style="width: 10em" />
+              </vaadin-form-item>
+              <vaadin-form-item>
+                <label slot="label">Email</label>
+                <input style="width: 20em" />
+              </vaadin-form-item>
+            </vaadin-form-row>
+          </vaadin-form-layout>
+        `,
+        container,
+      );
+      await nextFrame();
+    });
+
+    it('default', async () => {
+      await visualDiff(container, 'fields-with-explicit-width');
+    });
+  });
 });
diff --git a/packages/form-layout/test/visual/lumo/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png b/packages/form-layout/test/visual/lumo/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png
diff --git a/packages/form-layout/test/visual/material/form-layout-auto-responsive.test.js b/packages/form-layout/test/visual/material/form-layout-auto-responsive.test.js
@@ -354,4 +354,35 @@ describe('form-layout auto responsive', () => {
       await visualDiff(container, 'colspan-with-explicit-rows');
     });
   });
+
+  describe('fields with explicit width', () => {
+    beforeEach(async () => {
+      element = fixtureSync(
+        `
+          <vaadin-form-layout auto-responsive column-width="15em">
+            <vaadin-form-row>
+              <input placeholder="First name" style="width: 10em" />
+              <input placeholder="Last Name" style="width: 20em" />
+            </vaadin-form-row>
+            <vaadin-form-row>
+              <vaadin-form-item>
+                <label slot="label">Phone</label>
+                <input style="width: 10em" />
+              </vaadin-form-item>
+              <vaadin-form-item>
+                <label slot="label">Email</label>
+                <input style="width: 20em" />
+              </vaadin-form-item>
+            </vaadin-form-row>
+          </vaadin-form-layout>
+        `,
+        container,
+      );
+      await nextFrame();
+    });
+
+    it('default', async () => {
+      await visualDiff(container, 'fields-with-explicit-width');
+    });
+  });
 });
diff --git a/packages/form-layout/test/visual/material/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png b/packages/form-layout/test/visual/material/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png
