Skip to content

Commit 5000efb

Browse files
web-padawanweb-padawan
authored
experiment: add select base styles and visual tests (#9189)
1 parent 66b8838 commit 5000efb

Some content is hidden

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

41 files changed

+526
-196
lines changed

‎dev/select.html‎

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,79 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
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" />
77
<title>Select</title>
88
<script type="module" src="./common.js"></script>
9+
910
<script type="module">
11+
import '@vaadin/icon';
12+
import '@vaadin/icons';
1013
import '@vaadin/select';
11-
import '@vaadin/tooltip';
14+
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
1215
</script>
1316
</head>
1417
<body>
15-
<vaadin-select label="Size">
16-
<vaadin-tooltip slot="tooltip" text="Stock availability may vary"></vaadin-tooltip>
17-
</vaadin-select>
18+
<section>
19+
<h2>Plain</h2>
20+
<vaadin-select value="s"></vaadin-select>
21+
<vaadin-select placeholder="Placeholder"></vaadin-select>
22+
</section>
23+
24+
<section>
25+
<h2>Bells & Whistles</h2>
26+
<vaadin-select
27+
label="Label"
28+
helper-text="Description for this field."
29+
value="s"
30+
clear-button-visible
31+
error-message="You need to write something in this field."
32+
required
33+
>
34+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
35+
</vaadin-select>
36+
</section>
37+
38+
<section>
39+
<h2>States</h2>
40+
<vaadin-select
41+
label="Read-only"
42+
helper-text="Description for this field."
43+
value="s"
44+
clear-button-visible
45+
error-message="You need to write something in this field."
46+
required
47+
readonly
48+
>
49+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
50+
</vaadin-select>
51+
52+
<vaadin-select
53+
label="Disabled"
54+
helper-text="Description for this field."
55+
value="s"
56+
clear-button-visible
57+
error-message="You need to write something in this field."
58+
required
59+
disabled
60+
>
61+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
62+
</vaadin-select>
63+
</section>
1864

1965
<script>
20-
const select = document.querySelector('vaadin-select');
21-
select.items = items = [
22-
{ label: 'Show all', value: 'all' },
23-
{ component: 'hr' },
24-
{ label: 'XS (out of stock)', value: 'xs', disabled: true },
25-
{ label: 'S', value: 's' },
26-
{ label: 'M', value: 'm' },
27-
{ label: 'L', value: 'l' },
28-
{ label: 'XL', value: 'xl' },
29-
];
66+
document.querySelectorAll('vaadin-select').forEach((select) => {
67+
select.items = items = [
68+
{ label: 'Show all', value: 'all' },
69+
{ component: 'hr' },
70+
{ label: 'XS (out of stock)', value: 'xs', disabled: true },
71+
{ label: 'S', value: 's' },
72+
{ label: 'M', value: 'm' },
73+
{ label: 'L', value: 'l' },
74+
{ label: 'XL', value: 'xl' },
75+
];
76+
});
3077
</script>
3178
</body>
3279
</html>

‎packages/overlay/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/*-base-styles.d.ts",
25+
"!src/*-base-styles.js",
2426
"theme",
2527
"vaadin-*.d.ts",
2628
"vaadin-*.js"

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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 overlayStyles = css`
10+
:host {
11+
z-index: 200;
12+
position: fixed;
13+
14+
/* Despite of what the names say, <vaadin-overlay> is just a container
15+
for position/sizing/alignment. The actual overlay is the overlay part. */
16+
17+
/* Default position constraints. Themes can
18+
override this to adjust the gap between the overlay and the viewport. */
19+
inset: 8px;
20+
bottom: var(--vaadin-overlay-viewport-bottom);
21+
22+
/* Use flexbox alignment for the overlay part. */
23+
display: flex;
24+
flex-direction: column; /* makes dropdowns sizing easier */
25+
/* Align to center by default. */
26+
align-items: center;
27+
justify-content: center;
28+
29+
/* Allow centering when max-width/max-height applies. */
30+
margin: auto;
31+
32+
/* The host is not clickable, only the overlay part is. */
33+
pointer-events: none;
34+
35+
/* Remove tap highlight on touch devices. */
36+
-webkit-tap-highlight-color: transparent;
37+
38+
/* CSS API for host */
39+
--vaadin-overlay-viewport-bottom: 8px;
40+
}
41+
42+
:host([hidden]),
43+
:host(:not([opened]):not([closing])),
44+
:host(:not([opened]):not([closing])) [part='overlay'] {
45+
display: none !important;
46+
}
47+
48+
[part='overlay'] {
49+
background: var(--vaadin-overlay-background, var(--_vaadin-background));
50+
border: var(--vaadin-overlay-border, 1px solid var(--_vaadin-border-color));
51+
border-radius: var(--vaadin-overlay-border-radius, var(--_vaadin-radius-m));
52+
box-shadow: var(--vaadin-overlay-box-shadow, 0 8px 24px -4px hsl(0 0 0 / 0.3));
53+
box-sizing: border-box;
54+
max-width: 100%;
55+
overflow: auto;
56+
overscroll-behavior: contain;
57+
pointer-events: auto;
58+
-webkit-tap-highlight-color: initial;
59+
}
60+
61+
[part='backdrop'] {
62+
background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.5));
63+
content: '';
64+
inset: 0;
65+
pointer-events: auto;
66+
position: fixed;
67+
z-index: -1;
68+
}
69+
70+
@media (forced-colors: active) {
71+
[part='overlay'] {
72+
border: 3px solid;
73+
}
74+
75+
[part='overlay']:focus-visible {
76+
outline: var(--vaadin-focus-ring-width) solid;
77+
outline-offset: 1px;
78+
}
79+
}
80+
`;

‎packages/overlay/src/vaadin-overlay-core-styles.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
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 { css } from 'lit';
7+
8+
export const overlayStyles = css`
9+
:host {
10+
z-index: 200;
11+
position: fixed;
12+
13+
/* Despite of what the names say, <vaadin-overlay> is just a container
14+
for position/sizing/alignment. The actual overlay is the overlay part. */
15+
16+
/* Default position constraints: the entire viewport. Note: themes can
17+
override this to introduce gaps between the overlay and the viewport. */
18+
inset: 0;
19+
bottom: var(--vaadin-overlay-viewport-bottom);
20+
21+
/* Use flexbox alignment for the overlay part. */
22+
display: flex;
23+
flex-direction: column; /* makes dropdowns sizing easier */
24+
/* Align to center by default. */
25+
align-items: center;
26+
justify-content: center;
27+
28+
/* Allow centering when max-width/max-height applies. */
29+
margin: auto;
30+
31+
/* The host is not clickable, only the overlay part is. */
32+
pointer-events: none;
33+
34+
/* Remove tap highlight on touch devices. */
35+
-webkit-tap-highlight-color: transparent;
36+
37+
/* CSS API for host */
38+
--vaadin-overlay-viewport-bottom: 0;
39+
}
40+
41+
:host([hidden]),
42+
:host(:not([opened]):not([closing])),
43+
:host(:not([opened]):not([closing])) [part='overlay'] {
44+
display: none !important;
45+
}
46+
47+
[part='overlay'] {
48+
-webkit-overflow-scrolling: touch;
49+
overflow: auto;
50+
pointer-events: auto;
51+
52+
/* Prevent overflowing the host */
53+
max-width: 100%;
54+
box-sizing: border-box;
55+
56+
-webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
57+
}
58+
59+
[part='backdrop'] {
60+
z-index: -1;
61+
content: '';
62+
background: rgba(0, 0, 0, 0.5);
63+
position: fixed;
64+
inset: 0;
65+
pointer-events: auto;
66+
}
67+
`;

‎packages/overlay/src/vaadin-overlay-styles.js‎

Lines changed: 1 addition & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,4 @@
33
* Copyright (c) 2017 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
6-
import { css } from 'lit';
7-
8-
export const overlayStyles = css`
9-
:host {
10-
z-index: 200;
11-
position: fixed;
12-
13-
/* Despite of what the names say, <vaadin-overlay> is just a container
14-
for position/sizing/alignment. The actual overlay is the overlay part. */
15-
16-
/* Default position constraints: the entire viewport. Note: themes can
17-
override this to introduce gaps between the overlay and the viewport. */
18-
inset: 0;
19-
bottom: var(--vaadin-overlay-viewport-bottom);
20-
21-
/* Use flexbox alignment for the overlay part. */
22-
display: flex;
23-
flex-direction: column; /* makes dropdowns sizing easier */
24-
/* Align to center by default. */
25-
align-items: center;
26-
justify-content: center;
27-
28-
/* Allow centering when max-width/max-height applies. */
29-
margin: auto;
30-
31-
/* The host is not clickable, only the overlay part is. */
32-
pointer-events: none;
33-
34-
/* Remove tap highlight on touch devices. */
35-
-webkit-tap-highlight-color: transparent;
36-
37-
/* CSS API for host */
38-
--vaadin-overlay-viewport-bottom: 0;
39-
}
40-
41-
:host([hidden]),
42-
:host(:not([opened]):not([closing])),
43-
:host(:not([opened]):not([closing])) [part='overlay'] {
44-
display: none !important;
45-
}
46-
47-
[part='overlay'] {
48-
-webkit-overflow-scrolling: touch;
49-
overflow: auto;
50-
pointer-events: auto;
51-
52-
/* Prevent overflowing the host */
53-
max-width: 100%;
54-
box-sizing: border-box;
55-
56-
-webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
57-
}
58-
59-
[part='backdrop'] {
60-
z-index: -1;
61-
content: '';
62-
background: rgba(0, 0, 0, 0.5);
63-
position: fixed;
64-
inset: 0;
65-
pointer-events: auto;
66-
}
67-
`;
6+
export { overlayStyles } from './vaadin-overlay-core-styles.js';

‎packages/select/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/*-base-styles.d.ts",
27+
"!src/*-base-styles.js",
2628
"theme",
2729
"vaadin-*.d.ts",
2830
"vaadin-*.js",

‎packages/select/src/vaadin-lit-select-item.js‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
* Copyright (c) 2017 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
6-
import { css, html, LitElement } from 'lit';
6+
import { html, LitElement } from 'lit';
77
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
88
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
99
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10+
import { itemStyles } from '@vaadin/item/src/vaadin-item-core-styles.js';
1011
import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
1112
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1213

@@ -25,15 +26,7 @@ class SelectItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElemen
2526
}
2627

2728
static get styles() {
28-
return css`
29-
:host {
30-
display: inline-block;
31-
}
32-
33-
:host([hidden]) {
34-
display: none !important;
35-
}
36-
`;
29+
return itemStyles;
3730
}
3831

3932
static get properties() {

‎packages/select/src/vaadin-lit-select-list-box.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@
33
* Copyright (c) 2017 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
6-
import { css, html, LitElement } from 'lit';
6+
import { html, LitElement } from 'lit';
77
import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
88
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
99
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
1010
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
11+
import { listBoxStyles } from '@vaadin/list-box/src/vaadin-list-box-core-styles.js';
1112
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1213

1314
/**
@@ -25,22 +26,7 @@ class SelectListBox extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LitEle
2526
}
2627

2728
static get styles() {
28-
return css`
29-
:host {
30-
display: flex;
31-
}
32-
33-
:host([hidden]) {
34-
display: none !important;
35-
}
36-
37-
[part='items'] {
38-
height: 100%;
39-
width: 100%;
40-
overflow-y: auto;
41-
-webkit-overflow-scrolling: touch;
42-
}
43-
`;
29+
return listBoxStyles;
4430
}
4531

4632
static get properties() {

0 commit comments

Comments
 (0)