Skip to content

Commit 9e80024

Browse files
web-padawanweb-padawan
authored
experiment: add combo-box base styles and visual tests (#9260)
1 parent badfbf2 commit 9e80024

34 files changed

+404
-82
lines changed

‎dev/combo-box.html‎

Lines changed: 66 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,84 @@
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" />
7-
<title>Combo box</title>
7+
<title>Combo Box</title>
88
<script type="module" src="./common.js"></script>
9+
910
<script type="module">
1011
import '@vaadin/combo-box';
11-
import '@vaadin/tooltip';
12+
import '@vaadin/icon';
13+
import '@vaadin/icons';
14+
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
1215
</script>
1316
</head>
1417
<body>
15-
<vaadin-combo-box label="Country">
16-
<vaadin-tooltip slot="tooltip" text="Loading might take time"></vaadin-tooltip>
17-
</vaadin-combo-box>
18+
<section>
19+
<h2>Plain</h2>
20+
<vaadin-combo-box></vaadin-combo-box>
21+
<vaadin-combo-box placeholder="Placeholder"></vaadin-combo-box>
22+
</section>
1823

19-
<script type="module">
20-
const comboBox = document.querySelector('vaadin-combo-box');
24+
<section>
25+
<h2>Bells & Whistles</h2>
26+
<vaadin-combo-box
27+
label="Label"
28+
helper-text="Description for this field."
29+
clear-button-visible
30+
error-message="You need to write something in this field."
31+
required
32+
>
33+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
34+
</vaadin-combo-box>
35+
</section>
36+
37+
<section>
38+
<h2>States</h2>
39+
<vaadin-combo-box
40+
label="Read-only"
41+
helper-text="Description for this field."
42+
clear-button-visible
43+
error-message="You need to write something in this field."
44+
required
45+
readonly
46+
>
47+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
48+
</vaadin-combo-box>
2149

22-
/*
23-
const res = await fetch('https://demo.vaadin.com/demo-data/1.0/filtered-countries?count=200');
24-
const arr = await res.json();
25-
comboBox.items = arr.result;
26-
*/
50+
<vaadin-combo-box
51+
label="Disabled"
52+
helper-text="Description for this field."
53+
clear-button-visible
54+
error-message="You need to write something in this field."
55+
required
56+
disabled
57+
>
58+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
59+
</vaadin-combo-box>
60+
</section>
61+
62+
<script type="module">
63+
document.querySelectorAll('vaadin-combo-box').forEach((comboBox) => {
64+
comboBox.dataProvider = async (params, callback) => {
65+
const index = params.page * params.pageSize;
66+
const response = await fetch(
67+
`https://demo.vaadin.com/demo-data/1.0/filtered-countries?index=${index}&count=${params.pageSize}&filter=${params.filter}`,
68+
);
69+
if (response.ok) {
70+
const { result, size } = await response.json();
71+
// Emulate network latency for demo purpose
72+
setTimeout(() => {
73+
callback(result, size);
74+
}, 1000);
75+
}
76+
};
2777

28-
comboBox.dataProvider = async (params, callback) => {
29-
console.log(JSON.stringify(params));
30-
const index = params.page * params.pageSize;
31-
const response = await fetch(
32-
`https://demo.vaadin.com/demo-data/1.0/filtered-countries?index=${index}&count=${params.pageSize}&filter=${params.filter}`,
33-
);
34-
if (response.ok) {
35-
const { result, size } = await response.json();
36-
// Emulate network latency for demo purpose
37-
setTimeout(() => {
38-
callback(result, size);
39-
}, 100);
78+
if (!comboBox.placeholder) {
79+
comboBox.selectedItem = 'Andorra';
4080
}
41-
};
81+
});
4282
</script>
4383
</body>
4484
</html>

‎packages/combo-box/package.json‎

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

‎packages/combo-box/src/styles/vaadin-combo-box-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) 2015 - 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 comboBoxStyles: CSSResult;

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 - 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 comboBoxStyles = css`
10+
:host([opened]) {
11+
pointer-events: auto;
12+
}
13+
14+
[part='toggle-button']::before {
15+
mask-image: var(--_vaadin-icon-chevron-down);
16+
}
17+
`;

‎packages/combo-box/src/styles/vaadin-combo-box-core-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) 2015 - 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 comboBoxStyles: CSSResult;

‎packages/combo-box/src/styles/vaadin-combo-box-core-styles.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 - 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 comboBoxStyles = css`
9+
:host([opened]) {
10+
pointer-events: auto;
11+
}
12+
`;

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 - 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 comboBoxOverlayStyles = css`
10+
:host {
11+
--vaadin-item-checkmark-display: block;
12+
}
13+
14+
[part='overlay'] {
15+
position: relative;
16+
width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
17+
}
18+
19+
[part='loader'] {
20+
animation: spin 1s linear infinite;
21+
border: 2px solid;
22+
--_spinner-color: var(--vaadin-combo-box-spinner-color, var(--_vaadin-color-strong));
23+
border-color: var(--_spinner-color) var(--_spinner-color) hsl(from var(--_spinner-color) h s l / 0.2)
24+
hsl(from var(--_spinner-color) h s l / 0.2);
25+
border-radius: var(--_vaadin-radius-full);
26+
box-sizing: border-box;
27+
display: none;
28+
height: var(--vaadin-icon-size, 1lh);
29+
inset: calc(var(--vaadin-item-overlay-padding, 4px) + 2px);
30+
inset-block-end: auto;
31+
inset-inline-start: auto;
32+
pointer-events: none;
33+
position: absolute;
34+
width: var(--vaadin-icon-size, 1lh);
35+
}
36+
37+
[part='content'] {
38+
display: flex;
39+
flex-direction: column;
40+
height: 100%;
41+
}
42+
43+
:host([loading]) [part='loader'] {
44+
display: block;
45+
}
46+
47+
:host([loading]) [part='content'] {
48+
--_items-min-height: calc(var(--vaadin-icon-size, 1lh) + 4px);
49+
}
50+
51+
@keyframes spin {
52+
to {
53+
rotate: 1turn;
54+
}
55+
}
56+
57+
@media (forced-colors: active) {
58+
[part='loader'] {
59+
forced-color-adjust: none;
60+
--vaadin-combo-box-spinner-color: CanvasText;
61+
}
62+
}
63+
`;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 - 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 comboBoxOverlayStyles = css`
9+
#overlay {
10+
width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
11+
}
12+
13+
[part='content'] {
14+
display: flex;
15+
flex-direction: column;
16+
height: 100%;
17+
}
18+
`;

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 - 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 comboBoxScrollerStyles = css`
9+
:host {
10+
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
11+
box-shadow: 0 0 0 white;
12+
display: block;
13+
min-height: 1px;
14+
overflow: auto;
15+
/* Fixes item background from getting on top of scrollbars on Safari */
16+
transform: translate3d(0, 0, 0);
17+
}
18+
19+
#selector {
20+
border: var(--vaadin-item-overlay-padding, 4px) solid transparent;
21+
position: relative;
22+
forced-color-adjust: none;
23+
min-height: var(--_items-min-height, auto);
24+
}
25+
26+
#selector > * {
27+
forced-color-adjust: auto;
28+
}
29+
`;

‎packages/combo-box/src/styles/vaadin-combo-box-scroller-core-styles.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2015 - 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 comboBoxScrollerStyles = css`
9+
:host {
10+
display: block;
11+
min-height: 1px;
12+
overflow: auto;
13+
14+
/* Fixes item background from getting on top of scrollbars on Safari */
15+
transform: translate3d(0, 0, 0);
16+
17+
/* Enable momentum scrolling on iOS */
18+
-webkit-overflow-scrolling: touch;
19+
20+
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
21+
box-shadow: 0 0 0 white;
22+
}
23+
24+
#selector {
25+
border-width: var(--_vaadin-combo-box-items-container-border-width);
26+
border-style: var(--_vaadin-combo-box-items-container-border-style);
27+
border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
28+
position: relative;
29+
}
30+
`;

0 commit comments

Comments
 (0)