Skip to content

Commit 56fcff3

Browse files
jounijouni
authored
experiment: add virtual-list base styles and visual tests (#9668)
1 parent 1d99685 commit 56fcff3

11 files changed

+120
-6
lines changed

‎dev/virtual-list.html‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,20 @@
1919
root.innerHTML = `<div>${item.label}</div>`;
2020
};
2121

22-
const list = document.querySelector('vaadin-virtual-list');
23-
list.items = items;
24-
list.renderer = renderer;
22+
document.querySelectorAll('vaadin-virtual-list').forEach((list) => {
23+
list.items = items;
24+
list.renderer = renderer;
25+
});
2526
</script>
2627
</head>
2728

2829
<body>
29-
<vaadin-virtual-list style="height: 400px"></vaadin-virtual-list>
30+
<section>
31+
<vaadin-virtual-list style="height: 200px"></vaadin-virtual-list>
32+
</section>
33+
<section>
34+
<h2 class="heading">Overflow Indicators</h2>
35+
<vaadin-virtual-list style="height: 200px" theme="overflow-indicators"></vaadin-virtual-list>
36+
</section>
3037
</body>
3138
</html>

‎packages/virtual-list/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
"lit.d.ts",
2424
"lit.js",
2525
"src",
26+
"!src/styles/*-base-styles.d.ts",
27+
"!src/styles/*-base-styles.js",
2628
"theme",
2729
"vaadin-*.d.ts",
2830
"vaadin-*.js",

‎packages/virtual-list/src/styles/vaadin-virtual-list-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) 2021 - 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 virtualListStyles: CSSResult;

‎packages/virtual-list/src/styles/vaadin-virtual-list-base-styles.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2021 - 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 virtualListStyles = css`
10+
:host {
11+
display: block;
12+
height: 400px;
13+
overflow: auto;
14+
flex: auto;
15+
align-self: stretch;
16+
}
17+
18+
:host([hidden]) {
19+
display: none !important;
20+
}
21+
22+
:host(:not([grid])) #items > ::slotted(*) {
23+
width: 100%;
24+
}
25+
26+
#items {
27+
position: relative;
28+
}
29+
30+
:host([theme~='overflow-indicators'])::before,
31+
:host([theme~='overflow-indicators'])::after {
32+
content: '';
33+
display: none;
34+
position: sticky;
35+
inset: 0;
36+
z-index: 9999;
37+
height: 1px;
38+
margin-bottom: -1px;
39+
background: var(--vaadin-virtual-list-border-color, var(--vaadin-border-color));
40+
}
41+
42+
:host([theme~='overflow-indicators'])::after {
43+
margin-bottom: 0;
44+
margin-top: -1px;
45+
}
46+
47+
:host([theme~='overflow-indicators'][overflow~='top'])::before,
48+
:host([theme~='overflow-indicators'][overflow~='bottom'])::after {
49+
display: block;
50+
}
51+
`;

‎packages/virtual-list/src/styles/vaadin-virtual-list-core-styles.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* @license
3-
* Copyright (c) 2017 - 2025 Vaadin Ltd.
3+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import type { CSSResult } from 'lit';

‎packages/virtual-list/src/styles/vaadin-virtual-list-core-styles.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* @license
3-
* Copyright (c) 2017 - 2025 Vaadin Ltd.
3+
* Copyright (c) 2021 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import { css } from 'lit';

‎packages/virtual-list/test/visual/base/screenshots/virtual-list/baseline/basic.png‎

5.65 KB
Loading

‎packages/virtual-list/test/visual/base/screenshots/virtual-list/baseline/theme-overflow-indicators-both.png‎

6.13 KB
Loading

‎packages/virtual-list/test/visual/base/screenshots/virtual-list/baseline/theme-overflow-indicators-bottom.png‎

5.67 KB
Loading

‎packages/virtual-list/test/visual/base/screenshots/virtual-list/baseline/theme-overflow-indicators-top.png‎

6.75 KB
Loading

0 commit comments

Comments
 (0)