Skip to content

Commit 1852a17

Browse files
jounijouni
authored
experiment: add tabsheet base styles and visual tests (#9632)
1 parent 3482ca5 commit 1852a17

File tree

16 files changed

+296
-73
lines changed

16 files changed

+296
-73
lines changed

‎dev/tabsheet.html‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>TabSheet</title>
8+
<link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />
89
<script type="module" src="./common.js"></script>
910

1011
<script type="module">
@@ -28,10 +29,33 @@
2829
const content = lorem.substring(dotIndex + 1);
2930
panelContent.textContent = content.repeat(5);
3031
});
32+
33+
const tabsheet = document.querySelector('vaadin-tabsheet');
34+
35+
document.querySelector('#variant-group').addEventListener('value-changed', (e) => {
36+
tabsheet.setAttribute('theme', e.detail.value.join(' '));
37+
});
38+
39+
document.querySelector('#direction-group').addEventListener('value-changed', (e) => {
40+
document.dir = e.detail.value;
41+
});
3142
</script>
3243
</head>
3344

3445
<body>
46+
<section class="section" dir="ltr">
47+
<vaadin-checkbox-group label="Tabsheet theme variants" id="variant-group" theme="vertical" dir="ltr">
48+
<vaadin-checkbox label="bordered (Lumo)" value="bordered" dir="ltr"></vaadin-checkbox>
49+
<vaadin-checkbox label="no-border (base)" value="no-border" dir="ltr"></vaadin-checkbox>
50+
<vaadin-checkbox label="no padding" value="no-padding" dir="ltr"></vaadin-checkbox>
51+
</vaadin-checkbox-group>
52+
53+
<vaadin-radio-group label="Direction" id="direction-group" value="ltr" theme="vertical" dir="ltr">
54+
<vaadin-radio-button label="ltr" value="ltr" dir="ltr"></vaadin-radio-button>
55+
<vaadin-radio-button label="rtl" value="rtl" dir="ltr"></vaadin-radio-button>
56+
</vaadin-radio-group>
57+
</section>
58+
3559
<vaadin-tabsheet>
3660
<vaadin-checkbox slot="prefix" label="All tabs"></vaadin-checkbox>
3761
<vaadin-button slot="suffix" label="Suffix">
@@ -54,29 +78,5 @@
5478
<div tab="tab-4"></div>
5579
<div tab="tab-5"></div>
5680
</vaadin-tabsheet>
57-
58-
<section style="margin-top: 40px">
59-
<vaadin-checkbox-group label="Tabsheet theme variants" id="variant-group" theme="vertical">
60-
<vaadin-checkbox label="bordered" value="bordered"></vaadin-checkbox>
61-
<vaadin-checkbox label="no padding" value="no-padding"></vaadin-checkbox>
62-
</vaadin-checkbox-group>
63-
64-
<vaadin-radio-group label="Direction" id="direction-group" value="ltr" theme="vertical">
65-
<vaadin-radio-button label="ltr" value="ltr"></vaadin-radio-button>
66-
<vaadin-radio-button label="rtl" value="rtl"></vaadin-radio-button>
67-
</vaadin-radio-group>
68-
69-
<script>
70-
const tabsheet = document.querySelector('vaadin-tabsheet');
71-
72-
document.querySelector('#variant-group').addEventListener('value-changed', (e) => {
73-
tabsheet.setAttribute('theme', e.detail.value.join(' '));
74-
});
75-
76-
document.querySelector('#direction-group').addEventListener('value-changed', (e) => {
77-
document.dir = e.detail.value;
78-
});
79-
</script>
80-
</section>
8181
</body>
8282
</html>

‎packages/combo-box/src/styles/vaadin-combo-box-overlay-base-styles.js‎

Lines changed: 32 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,61 +5,44 @@
55
*/
66
import '@vaadin/component-base/src/style-props.js';
77
import { css } from 'lit';
8+
import { loaderStyles } from '@vaadin/component-base/src/loader-styles.js';
9+
10+
export const comboBoxOverlayStyles = [
11+
loaderStyles,
12+
css`
13+
@layer base {
14+
:host {
15+
--vaadin-item-checkmark-display: block;
16+
}
817
9-
export const comboBoxOverlayStyles = css`
10-
@layer base {
11-
:host {
12-
--vaadin-item-checkmark-display: block;
13-
}
14-
15-
[part='overlay'] {
16-
position: relative;
17-
width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
18-
}
19-
20-
[part='loader'] {
21-
animation: spin 1s linear infinite;
22-
border: 2px solid;
23-
--_spinner-color: var(--vaadin-combo-box-spinner-color, var(--vaadin-color));
24-
border-color: var(--_spinner-color) var(--_spinner-color) hsl(from var(--_spinner-color) h s l / 0.2)
25-
hsl(from var(--_spinner-color) h s l / 0.2);
26-
border-radius: var(--vaadin-radius-full);
27-
box-sizing: border-box;
28-
display: none;
29-
height: var(--vaadin-icon-size, 1lh);
30-
inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
31-
inset-block-end: auto;
32-
inset-inline-start: auto;
33-
pointer-events: none;
34-
position: absolute;
35-
width: var(--vaadin-icon-size, 1lh);
36-
}
37-
38-
[part='content'] {
39-
display: flex;
40-
flex-direction: column;
41-
height: 100%;
42-
}
18+
[part='overlay'] {
19+
position: relative;
20+
width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
21+
}
4322
44-
:host([loading]) [part='loader'] {
45-
display: block;
46-
}
23+
[part='content'] {
24+
display: flex;
25+
flex-direction: column;
26+
height: 100%;
27+
}
4728
48-
:host([loading]) [part='content'] {
49-
--_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
50-
}
29+
:host([loading]) [part='content'] {
30+
--_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
31+
}
5132
52-
@keyframes spin {
53-
to {
54-
rotate: 1turn;
33+
@media (forced-colors: active) {
34+
[part='loader'] {
35+
forced-color-adjust: none;
36+
--vaadin-combo-box-spinner-color: CanvasText;
37+
}
5538
}
56-
}
5739
58-
@media (forced-colors: active) {
5940
[part='loader'] {
60-
forced-color-adjust: none;
61-
--vaadin-combo-box-spinner-color: CanvasText;
41+
position: absolute;
42+
inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
43+
inset-block-end: auto;
44+
inset-inline-start: auto;
6245
}
6346
}
64-
}
65-
`;
47+
`,
48+
];

‎packages/component-base/src/loader-styles.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2025 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import './style-props.js';
7+
import { css } from 'lit';
8+
9+
export const loaderStyles = css`
10+
@layer base {
11+
@keyframes fade-in {
12+
0% {
13+
opacity: 0;
14+
}
15+
}
16+
17+
@keyframes spin {
18+
to {
19+
rotate: 1turn;
20+
}
21+
}
22+
23+
[part='loader'] {
24+
animation:
25+
spin var(--vaadin-spinner-animation-duration, 1s) linear infinite,
26+
fade-in 0.3s 0.3s both;
27+
border: var(--vaadin-spinner-width, 2px) solid;
28+
--_spinner-color: var(--vaadin-spinner-color, var(--vaadin-color));
29+
border-color: var(--_spinner-color) var(--_spinner-color) hsl(from var(--_spinner-color) h s l / 0.2)
30+
hsl(from var(--_spinner-color) h s l / 0.2);
31+
border-radius: 50%;
32+
box-sizing: border-box;
33+
height: var(--vaadin-spinner-size, 1lh);
34+
pointer-events: none;
35+
width: var(--vaadin-spinner-size, 1lh);
36+
}
37+
38+
:host(:not([loading])) [part~='loader'] {
39+
display: none;
40+
}
41+
}
42+
`;

‎packages/tabsheet/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/tabsheet/src/styles/vaadin-tabsheet-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) 2022 - 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 tabSheetStyles: CSSResult;

‎packages/tabsheet/src/styles/vaadin-tabsheet-base-styles.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2022 - 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+
import { loaderStyles } from '@vaadin/component-base/src/loader-styles.js';
9+
10+
export const tabSheetStyles = [
11+
loaderStyles,
12+
css`
13+
@layer base {
14+
:host {
15+
display: flex;
16+
flex-direction: column;
17+
border: var(--vaadin-tabsheet-border-width, 1px) solid
18+
var(--vaadin-tabsheet-border-color, var(--vaadin-border-color));
19+
border-radius: var(--vaadin-tabsheet-border-radius, var(--vaadin-radius-l));
20+
overflow: hidden;
21+
}
22+
23+
:host([hidden]) {
24+
display: none !important;
25+
}
26+
27+
[part='tabs-container'] {
28+
position: relative;
29+
display: flex;
30+
align-items: center;
31+
gap: var(--vaadin-tabsheet-gap, var(--vaadin-gap-container-inline));
32+
padding: var(--vaadin-tabsheet-padding, var(--vaadin-padding));
33+
box-sizing: border-box;
34+
}
35+
36+
::slotted([slot='tabs']) {
37+
flex: 1;
38+
align-self: stretch;
39+
min-width: 8em;
40+
}
41+
42+
[part='content'] {
43+
position: relative;
44+
flex: 1;
45+
box-sizing: border-box;
46+
padding: var(--vaadin-tabsheet-padding, var(--vaadin-padding));
47+
border-top: var(--vaadin-tabsheet-border-width, 1px) solid transparent;
48+
margin-top: calc(var(--vaadin-tabsheet-border-width, 1px) * -1);
49+
}
50+
51+
[part='content'][focus-ring] {
52+
border-bottom-left-radius: inherit;
53+
border-bottom-right-radius: inherit;
54+
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
55+
}
56+
57+
[part='content'][overflow~='top'] {
58+
border-top-color: var(--vaadin-tabsheet-border-color, var(--vaadin-border-color));
59+
}
60+
61+
:host([loading]) [part='content'] {
62+
display: flex;
63+
align-items: center;
64+
justify-content: center;
65+
}
66+
67+
:host([theme~='no-border']) {
68+
border: 0;
69+
border-radius: 0;
70+
}
71+
72+
:host([theme~='no-padding']) [part='content'] {
73+
padding: 0;
74+
}
75+
}
76+
`,
77+
];

‎packages/tabsheet/test/visual/base/screenshots/tabsheet/baseline/loading.png‎

3.77 KB
Loading

‎packages/tabsheet/test/visual/base/screenshots/tabsheet/baseline/ltr-default.png‎

16.1 KB
Loading

‎packages/tabsheet/test/visual/base/screenshots/tabsheet/baseline/no-border.png‎

15.2 KB
Loading

‎packages/tabsheet/test/visual/base/screenshots/tabsheet/baseline/no-padding.png‎

15.8 KB
Loading

0 commit comments

Comments
 (0)