Skip to content

Commit 23e86bd

Browse files
anezthesjouni
anezthes
and
jouni
authored
experiment: add upload base styles and visual tests (#9691)
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
1 parent 1a04a94 commit 23e86bd

32 files changed

+473
-17
lines changed

‎dev/upload.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@
5555

5656
<body>
5757
<vaadin-upload target="/api/fileupload"></vaadin-upload>
58-
59-
<br />
60-
58+
<hr style="margin-block: 24px" />
59+
<vaadin-upload nodrop target="/api/fileupload"></vaadin-upload>
60+
<hr style="margin-block: 24px" />
6161
<vaadin-radio-group label="Next file upload" theme="vertical" id="next-upload">
6262
<vaadin-radio-button value="successful" checked label="Successful"></vaadin-radio-button>
6363
<vaadin-radio-button value="rejected" label="Rejected"></vaadin-radio-button>

‎packages/component-base/src/style-props.js‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/upload/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/upload/src/styles/vaadin-upload-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) 2016 - 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 uploadStyles: CSSResult;

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2016 - 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 uploadStyles = css`
10+
:host {
11+
background: var(--vaadin-upload-background, transparent);
12+
border: var(
13+
--vaadin-upload-border,
14+
var(--vaadin-upload-border-width, 1px) solid var(--vaadin-upload-border-color, var(--vaadin-border-color))
15+
);
16+
border-radius: var(--vaadin-upload-border-radius, var(--vaadin-radius-m));
17+
box-sizing: border-box;
18+
display: flex;
19+
flex-direction: column;
20+
padding: var(--vaadin-upload-padding, var(--vaadin-padding));
21+
position: relative;
22+
}
23+
24+
:host([dragover-valid]) {
25+
--vaadin-upload-background: var(--vaadin-background-container);
26+
--vaadin-upload-border: 1px dashed var(--vaadin-color);
27+
);
28+
}
29+
30+
:host([hidden]) {
31+
display: none !important;
32+
}
33+
34+
[hidden] {
35+
display: none !important;
36+
}
37+
38+
[part='primary-buttons'] {
39+
align-items: center;
40+
display: flex;
41+
gap: var(--vaadin-gap-container-inline);
42+
}
43+
44+
[part='drop-label'] {
45+
align-items: center;
46+
color: var(--vaadin-upload-drop-label-color, var(--vaadin-color));
47+
display: flex;
48+
font-size: var(--vaadin-upload-drop-label-font-size, inherit);
49+
font-weight: var(--vaadin-upload-drop-label-font-weight, inherit);
50+
gap: var(--vaadin-upload-drop-label-gap, var(--vaadin-gap-container-inline));
51+
line-height: var(--vaadin-upload-drop-label-line-height, inherit);
52+
}
53+
54+
:host([nodrop]) {
55+
--vaadin-upload-border: none;
56+
--vaadin-upload-border-radius: 0;
57+
--vaadin-upload-padding: 0;
58+
}
59+
60+
`;

‎packages/upload/src/styles/vaadin-upload-core-styles.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* @license
3-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
3+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import type { CSSResult } from 'lit';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* @license
3-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
3+
* Copyright (c) 2016 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
import { css } from 'lit';

‎packages/upload/src/styles/vaadin-upload-file-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) 2016 - 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 uploadFileStyles: CSSResult;

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

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2016 - 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 uploadFileStyles = css`
10+
:host {
11+
align-items: center;
12+
display: grid;
13+
gap: var(--vaadin-upload-file-gap, var(--vaadin-gap-container-block));
14+
grid-template-columns: var(--vaadin-icon-size, 1lh) minmax(0, 1fr) auto;
15+
padding: var(--vaadin-upload-file-padding, var(--vaadin-padding));
16+
}
17+
18+
[hidden] {
19+
display: none;
20+
}
21+
22+
[part='row'] {
23+
display: contents;
24+
}
25+
26+
[part='info'] {
27+
display: contents;
28+
}
29+
30+
[part='done-icon']:not([hidden]),
31+
[part='warning-icon']:not([hidden]) {
32+
display: flex;
33+
}
34+
35+
[part='done-icon']::before,
36+
[part='warning-icon']::before {
37+
content: '';
38+
display: inline-block;
39+
flex: none;
40+
height: var(--vaadin-icon-size, 1lh);
41+
width: var(--vaadin-icon-size, 1lh);
42+
}
43+
44+
[part='done-icon']::before {
45+
background: var(--vaadin-upload-file-done-color, currentColor);
46+
mask-image: var(--_vaadin-icon-checkmark);
47+
}
48+
49+
[part='warning-icon']::before {
50+
background: var(--vaadin-upload-file-warning-color, currentColor);
51+
mask-image: var(--_vaadin-icon-warn);
52+
}
53+
54+
[part='meta'] {
55+
grid-column: 2;
56+
}
57+
58+
[part='name'] {
59+
color: var(--vaadin-upload-file-name-color, var(--vaadin-color));
60+
font-size: var(--vaadin-upload-file-name-font-size, inherit);
61+
font-weight: var(--vaadin-upload-file-name-font-weight, inherit);
62+
line-height: var(--vaadin-upload-file-name-line-height, inherit);
63+
overflow: hidden;
64+
text-overflow: ellipsis;
65+
}
66+
67+
[part='status'] {
68+
color: var(--vaadin-upload-file-status-color, var(--vaadin-color-subtle));
69+
font-size: var(--vaadin-upload-file-status-font-size, inherit);
70+
font-weight: var(--vaadin-upload-file-status-font-weight, inherit);
71+
line-height: var(--vaadin-upload-file-status-line-height, inherit);
72+
}
73+
74+
[part='error'] {
75+
color: var(--vaadin-upload-file-error-color, var(--vaadin-color));
76+
font-size: var(--vaadin-upload-file-error-font-size, inherit);
77+
font-weight: var(--vaadin-upload-file-error-font-weight, inherit);
78+
line-height: var(--vaadin-upload-file-error-line-height, inherit);
79+
}
80+
81+
button {
82+
background: var(--vaadin-upload-file-button-background, transparent);
83+
border: var(
84+
--vaadin-upload-file-button-border,
85+
var(--vaadin-upload-file-button-border-width, 1px) solid
86+
var(--vaadin-upload-file-button-border-color, transparent)
87+
);
88+
border-radius: var(--vaadin-upload-file-button-border-radius, var(--vaadin-radius-m));
89+
color: var(--vaadin-upload-file-button-text-color, var(--vaadin-color));
90+
cursor: var(--vaadin-clickable-cursor);
91+
flex-shrink: 0;
92+
font-family: var(--vaadin-upload-file-button-font-family, inherit);
93+
font-size: var(--vaadin-upload-file-button-font-size, inherit);
94+
font-weight: var(--vaadin-upload-file-button-font-weight, 500);
95+
height: var(--vaadin-upload-file-button-height, auto);
96+
line-height: var(--vaadin-upload-file-button-line-height, inherit);
97+
padding: var(--vaadin-upload-file-button-padding, var(--vaadin-padding-container));
98+
}
99+
100+
[part='start-button']::before,
101+
[part='retry-button']::before,
102+
[part='remove-button']::before {
103+
background: currentColor;
104+
content: '';
105+
display: block;
106+
height: var(--vaadin-icon-size, 1lh);
107+
width: var(--vaadin-icon-size, 1lh);
108+
}
109+
110+
[part='start-button']::before {
111+
mask-image: var(--_vaadin-icon-play);
112+
}
113+
114+
[part='retry-button']::before {
115+
mask-image: var(--_vaadin-icon-refresh);
116+
}
117+
118+
[part='remove-button']::before {
119+
mask-image: var(--_vaadin-icon-cross);
120+
}
121+
122+
::slotted([slot='progress']) {
123+
grid-column: 2 / -1;
124+
width: auto;
125+
}
126+
127+
:host([complete]) ::slotted([slot='progress']),
128+
:host([error]) ::slotted([slot='progress']) {
129+
display: none;
130+
}
131+
132+
@media (forced-colors: active) {
133+
:is([part$='icon'], [part$='button'])::before {
134+
background: CanvasText;
135+
}
136+
}
137+
`;

‎packages/upload/src/styles/vaadin-upload-file-list-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) 2016 - 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 uploadFileListStyles: CSSResult;

0 commit comments

Comments
 (0)