From 26d93a98c48f49936faa14317b62e22e307a639a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 22 Jan 2025 14:35:10 +0200 Subject: [PATCH 01/12] add style fixes behind feature flag --- .../src/vaadin-horizontal-layout-styles.js | 18 +++++++++++++++++- .../src/vaadin-vertical-layout-styles.js | 18 +++++++++++++++++- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js index c3401ceab7..9568116a2c 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js +++ b/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,18 @@ export const horizontalLayoutStyles = css` :host([theme~='spacing']) { gap: 1em; } + + ${enableLayoutImprovements + ? unsafeCSS` + ::slotted([style^='width: 100%']), + ::slotted([style*=' width: 100%']) { + flex: 1; + } + + ::slotted(vaadin-horizontal-layout), + ::slotted(vaadin-vertical-layout) { + min-width: 0; + } + ` + : unsafeCSS``} `; diff --git a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js index f345c8f98d..6995eb22a8 100644 --- a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js +++ b/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,18 @@ export const verticalLayoutStyles = css` :host([theme~='spacing']) { gap: 1em; } + + ${enableLayoutImprovements + ? unsafeCSS` + ::slotted([style^='height: 100%']), + ::slotted([style*=' height: 100%']) { + flex: 1; + } + + ::slotted(vaadin-horizontal-layout), + ::slotted(vaadin-vertical-layout) { + min-height: 0; + } + ` + : unsafeCSS``} `; From 9130dd75a9b6328a4680c79d9efe48fb1ee583ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Thu, 23 Jan 2025 09:19:31 +0200 Subject: [PATCH 02/12] add tests --- .../test/enable-layout-improvements.js | 3 + .../test/horizontal-layout.common.js | 46 ++++++++++++++ .../test/layout-improvements-lit.test.js | 3 + .../test/layout-improvements-polymer.test.js | 3 + .../test/layout-improvements.common.js | 61 +++++++++++++++++++ .../test/enable-layout-improvements.js | 3 + .../test/layout-improvements-lit.test.js | 3 + .../test/layout-improvements-polymer.test.js | 3 + .../test/layout-improvements.common.js | 61 +++++++++++++++++++ .../test/vertical-layout.common.js | 46 ++++++++++++++ 10 files changed, 232 insertions(+) create mode 100644 packages/horizontal-layout/test/enable-layout-improvements.js create mode 100644 packages/horizontal-layout/test/layout-improvements-lit.test.js create mode 100644 packages/horizontal-layout/test/layout-improvements-polymer.test.js create mode 100644 packages/horizontal-layout/test/layout-improvements.common.js create mode 100644 packages/vertical-layout/test/enable-layout-improvements.js create mode 100644 packages/vertical-layout/test/layout-improvements-lit.test.js create mode 100644 packages/vertical-layout/test/layout-improvements-polymer.test.js create mode 100644 packages/vertical-layout/test/layout-improvements.common.js diff --git a/packages/horizontal-layout/test/enable-layout-improvements.js b/packages/horizontal-layout/test/enable-layout-improvements.js new file mode 100644 index 0000000000..ed7878a49f --- /dev/null +++ b/packages/horizontal-layout/test/enable-layout-improvements.js @@ -0,0 +1,3 @@ +window.Vaadin ??= {}; +window.Vaadin.featureFlags ??= {}; +window.Vaadin.featureFlags.layoutImprovements = true; diff --git a/packages/horizontal-layout/test/horizontal-layout.common.js b/packages/horizontal-layout/test/horizontal-layout.common.js index d1a99bcf16..0f0660c108 100644 --- a/packages/horizontal-layout/test/horizontal-layout.common.js +++ b/packages/horizontal-layout/test/horizontal-layout.common.js @@ -110,4 +110,50 @@ describe('vaadin-horizontal-layout', () => { expect(wrapper.scrollWidth).to.equal(200); }); }); + + describe('layout improvements disabled', () => { + let layout, children; + + describe('flex', () => { + beforeEach(async () => { + layout = fixtureSync(` + +
+
+
+
+ + `); + 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(` + +
+ + + + + `); + 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'); + }); + }); + }); + }); }); diff --git a/packages/horizontal-layout/test/layout-improvements-lit.test.js b/packages/horizontal-layout/test/layout-improvements-lit.test.js new file mode 100644 index 0000000000..b96f127aa2 --- /dev/null +++ b/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'; diff --git a/packages/horizontal-layout/test/layout-improvements-polymer.test.js b/packages/horizontal-layout/test/layout-improvements-polymer.test.js new file mode 100644 index 0000000000..62d1c0b421 --- /dev/null +++ b/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'; diff --git a/packages/horizontal-layout/test/layout-improvements.common.js b/packages/horizontal-layout/test/layout-improvements.common.js new file mode 100644 index 0000000000..ba15142d34 --- /dev/null +++ b/packages/horizontal-layout/test/layout-improvements.common.js @@ -0,0 +1,61 @@ +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(` + +
+
+
+
+ + `); + children = Array.from(layout.querySelectorAll('*')); + await nextFrame(); + }); + + it('should set flex on full width children only', () => { + const fullWidthChildren = children.filter((child) => child.style.width === '100%'); + 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(` + +
+ + + + + `); + children = Array.from(layout.querySelectorAll('*')); + await nextFrame(); + }); + + it('should set min-width on layout components only', () => { + const layoutChildren = children.filter((child) => child.localName.endsWith('layout')); + 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'); + }); + }); + }); +}); diff --git a/packages/vertical-layout/test/enable-layout-improvements.js b/packages/vertical-layout/test/enable-layout-improvements.js new file mode 100644 index 0000000000..ed7878a49f --- /dev/null +++ b/packages/vertical-layout/test/enable-layout-improvements.js @@ -0,0 +1,3 @@ +window.Vaadin ??= {}; +window.Vaadin.featureFlags ??= {}; +window.Vaadin.featureFlags.layoutImprovements = true; diff --git a/packages/vertical-layout/test/layout-improvements-lit.test.js b/packages/vertical-layout/test/layout-improvements-lit.test.js new file mode 100644 index 0000000000..4d79e4ea79 --- /dev/null +++ b/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'; diff --git a/packages/vertical-layout/test/layout-improvements-polymer.test.js b/packages/vertical-layout/test/layout-improvements-polymer.test.js new file mode 100644 index 0000000000..3ce59256b9 --- /dev/null +++ b/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'; diff --git a/packages/vertical-layout/test/layout-improvements.common.js b/packages/vertical-layout/test/layout-improvements.common.js new file mode 100644 index 0000000000..783d74d004 --- /dev/null +++ b/packages/vertical-layout/test/layout-improvements.common.js @@ -0,0 +1,61 @@ +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(` + +
+
+
+
+ + `); + children = Array.from(layout.querySelectorAll('*')); + await nextFrame(); + }); + + it('should set flex on full width children only', () => { + const fullWidthChildren = children.filter((child) => child.style.height === '100%'); + 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(` + +
+ + + + + `); + children = Array.from(layout.querySelectorAll('*')); + await nextFrame(); + }); + + it('should set min-width on layout components only', () => { + const layoutChildren = children.filter((child) => child.localName.endsWith('layout')); + 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'); + }); + }); + }); +}); diff --git a/packages/vertical-layout/test/vertical-layout.common.js b/packages/vertical-layout/test/vertical-layout.common.js index ddad2bfae8..be80c2b841 100644 --- a/packages/vertical-layout/test/vertical-layout.common.js +++ b/packages/vertical-layout/test/vertical-layout.common.js @@ -111,4 +111,50 @@ describe('vaadin-vertical-layout', () => { expect(wrapper.scrollHeight).to.equal(200); }); }); + + describe('layout improvements disabled', () => { + let layout, children; + + describe('flex', () => { + beforeEach(async () => { + layout = fixtureSync(` + +
+
+
+
+ + `); + 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(` + +
+ + + + + `); + 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'); + }); + }); + }); + }); }); From e930cf2898cae3f602d88e816ca298f0963a4229 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Tue, 28 Jan 2025 19:38:58 +0100 Subject: [PATCH 03/12] use data attribute for targeting --- .../src/vaadin-horizontal-layout-styles.js | 7 +++--- .../test/horizontal-layout.common.js | 8 ++++--- .../test/layout-improvements.common.js | 16 ++++++++----- .../src/vaadin-vertical-layout-styles.js | 7 +++--- .../test/layout-improvements.common.js | 24 +++++++++++-------- .../test/vertical-layout.common.js | 14 ++++++----- 6 files changed, 43 insertions(+), 33 deletions(-) diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js index 9568116a2c..7c1e7e378b 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js +++ b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js @@ -32,13 +32,12 @@ export const horizontalLayoutStyles = css` ${enableLayoutImprovements ? unsafeCSS` - ::slotted([style^='width: 100%']), - ::slotted([style*=' width: 100%']) { + ::slotted([data-full-width]) { flex: 1; } - ::slotted(vaadin-horizontal-layout), - ::slotted(vaadin-vertical-layout) { + ::slotted(vaadin-horizontal-layout[data-full-width]), + ::slotted(vaadin-vertical-layout[data-full-width]) { min-width: 0; } ` diff --git a/packages/horizontal-layout/test/horizontal-layout.common.js b/packages/horizontal-layout/test/horizontal-layout.common.js index 0f0660c108..75a865f1bf 100644 --- a/packages/horizontal-layout/test/horizontal-layout.common.js +++ b/packages/horizontal-layout/test/horizontal-layout.common.js @@ -119,9 +119,7 @@ describe('vaadin-horizontal-layout', () => { layout = fixtureSync(`
-
-
-
+
`); children = Array.from(layout.querySelectorAll('*')); @@ -140,9 +138,13 @@ describe('vaadin-horizontal-layout', () => { layout = fixtureSync(`
+
+ + + `); children = Array.from(layout.querySelectorAll('*')); diff --git a/packages/horizontal-layout/test/layout-improvements.common.js b/packages/horizontal-layout/test/layout-improvements.common.js index ba15142d34..55bba707fd 100644 --- a/packages/horizontal-layout/test/layout-improvements.common.js +++ b/packages/horizontal-layout/test/layout-improvements.common.js @@ -9,9 +9,7 @@ describe('layout improvements enabled', () => { layout = fixtureSync(`
-
-
-
+
`); children = Array.from(layout.querySelectorAll('*')); @@ -19,7 +17,7 @@ describe('layout improvements enabled', () => { }); it('should set flex on full width children only', () => { - const fullWidthChildren = children.filter((child) => child.style.width === '100%'); + const fullWidthChildren = children.filter((child) => child.hasAttribute('data-full-width')); const remainingChildren = children.filter((child) => !fullWidthChildren.includes(child)); fullWidthChildren.forEach((child) => { @@ -36,17 +34,23 @@ describe('layout improvements enabled', () => { layout = fixtureSync(`
+
+ + + `); children = Array.from(layout.querySelectorAll('*')); await nextFrame(); }); - it('should set min-width on layout components only', () => { - const layoutChildren = children.filter((child) => child.localName.endsWith('layout')); + 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) => { diff --git a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js index 6995eb22a8..5ed3e82469 100644 --- a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js +++ b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js @@ -34,13 +34,12 @@ export const verticalLayoutStyles = css` ${enableLayoutImprovements ? unsafeCSS` - ::slotted([style^='height: 100%']), - ::slotted([style*=' height: 100%']) { + ::slotted([data-full-height]) { flex: 1; } - ::slotted(vaadin-horizontal-layout), - ::slotted(vaadin-vertical-layout) { + ::slotted(vaadin-horizontal-layout[data-full-height]), + ::slotted(vaadin-vertical-layout[data-full-height]) { min-height: 0; } ` diff --git a/packages/vertical-layout/test/layout-improvements.common.js b/packages/vertical-layout/test/layout-improvements.common.js index 783d74d004..b2bf31f425 100644 --- a/packages/vertical-layout/test/layout-improvements.common.js +++ b/packages/vertical-layout/test/layout-improvements.common.js @@ -9,20 +9,18 @@ describe('layout improvements enabled', () => { layout = fixtureSync(`
-
-
-
+
`); children = Array.from(layout.querySelectorAll('*')); await nextFrame(); }); - it('should set flex on full width children only', () => { - const fullWidthChildren = children.filter((child) => child.style.height === '100%'); - const remainingChildren = children.filter((child) => !fullWidthChildren.includes(child)); + 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)); - fullWidthChildren.forEach((child) => { + fullHeightChildren.forEach((child) => { expect(getComputedStyle(child).flex).to.equal('1 1 0%'); }); remainingChildren.forEach((child) => { @@ -31,22 +29,28 @@ describe('layout improvements enabled', () => { }); }); - describe('min-width', () => { + describe('min-height', () => { beforeEach(async () => { layout = fixtureSync(`
+
+ + + `); children = Array.from(layout.querySelectorAll('*')); await nextFrame(); }); - it('should set min-width on layout components only', () => { - const layoutChildren = children.filter((child) => child.localName.endsWith('layout')); + 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) => { diff --git a/packages/vertical-layout/test/vertical-layout.common.js b/packages/vertical-layout/test/vertical-layout.common.js index be80c2b841..44e7b9e11a 100644 --- a/packages/vertical-layout/test/vertical-layout.common.js +++ b/packages/vertical-layout/test/vertical-layout.common.js @@ -120,9 +120,7 @@ describe('vaadin-vertical-layout', () => { layout = fixtureSync(`
-
-
-
+
`); children = Array.from(layout.querySelectorAll('*')); @@ -136,23 +134,27 @@ describe('vaadin-vertical-layout', () => { }); }); - describe('min-width', () => { + describe('min-height', () => { beforeEach(async () => { layout = fixtureSync(`
+
+ + + `); children = Array.from(layout.querySelectorAll('*')); await nextFrame(); }); - it('should not set min-width on any children', () => { + it('should not set min-height on any children', () => { children.forEach((child) => { - expect(getComputedStyle(child).minWidth).to.equal('auto'); + expect(getComputedStyle(child).minHeight).to.equal('auto'); }); }); }); From f5d8cd2fd6da8d60d559a15c3758704b075e1997 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 29 Jan 2025 16:26:11 +0100 Subject: [PATCH 04/12] remove usage of unsafeCSS --- .../src/vaadin-horizontal-layout-styles.d.ts | 2 +- .../src/vaadin-horizontal-layout-styles.js | 34 +++++++++--------- .../src/vaadin-vertical-layout-styles.d.ts | 2 +- .../src/vaadin-vertical-layout-styles.js | 36 ++++++++++--------- 4 files changed, 40 insertions(+), 34 deletions(-) diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.d.ts b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.d.ts index 00088b2e8a..064ce4885d 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.d.ts +++ b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.d.ts @@ -5,4 +5,4 @@ */ import type { CSSResult } from 'lit'; -export const horizontalLayoutStyles: CSSResult; +export const horizontalLayoutStyles: CSSResult[]; diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js index 7c1e7e378b..158f865685 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js +++ b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js @@ -3,11 +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, unsafeCSS } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; -const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements; - -export const horizontalLayoutStyles = css` +export const baseStyles = css` :host { display: flex; box-sizing: border-box; @@ -29,17 +27,21 @@ 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``} +// Layout improvements are part of a feature for Flow users where children that have been configured to use full size +// using `HasSize.setSizeFull()` and others, get additional styles so that they effectively take the remaining space in +// the layout, rather than explicitly use 100% width/height. The respective data attributes are set by Flow's `HasSize` +// class. +const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements; +const layoutImprovementStyles = css` + ::slotted([data-full-width]) { + flex: 1; + } + + ::slotted(vaadin-horizontal-layout[data-full-width]), + ::slotted(vaadin-vertical-layout[data-full-width]) { + min-width: 0; `; + +export const horizontalLayoutStyles = enableLayoutImprovements ? [baseStyles, layoutImprovementStyles] : [baseStyles]; diff --git a/packages/vertical-layout/src/vaadin-vertical-layout-styles.d.ts b/packages/vertical-layout/src/vaadin-vertical-layout-styles.d.ts index 570e7aedb2..b3e06d39b7 100644 --- a/packages/vertical-layout/src/vaadin-vertical-layout-styles.d.ts +++ b/packages/vertical-layout/src/vaadin-vertical-layout-styles.d.ts @@ -5,4 +5,4 @@ */ import type { CSSResult } from 'lit'; -export const verticalLayoutStyles: CSSResult; +export const verticalLayoutStyles: CSSResult[]; diff --git a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js index 5ed3e82469..3c479886a4 100644 --- a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js +++ b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js @@ -3,11 +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, unsafeCSS } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; -const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements; - -export const verticalLayoutStyles = css` +export const baseStyles = css` :host { display: flex; flex-direction: column; @@ -20,6 +18,7 @@ export const verticalLayoutStyles = css` } /* Theme variations */ + :host([theme~='margin']) { margin: 1em; } @@ -31,17 +30,22 @@ 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``} +// Layout improvements are part of a feature for Flow users where children that have been configured to use full size +// using `HasSize.setSizeFull()` and others, get additional styles so that they effectively take the remaining space in +// the layout, rather than explicitly use 100% width/height. The respective data attributes are set by Flow's `HasSize` +// class. +const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements; +const layoutImprovementStyles = css` + ::slotted([data-full-height]) { + flex: 1; + } + + ::slotted(vaadin-horizontal-layout[data-full-height]), + ::slotted(vaadin-vertical-layout[data-full-height]) { + min-height: 0; + } `; + +export const verticalLayoutStyles = enableLayoutImprovements ? [baseStyles, layoutImprovementStyles] : [baseStyles]; From 2e3d0b6bab21e105ea773ff0567dba6a5c4d8725 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 29 Jan 2025 16:31:50 +0100 Subject: [PATCH 05/12] simplify accessing children in tests --- packages/horizontal-layout/test/horizontal-layout.common.js | 4 ++-- packages/horizontal-layout/test/layout-improvements.common.js | 4 ++-- packages/vertical-layout/test/layout-improvements.common.js | 4 ++-- packages/vertical-layout/test/vertical-layout.common.js | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/horizontal-layout/test/horizontal-layout.common.js b/packages/horizontal-layout/test/horizontal-layout.common.js index 75a865f1bf..84d60dbf6b 100644 --- a/packages/horizontal-layout/test/horizontal-layout.common.js +++ b/packages/horizontal-layout/test/horizontal-layout.common.js @@ -122,7 +122,7 @@ describe('vaadin-horizontal-layout', () => {
`); - children = Array.from(layout.querySelectorAll('*')); + children = Array.from(layout.children); await nextFrame(); }); @@ -147,7 +147,7 @@ describe('vaadin-horizontal-layout', () => { `); - children = Array.from(layout.querySelectorAll('*')); + children = Array.from(layout.children); await nextFrame(); }); diff --git a/packages/horizontal-layout/test/layout-improvements.common.js b/packages/horizontal-layout/test/layout-improvements.common.js index 55bba707fd..10610ea47d 100644 --- a/packages/horizontal-layout/test/layout-improvements.common.js +++ b/packages/horizontal-layout/test/layout-improvements.common.js @@ -12,7 +12,7 @@ describe('layout improvements enabled', () => {
`); - children = Array.from(layout.querySelectorAll('*')); + children = Array.from(layout.children); await nextFrame(); }); @@ -43,7 +43,7 @@ describe('layout improvements enabled', () => { `); - children = Array.from(layout.querySelectorAll('*')); + children = Array.from(layout.children); await nextFrame(); }); diff --git a/packages/vertical-layout/test/layout-improvements.common.js b/packages/vertical-layout/test/layout-improvements.common.js index b2bf31f425..977a1ce3e3 100644 --- a/packages/vertical-layout/test/layout-improvements.common.js +++ b/packages/vertical-layout/test/layout-improvements.common.js @@ -12,7 +12,7 @@ describe('layout improvements enabled', () => {
`); - children = Array.from(layout.querySelectorAll('*')); + children = Array.from(layout.children); await nextFrame(); }); @@ -43,7 +43,7 @@ describe('layout improvements enabled', () => { `); - children = Array.from(layout.querySelectorAll('*')); + children = Array.from(layout.children); await nextFrame(); }); diff --git a/packages/vertical-layout/test/vertical-layout.common.js b/packages/vertical-layout/test/vertical-layout.common.js index 44e7b9e11a..41d0387ad2 100644 --- a/packages/vertical-layout/test/vertical-layout.common.js +++ b/packages/vertical-layout/test/vertical-layout.common.js @@ -123,7 +123,7 @@ describe('vaadin-vertical-layout', () => {
`); - children = Array.from(layout.querySelectorAll('*')); + children = Array.from(layout.children); await nextFrame(); }); @@ -148,7 +148,7 @@ describe('vaadin-vertical-layout', () => { `); - children = Array.from(layout.querySelectorAll('*')); + children = Array.from(layout.children); await nextFrame(); }); From bfb69553c6b6856ffce546b3320fac05e71f3c71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 29 Jan 2025 16:32:56 +0100 Subject: [PATCH 06/12] Apply suggestions from code review Co-authored-by: Serhii Kulykov --- .../test/horizontal-layout.common.js | 32 +++++++++---------- .../test/vertical-layout.common.js | 32 +++++++++---------- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/packages/horizontal-layout/test/horizontal-layout.common.js b/packages/horizontal-layout/test/horizontal-layout.common.js index 84d60dbf6b..3af11e3c5a 100644 --- a/packages/horizontal-layout/test/horizontal-layout.common.js +++ b/packages/horizontal-layout/test/horizontal-layout.common.js @@ -117,11 +117,11 @@ describe('vaadin-horizontal-layout', () => { describe('flex', () => { beforeEach(async () => { layout = fixtureSync(` - -
-
- - `); + +
+
+ + `); children = Array.from(layout.children); await nextFrame(); }); @@ -136,17 +136,17 @@ describe('vaadin-horizontal-layout', () => { describe('min-width', () => { beforeEach(async () => { layout = fixtureSync(` - -
-
- - - - - - - - `); + +
+
+ + + + + + + + `); children = Array.from(layout.children); await nextFrame(); }); diff --git a/packages/vertical-layout/test/vertical-layout.common.js b/packages/vertical-layout/test/vertical-layout.common.js index 41d0387ad2..49019b50c3 100644 --- a/packages/vertical-layout/test/vertical-layout.common.js +++ b/packages/vertical-layout/test/vertical-layout.common.js @@ -118,11 +118,11 @@ describe('vaadin-vertical-layout', () => { describe('flex', () => { beforeEach(async () => { layout = fixtureSync(` - -
-
- - `); + +
+
+ + `); children = Array.from(layout.children); await nextFrame(); }); @@ -137,17 +137,17 @@ describe('vaadin-vertical-layout', () => { describe('min-height', () => { beforeEach(async () => { layout = fixtureSync(` - -
-
- - - - - - - - `); + +
+
+ + + + + + + + `); children = Array.from(layout.children); await nextFrame(); }); From d78e55c6abdbfaaff40d9168c0580211afae6577 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 29 Jan 2025 16:35:18 +0100 Subject: [PATCH 07/12] update data attribute names --- .../src/vaadin-horizontal-layout-styles.js | 6 +++--- .../test/horizontal-layout.common.js | 10 +++++----- .../test/layout-improvements.common.js | 14 +++++++------- .../src/vaadin-vertical-layout-styles.js | 6 +++--- .../test/layout-improvements.common.js | 14 +++++++------- .../vertical-layout/test/vertical-layout.common.js | 10 +++++----- 6 files changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js index 158f865685..0cede8d63f 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js +++ b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js @@ -35,12 +35,12 @@ export const baseStyles = css` // class. const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements; const layoutImprovementStyles = css` - ::slotted([data-full-width]) { + ::slotted([data-width-full]) { flex: 1; } - ::slotted(vaadin-horizontal-layout[data-full-width]), - ::slotted(vaadin-vertical-layout[data-full-width]) { + ::slotted(vaadin-horizontal-layout[data-width-full]), + ::slotted(vaadin-vertical-layout[data-width-full]) { min-width: 0; `; diff --git a/packages/horizontal-layout/test/horizontal-layout.common.js b/packages/horizontal-layout/test/horizontal-layout.common.js index 3af11e3c5a..3ba80dc88a 100644 --- a/packages/horizontal-layout/test/horizontal-layout.common.js +++ b/packages/horizontal-layout/test/horizontal-layout.common.js @@ -119,7 +119,7 @@ describe('vaadin-horizontal-layout', () => { layout = fixtureSync(`
-
+
`); children = Array.from(layout.children); @@ -138,13 +138,13 @@ describe('vaadin-horizontal-layout', () => { layout = fixtureSync(`
-
+
- + - + - + `); children = Array.from(layout.children); diff --git a/packages/horizontal-layout/test/layout-improvements.common.js b/packages/horizontal-layout/test/layout-improvements.common.js index 10610ea47d..72bad8a6dc 100644 --- a/packages/horizontal-layout/test/layout-improvements.common.js +++ b/packages/horizontal-layout/test/layout-improvements.common.js @@ -9,7 +9,7 @@ describe('layout improvements enabled', () => { layout = fixtureSync(`
-
+
`); children = Array.from(layout.children); @@ -17,7 +17,7 @@ describe('layout improvements enabled', () => { }); it('should set flex on full width children only', () => { - const fullWidthChildren = children.filter((child) => child.hasAttribute('data-full-width')); + const fullWidthChildren = children.filter((child) => child.hasAttribute('data-width-full')); const remainingChildren = children.filter((child) => !fullWidthChildren.includes(child)); fullWidthChildren.forEach((child) => { @@ -34,13 +34,13 @@ describe('layout improvements enabled', () => { layout = fixtureSync(`
-
+
- + - + - + `); children = Array.from(layout.children); @@ -49,7 +49,7 @@ describe('layout improvements enabled', () => { 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'), + (child) => child.localName.endsWith('layout') && child.hasAttribute('data-width-full'), ); const remainingChildren = children.filter((child) => !layoutChildren.includes(child)); diff --git a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js index 3c479886a4..b8e38b8eff 100644 --- a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js +++ b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js @@ -38,12 +38,12 @@ export const baseStyles = css` // class. const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements; const layoutImprovementStyles = css` - ::slotted([data-full-height]) { + ::slotted([data-height-full]) { flex: 1; } - ::slotted(vaadin-horizontal-layout[data-full-height]), - ::slotted(vaadin-vertical-layout[data-full-height]) { + ::slotted(vaadin-horizontal-layout[data-height-full]), + ::slotted(vaadin-vertical-layout[data-height-full]) { min-height: 0; } `; diff --git a/packages/vertical-layout/test/layout-improvements.common.js b/packages/vertical-layout/test/layout-improvements.common.js index 977a1ce3e3..6ee074e7af 100644 --- a/packages/vertical-layout/test/layout-improvements.common.js +++ b/packages/vertical-layout/test/layout-improvements.common.js @@ -9,7 +9,7 @@ describe('layout improvements enabled', () => { layout = fixtureSync(`
-
+
`); children = Array.from(layout.children); @@ -17,7 +17,7 @@ describe('layout improvements enabled', () => { }); it('should set flex on full height children only', () => { - const fullHeightChildren = children.filter((child) => child.hasAttribute('data-full-height')); + const fullHeightChildren = children.filter((child) => child.hasAttribute('data-height-full')); const remainingChildren = children.filter((child) => !fullHeightChildren.includes(child)); fullHeightChildren.forEach((child) => { @@ -34,13 +34,13 @@ describe('layout improvements enabled', () => { layout = fixtureSync(`
-
+
- + - + - + `); children = Array.from(layout.children); @@ -49,7 +49,7 @@ describe('layout improvements enabled', () => { 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'), + (child) => child.localName.endsWith('layout') && child.hasAttribute('data-height-full'), ); const remainingChildren = children.filter((child) => !layoutChildren.includes(child)); diff --git a/packages/vertical-layout/test/vertical-layout.common.js b/packages/vertical-layout/test/vertical-layout.common.js index 49019b50c3..96ef359cd3 100644 --- a/packages/vertical-layout/test/vertical-layout.common.js +++ b/packages/vertical-layout/test/vertical-layout.common.js @@ -120,7 +120,7 @@ describe('vaadin-vertical-layout', () => { layout = fixtureSync(`
-
+
`); children = Array.from(layout.children); @@ -139,13 +139,13 @@ describe('vaadin-vertical-layout', () => { layout = fixtureSync(`
-
+
- + - + - + `); children = Array.from(layout.children); From 40071668bf486da08d9087b40625411f20ca558d Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Thu, 30 Jan 2025 15:15:11 +0200 Subject: [PATCH 08/12] Update packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js --- .../horizontal-layout/src/vaadin-horizontal-layout-styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js index 0cede8d63f..d77ba1c488 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js +++ b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js @@ -42,6 +42,7 @@ const layoutImprovementStyles = css` ::slotted(vaadin-horizontal-layout[data-width-full]), ::slotted(vaadin-vertical-layout[data-width-full]) { min-width: 0; + } `; export const horizontalLayoutStyles = enableLayoutImprovements ? [baseStyles, layoutImprovementStyles] : [baseStyles]; From 928a33d97aa6683abb3ba822ae3470610eb892c0 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Thu, 30 Jan 2025 15:17:37 +0200 Subject: [PATCH 09/12] Update packages/vertical-layout/src/vaadin-vertical-layout-styles.js --- packages/vertical-layout/src/vaadin-vertical-layout-styles.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js index b8e38b8eff..dc2324c13b 100644 --- a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js +++ b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js @@ -18,7 +18,6 @@ export const baseStyles = css` } /* Theme variations */ - :host([theme~='margin']) { margin: 1em; } From c0cd6fceeb1267a792402992ccb7d8b94e0f9566 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Thu, 30 Jan 2025 15:40:51 +0200 Subject: [PATCH 10/12] Update vaadin-horizontal-layout-styles.js --- .../horizontal-layout/src/vaadin-horizontal-layout-styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js index d77ba1c488..9942e3a0b6 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js +++ b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js @@ -42,7 +42,7 @@ const layoutImprovementStyles = css` ::slotted(vaadin-horizontal-layout[data-width-full]), ::slotted(vaadin-vertical-layout[data-width-full]) { min-width: 0; - } + } `; export const horizontalLayoutStyles = enableLayoutImprovements ? [baseStyles, layoutImprovementStyles] : [baseStyles]; From 112c7575cb34c84c1a2fc0207324b1a97acd7d1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Fri, 31 Jan 2025 10:38:22 +0100 Subject: [PATCH 11/12] update feature flag name --- .../horizontal-layout/src/vaadin-horizontal-layout-styles.js | 2 +- packages/horizontal-layout/test/enable-layout-improvements.js | 2 +- packages/vertical-layout/src/vaadin-vertical-layout-styles.js | 2 +- packages/vertical-layout/test/enable-layout-improvements.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js index 9942e3a0b6..e70405bcd5 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js +++ b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js @@ -33,7 +33,7 @@ export const baseStyles = css` // using `HasSize.setSizeFull()` and others, get additional styles so that they effectively take the remaining space in // the layout, rather than explicitly use 100% width/height. The respective data attributes are set by Flow's `HasSize` // class. -const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements; +const enableLayoutImprovements = window.Vaadin.featureFlags.layoutComponentImprovements; const layoutImprovementStyles = css` ::slotted([data-width-full]) { flex: 1; diff --git a/packages/horizontal-layout/test/enable-layout-improvements.js b/packages/horizontal-layout/test/enable-layout-improvements.js index ed7878a49f..ffbf764e56 100644 --- a/packages/horizontal-layout/test/enable-layout-improvements.js +++ b/packages/horizontal-layout/test/enable-layout-improvements.js @@ -1,3 +1,3 @@ window.Vaadin ??= {}; window.Vaadin.featureFlags ??= {}; -window.Vaadin.featureFlags.layoutImprovements = true; +window.Vaadin.featureFlags.layoutComponentImprovements = true; diff --git a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js index dc2324c13b..498f313b43 100644 --- a/packages/vertical-layout/src/vaadin-vertical-layout-styles.js +++ b/packages/vertical-layout/src/vaadin-vertical-layout-styles.js @@ -35,7 +35,7 @@ export const baseStyles = css` // using `HasSize.setSizeFull()` and others, get additional styles so that they effectively take the remaining space in // the layout, rather than explicitly use 100% width/height. The respective data attributes are set by Flow's `HasSize` // class. -const enableLayoutImprovements = window.Vaadin.featureFlags.layoutImprovements; +const enableLayoutImprovements = window.Vaadin.featureFlags.layoutComponentImprovements; const layoutImprovementStyles = css` ::slotted([data-height-full]) { flex: 1; diff --git a/packages/vertical-layout/test/enable-layout-improvements.js b/packages/vertical-layout/test/enable-layout-improvements.js index ed7878a49f..ffbf764e56 100644 --- a/packages/vertical-layout/test/enable-layout-improvements.js +++ b/packages/vertical-layout/test/enable-layout-improvements.js @@ -1,3 +1,3 @@ window.Vaadin ??= {}; window.Vaadin.featureFlags ??= {}; -window.Vaadin.featureFlags.layoutImprovements = true; +window.Vaadin.featureFlags.layoutComponentImprovements = true; From 7dfdef3238b13e6a8fc507c42995868a8fe9eb8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Fri, 31 Jan 2025 10:47:31 +0100 Subject: [PATCH 12/12] use auto-generated lit tests --- .../horizontal-layout/test/layout-improvements-lit.test.js | 3 --- .../horizontal-layout/test/layout-improvements-polymer.test.js | 3 --- ...yout-improvements.common.js => layout-improvements.test.js} | 2 ++ packages/vertical-layout/test/layout-improvements-lit.test.js | 3 --- .../vertical-layout/test/layout-improvements-polymer.test.js | 3 --- ...yout-improvements.common.js => layout-improvements.test.js} | 2 ++ 6 files changed, 4 insertions(+), 12 deletions(-) delete mode 100644 packages/horizontal-layout/test/layout-improvements-lit.test.js delete mode 100644 packages/horizontal-layout/test/layout-improvements-polymer.test.js rename packages/horizontal-layout/test/{layout-improvements.common.js => layout-improvements.test.js} (96%) delete mode 100644 packages/vertical-layout/test/layout-improvements-lit.test.js delete mode 100644 packages/vertical-layout/test/layout-improvements-polymer.test.js rename packages/vertical-layout/test/{layout-improvements.common.js => layout-improvements.test.js} (96%) diff --git a/packages/horizontal-layout/test/layout-improvements-lit.test.js b/packages/horizontal-layout/test/layout-improvements-lit.test.js deleted file mode 100644 index b96f127aa2..0000000000 --- a/packages/horizontal-layout/test/layout-improvements-lit.test.js +++ /dev/null @@ -1,3 +0,0 @@ -import './enable-layout-improvements.js'; -import '../vaadin-lit-horizontal-layout.js'; -import './layout-improvements.common.js'; diff --git a/packages/horizontal-layout/test/layout-improvements-polymer.test.js b/packages/horizontal-layout/test/layout-improvements-polymer.test.js deleted file mode 100644 index 62d1c0b421..0000000000 --- a/packages/horizontal-layout/test/layout-improvements-polymer.test.js +++ /dev/null @@ -1,3 +0,0 @@ -import './enable-layout-improvements.js'; -import '../vaadin-horizontal-layout.js'; -import './layout-improvements.common.js'; diff --git a/packages/horizontal-layout/test/layout-improvements.common.js b/packages/horizontal-layout/test/layout-improvements.test.js similarity index 96% rename from packages/horizontal-layout/test/layout-improvements.common.js rename to packages/horizontal-layout/test/layout-improvements.test.js index 72bad8a6dc..43a9bca528 100644 --- a/packages/horizontal-layout/test/layout-improvements.common.js +++ b/packages/horizontal-layout/test/layout-improvements.test.js @@ -1,5 +1,7 @@ import { expect } from '@vaadin/chai-plugins'; import { fixtureSync, nextFrame } from '@vaadin/testing-helpers'; +import './enable-layout-improvements.js'; +import '../vaadin-horizontal-layout.js'; describe('layout improvements enabled', () => { let layout, children; diff --git a/packages/vertical-layout/test/layout-improvements-lit.test.js b/packages/vertical-layout/test/layout-improvements-lit.test.js deleted file mode 100644 index 4d79e4ea79..0000000000 --- a/packages/vertical-layout/test/layout-improvements-lit.test.js +++ /dev/null @@ -1,3 +0,0 @@ -import './enable-layout-improvements.js'; -import '../vaadin-lit-vertical-layout.js'; -import './layout-improvements.common.js'; diff --git a/packages/vertical-layout/test/layout-improvements-polymer.test.js b/packages/vertical-layout/test/layout-improvements-polymer.test.js deleted file mode 100644 index 3ce59256b9..0000000000 --- a/packages/vertical-layout/test/layout-improvements-polymer.test.js +++ /dev/null @@ -1,3 +0,0 @@ -import './enable-layout-improvements.js'; -import '../vaadin-vertical-layout.js'; -import './layout-improvements.common.js'; diff --git a/packages/vertical-layout/test/layout-improvements.common.js b/packages/vertical-layout/test/layout-improvements.test.js similarity index 96% rename from packages/vertical-layout/test/layout-improvements.common.js rename to packages/vertical-layout/test/layout-improvements.test.js index 6ee074e7af..c4d7a11d51 100644 --- a/packages/vertical-layout/test/layout-improvements.common.js +++ b/packages/vertical-layout/test/layout-improvements.test.js @@ -1,5 +1,7 @@ import { expect } from '@vaadin/chai-plugins'; import { fixtureSync, nextFrame } from '@vaadin/testing-helpers'; +import './enable-layout-improvements.js'; +import '../vaadin-vertical-layout.js'; describe('layout improvements enabled', () => { let layout, children;