Skip to content

Commit 7f6b1eb

Browse files
jouniweb-padawan
jouni
and
web-padawan
authored
experiment: add horizontal and vertical layout base styles and visual tests (#9842)
* layout base styles * remove redundant wrap variant from Lumo * test: add visual tests for base styles move wrap and horizontal layout slot tests to base * test: remove Lumo imports from base visual tests * chore: do not publish base styles to npm --------- Co-authored-by: web-padawan <iamkulykov@gmail.com>
1 parent 5c69f2c commit 7f6b1eb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+512
-183
lines changed

‎dev/horizontal-layout.html‎

Lines changed: 86 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,71 +4,100 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Horizontal layout</title>
7+
<title>Horizontal Layout</title>
88
<link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />
99
<script type="module" src="./common.js"></script>
1010

1111
<script type="module">
1212
import '@vaadin/horizontal-layout';
1313
</script>
14+
15+
<style>
16+
.section {
17+
flex-direction: column;
18+
align-items: initial;
19+
}
20+
21+
vaadin-horizontal-layout {
22+
outline: 1px dashed blue;
23+
}
24+
25+
vaadin-horizontal-layout > div {
26+
background: #ccc;
27+
}
28+
</style>
1429
</head>
1530

1631
<body>
17-
<vaadin-horizontal-layout style="border: solid 1px blue; width: 600px" theme="spacing wrap">
18-
<div style="background: #90ee90; width: 100px">Start</div>
19-
<div style="background: #90ee90; width: 100px">Start</div>
20-
<div slot="middle" style="background: #ffd700">Middle</div>
21-
<div slot="end" style="background: #f08080; width: 100px">End</div>
22-
</vaadin-horizontal-layout>
23-
24-
<br />
25-
26-
<vaadin-horizontal-layout style="border: solid 1px blue; width: 350px" theme="spacing wrap">
27-
<div style="background: #90ee90; width: 100px">Start</div>
28-
<div style="background: #90ee90; width: 100px">Start</div>
29-
<div slot="middle" style="background: #ffd700">Middle</div>
30-
<div slot="end" style="background: #f08080; width: 100px">End</div>
31-
</vaadin-horizontal-layout>
32-
33-
<br />
34-
35-
<vaadin-horizontal-layout style="border: solid 1px blue; width: 350px" theme="spacing wrap">
36-
<div style="background: #90ee90; width: 200px">Start</div>
37-
<div style="background: #90ee90; width: 100px">Start</div>
38-
<div slot="middle" style="background: #ffd700">Middle</div>
39-
<div slot="end" style="background: #f08080; width: 100px">End</div>
40-
</vaadin-horizontal-layout>
41-
42-
<br />
43-
44-
<vaadin-horizontal-layout style="border: solid 1px blue; width: 400px" theme="spacing wrap">
45-
<div style="background: #90ee90; width: 100px">Start</div>
46-
<div style="background: #90ee90; width: 100px">Start</div>
47-
<div slot="middle" style="background: #ffd700">Middle</div>
48-
</vaadin-horizontal-layout>
49-
50-
<br />
51-
52-
<vaadin-horizontal-layout style="border: solid 1px blue; width: 250px" theme="spacing wrap">
53-
<div style="background: #90ee90; width: 100px">Start</div>
54-
<div style="background: #90ee90; width: 100px">Start</div>
55-
<div slot="middle" style="background: #ffd700">Middle</div>
56-
</vaadin-horizontal-layout>
57-
58-
<br />
59-
60-
<vaadin-horizontal-layout style="border: solid 1px blue; width: 400px" theme="spacing wrap">
61-
<div slot="middle" style="background: #ffd700">Middle</div>
62-
<div slot="end" style="background: #f08080; width: 100px">End</div>
63-
<div slot="end" style="background: #f08080; width: 100px">End</div>
64-
</vaadin-horizontal-layout>
65-
66-
<br />
67-
68-
<vaadin-horizontal-layout style="border: solid 1px blue; width: 250px" theme="spacing wrap">
69-
<div slot="middle" style="background: #ffd700">Middle</div>
70-
<div slot="end" style="background: #f08080; width: 100px">End</div>
71-
<div slot="end" style="background: #f08080; width: 100px">End</div>
72-
</vaadin-horizontal-layout>
32+
<section class="section">
33+
<h2 class="heading">Variants</h2>
34+
35+
<vaadin-horizontal-layout theme="margin">
36+
<div>Margin</div>
37+
<div>Margin</div>
38+
<div>Margin</div>
39+
</vaadin-horizontal-layout>
40+
41+
<vaadin-horizontal-layout theme="padding">
42+
<div>Padding</div>
43+
<div>Padding</div>
44+
<div>Padding</div>
45+
</vaadin-horizontal-layout>
46+
47+
<vaadin-horizontal-layout theme="spacing">
48+
<div>Spacing</div>
49+
<div>Spacing</div>
50+
<div>Spacing</div>
51+
</vaadin-horizontal-layout>
52+
</section>
53+
54+
<section class="section">
55+
<h2 class="heading">Slots</h2>
56+
57+
<vaadin-horizontal-layout style="width: 600px" theme="spacing wrap">
58+
<div style="background: #90ee90; width: 100px">Start</div>
59+
<div style="background: #90ee90; width: 100px">Start</div>
60+
<div slot="middle" style="background: #ffd700">Middle</div>
61+
<div slot="end" style="background: #f08080; width: 100px">End</div>
62+
</vaadin-horizontal-layout>
63+
64+
<vaadin-horizontal-layout style="width: 350px" theme="spacing wrap">
65+
<div style="background: #90ee90; width: 100px">Start</div>
66+
<div style="background: #90ee90; width: 100px">Start</div>
67+
<div slot="middle" style="background: #ffd700">Middle</div>
68+
<div slot="end" style="background: #f08080; width: 100px">End</div>
69+
</vaadin-horizontal-layout>
70+
71+
<vaadin-horizontal-layout style="width: 350px" theme="spacing wrap">
72+
<div style="background: #90ee90; width: 200px">Start</div>
73+
<div style="background: #90ee90; width: 100px">Start</div>
74+
<div slot="middle" style="background: #ffd700">Middle</div>
75+
<div slot="end" style="background: #f08080; width: 100px">End</div>
76+
</vaadin-horizontal-layout>
77+
78+
<vaadin-horizontal-layout style="width: 400px" theme="spacing wrap">
79+
<div style="background: #90ee90; width: 100px">Start</div>
80+
<div style="background: #90ee90; width: 100px">Start</div>
81+
<div slot="middle" style="background: #ffd700">Middle</div>
82+
</vaadin-horizontal-layout>
83+
84+
<vaadin-horizontal-layout style="width: 250px" theme="spacing wrap">
85+
<div style="background: #90ee90; width: 100px">Start</div>
86+
<div style="background: #90ee90; width: 100px">Start</div>
87+
<div slot="middle" style="background: #ffd700">Middle</div>
88+
</vaadin-horizontal-layout>
89+
90+
<vaadin-horizontal-layout style="width: 400px" theme="spacing wrap">
91+
<div slot="middle" style="background: #ffd700">Middle</div>
92+
<div slot="end" style="background: #f08080; width: 100px">End</div>
93+
<div slot="end" style="background: #f08080; width: 100px">End</div>
94+
</vaadin-horizontal-layout>
95+
96+
<vaadin-horizontal-layout style="width: 250px" theme="spacing wrap">
97+
<div slot="middle" style="background: #ffd700">Middle</div>
98+
<div slot="end" style="background: #f08080; width: 100px">End</div>
99+
<div slot="end" style="background: #f08080; width: 100px">End</div>
100+
</vaadin-horizontal-layout>
101+
</section>
73102
</body>
74103
</html>

‎dev/vertical-layout.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vertical Layout</title>
8+
<link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />
9+
<script type="module" src="./common.js"></script>
10+
11+
<script type="module">
12+
import '@vaadin/vertical-layout';
13+
</script>
14+
15+
<style>
16+
.section {
17+
flex-direction: column;
18+
align-items: initial;
19+
}
20+
21+
vaadin-vertical-layout {
22+
outline: 1px dashed blue;
23+
}
24+
25+
vaadin-vertical-layout > div {
26+
background: #ccc;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<section class="section">
33+
<h2 class="heading">Variants</h2>
34+
35+
<vaadin-vertical-layout theme="margin">
36+
<div>Margin</div>
37+
<div>Margin</div>
38+
<div>Margin</div>
39+
</vaadin-vertical-layout>
40+
41+
<vaadin-vertical-layout theme="padding">
42+
<div>Padding</div>
43+
<div>Padding</div>
44+
<div>Padding</div>
45+
</vaadin-vertical-layout>
46+
47+
<vaadin-vertical-layout theme="spacing">
48+
<div>Spacing</div>
49+
<div>Spacing</div>
50+
<div>Spacing</div>
51+
</vaadin-vertical-layout>
52+
</section>
53+
</body>
54+
</html>

‎packages/horizontal-layout/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
"type": "module",
2222
"files": [
2323
"src",
24+
"!src/styles/*-base-styles.d.ts",
25+
"!src/styles/*-base-styles.js",
2426
"theme",
2527
"vaadin-*.d.ts",
2628
"vaadin-*.js",

‎packages/horizontal-layout/src/styles/vaadin-horizontal-layout-base-styles.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const horizontalLayoutStyles: CSSResult[];

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import '@vaadin/component-base/src/style-props.js';
7+
import { css } from 'lit';
8+
9+
export const baseStyles = css`
10+
:host {
11+
display: flex;
12+
box-sizing: border-box;
13+
}
14+
15+
:host([hidden]) {
16+
display: none !important;
17+
}
18+
19+
/* Theme variations */
20+
:host([theme~='margin']) {
21+
margin: var(--vaadin-horizontal-layout-margin, var(--vaadin-padding));
22+
}
23+
24+
:host([theme~='padding']) {
25+
padding: var(--vaadin-horizontal-layout-margin, var(--vaadin-padding));
26+
}
27+
28+
:host([theme~='spacing']) {
29+
gap: var(--vaadin-horizontal-layout-gap, var(--vaadin-gap-container-inline));
30+
}
31+
32+
:host([theme~='wrap']) {
33+
flex-wrap: wrap;
34+
}
35+
36+
:host([has-end]:not([has-middle])) ::slotted([last-start-child]) {
37+
margin-inline-end: auto;
38+
}
39+
40+
::slotted([first-middle-child]) {
41+
margin-inline-start: auto;
42+
}
43+
44+
::slotted([last-middle-child]) {
45+
margin-inline-end: auto;
46+
}
47+
48+
:host(:not([has-middle])) ::slotted([first-end-child]) {
49+
margin-inline-start: auto;
50+
}
51+
`;
52+
53+
// Layout improvements are part of a feature for Flow users where children that have been configured to use full size
54+
// using `HasSize.setSizeFull()` and others, get additional styles so that they effectively take the remaining space in
55+
// the layout, rather than explicitly use 100% width/height. The respective data attributes are set by Flow's `HasSize`
56+
// class.
57+
const enableLayoutImprovements = window.Vaadin.featureFlags.layoutComponentImprovements;
58+
const layoutImprovementStyles = css`
59+
::slotted([data-width-full]) {
60+
flex: 1;
61+
}
62+
63+
::slotted(vaadin-horizontal-layout[data-width-full]),
64+
::slotted(vaadin-vertical-layout[data-width-full]) {
65+
min-width: 0;
66+
}
67+
`;
68+
69+
export const horizontalLayoutStyles = enableLayoutImprovements ? [baseStyles, layoutImprovementStyles] : [baseStyles];

0 commit comments

Comments
 (0)