Skip to content

refactor!: Base time picker styles #8951

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: base-combo-box
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 60 additions & 16 deletions dev/time-picker.html
Original file line number Diff line number Diff line change
@@ -1,19 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time picker</title>
<script type="module" src="./common.js"></script>
<script type="module">
import '@vaadin/time-picker';
import '@vaadin/tooltip';
</script>
</head>
<body>
<vaadin-time-picker value="15:00" clear-button-visible>
<vaadin-tooltip slot="tooltip" text="Evening times are preferred"></vaadin-tooltip>
</vaadin-time-picker>
</body>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time Picker</title>
<script type="module" src="./common.js"></script>

<script type="module">
import '@vaadin/time-picker/src/vaadin-lit-time-picker.js';
import '@vaadin/icon/src/vaadin-lit-icon.js';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
import '@vaadin/icons';
</script>
</head>

<body>
<section>
<h2>Plain</h2>
<vaadin-time-picker value="12:00"></vaadin-time-picker>
<vaadin-time-picker placeholder="Placeholder"></vaadin-time-picker>
</section>

<section>
<h2>Bells & Whistles</h2>
<vaadin-time-picker
label="Label"
helper-text="Description for this field."
value="12:00"
clear-button-visible
error-message="You need to write something in this field."
required>
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
</vaadin-time-picker>
</section>

<section>
<h2>States</h2>
<vaadin-time-picker
label="Read-only"
helper-text="Description for this field."
value="12:00"
clear-button-visible
error-message="You need to write something in this field."
required
readonly>
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
</vaadin-time-picker>

<vaadin-time-picker
label="Disabled"
helper-text="Description for this field."
value="12:00"
clear-button-visible
error-message="You need to write something in this field."
required
disabled>
<vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
</vaadin-time-picker>
</section>
</body>
</html>
1 change: 1 addition & 0 deletions packages/component-base/src/style-props.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ addGlobalThemeStyles(

--_vaadin-icon-checkmark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>');
--_vaadin-icon-chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>');
--_vaadin-icon-clock: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>');
--_vaadin-icon-cross: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>');
--_vaadin-icon-warn: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>');
}
Expand Down
13 changes: 3 additions & 10 deletions packages/time-picker/src/vaadin-lit-time-picker-item.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
* Copyright (c) 2018 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { css, html, LitElement } from 'lit';
import { html, LitElement } from 'lit';
import { ComboBoxItemMixin } from '@vaadin/combo-box/src/vaadin-combo-box-item-mixin.js';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
import { itemStyles } from '@vaadin/item/src/vaadin-item-styles.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

/**
Expand All @@ -25,15 +26,7 @@ export class TimePickerItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(Pol
}

static get styles() {
return css`
:host {
display: block;
}

:host([hidden]) {
display: none !important;
}
`;
return itemStyles;
}

/** @protected */
Expand Down
14 changes: 4 additions & 10 deletions packages/time-picker/src/vaadin-lit-time-picker-scroller.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,18 @@ export class TimePickerScroller extends ComboBoxScrollerMixin(PolylitMixin(LitEl
static get styles() {
return css`
:host {
--vaadin-item-checkmark-display: block;
/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
box-shadow: 0 0 0 white;
display: block;
min-height: 1px;
overflow: auto;

/* Fixes item background from getting on top of scrollbars on Safari */
transform: translate3d(0, 0, 0);

/* Enable momentum scrolling on iOS */
-webkit-overflow-scrolling: touch;

/* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
box-shadow: 0 0 0 white;
}

#selector {
border-width: var(--_vaadin-time-picker-items-container-border-width);
border-style: var(--_vaadin-time-picker-items-container-border-style);
border-color: var(--_vaadin-time-picker-items-container-border-color, transparent);
border: var(--vaadin-item-overlay-padding, 4px) solid transparent;
position: relative;
}
`;
Expand Down
12 changes: 8 additions & 4 deletions packages/time-picker/src/vaadin-lit-time-picker.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin
return [
inputFieldShared,
css`
[part='toggle-button'] {
cursor: default;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this shouldn't be needed since we don't define cursor: pointer elsewhere (the old styles that are removed in this PR seem to be a leftover from the very early time-picker implementation).

background: var(--_vaadin-color-subtle);
height: var(--vaadin-icon-size, 1lh);
mask-image: var(--_vaadin-icon-clock);
width: var(--vaadin-icon-size, 1lh);
}
/* See https://github.com/vaadin/vaadin-time-picker/issues/145 */
:host([dir='rtl']) [part='input-field'] {
direction: ltr;
Expand All @@ -41,10 +49,6 @@ class TimePicker extends TimePickerMixin(ThemableMixin(ElementMixin(PolylitMixin
direction: rtl;
text-align: left;
}
[part~='toggle-button'] {
cursor: pointer;
}
`,
];
}
Expand Down
Loading