-
Notifications
You must be signed in to change notification settings - Fork 87
refactor: grid row and cell focus outline styles #10216
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
Conversation
|
@web-padawan I can't figure out why the visual test on header row focus outline fails. |
249908d to
f2fb877
Compare
|
Updated grid screenshots. The outline seems to be rendered a bit differently - that could be the reason. This also affects the "row-dragover-on-top" screenshot. As for "dragstart" - the row height seems different (1px). UPD: dragstart screenshot has 1px difference in row height, before it was 32px and now 33px which seems correct. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Simplified CSS selectors to not use :is() as that apparently could cause some problems. Also pushed a few screenshot updates - please verify them.
|
Had to do some more polishing to get all the fine details like I want them. But now there’s one more visual test that alludes me – can't figure out why the border between the last header row and first body row is missing when the header row is focused. |
|
Something seems wrong regarding the empty state now: |
|
Reverted changes to empty state that broke unit tests. There is still this problem remaining:
UPD: the reason for it is this CSS: :host([navigating]) #header:focus-within,
:host([navigating]) #footer:focus-within,
[empty-state] #header {
z-index: 2;
}
The fact that header is shown above overrides the border defined here:
```css
table:has(#header > tr:not([hidden])) [part~='first-row-cell'] {
border-top: var(--_row-border-width) solid var(--_border-color);
} |
|
It really shouldn't, though. The header element shouldn't be above the first row when scroller to the top. I’m wondering if this is related to the transforms on the body rows, that there’s some sub-pixel alignment issue. I can't explain it in any other way. Anyhoo, I fixed it by only changing the z-index of the header when the last row has focus within. |
|
This ticket/PR has been released with Vaadin 25.0.0-alpha12. |



Split from #10190
The cell & row focus outline wasn't working in Safari in the
mainbranch. Apparently there’s some difference how:focus-visibleworks in Safari.This change uses a pseudo element for the cell focus outline as well, to be able to extend the outline on top of both column borders.