Skip to content

Commit 5b47137

Browse files
web-padawanweb-padawan
authored
experiment: add time-picker base styles and visual tests (#9264)
1 parent f3fd555 commit 5b47137

Some content is hidden

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

42 files changed

+343
-72
lines changed

‎dev/time-picker.html‎

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,66 @@
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>Time picker</title>
7+
<title>Time Picker</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/time-picker';
11-
import '@vaadin/tooltip';
14+
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
1215
</script>
1316
</head>
17+
1418
<body>
15-
<vaadin-time-picker value="15:00" clear-button-visible>
16-
<vaadin-tooltip slot="tooltip" text="Evening times are preferred"></vaadin-tooltip>
17-
</vaadin-time-picker>
19+
<section>
20+
<h2>Plain</h2>
21+
<vaadin-time-picker value="12:00"></vaadin-time-picker>
22+
<vaadin-time-picker placeholder="Placeholder"></vaadin-time-picker>
23+
</section>
24+
25+
<section>
26+
<h2>Bells & Whistles</h2>
27+
<vaadin-time-picker
28+
label="Label"
29+
helper-text="Description for this field."
30+
value="12:00"
31+
clear-button-visible
32+
error-message="You need to write something in this field."
33+
required
34+
>
35+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
36+
</vaadin-time-picker>
37+
</section>
38+
39+
<section>
40+
<h2>States</h2>
41+
<vaadin-time-picker
42+
label="Read-only"
43+
helper-text="Description for this field."
44+
value="12:00"
45+
clear-button-visible
46+
error-message="You need to write something in this field."
47+
required
48+
readonly
49+
>
50+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
51+
</vaadin-time-picker>
52+
53+
<vaadin-time-picker
54+
label="Disabled"
55+
helper-text="Description for this field."
56+
value="12:00"
57+
clear-button-visible
58+
error-message="You need to write something in this field."
59+
required
60+
disabled
61+
>
62+
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
63+
</vaadin-time-picker>
64+
</section>
1865
</body>
1966
</html>

‎packages/time-picker/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/time-picker/src/styles/vaadin-time-picker-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) 2018 - 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 timePickerStyles: CSSResult;

‎packages/time-picker/src/styles/vaadin-time-picker-base-styles.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 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 timePickerStyles = css`
10+
[part='toggle-button']::before {
11+
mask-image: var(--_vaadin-icon-clock);
12+
}
13+
14+
/* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
15+
:host([dir='rtl']) [part='input-field'] {
16+
direction: ltr;
17+
}
18+
19+
:host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
20+
direction: rtl;
21+
text-align: left;
22+
}
23+
`;

‎packages/time-picker/src/styles/vaadin-time-picker-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) 2018 - 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 timePickerStyles: CSSResult;

‎packages/time-picker/src/styles/vaadin-time-picker-core-styles.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 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 timePickerStyles = css`
9+
/* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
10+
:host([dir='rtl']) [part='input-field'] {
11+
direction: ltr;
12+
}
13+
14+
:host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
15+
direction: rtl;
16+
text-align: left;
17+
}
18+
19+
[part~='toggle-button'] {
20+
cursor: pointer;
21+
}
22+
`;

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

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

‎packages/time-picker/src/styles/vaadin-time-picker-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) 2018 - 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 timePickerOverlayStyles = css`
9+
#overlay {
10+
width: var(--vaadin-time-picker-overlay-width, var(--_vaadin-time-picker-overlay-default-width, auto));
11+
}
12+
13+
[part='content'] {
14+
display: flex;
15+
flex-direction: column;
16+
height: 100%;
17+
}
18+
`;

‎packages/time-picker/src/styles/vaadin-time-picker-scroller-base-styles.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { comboBoxScrollerStyles } from '@vaadin/combo-box/src/styles/vaadin-combo-box-scroller-base-styles.js';
7+
8+
export { comboBoxScrollerStyles as timePickerScrollerStyles };

‎packages/time-picker/src/styles/vaadin-time-picker-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) 2018 - 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 timePickerScrollerStyles = 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-time-picker-items-container-border-width);
26+
border-style: var(--_vaadin-time-picker-items-container-border-style);
27+
border-color: var(--_vaadin-time-picker-items-container-border-color, transparent);
28+
position: relative;
29+
}
30+
`;

0 commit comments

Comments
 (0)