feat: add layout improvements behind feature flag

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

@@ -3,7 +3,9 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css, unsafeCSS } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements;
 
 export const horizontalLayoutStyles = css`
   :host {
@@ -27,4 +29,17 @@ export const horizontalLayoutStyles = css`
   :host([theme~='spacing']) {
     gap: 1em;
   }
+
+  ${enableLayoutImprovements
+    ? unsafeCSS`
+    ::slotted([data-full-width]) {
+      flex: 1;
+    }
+
+    ::slotted(vaadin-horizontal-layout[data-full-width]),
+    ::slotted(vaadin-vertical-layout[data-full-width]) {
+      min-width: 0;
+    }
+  `
+    : unsafeCSS``}
 `;

packages/horizontal-layout/test/enable-layout-improvements.js

@@ -0,0 +1,3 @@
+window.Vaadin ??= {};
+window.Vaadin.featureFlags ??= {};
+window.Vaadin.featureFlags.layoutImprovements = true;

packages/horizontal-layout/test/horizontal-layout.common.js

@@ -110,4 +110,52 @@ describe('vaadin-horizontal-layout', () => {
       expect(wrapper.scrollWidth).to.equal(200);
     });
   });
+
+  describe('layout improvements disabled', () => {
+    let layout, children;
+
+    describe('flex', () => {
+      beforeEach(async () => {
+        layout = fixtureSync(`
+        <vaadin-horizontal-layout>
+          <div></div>
+          <div data-full-width></div>
+        </vaadin-horizontal-layout>
+      `);
+        children = Array.from(layout.querySelectorAll('*'));
+        await nextFrame();
+      });
+
+      it('should not set flex on any children', () => {
+        children.forEach((child) => {
+          expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+        });
+      });
+    });
+
+    describe('min-width', () => {
+      beforeEach(async () => {
+        layout = fixtureSync(`
+        <vaadin-horizontal-layout>
+          <div></div>
+          <div data-full-width></div>
+          <vaadin-button></vaadin-button>
+          <vaadin-button data-full-width></vaadin-button>
+          <vaadin-horizontal-layout></vaadin-horizontal-layout>
+          <vaadin-horizontal-layout data-full-width></vaadin-horizontal-layout>
+          <vaadin-vertical-layout></vaadin-vertical-layout>
+          <vaadin-vertical-layout data-full-width></vaadin-vertical-layout>
+        </vaadin-horizontal-layout>
+      `);
+        children = Array.from(layout.querySelectorAll('*'));
+        await nextFrame();
+      });
+
+      it('should not set min-width on any children', () => {
+        children.forEach((child) => {
+          expect(getComputedStyle(child).minWidth).to.equal('auto');
+        });
+      });
+    });
+  });
 });

packages/horizontal-layout/test/layout-improvements-lit.test.js

@@ -0,0 +1,3 @@
+import './enable-layout-improvements.js';
+import '../vaadin-lit-horizontal-layout.js';
+import './layout-improvements.common.js';

packages/horizontal-layout/test/layout-improvements-polymer.test.js

@@ -0,0 +1,3 @@
+import './enable-layout-improvements.js';
+import '../vaadin-horizontal-layout.js';
+import './layout-improvements.common.js';

packages/horizontal-layout/test/layout-improvements.common.js

@@ -0,0 +1,65 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+
+describe('layout improvements enabled', () => {
+  let layout, children;
+
+  describe('flex', () => {
+    beforeEach(async () => {
+      layout = fixtureSync(`
+        <vaadin-horizontal-layout>
+          <div></div>
+          <div data-full-width></div>
+        </vaadin-horizontal-layout>
+      `);
+      children = Array.from(layout.querySelectorAll('*'));
+      await nextFrame();
+    });
+
+    it('should set flex on full width children only', () => {
+      const fullWidthChildren = children.filter((child) => child.hasAttribute('data-full-width'));
+      const remainingChildren = children.filter((child) => !fullWidthChildren.includes(child));
+
+      fullWidthChildren.forEach((child) => {
+        expect(getComputedStyle(child).flex).to.equal('1 1 0%');
+      });
+      remainingChildren.forEach((child) => {
+        expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+      });
+    });
+  });
+
+  describe('min-width', () => {
+    beforeEach(async () => {
+      layout = fixtureSync(`
+        <vaadin-horizontal-layout>
+          <div></div>
+          <div data-full-width></div>
+          <vaadin-button></vaadin-button>
+          <vaadin-button data-full-width></vaadin-button>
+          <vaadin-horizontal-layout></vaadin-horizontal-layout>
+          <vaadin-horizontal-layout data-full-width></vaadin-horizontal-layout>
+          <vaadin-vertical-layout></vaadin-vertical-layout>
+          <vaadin-vertical-layout data-full-width></vaadin-vertical-layout>
+        </vaadin-horizontal-layout>
+      `);
+      children = Array.from(layout.querySelectorAll('*'));
+      await nextFrame();
+    });
+
+    it('should set min-width on layout components with full width only', () => {
+      const layoutChildren = children.filter(
+        (child) => child.localName.endsWith('layout') && child.hasAttribute('data-full-width'),
+      );
+      const remainingChildren = children.filter((child) => !layoutChildren.includes(child));
+
+      layoutChildren.forEach((child) => {
+        expect(getComputedStyle(child).minWidth).to.equal('0px');
+      });
+
+      remainingChildren.forEach((child) => {
+        expect(getComputedStyle(child).minWidth).to.equal('auto');
+      });
+    });
+  });
+});

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

@@ -3,7 +3,9 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css, unsafeCSS } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements;
 
 export const verticalLayoutStyles = css`
   :host {
@@ -29,4 +31,17 @@ export const verticalLayoutStyles = css`
   :host([theme~='spacing']) {
     gap: 1em;
   }
+
+  ${enableLayoutImprovements
+    ? unsafeCSS`
+    ::slotted([data-full-height]) {
+      flex: 1;
+    }
+
+    ::slotted(vaadin-horizontal-layout[data-full-height]),
+    ::slotted(vaadin-vertical-layout[data-full-height]) {
+      min-height: 0;
+    }
+  `
+    : unsafeCSS``}
 `;

packages/vertical-layout/test/enable-layout-improvements.js

@@ -0,0 +1,3 @@
+window.Vaadin ??= {};
+window.Vaadin.featureFlags ??= {};
+window.Vaadin.featureFlags.layoutImprovements = true;

packages/vertical-layout/test/layout-improvements-lit.test.js

@@ -0,0 +1,3 @@
+import './enable-layout-improvements.js';
+import '../vaadin-lit-vertical-layout.js';
+import './layout-improvements.common.js';

packages/vertical-layout/test/layout-improvements-polymer.test.js

@@ -0,0 +1,3 @@
+import './enable-layout-improvements.js';
+import '../vaadin-vertical-layout.js';
+import './layout-improvements.common.js';

packages/vertical-layout/test/layout-improvements.common.js

@@ -0,0 +1,65 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+
+describe('layout improvements enabled', () => {
+  let layout, children;
+
+  describe('flex', () => {
+    beforeEach(async () => {
+      layout = fixtureSync(`
+        <vaadin-vertical-layout>
+          <div></div>
+          <div data-full-height></div>
+        </vaadin-vertical-layout>
+      `);
+      children = Array.from(layout.querySelectorAll('*'));
+      await nextFrame();
+    });
+
+    it('should set flex on full height children only', () => {
+      const fullHeightChildren = children.filter((child) => child.hasAttribute('data-full-height'));
+      const remainingChildren = children.filter((child) => !fullHeightChildren.includes(child));
+
+      fullHeightChildren.forEach((child) => {
+        expect(getComputedStyle(child).flex).to.equal('1 1 0%');
+      });
+      remainingChildren.forEach((child) => {
+        expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+      });
+    });
+  });
+
+  describe('min-height', () => {
+    beforeEach(async () => {
+      layout = fixtureSync(`
+        <vaadin-vertical-layout>
+          <div></div>
+          <div data-full-height></div>
+          <vaadin-button></vaadin-button>
+          <vaadin-button data-full-height></vaadin-button>
+          <vaadin-horizontal-layout></vaadin-horizontal-layout>
+          <vaadin-horizontal-layout data-full-height></vaadin-horizontal-layout>
+          <vaadin-vertical-layout></vaadin-vertical-layout>
+          <vaadin-vertical-layout data-full-height></vaadin-vertical-layout>
+        </vaadin-vertical-layout>
+      `);
+      children = Array.from(layout.querySelectorAll('*'));
+      await nextFrame();
+    });
+
+    it('should set min-height on layout components with full height only', () => {
+      const layoutChildren = children.filter(
+        (child) => child.localName.endsWith('layout') && child.hasAttribute('data-full-height'),
+      );
+      const remainingChildren = children.filter((child) => !layoutChildren.includes(child));
+
+      layoutChildren.forEach((child) => {
+        expect(getComputedStyle(child).minHeight).to.equal('0px');
+      });
+
+      remainingChildren.forEach((child) => {
+        expect(getComputedStyle(child).minHeight).to.equal('auto');
+      });
+    });
+  });
+});

packages/vertical-layout/test/vertical-layout.common.js

@@ -111,4 +111,52 @@ describe('vaadin-vertical-layout', () => {
       expect(wrapper.scrollHeight).to.equal(200);
     });
   });
+
+  describe('layout improvements disabled', () => {
+    let layout, children;
+
+    describe('flex', () => {
+      beforeEach(async () => {
+        layout = fixtureSync(`
+        <vaadin-vertical-layout>
+          <div></div>
+          <div data-full-height></div>
+        </vaadin-vertical-layout>
+      `);
+        children = Array.from(layout.querySelectorAll('*'));
+        await nextFrame();
+      });
+
+      it('should not set flex on any children', () => {
+        children.forEach((child) => {
+          expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+        });
+      });
+    });
+
+    describe('min-height', () => {
+      beforeEach(async () => {
+        layout = fixtureSync(`
+        <vaadin-vertical-layout>
+          <div></div>
+          <div data-full-height></div>
+          <vaadin-button></vaadin-button>
+          <vaadin-button data-full-height></vaadin-button>
+          <vaadin-horizontal-layout></vaadin-horizontal-layout>
+          <vaadin-horizontal-layout data-full-height></vaadin-horizontal-layout>
+          <vaadin-vertical-layout></vaadin-vertical-layout>
+          <vaadin-vertical-layout data-full-height></vaadin-vertical-layout>
+        </vaadin-vertical-layout>
+      `);
+        children = Array.from(layout.querySelectorAll('*'));
+        await nextFrame();
+      });
+
+      it('should not set min-height on any children', () => {
+        children.forEach((child) => {
+          expect(getComputedStyle(child).minHeight).to.equal('auto');
+        });
+      });
+    });
+  });
 });