Skip to content

Commit 995b102

Browse files
anezthesjouni
anezthes
and
jouni
authored
experiment: add split-layout base styles and visual tests (#9647)
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
1 parent ceeb928 commit 995b102

File tree

13 files changed

+204
-29
lines changed

13 files changed

+204
-29
lines changed

‎dev/split-layout.html‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,52 +12,56 @@
1212
import '@vaadin/split-layout';
1313

1414
document.querySelectorAll('.first').forEach((el) => {
15-
el.textContent = new Array(1000).fill('a').join(' ');
15+
el.innerHTML = `<div style="padding: 0.5rem">${new Array(420).fill('a').join(' ')}</div>`;
1616
});
1717
document.querySelectorAll('.second').forEach((el) => {
18-
el.textContent = new Array(1000).fill('b').join(' ');
18+
el.innerHTML = `<div style="padding: 0.5rem">${new Array(420).fill('b').join(' ')}</div>`;
1919
});
2020
</script>
2121

2222
<style>
23-
vaadin-split-layout {
24-
display: inline-flex;
25-
margin: 0 1rem 2rem 0;
23+
.first,
24+
.second {
2625
/* Force the natural width of both containers to be equal */
2726
font-family: monospace;
27+
contain: paint;
2828
}
2929
</style>
3030
</head>
3131

3232
<body>
3333
<h2 class="heading">Default</h2>
34-
<vaadin-split-layout style="width: 400px; height: 200px">
35-
<div class="first"></div>
36-
<div class="second"></div>
37-
</vaadin-split-layout>
38-
<vaadin-split-layout style="width: 400px; height: 200px" orientation="vertical">
39-
<div class="first"></div>
40-
<div class="second"></div>
41-
</vaadin-split-layout>
34+
<p>
35+
These Split Layouts are wrapped in a div with <code>overflow: auto;</code>, but you shouldn't see a scrollbar even
36+
if you drag the splitters to the end.
37+
</p>
38+
<div style="width: fit-content; height: fit-content; overflow: auto">
39+
<vaadin-split-layout style="width: 400px; height: 200px">
40+
<vaadin-split-layout style="width: 400px; height: 200px" orientation="vertical">
41+
<div class="first"></div>
42+
<div class="second"></div>
43+
</vaadin-split-layout>
44+
<vaadin-split-layout style="width: 400px; height: 200px" orientation="vertical">
45+
<div class="first"></div>
46+
<div class="second"></div>
47+
</vaadin-split-layout>
48+
</vaadin-split-layout>
49+
</div>
4250

4351
<h2 class="heading">Small</h2>
52+
<p>
53+
The small variant shouldn't inherit to the nested Split Layouts. The first nested Split Layout uses the small
54+
variant explicitly.
55+
</p>
4456
<vaadin-split-layout style="width: 400px; height: 200px" theme="small">
45-
<div class="first"></div>
46-
<div class="second"></div>
47-
</vaadin-split-layout>
48-
<vaadin-split-layout style="width: 400px; height: 200px" orientation="vertical" theme="small">
49-
<div class="first"></div>
50-
<div class="second"></div>
51-
</vaadin-split-layout>
52-
53-
<h2 class="heading">Minimal</h2>
54-
<vaadin-split-layout style="width: 400px; height: 200px" theme="minimal">
55-
<div class="first"></div>
56-
<div class="second"></div>
57-
</vaadin-split-layout>
58-
<vaadin-split-layout style="width: 400px; height: 200px" orientation="vertical" theme="minimal">
59-
<div class="first"></div>
60-
<div class="second"></div>
57+
<vaadin-split-layout style="width: 400px; height: 200px" orientation="vertical" theme="small">
58+
<div class="first"></div>
59+
<div class="second"></div>
60+
</vaadin-split-layout>
61+
<vaadin-split-layout style="width: 400px; height: 200px" orientation="vertical">
62+
<div class="first"></div>
63+
<div class="second"></div>
64+
</vaadin-split-layout>
6165
</vaadin-split-layout>
6266
</body>
6367
</html>

‎packages/split-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/split-layout/src/styles/vaadin-split-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) 2016 - 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 splitLayoutStyles: CSSResult;

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

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2016 - 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 splitLayoutStyles = css`
10+
:host {
11+
display: flex;
12+
contain: layout;
13+
}
14+
15+
:host([hidden]) {
16+
display: none !important;
17+
}
18+
19+
:host([orientation='vertical']) {
20+
flex-direction: column;
21+
}
22+
23+
::slotted(*) {
24+
flex: 1 1 auto;
25+
min-width: 0;
26+
min-height: 0;
27+
}
28+
29+
[part='splitter'] {
30+
--_splitter-size: var(--vaadin-split-layout-splitter-size, 0.5rem);
31+
--_splitter-target-size: var(--vaadin-split-layout-splitter-target-size, 0.5rem);
32+
--_handle-size: var(--vaadin-split-layout-handle-size, 0.25rem);
33+
--_handle-target-size: var(--vaadin-split-layout-handle-target-size, 2rem);
34+
background: var(--vaadin-split-layout-splitter-background, var(--vaadin-background-container-strong));
35+
flex: none;
36+
position: relative;
37+
z-index: 1;
38+
box-sizing: border-box;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
}
43+
44+
[part='splitter']::after {
45+
content: '';
46+
inset: 0 calc((var(--_splitter-target-size) - var(--_splitter-size)) / -2);
47+
position: absolute;
48+
}
49+
50+
:host([orientation='vertical']) [part='splitter']::after {
51+
inset: calc((var(--_splitter-target-size) - var(--_splitter-size)) / -2) 0;
52+
}
53+
54+
:host(:not([orientation='vertical'])) > [part='splitter'] {
55+
cursor: ew-resize;
56+
width: var(--_splitter-size);
57+
}
58+
59+
:host([orientation='vertical']) > [part='splitter'] {
60+
cursor: ns-resize;
61+
height: var(--_splitter-size);
62+
}
63+
64+
[part='handle'] {
65+
background: var(--vaadin-split-layout-handle-background, var(--vaadin-color-subtle));
66+
border-radius: var(--vaadin-radius-m);
67+
flex: none;
68+
width: var(--_handle-size);
69+
height: var(--_handle-target-size);
70+
max-height: 50%;
71+
position: relative;
72+
}
73+
74+
:host([orientation='vertical']) [part='handle'] {
75+
width: var(--_handle-target-size);
76+
max-width: 50%;
77+
height: var(--_handle-size);
78+
max-height: none;
79+
}
80+
81+
[part='handle']::after {
82+
content: '';
83+
position: absolute;
84+
top: 50%;
85+
left: 50%;
86+
height: var(--_handle-target-size);
87+
width: var(--_handle-target-size);
88+
transform: translate3d(-50%, -50%, 0);
89+
border-radius: 50%;
90+
}
91+
92+
:host([theme~='small']) > [part='splitter'] {
93+
--vaadin-split-layout-splitter-size: 1px;
94+
--vaadin-split-layout-splitter-target-size: 5px;
95+
--vaadin-split-layout-handle-size: 3px;
96+
}
97+
98+
:host([theme~='small']) [part='splitter'] [part='handle'] {
99+
opacity: 0;
100+
}
101+
102+
:host([theme~='small']) [part='splitter']:active [part='handle'] {
103+
opacity: 1;
104+
}
105+
106+
@media (any-hover: hover) {
107+
:host([theme~='small']) [part='splitter']:hover [part='handle'] {
108+
opacity: 1;
109+
}
110+
}
111+
112+
@media (forced-colors: active) {
113+
[part~='splitter'] {
114+
border: 1px solid;
115+
}
116+
}
117+
`;

‎packages/split-layout/test/visual/base/screenshots/split-layout/baseline/horizontal-small-hover.png‎

426 Bytes
Loading

‎packages/split-layout/test/visual/base/screenshots/split-layout/baseline/horizontal-small.png‎

363 Bytes
Loading

‎packages/split-layout/test/visual/base/screenshots/split-layout/baseline/horizontal.png‎

454 Bytes
Loading

‎packages/split-layout/test/visual/base/screenshots/split-layout/baseline/vertical-small-hover.png‎

447 Bytes
Loading

‎packages/split-layout/test/visual/base/screenshots/split-layout/baseline/vertical-small.png‎

363 Bytes
Loading

‎packages/split-layout/test/visual/base/screenshots/split-layout/baseline/vertical.png‎

433 Bytes
Loading

0 commit comments

Comments
 (0)