feat: port grid Lumo styles to CSS files #9520
Conversation
vursen
force-pushed
the
port-lumo-styles-to-css-files_grid
branch
2 times, most recently
from
d83978b to
40e8fb6
Compare
There was a problem hiding this comment.
For some reason, when item names start with a capital "V" letter, the tests fail with a strange visual difference:
This only happens when running the tests with CSS files and is consistently reproducible both locally and on Sauce Labs. After hours of debugging, I'm still unable to see the cause. Changing Very to A very or simply to very works around the problem. It also doesn't appear to be related to any animation or transition
| cursor: pointer; | ||
| cursor: default; |
There was a problem hiding this comment.
| cursor: pointer; | |
| cursor: default; | |
| cursor: default; |
See:
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
|
|
||
| :host([dir='rtl']) { |
There was a problem hiding this comment.
Could be moved to /* RTL specific styles */
There was a problem hiding this comment.
I'm getting some rendering differences when testing with the dev page.
Old:
New:
Differences:
- Different size for the selection column
- Sorter icons seem broken
There was a problem hiding this comment.
Sorter icons seem broken
Confirmed: a font containing the sorter icons was missing from the CSS files. The visual tests didn't catch this, likely because the difference was too subtle to trigger a failure. I've pushed a fix.
Different size for the selection column
This is due to the asynchronous loading of Lumo CSS files – recalculateColumnWidths is done before the styles are fully loaded. I'll check if this also happens when adding Lumo through a <link> tag in the <head>
There was a problem hiding this comment.
I'll check if this also happens when adding Lumo through a tag in the
No, the issue no longer occurs if I replace
import '@vaadin/vaadin-lumo-styles/lumo.css'with
<link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />added to the <head>.
vursen
force-pushed
the
port-lumo-styles-to-css-files_grid
branch
from
40e8fb6 to
460fc1d
Compare
Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
|
Description
Part of #9082
Type of change