Skip to content

Commit 83c2fc1

Browse files
vursenvursen
authored
feat: port tooltip Lumo styles to CSS files (#9349)
1 parent 7728221 commit 83c2fc1

File tree

8 files changed

+74
-6
lines changed

8 files changed

+74
-6
lines changed

‎dev/tooltip.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<script type="module" src="./common.js"></script>
99
<script type="module">
1010
import '@vaadin/tooltip';
11+
import '@vaadin/vaadin-lumo-styles/lumo.css';
1112
</script>
1213
</head>
1314
<body>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
99
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
1010
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
1111
import { PopoverOverlayMixin } from '@vaadin/popover/src/vaadin-popover-overlay-mixin.js';
12+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
1213
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1314
import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
1415

@@ -22,7 +23,7 @@ import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
2223
* @mixes PopoverOverlayMixin
2324
* @private
2425
*/
25-
class TooltipOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
26+
class TooltipOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
2627
static get is() {
2728
return 'vaadin-tooltip-overlay';
2829
}

‎packages/tooltip/src/vaadin-tooltip.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
99
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
1010
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
1111
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
12+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
1213
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
1314
import { TooltipMixin } from './vaadin-tooltip-mixin.js';
1415

@@ -56,7 +57,7 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
5657
* @mixes ThemePropertyMixin
5758
* @mixes TooltipMixin
5859
*/
59-
class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement)))) {
60+
class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
6061
static get is() {
6162
return 'vaadin-tooltip';
6263
}

‎packages/tooltip/test/visual/lumo/tooltip.test.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { fire, fixtureSync, nextUpdate } from '@vaadin/testing-helpers';
22
import { visualDiff } from '@web/test-runner-visual-regression';
3-
import '@vaadin/vaadin-lumo-styles/test/autoload.js';
3+
import '@vaadin/vaadin-lumo-styles/global.css';
4+
import '@vaadin/vaadin-lumo-styles/props.css';
5+
import '@vaadin/vaadin-lumo-styles/components/tooltip.css';
46
import '../../not-animated-styles.js';
5-
import '../../../theme/lumo/vaadin-tooltip.js';
6-
import { Tooltip } from '../../../src/vaadin-tooltip.js';
7+
import { Tooltip } from '../../../vaadin-tooltip.js';
78

89
describe('tooltip', () => {
910
let div, target, element;

‎packages/vaadin-lumo-styles/components.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,4 @@
3030
@import './components/text-area.css';
3131
@import './components/text-field.css';
3232
@import './components/time-picker.css';
33+
@import './components/tooltip.css';

‎packages/vaadin-lumo-styles/components/tooltip.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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 '../src/mixins/base-layer-reset.css' vaadin-tooltip-overlay;
7+
@import '../src/mixins/overlay.css' vaadin-tooltip-overlay;
8+
@import '../src/components/tooltip-overlay.css' vaadin-tooltip-overlay;
9+
10+
html {
11+
--vaadin-tooltip-overlay-css-inject: 1;
12+
}

‎packages/vaadin-lumo-styles/src/components/tooltip-overlay.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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+
7+
:host {
8+
--vaadin-tooltip-offset-top: var(--lumo-space-xs);
9+
--vaadin-tooltip-offset-bottom: var(--lumo-space-xs);
10+
--vaadin-tooltip-offset-start: var(--lumo-space-xs);
11+
--vaadin-tooltip-offset-end: var(--lumo-space-xs);
12+
}
13+
14+
[part='overlay'] {
15+
max-width: 40ch;
16+
background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
17+
color: var(--lumo-body-text-color);
18+
font-size: var(--lumo-font-size-xs);
19+
line-height: var(--lumo-line-height-s);
20+
}
21+
22+
[part='content'] {
23+
white-space: pre-wrap;
24+
padding: var(--lumo-space-xs) var(--lumo-space-s);
25+
}
26+
27+
:host([position^='top'][top-aligned]) [part='overlay'],
28+
:host([position^='bottom'][top-aligned]) [part='overlay'] {
29+
margin-top: var(--vaadin-tooltip-offset-top, 0);
30+
}
31+
32+
:host([position^='top'][bottom-aligned]) [part='overlay'],
33+
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
34+
margin-bottom: var(--vaadin-tooltip-offset-bottom, 0);
35+
}
36+
37+
:host([position^='start'][start-aligned]) [part='overlay'],
38+
:host([position^='end'][start-aligned]) [part='overlay'] {
39+
margin-inline-start: var(--vaadin-tooltip-offset-start, 0);
40+
}
41+
42+
:host([position^='start'][end-aligned]) [part='overlay'],
43+
:host([position^='end'][end-aligned]) [part='overlay'] {
44+
margin-inline-end: var(--vaadin-tooltip-offset-end, 0);
45+
}
46+
47+
@media (forced-colors: active) {
48+
[part='overlay'] {
49+
outline: 1px dashed;
50+
}
51+
}

‎wtr-utils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const getAllPortedLumoPackages = () => {
104104
.filter(
105105
(dir) =>
106106
fs.statSync(`packages/${dir}`).isDirectory() &&
107-
fs.existsSync(`packages/vaadin-lumo-styles/src/components/${dir}.css`),
107+
fs.existsSync(`packages/vaadin-lumo-styles/components/${dir}.css`),
108108
);
109109
};
110110

0 commit comments

Comments
 (0)