From 697830aaaeba72f372eabf236c138253decb9a4a Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Tue, 4 Mar 2025 18:55:21 +0400 Subject: [PATCH] feat: ensure fields always fit in columns --- .../src/vaadin-form-layout-mixin.js | 4 +++ .../src/vaadin-form-layout-styles.js | 11 ++++++- .../lumo/form-layout-auto-responsive.test.js | 31 ++++++++++++++++++ .../baseline/fields-with-explicit-width.png | Bin 0 -> 2598 bytes .../form-layout-auto-responsive.test.js | 31 ++++++++++++++++++ .../baseline/fields-with-explicit-width.png | Bin 0 -> 2455 bytes 6 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 packages/form-layout/test/visual/lumo/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png create mode 100644 packages/form-layout/test/visual/material/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js index 792398d0a0..853ff71d60 100644 --- a/packages/form-layout/src/vaadin-form-layout-mixin.js +++ b/packages/form-layout/src/vaadin-form-layout-mixin.js @@ -475,6 +475,10 @@ export const FormLayoutMixin = (superClass) => child.style.removeProperty('--_grid-colspan'); } + if (child.localName === 'vaadin-form-item' && child.$) { + child.$.content.setAttribute('auto-responsive', ''); + } + maxColumns = Math.max(maxColumns, columnCount); }); diff --git a/packages/form-layout/src/vaadin-form-layout-styles.js b/packages/form-layout/src/vaadin-form-layout-styles.js index d6b210125e..0a010773a4 100644 --- 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(*) { @@ -161,6 +163,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) { @@ -177,7 +181,7 @@ export const formItemStyles = css` display: inline-flex; align-items: var(--_form-item-labels-aside, baseline); flex-flow: var(--_form-item-labels-above, column) nowrap; - justify-self: stretch; + align-self: stretch; margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0; } @@ -207,6 +211,11 @@ export const formItemStyles = css` flex: 1 1 auto; } + #content[auto-responsive] ::slotted(*) { + box-sizing: border-box; + max-width: 100%; + } + #content ::slotted(.full-width) { box-sizing: border-box; width: 100%; 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 index 189cff022e..ea4465047a 100644 --- 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( + ` + + + + + + + + + + + + + + + + + `, + 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 new file mode 100644 index 0000000000000000000000000000000000000000..9bec5ff24146f1cee67ea3a1c3ceb86bea53c5a8 GIT binary patch literal 2598 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 literal 0 HcmV?d00001 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 index 7b7f43e0b1..592b956260 100644 --- 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( + ` + + + + + + + + + + + + + + + + + `, + 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 new file mode 100644 index 0000000000000000000000000000000000000000..11ebb53a9a706d5076be584d3c844f700a94997a GIT binary patch literal 2455 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 WjYTrCXFmx@3$VCq1ueVm^6(FUtBYj- literal 0 HcmV?d00001