feat: port upload Lumo styles to CSS files #9483
Conversation
vursen
force-pushed
the
port-lumo-styles-to-css-files_upload
branch
2 times, most recently
from
7ca2ac6 to
951c692
Compare
vursen
force-pushed
the
port-lumo-styles-to-css-files_progress-bar
branch
from
9b13e49 to
b95fc10
Compare
vursen
force-pushed
the
port-lumo-styles-to-css-files_upload
branch
from
38ea23f to
cce7084
Compare
|
There was a problem hiding this comment.
Pull Request Overview
This PR ports the Lumo upload component’s styles into standalone CSS files, injects them at runtime in the upload elements, and updates imports in the theme and visual tests.
- Extract separate CSS modules for upload, upload-icon, upload-file, and upload-file-list under
vaadin-lumo-styles. - Enhance upload element classes with
CSSInjectionMixinto apply the new CSS modules. - Update the Lumo theme entry, visual regression test imports, and demo page to include the new CSS.
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/vaadin-lumo-styles/src/components/upload.css | New host-level styles for <vaadin-upload> |
| packages/vaadin-lumo-styles/src/components/upload-icon.css | New icon pseudo-element styles |
| packages/vaadin-lumo-styles/src/components/upload-file.css | New styles for individual upload-file items |
| packages/vaadin-lumo-styles/src/components/upload-file-list.css | New list-level styles for upload-file-list |
| packages/vaadin-lumo-styles/components/upload.css | Theme entry imports for the new CSS modules |
| packages/upload/src/vaadin-upload.js | Added CSSInjectionMixin to <vaadin-upload> |
| packages/upload/test/visual/lumo/upload.test.js | Updated test imports to load the new Lumo upload CSS |
Comments suppressed due to low confidence (1)
packages/upload/test/visual/lumo/upload.test.js:5
- Visual tests currently cover the main upload surface; consider adding snapshots or scenarios that exercise the upload-file-list and individual upload-file states (e.g., error, complete) to ensure the new styles are rendered correctly.
import '@vaadin/vaadin-lumo-styles/components/upload.css';
| } | ||
|
|
||
| [hidden] { | ||
| display: none; |
There was a problem hiding this comment.
Consider adding !important to the [hidden] rule (e.g. display: none !important;) to match the pattern used in other components and ensure it always overrides.
| display: none; | |
| display: none !important; |
Copilot uses AI. Check for mistakes.
| } | ||
|
|
||
| [part='status'], | ||
| [part='error'] { |
There was a problem hiding this comment.
There are two separate [part='error'] blocks (this one at line 43 and another at line 123) with different colors. Consider merging them into one rule or reorganizing to avoid duplication.
Copilot uses AI. Check for mistakes.
| [part$='icon'] { | ||
| margin-right: var(--lumo-space-xs); | ||
| font-size: var(--lumo-icon-size-m); | ||
| font-family: 'lumo-icons'; |
There was a problem hiding this comment.
[nitpick] The font-family value is quoted here but unquoted in upload-icon.css. For consistency, unify quoting across your CSS modules.
Copilot uses AI. Check for mistakes.
Description
Part of #9082
Type of change