Skip to content

Commit cce7084

Browse files
vursenvursen
committed
feat: port upload Lumo styles to CSS files
1 parent b95fc10 commit cce7084

File tree

12 files changed

+260
-6
lines changed

12 files changed

+260
-6
lines changed

‎dev/upload.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<script type="module">
1111
import '@vaadin/radio-group';
1212
import '@vaadin/upload';
13+
import '@vaadin/vaadin-lumo-styles/lumo.css';
1314
import { createFiles, xhrCreator } from '@vaadin/upload/test/helpers.js';
1415

1516
const nextUpload = document.querySelector('#next-upload');

‎packages/upload/src/vaadin-upload-file-list.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import './vaadin-upload-file.js';
77
import { html, LitElement } from 'lit';
88
import { defineCustomElement } from '@vaadin/component-base/src/define.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 { uploadFileListStyles } from './styles/vaadin-upload-file-list-core-styles.js';
1213
import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
@@ -20,7 +21,7 @@ import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
2021
* @mixes UploadFileListMixin
2122
* @private
2223
*/
23-
class UploadFileList extends UploadFileListMixin(ThemableMixin(PolylitMixin(LitElement))) {
24+
class UploadFileList extends UploadFileListMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement)))) {
2425
static get is() {
2526
return 'vaadin-upload-file-list';
2627
}

‎packages/upload/src/vaadin-upload-file.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import './vaadin-upload-icons.js';
88
import { html, LitElement, nothing } from 'lit';
99
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
1010
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.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 { uploadFileStyles } from './styles/vaadin-upload-file-core-styles.js';
1314
import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
@@ -53,7 +54,7 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
5354
* @mixes UploadFileMixin
5455
* @mixes ThemableMixin
5556
*/
56-
class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LitElement))) {
57+
class UploadFile extends UploadFileMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement)))) {
5758
static get is() {
5859
return 'vaadin-upload-file';
5960
}

‎packages/upload/src/vaadin-upload-icon.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66
import { css, html, LitElement } from 'lit';
77
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
89
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
910

1011
/**
@@ -14,7 +15,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
1415
* @extends HTMLElement
1516
* @private
1617
*/
17-
class UploadIcon extends ThemableMixin(LitElement) {
18+
class UploadIcon extends ThemableMixin(CSSInjectionMixin(LitElement)) {
1819
static get is() {
1920
return 'vaadin-upload-icon';
2021
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
1212
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
1313
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
1414
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
15+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
1516
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1617
import { uploadStyles } from './styles/vaadin-upload-core-styles.js';
1718
import { UploadMixin } from './vaadin-upload-mixin.js';
@@ -65,7 +66,7 @@ import { UploadMixin } from './vaadin-upload-mixin.js';
6566
* @mixes ElementMixin
6667
* @mixes UploadMixin
6768
*/
68-
class Upload extends UploadMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
69+
class Upload extends UploadMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
6970
static get is() {
7071
return 'vaadin-upload';
7172
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { sendKeys } from '@vaadin/test-runner-commands';
2-
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
2+
import { fixtureSync } from '@vaadin/testing-helpers';
33
import { visualDiff } from '@web/test-runner-visual-regression';
4-
import '../../../theme/lumo/vaadin-upload.js';
4+
import '@vaadin/vaadin-lumo-styles/props.css';
5+
import '@vaadin/vaadin-lumo-styles/components/upload.css';
6+
import '../../../vaadin-upload.js';
57

68
describe('upload', () => {
79
let div, element;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,5 @@
4242
@import './components/text-field.css';
4343
@import './components/time-picker.css';
4444
@import './components/tooltip.css';
45+
@import './components/upload.css';
4546
@import './components/vertical-layout.css';

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
@import './button.css';
7+
@import './progress-bar.css';
8+
9+
@import '../src/mixins/base-layer-reset.css' vaadin-upload;
10+
@import '../src/components/upload.css' vaadin-upload;
11+
12+
@import '../src/mixins/base-layer-reset.css' vaadin-upload-icon;
13+
@import '../src/components/upload-icon.css' vaadin-upload-icon;
14+
15+
@import '../src/mixins/base-layer-reset.css' vaadin-upload-file;
16+
@import '../src/mixins/field-button.css' vaadin-upload-file;
17+
@import '../src/components/upload-file.css' vaadin-upload-file;
18+
19+
@import '../src/mixins/base-layer-reset.css' vaadin-upload-file-list;
20+
@import '../src/components/upload-file-list.css' vaadin-upload-file-list;
21+
22+
html {
23+
--vaadin-upload-css-inject: 1;
24+
--vaadin-upload-icon-css-inject: 1;
25+
--vaadin-upload-file-css-inject: 1;
26+
--vaadin-upload-file-list-css-inject: 1;
27+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 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: block;
8+
}
9+
10+
:host([hidden]) {
11+
display: none !important;
12+
}
13+
14+
[part='list'] {
15+
padding: 0;
16+
margin: 0;
17+
list-style-type: none;
18+
}
19+
20+
::slotted(li:not(:first-of-type)) {
21+
border-top: 1px solid var(--lumo-contrast-10pct);
22+
}

‎packages/vaadin-lumo-styles/src/components/upload-file.css

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 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: block;
8+
padding: var(--lumo-space-s) 0;
9+
outline: none;
10+
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
11+
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
12+
}
13+
14+
[hidden] {
15+
display: none;
16+
}
17+
18+
[part='row'] {
19+
list-style-type: none;
20+
display: flex;
21+
align-items: baseline;
22+
justify-content: space-between;
23+
}
24+
25+
button {
26+
background: transparent;
27+
padding: 0;
28+
border: none;
29+
box-shadow: none;
30+
}
31+
32+
:host([complete]) ::slotted([slot='progress']),
33+
:host([error]) ::slotted([slot='progress']) {
34+
display: none !important;
35+
}
36+
37+
:host([focus-ring]) [part='row'] {
38+
border-radius: var(--lumo-border-radius-s);
39+
box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
40+
}
41+
42+
[part='status'],
43+
[part='error'] {
44+
color: var(--lumo-secondary-text-color);
45+
font-size: var(--lumo-font-size-s);
46+
}
47+
48+
[part='info'] {
49+
display: flex;
50+
align-items: baseline;
51+
flex: auto;
52+
}
53+
54+
[part='meta'] {
55+
width: 0.001px;
56+
flex: 1 1 auto;
57+
}
58+
59+
[part='name'] {
60+
white-space: nowrap;
61+
overflow: hidden;
62+
text-overflow: ellipsis;
63+
}
64+
65+
[part='commands'] {
66+
display: flex;
67+
align-items: baseline;
68+
flex: none;
69+
}
70+
71+
[part$='icon'] {
72+
margin-right: var(--lumo-space-xs);
73+
font-size: var(--lumo-icon-size-m);
74+
font-family: 'lumo-icons';
75+
line-height: 1;
76+
}
77+
78+
/* When both icons are hidden, let us keep space for one */
79+
[part='done-icon'][hidden] + [part='warning-icon'][hidden] {
80+
display: block !important;
81+
visibility: hidden;
82+
}
83+
84+
[part$='button'] {
85+
flex: none;
86+
margin-left: var(--lumo-space-xs);
87+
cursor: var(--lumo-clickable-cursor);
88+
}
89+
90+
[part$='button']:focus {
91+
outline: none;
92+
border-radius: var(--lumo-border-radius-s);
93+
box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
94+
}
95+
96+
[part$='icon']::before,
97+
[part$='button']::before {
98+
vertical-align: -0.25em;
99+
}
100+
101+
[part='done-icon']::before {
102+
content: var(--lumo-icons-checkmark);
103+
color: var(--lumo-primary-text-color);
104+
}
105+
106+
[part='warning-icon']::before {
107+
content: var(--lumo-icons-error);
108+
color: var(--lumo-error-text-color);
109+
}
110+
111+
[part='start-button']::before {
112+
content: var(--lumo-icons-play);
113+
}
114+
115+
[part='retry-button']::before {
116+
content: var(--lumo-icons-reload);
117+
}
118+
119+
[part='remove-button']::before {
120+
content: var(--lumo-icons-cross);
121+
}
122+
123+
[part='error'] {
124+
color: var(--lumo-error-text-color);
125+
}
126+
127+
::slotted([slot='progress']) {
128+
width: auto;
129+
margin-left: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
130+
margin-right: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
131+
}

0 commit comments

Comments
 (0)