feat: layout improvements

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

@@ -59,6 +59,12 @@ class HorizontalLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
         :host([theme~='spacing']) {
           gap: 1em;
         }
+
+        ::slotted(*) {
+          --_vaadin-layout-item-horizontal-flex: 0 1 auto;
+          min-width: calc(var(--vaadin-layout-improvements) * 0px);
+          flex: calc(var(--vaadin-layout-improvements) * var(--_vaadin-layout-item-horizontal-flex));
+        }
       </style>
 
       <slot></slot>

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

@@ -42,6 +42,12 @@ class HorizontalLayout extends ThemableMixin(ElementMixin(PolylitMixin(LitElemen
       :host([theme~='spacing']) {
         gap: 1em;
       }
+
+      ::slotted(*) {
+        --_vaadin-layout-item-horizontal-flex: 0 1 auto;
+        min-width: calc(var(--vaadin-layout-improvements) * 0px);
+        flex: calc(var(--vaadin-layout-improvements) * var(--_vaadin-layout-item-horizontal-flex));
+      }
     `;
   }
 

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

@@ -110,4 +110,51 @@ describe('vaadin-horizontal-layout', () => {
       expect(wrapper.scrollWidth).to.equal(200);
     });
   });
+
+  describe('layout improvements', () => {
+    let layout, child;
+
+    beforeEach(() => {
+      layout = fixtureSync(`
+        <vaadin-horizontal-layout>
+          <div>child</div>
+        </vaadin-horizontal-layout>
+      `);
+      child = layout.querySelector('div');
+    });
+
+    describe('disabled', () => {
+      it('should apply min-width auto to children', () => {
+        expect(getComputedStyle(child).minWidth).to.equal('auto');
+      });
+
+      it('should apply default flex to children', () => {
+        expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+      });
+
+      it('should not apply custom flex property to children', () => {
+        child.style.setProperty('--_vaadin-layout-item-horizontal-flex', '1');
+        expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+      });
+    });
+
+    describe('enabled', () => {
+      beforeEach(() => {
+        layout.style.setProperty('--vaadin-layout-improvements', '1');
+      });
+
+      it('should apply min-width 0px to children', () => {
+        expect(getComputedStyle(child).minWidth).to.equal('0px');
+      });
+
+      it('should apply default flex to children', () => {
+        expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+      });
+
+      it('should apply custom flex property to children ', () => {
+        child.style.setProperty('--_vaadin-layout-item-horizontal-flex', '1');
+        expect(getComputedStyle(child).flex).to.equal('1 1 0%');
+      });
+    });
+  });
 });

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

@@ -44,6 +44,12 @@ class VerticalLayout extends ThemableMixin(ElementMixin(PolylitMixin(LitElement)
       :host([theme~='spacing']) {
         gap: 1em;
       }
+
+      ::slotted(*) {
+        --_vaadin-layout-item-vertical-flex: 0 1 auto;
+        min-height: calc(var(--vaadin-layout-improvements) * 0px);
+        flex: calc(var(--vaadin-layout-improvements) * var(--_vaadin-layout-item-vertical-flex));
+      }
     `;
   }
 

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

@@ -61,6 +61,12 @@ class VerticalLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
         :host([theme~='spacing']) {
           gap: 1em;
         }
+
+        ::slotted(*) {
+          --_vaadin-layout-item-vertical-flex: 0 1 auto;
+          min-height: calc(var(--vaadin-layout-improvements) * 0px);
+          flex: calc(var(--vaadin-layout-improvements) * var(--_vaadin-layout-item-vertical-flex));
+        }
       </style>
 
       <slot></slot>

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

@@ -111,4 +111,51 @@ describe('vaadin-vertical-layout', () => {
       expect(wrapper.scrollHeight).to.equal(200);
     });
   });
+
+  describe('layout improvements', () => {
+    let layout, child;
+
+    beforeEach(() => {
+      layout = fixtureSync(`
+        <vaadin-vertical-layout>
+          <div>child</div>
+        </vaadin-vertical-layout>
+      `);
+      child = layout.querySelector('div');
+    });
+
+    describe('disabled', () => {
+      it('should apply min-height auto to children', () => {
+        expect(getComputedStyle(child).minHeight).to.equal('auto');
+      });
+
+      it('should apply default flex to children', () => {
+        expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+      });
+
+      it('should not apply custom flex property to children', () => {
+        child.style.setProperty('--_vaadin-layout-item-vertical-flex', '1');
+        expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+      });
+    });
+
+    describe('enabled', () => {
+      beforeEach(() => {
+        layout.style.setProperty('--vaadin-layout-improvements', '1');
+      });
+
+      it('should apply min-height 0px to children', () => {
+        expect(getComputedStyle(child).minHeight).to.equal('0px');
+      });
+
+      it('should apply default flex to children', () => {
+        expect(getComputedStyle(child).flex).to.equal('0 1 auto');
+      });
+
+      it('should apply custom flex property to children ', () => {
+        child.style.setProperty('--_vaadin-layout-item-vertical-flex', '1');
+        expect(getComputedStyle(child).flex).to.equal('1 1 0%');
+      });
+    });
+  });
 });