Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: grid-pro loading editor state #8156

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

tomivirkki
Copy link
Member

@tomivirkki tomivirkki commented Nov 14, 2024

Description

To resolve #2550, add support to vaadin-grid-pro for loading-editor attribute, 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

Comment on lines 50 to 69
/* 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);
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The plan is to not add Material theme for "loading-editor"

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think at least pointer-events could be in the core styles since this is covered by unit test.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 tomivirkki force-pushed the feat/grid-pro-loading-editor-cell-styles branch from c64cd19 to 67e3959 Compare November 15, 2024 09:43
Copy link

sonarcloud bot commented Nov 15, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants