feat: grid-pro loading editor state #8156
Conversation
tomivirkki
requested review from
jouni,
DiegoCardoso,
sissbruecker,
vursen,
web-padawan and
ugur-vaadin
| /* Loading editor cell styles are used by Flow GridPro */ | ||
| :host([loading-editor]) [part~='focused-cell']::before { | ||
| content: ''; | ||
| position: absolute; | ||
| inset: 0; | ||
| pointer-events: none; | ||
| box-shadow: inset 0 0 0 var(--_focus-ring-width) transparent; | ||
| animation: vaadin-grid-pro-loading-editor 1.4s infinite; | ||
| } | ||
|
|
||
| :host([loading-editor]) [part~='focused-cell'] ::slotted(vaadin-grid-cell-content) { | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| @keyframes vaadin-grid-pro-loading-editor { | ||
| 50% { | ||
| box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); | ||
| } | ||
| } |
There was a problem hiding this comment.
Are we going to add styles for the Material theme as well?
I wonder if the part that sets the opacity and pointer-events should be moved to the core styles of the component.
There was a problem hiding this comment.
The plan is to not add Material theme for "loading-editor"
There was a problem hiding this comment.
I think at least pointer-events could be in the core styles since this is covered by unit test.
There was a problem hiding this comment.
I wonder if the part that sets the opacity and pointer-events should be moved to the core styles of the component.
Probably still makes sense to move opacity and pointer-events to core styles. Done.
tomivirkki
force-pushed
the
feat/grid-pro-loading-editor-cell-styles
branch
from
c64cd19
to
67e3959
Compare
|
|
Hi @tomivirkki and @tomivirkki, when i performed cherry-pick to this commit to 24.4, i have encountered the following issue. Can you take a look and pick it manually? |
|
Hi @tomivirkki and @tomivirkki, when i performed cherry-pick to this commit to 24.3, i have encountered the following issue. Can you take a look and pick it manually? |
Co-authored-by: Tomi Virkki <[email protected]>
|
This ticket/PR has been released with Vaadin 24.6.0.alpha4 and is also targeting the upcoming stable 24.6.0 version. |
|
|
||
| @keyframes vaadin-grid-pro-loading-editor { | ||
| 50% { | ||
| box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); |
There was a problem hiding this comment.
Animating opacity would be more performant. Animating the box-shadow requires a paint cycle, whereas opacity animation could be done purely by the GPU compositor.
There was a problem hiding this comment.
Sorry for the late review. I’ll make a PR to update the animation.
There was a problem hiding this comment.
This approach was copied from date-picker Lumo styles:
Description
To resolve #2550, add support to
vaadin-grid-proforloading-editorattribute, which disables keyboard interaction on the focused cell and styles it with a pulsating outline. Also, content of the cell is hidden (using opacity) and pointer events are prevented on it.The following recording uses the Flow GridPro component with network throttling on.
Kapture.2024-11-14.at.16.49.01.mp4
Related vaadin/flow-components#6820
The feature is not intended for public use so it's not documented nor exposed as a property.
Part of #2550
Type of change
Feature