Skip to content

Commit 51134af

Browse files
vursenvursen
authored
feat: port list-box and item Lumo styles to CSS files (#9288)
1 parent ee8673b commit 51134af

File tree

11 files changed

+162
-7
lines changed

11 files changed

+162
-7
lines changed

‎dev/list-box.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
import '@vaadin/list-box';
1313
import '@vaadin/item';
1414
import '@vaadin/tooltip';
15+
import '@vaadin/vaadin-lumo-styles/lumo.css';
1516
</script>
1617

1718
<vaadin-list-box multiple selected-values="[0]" style="width: 200px">

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
1011
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1112
import { itemStyles } from './vaadin-item-core-styles.js';
1213
import { ItemMixin } from './vaadin-item-mixin.js';
@@ -55,7 +56,7 @@ import { ItemMixin } from './vaadin-item-mixin.js';
5556
* @mixes ThemableMixin
5657
* @mixes DirMixin
5758
*/
58-
class Item extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
59+
class Item extends ItemMixin(ThemableMixin(DirMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
5960
static get is() {
6061
return 'vaadin-item';
6162
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
1+
import { fixtureSync } from '@vaadin/testing-helpers';
22
import { visualDiff } from '@web/test-runner-visual-regression';
3-
import '../../../theme/lumo/vaadin-item.js';
3+
import '@vaadin/vaadin-lumo-styles/props.css';
4+
import '@vaadin/vaadin-lumo-styles/components/item.css';
5+
import '../../../vaadin-item.js';
46

57
describe('item', () => {
68
let div, element;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
88
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
99
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
1010
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
11+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
1112
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1213
import { listBoxStyles } from './vaadin-list-box-core-styles.js';
1314
import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
@@ -44,7 +45,7 @@ import { MultiSelectListMixin } from './vaadin-multi-select-list-mixin.js';
4445
* @mixes ThemableMixin
4546
* @mixes ElementMixin
4647
*/
47-
class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(PolylitMixin(LitElement)))) {
48+
class ListBox extends ElementMixin(MultiSelectListMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
4849
static get is() {
4950
return 'vaadin-list-box';
5051
}

‎packages/list-box/test/visual/lumo/list-box.test.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
1+
import { fixtureSync } from '@vaadin/testing-helpers';
22
import { visualDiff } from '@web/test-runner-visual-regression';
3-
import '@vaadin/item/theme/lumo/vaadin-item.js';
4-
import '../../../theme/lumo/vaadin-list-box.js';
3+
import '@vaadin/vaadin-lumo-styles/props.css';
4+
import '@vaadin/vaadin-lumo-styles/components/item.css';
5+
import '@vaadin/vaadin-lumo-styles/components/list-box.css';
6+
import '@vaadin/item';
7+
import '../../../vaadin-list-box.js';
58

69
describe('list-box', () => {
710
let div, element;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@
55
*/
66
@import './components/button.css';
77
@import './components/icon.css';
8+
@import './components/item.css';
9+
@import './components/list-box.css';

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

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

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

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

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

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
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+
:host {
7+
display: flex;
8+
align-items: center;
9+
box-sizing: border-box;
10+
font-family: var(--lumo-font-family);
11+
font-size: var(--lumo-font-size-m);
12+
line-height: var(--lumo-line-height-xs);
13+
padding: 0.5em calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4) 0.5em
14+
var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
15+
min-height: var(--lumo-size-m);
16+
outline: none;
17+
border-radius: var(--lumo-border-radius-m);
18+
cursor: var(--lumo-clickable-cursor);
19+
-webkit-font-smoothing: antialiased;
20+
-moz-osx-font-smoothing: grayscale;
21+
-webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
22+
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
23+
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
24+
--_selection-color-text: var(--vaadin-selection-color-text, var(--lumo-primary-text-color));
25+
}
26+
27+
:host([hidden]) {
28+
display: none !important;
29+
}
30+
31+
/* Checkmark */
32+
[part='checkmark']::before {
33+
display: var(--_lumo-item-selected-icon-display, none);
34+
content: var(--lumo-icons-checkmark);
35+
font-family: lumo-icons;
36+
font-size: var(--lumo-icon-size-m);
37+
line-height: 1;
38+
font-weight: normal;
39+
width: 1em;
40+
height: 1em;
41+
margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
42+
color: var(--_selection-color-text);
43+
flex: none;
44+
opacity: 0;
45+
transition:
46+
transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2),
47+
opacity 0.1s;
48+
}
49+
50+
:host([selected]) [part='checkmark']::before {
51+
opacity: 1;
52+
}
53+
54+
:host([active]:not([selected])) [part='checkmark']::before {
55+
transform: scale(0.8);
56+
opacity: 0;
57+
transition-duration: 0s;
58+
}
59+
60+
[part='content'] {
61+
flex: auto;
62+
}
63+
64+
/* Disabled */
65+
:host([disabled]) {
66+
color: var(--lumo-disabled-text-color);
67+
cursor: default;
68+
pointer-events: none;
69+
}
70+
71+
/* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
72+
@media (any-hover: hover) {
73+
:host(:hover:not([disabled])) {
74+
background-color: var(--lumo-primary-color-10pct);
75+
}
76+
}
77+
78+
:host([focus-ring]:not([disabled])) {
79+
box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
80+
}
81+
82+
/* RTL specific styles */
83+
:host([dir='rtl']) {
84+
padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
85+
padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
86+
}
87+
88+
/* Slotted icons */
89+
:host ::slotted(vaadin-icon) {
90+
width: var(--lumo-icon-size-m);
91+
height: var(--lumo-icon-size-m);
92+
}

‎packages/vaadin-lumo-styles/src/components/list-box.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
:host {
7+
display: flex;
8+
-webkit-tap-highlight-color: transparent;
9+
--_lumo-item-selected-icon-display: var(--_lumo-list-box-item-selected-icon-display, block);
10+
}
11+
12+
:host([hidden]) {
13+
display: none !important;
14+
}
15+
16+
[part='items'] {
17+
height: 100%;
18+
width: 100%;
19+
overflow-y: auto;
20+
-webkit-overflow-scrolling: touch;
21+
}
22+
23+
/* Dividers */
24+
[part='items'] ::slotted(hr) {
25+
height: 1px;
26+
border: 0;
27+
padding: 0;
28+
margin: var(--lumo-space-s) var(--lumo-border-radius-m);
29+
background-color: var(--lumo-contrast-10pct);
30+
}

0 commit comments

Comments
 (0)