diff --git a/packages/crud/test/a11y.test.js b/packages/crud/test/a11y.test.js index c61b16ac41..e2552621f0 100644 --- a/packages/crud/test/a11y.test.js +++ b/packages/crud/test/a11y.test.js @@ -13,16 +13,6 @@ describe('a11y', () => { await setViewport({ width: 1024, height: 768 }); }); - beforeEach(() => { - fixtureSync(` - - `); - }); - function focusRestorationTests(testId, createFixture) { describe(`focus restoration - ${testId}`, () => { let grid, form, dialog, newButton, saveButton, cancelButton, editButtons; diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/basic.png b/packages/crud/test/visual/base/screenshots/crud/baseline/basic.png index cb39b7280a..3f6fe21271 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/basic.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/basic.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/edit-button-focus.png b/packages/crud/test/visual/base/screenshots/crud/baseline/edit-button-focus.png index b6699a8675..0fbd7ad6ee 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/edit-button-focus.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/edit-button-focus.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/flex-column-layout.png b/packages/crud/test/visual/base/screenshots/crud/baseline/flex-column-layout.png index 0f51fe7466..a8f0817308 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/flex-column-layout.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/flex-column-layout.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/flex-layout.png b/packages/crud/test/visual/base/screenshots/crud/baseline/flex-layout.png index c20f273e49..f83cc80c88 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/flex-layout.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/flex-layout.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-edit.png index a0cecd427a..3edfd91b46 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-new.png index d278ca929b..13178fdd4c 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-bottom-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-bottom-edit.png index 9b7a1111d7..6b71920040 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-bottom-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-bottom-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-bottom-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-bottom-new.png index c28fcbf239..29587cf218 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-bottom-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-bottom-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-edit.png index d8e57ca797..83a01d6653 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-new.png index 48b32c1c97..d2bb5de39e 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-edit.png index d8e57ca797..83a01d6653 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-new.png index 48b32c1c97..d2bb5de39e 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/no-toolbar.png b/packages/crud/test/visual/base/screenshots/crud/baseline/no-toolbar.png index 28b14a6b49..f7ba4689dd 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/no-toolbar.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/no-toolbar.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-edit.png index bf0334c5aa..ba4050bfa9 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-new.png index 6ab5cc4415..3299f7638e 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-bottom-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-bottom-edit.png index ba362119b6..52e397769a 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-bottom-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-bottom-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-bottom-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-bottom-new.png index f14f053b50..f8a10ebf9c 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-bottom-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-bottom-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-edit.png index 481bee1634..7cd58671c2 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-new.png index 06e7d48c3d..c993e03d5c 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-edit.png index 481bee1634..7cd58671c2 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-new.png index 06e7d48c3d..c993e03d5c 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-new.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-checkbox.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-checkbox.png index e78f7559ea..a2891bf373 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-checkbox.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-checkbox.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-select.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-select.png index 7ce4f2a507..a3b1d4c1e5 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-select.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-select.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-text.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-text.png index d5b1c85625..074b7734a8 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-text.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/edit-column-text.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/editable-cell-focus.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/editable-cell-focus.png index 4ea40ce54d..bda58c115a 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/editable-cell-focus.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/editable-cell-focus.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/editable-cell-hover.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/editable-cell-hover.png index d8ac0cec04..0f315cc7b2 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/editable-cell-hover.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/editable-cell-hover.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/read-only-cell-focus.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/read-only-cell-focus.png index d98f40e6c1..d46b2d7c3d 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/read-only-cell-focus.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/read-only-cell-focus.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-editable-cells-focus.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-editable-cells-focus.png index 002dff8f8a..cadb1c9e33 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-editable-cells-focus.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-editable-cells-focus.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-editable-cells.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-editable-cells.png index daecf4a1a9..1b0ef878fe 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-editable-cells.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-editable-cells.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells-focus.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells-focus.png index f02937575d..bda58c115a 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells-focus.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells-focus.png differ diff --git a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells.png b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells.png index b0dbf773a8..a98c0231ee 100644 Binary files a/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells.png and b/packages/grid-pro/test/visual/base/screenshots/grid-pro/baseline/theme-highlight-read-only-cells.png differ diff --git a/packages/grid/src/styles/vaadin-grid-base-styles.js b/packages/grid/src/styles/vaadin-grid-base-styles.js index 89088a04df..128743eb15 100644 --- a/packages/grid/src/styles/vaadin-grid-base-styles.js +++ b/packages/grid/src/styles/vaadin-grid-base-styles.js @@ -94,13 +94,6 @@ export const gridStyles = css` position: sticky; left: 0; width: 100%; - } - - :host([overflow~='top']) #header, - :host([overflow~='bottom']) #footer, - :host([navigating]) #header:has(tr:last-child:focus-within), - :host([navigating]) #footer:has(tr:first-child:focus-within), - [empty-state] #header { z-index: 2; } @@ -156,29 +149,6 @@ export const gridStyles = css` [part~='cell'] { padding: 0; box-sizing: border-box; - background: var(--vaadin-grid-cell-background, var(--vaadin-background-color)); - border-block: var(--_row-border-width) solid var(--_border-color); - margin-top: calc(var(--_row-border-width) * -1); - - /* - Box-shadows are used to create a "fake" border at the end of the cell/row, which is visible when a row/cell ends - before the edge of the grid viewport, as well as frozen columns and rows (header and footer). - If there are frozen columns, we'll make the "fake box-shadow border" on the header and footer opaque by rendering - both the border color and cell background color, so that a semi-transparent border color doesn't "stack" when - scrolling horizontally. - */ - --_fake-border: - 0 calc(var(--_top, 0) * var(--_row-border-width) * -1) 0 0 var(--_border-color), - 0 calc(var(--_top-opaque, 0) * var(--_row-border-width) * -1) 0 0 - var(--vaadin-grid-cell-background-color, var(--vaadin-background-color)), - 0 calc(var(--_bottom, 0) * var(--_row-border-width)) 0 0 var(--_border-color), - 0 calc(var(--_bottom-opaque, 0) * var(--_row-border-width)) 0 0 - var(--vaadin-grid-cell-background-color, var(--vaadin-background-color)), - calc(var(--_start, 0) * var(--_column-border-width) * -1) 0 0 0 var(--_border-color), - calc(var(--_end, 0) * var(--_column-border-width)) 0 0 0 var(--_border-color), - calc(var(--_end-opaque, 0) * var(--_column-border-width)) 0 0 0 - var(--vaadin-grid-cell-background-color, var(--vaadin-background-color)); - box-shadow: var(--_fake-border); } [part~='cell']:where(:not([part~='details-cell'])) { @@ -189,132 +159,139 @@ export const gridStyles = css` position: relative; align-items: center; white-space: nowrap; - border-inline-start: var(--_column-border-width) solid var(--_border-color); } - [part~='first-column-cell'] { - border-inline-start: 0; - } + /* Row and cell borders */ - [part~='first-header-row-cell'], - [part~='first-footer-row-cell'], - [part~='first-row-cell'] { - margin-top: 0; - border-top: 0; + [part~='last-header-row']::before, + [part~='first-footer-row']::before { + position: absolute; + inset-inline: 0; + border-block: var(--_row-border-width) var(--_border-color); + transform: translateX(var(--_grid-horizontal-scroll-position)); } - table[has-header] [part~='first-row-cell'] { - border-top: var(--_row-border-width) solid var(--_border-color); + :host([overflow~='top']) [part~='last-header-row']::before { + content: ''; + bottom: calc(var(--_row-border-width) * -1); + border-bottom-style: solid; } - [part~='last-column-cell'] { - --_end: 1; + :host([overflow~='bottom']) [part~='first-footer-row']::before, + :host(:not([overflow~='top'])) #scroller:not([empty-state]) [part~='first-footer-row']::before { + content: ''; + top: calc(var(--_row-border-width) * -1); + border-top-style: solid; } - [part~='last-column-cell']:is([part~='header-cell'], [part~='footer-cell']) { - --_end-opaque: 1; + [part~='body-row'] { + scroll-margin-bottom: var(--_row-border-width); } - [part~='last-row-cell']:where(:not([part~='details-opened-row-cell'])), - [part~='last-footer-row-cell'] { - border-bottom: 0; - --_bottom: 1; + /* stylelint-disable-next-line no-duplicate-selectors */ + [part~='cell'] { + border-block: var(--_row-border-width) var(--_border-color); + border-inline: var(--_column-border-width) var(--_border-color); } - [part~='last-frozen-cell'] { - --_end: 1; + [part~='header-cell']:not([part~='first-header-row-cell']), + [part~='footer-cell']:not([part~='first-footer-row-cell']), + [part~='body-cell']:not([part~='first-row-cell']), + #table[has-header] [part~='first-row-cell'] { + border-top-style: solid; } - [part~='last-frozen-cell'] + [part~='cell'] { - border-inline-start-color: transparent; + [part~='details-opened-row-cell'], + #table[has-footer] [part~='last-row-cell'], + #table[has-footer] [part~='last-row'] [part~='details-cell'], + :host(:not([overflow~='bottom']):not([overflow~='top'])) [part~='last-row-cell'], + :host(:not([overflow~='bottom']):not([overflow~='top'])) [part~='last-row'] [part~='details-cell'] { + border-bottom-style: solid; } - [part~='first-frozen-to-end-cell'] { - border-inline-start: 0; - --_start: 1; + [part~='header-cell']:not([part~='first-column-cell']), + [part~='footer-cell']:not([part~='first-column-cell']), + [part~='body-cell']:not([part~='first-column-cell']) { + border-inline-start-style: solid; } - [part~='last-header-row-cell'] { - border-bottom: 0; - } + [part~='last-frozen-cell']:not([part~='last-column-cell']) { + border-inline-end-style: solid; - :host([overflow~='top']) [part~='last-header-row-cell'], - [empty-state] [part~='last-header-row-cell'] { - --_bottom: 1; + & + [part~='cell'] { + border-inline-start-style: none; + } } - #header:has(:is([frozen], [frozen-to-end])) [part~='last-header-row-cell'] { - --_bottom-opaque: 1; - } + /* Row and cell background */ - :host([overflow~='bottom']) [part~='first-footer-row-cell'], - [empty-state] [part~='first-footer-row-cell'] { - --_top: 1; + /* stylelint-disable-next-line no-duplicate-selectors */ + [part~='row'] { + background-color: var(--vaadin-grid-row-background-color, var(--vaadin-background-color)); } - #footer:has(:is([frozen], [frozen-to-end])) [part~='first-footer-row-cell'] { - --_top-opaque: 1; + /* stylelint-disable-next-line no-duplicate-selectors */ + [part~='cell'] { + background-color: inherit; + background-repeat: no-repeat; + background-origin: padding-box; + background-image: linear-gradient( + var(--vaadin-grid-cell-background-color, transparent), + var(--vaadin-grid-cell-background-color, transparent) + ); } - table[has-footer] [part~='last-row-cell']:not([part~='details-opened-row-cell']) { - border-bottom: var(--_row-border-width) solid var(--_border-color); - --_bottom: 0; + [part~='body-cell'] { + background-image: + linear-gradient(var(--_row-hover-background-color, transparent), var(--_row-hover-background-color, transparent)), + linear-gradient( + var(--_row-selected-background-color, transparent), + var(--_row-selected-background-color, transparent) + ), + linear-gradient( + var(--vaadin-grid-row-highlight-background-color, transparent), + var(--vaadin-grid-row-highlight-background-color, transparent) + ), + linear-gradient(var(--_row-odd-background-color, transparent), var(--_row-odd-background-color, transparent)), + linear-gradient( + var(--vaadin-grid-cell-background-color, transparent), + var(--vaadin-grid-cell-background-color, transparent) + ); } - [part~='body-cell']:where(:not([part~='details-cell'])) { - --_highlight-background-color: var(--vaadin-grid-row-highlight-background-color, transparent); - --_highlight-background-image: linear-gradient( - var(--_highlight-background-color), - var(--_highlight-background-color) + [part~='body-row'][selected] { + --_row-selected-background-color: var( + --vaadin-grid-row-selected-background-color, + color-mix(in srgb, currentColor 8%, transparent) ); - background: - var(--_hover-background-image, none), var(--_selected-background-image, none), var(--_highlight-background-image), - var(--vaadin-grid-cell-background-color, var(--vaadin-background-color)); } - /* Variant: wrap cell contents */ - - :host([theme~='wrap-cell-content']) [part~='cell']:not([part~='details-cell']) { - white-space: normal; - } - - /* Variant: row stripes */ - [part~='odd-row'] { - --vaadin-grid-cell-background-color: var(--vaadin-grid-row-odd-background-color, var(--vaadin-background-color)); + @media (any-hover: hover) { + [part~='body-row']:hover { + --_row-hover-background-color: var(--vaadin-grid-row-hover-background-color, transparent); + } } :host([theme~='row-stripes']) [part~='odd-row'] { - --vaadin-grid-cell-background-color: var( + --_row-odd-background-color: var( --vaadin-grid-row-odd-background-color, - color-mix(in srgb, var(--vaadin-text-color) 4%, var(--vaadin-background-color)) + color-mix(in srgb, var(--vaadin-text-color) 4%, transparent) ); } - /* Raise highlighted rows above others */ - - [part~='row']:focus, - [part~='row']:focus-within, - [part~='body-row']:where([selected]) { - z-index: 3; - } + /* Variant: wrap cell contents */ - @container style(--vaadin-grid-row-odd-background-color) { - [part~='odd-row'] { - z-index: 1; - } + :host([theme~='wrap-cell-content']) [part~='cell']:not([part~='details-cell']) { + white-space: normal; } - /* Row hover */ - @media (any-hover: hover) { - @container style(--vaadin-grid-row-hover-background-color) { - [part~='body-row']:hover { - z-index: 2; - } - } - - [part~='body-row']:hover [part~='cell']:where(:not([part~='details-cell'])) { - --_hover-background-color: var(--vaadin-grid-row-hover-background-color, transparent); - --_hover-background-image: linear-gradient(var(--_hover-background-color), var(--_hover-background-color)); + /* Raise highlighted rows above others */ + [part~='row'], + [part~='frozen-cell'], + [part~='frozen-to-end-cell'] { + &:focus, + &:focus-within { + z-index: 3; } } @@ -322,12 +299,6 @@ export const gridStyles = css` position: absolute; bottom: 0; width: 100%; - margin-top: 0; - border-top: 0; - } - - [part~='last-row-cell'] + [part~='details-cell'] { - border-bottom: 0; } [part~='cell'] ::slotted(vaadin-grid-cell-content) { @@ -346,15 +317,6 @@ export const gridStyles = css` will-change: transform; } - /* Selected row */ - [part~='body-row'][selected] { - --_selected-background-color: var( - --vaadin-grid-row-selected-background-color, - color-mix(in srgb, currentColor 8%, transparent) - ); - --_selected-background-image: linear-gradient(var(--_selected-background-color), var(--_selected-background-color)); - } - /* Empty state */ #scroller:not([empty-state]) #emptystatebody, #scroller[empty-state] #items { @@ -367,7 +329,6 @@ export const gridStyles = css` inset: 0; flex: 1; overflow: hidden; - margin-top: calc(var(--_row-border-width) * -1); } #emptystaterow { @@ -380,8 +341,16 @@ export const gridStyles = css` flex: 1; overflow: auto; padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container)); - border-top: var(--_row-border-width) solid transparent; outline: none; + border-block: var(--_row-border-width) var(--_border-color); + } + + #table[has-header] #emptystatecell { + border-top-style: solid; + } + + #table[has-footer] #emptystatecell { + border-bottom-style: solid; } #emptystatecell:focus-visible { @@ -507,13 +476,21 @@ export const gridStyles = css` /* Focus outline element, also used for d'n'd indication */ :is([part~='row'], [part~='cell'])::after { position: absolute; - inset: calc(var(--_row-border-width) * -1) calc(var(--_column-border-width) * -1); z-index: 3; + inset: 0; pointer-events: none; outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color); outline-offset: calc(var(--vaadin-focus-ring-width) * -1); } + [part~='cell']::after { + inset-block: calc(var(--_row-border-width) * -1); + } + + [part~='cell']:where(:not([part~='details-cell']))::after { + inset-inline: calc(var(--_column-border-width) * -1); + } + [part~='first-column-cell']::after { inset-inline-start: 0; } @@ -522,26 +499,31 @@ export const gridStyles = css` inset-inline-end: 0; } - #header [part~='row']:first-child::after, + [part~='row']::after { + inset: 0 0 calc(var(--_row-border-width) * -1); + transform: translateX(var(--_grid-horizontal-scroll-position)); + } + [part~='first-header-row-cell']::after, - [part*='first-row']::after { + #table:not([has-header]) [part~='first-row-cell']::after { top: 0; } - table[has-header] [part~='first-row-cell']::after { + [part~='first-footer-row']::after { top: calc(var(--_row-border-width) * -1); } - #footer [part~='row']:last-child::after, - [part~='last-footer-row-cell']::after, [part~='last-row']::after, - [part~='last-row-cell']::after { + [part~='last-footer-row']::after, + [part~='last-footer-row-cell']::after { bottom: 0; } - #header [part~='row']:last-child::after, - table[has-footer] [part*='last-row']::after { - bottom: calc(var(--_row-border-width) * -1); + [part~='last-row'] [part~='details-cell']::after, + [part~='last-row']:not([part~='details-opened-row']) [part~='last-row-cell']::after { + :host([overflow~='top']) #table:not([has-footer]) & { + bottom: 0; + } } :host([navigating]) [part~='row']:focus, @@ -549,12 +531,6 @@ export const gridStyles = css` outline: 0; } - [part~='row']::after { - transform: translateX(var(--_grid-horizontal-scroll-position)); - inset-inline: 0; - bottom: 0; - } - [part~='row']:focus-visible, [part~='cell']:focus-visible { outline: 0; @@ -586,8 +562,7 @@ export const gridStyles = css` border-top: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color); } - [part~='row']:not([part*='first-row'])[dragover='above']::after, - table[has-header] [part*='first-row'][dragover='above']::after { + [part~='row']:not([part~='first-row'])[dragover='above']::after { top: calc(var(--vaadin-focus-ring-width) / -2); } @@ -596,14 +571,13 @@ export const gridStyles = css` border-bottom: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color); } - [part~='row']:not([part*='last-row'])[dragover='below']::after, - table[has-footer] [part*='last-row'][dragover='below']::after { + [part~='row']:not([part~='last-row'])[dragover='below']::after { bottom: calc(var(--vaadin-focus-ring-width) / -2); } [part~='row'][dragstart] [part~='cell'] { - border-block-color: transparent !important; - box-shadow: none; + border-block: none !important; + padding-block: var(--_row-border-width) !important; } [part~='row'][dragstart] [part~='cell'][last-column] { @@ -659,16 +633,4 @@ export const gridStyles = css` #sizer [part~='cell']::before { content: '-'; } - - @media (forced-colors: active) { - :host([overflow~='top']) [part~='last-header-row-cell'] { - border-bottom: var(--_row-border-width) solid; - margin-bottom: calc(var(--_row-border-width) * -1); - } - - :host([overflow~='bottom']) [part~='first-footer-row-cell'] { - border-top: var(--_row-border-width) solid; - margin-top: calc(var(--_row-border-width) * -1); - } - } `; diff --git a/packages/grid/src/vaadin-grid-scroll-mixin.js b/packages/grid/src/vaadin-grid-scroll-mixin.js index 5ac22f0444..b10809a39b 100644 --- a/packages/grid/src/vaadin-grid-scroll-mixin.js +++ b/packages/grid/src/vaadin-grid-scroll-mixin.js @@ -178,13 +178,17 @@ export const ScrollMixin = (superClass) => return; } - const dstRect = element.getBoundingClientRect(); + const elementRect = element.getBoundingClientRect(); + const elementComputedStyle = getComputedStyle(element); + const elementTop = elementRect.top + parseInt(elementComputedStyle.scrollMarginTop || 0); + const elementBottom = elementRect.bottom + parseInt(elementComputedStyle.scrollMarginBottom || 0); + const footerTop = this.$.footer.getBoundingClientRect().top; const headerBottom = this.$.header.getBoundingClientRect().bottom; - if (dstRect.bottom > footerTop) { - this.$.table.scrollTop += dstRect.bottom - footerTop; - } else if (dstRect.top < headerBottom) { - this.$.table.scrollTop -= headerBottom - dstRect.top; + if (elementBottom > footerTop) { + this.$.table.scrollTop += elementBottom - footerTop; + } else if (elementTop < headerBottom) { + this.$.table.scrollTop -= headerBottom - elementTop; } } @@ -450,6 +454,16 @@ export const ScrollMixin = (superClass) => // Update the horizontal scroll position property of the focused row this.__updateRowScrollPositionProperty(focusedRow); } + + const lastHeaderRow = this.$.header.querySelector("[part~='last-header-row']"); + if (lastHeaderRow) { + this.__updateRowScrollPositionProperty(lastHeaderRow); + } + + const firstFooterRow = this.$.footer.querySelector("[part~='first-footer-row']"); + if (firstFooterRow) { + this.__updateRowScrollPositionProperty(firstFooterRow); + } } /** diff --git a/packages/grid/test/dom/__snapshots__/grid.test.snap.js b/packages/grid/test/dom/__snapshots__/grid.test.snap.js index 8bd3dc1105..ab82e0dd70 100644 --- a/packages/grid/test/dom/__snapshots__/grid.test.snap.js +++ b/packages/grid/test/dom/__snapshots__/grid.test.snap.js @@ -91,6 +91,7 @@ snapshots["vaadin-grid basic shadow default"] = aria-rowindex="1" part="row header-row first-header-row last-header-row" role="row" + style="--_grid-horizontal-scroll-position: 0px;" tabindex="-1" > { it('details opened', async () => { element.openItemDetails(element.items.at(-1)); await nextRender(); + await sendKeys({ press: 'ArrowDown' }); // ensure details row is visible await visualDiff(element, 'last-body-row-details-opened'); }); diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-details-opened-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-details-opened-cell.png index f87d75b4f9..1c45b953a3 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-details-opened-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-details-opened-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-details-opened.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-details-opened.png index 52b87a55d5..0e3a57ae21 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-details-opened.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-details-opened.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-first-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-first-cell.png index 39ee8da1aa..91eb48dbfd 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-first-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-first-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-last-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-last-cell.png index ac4c3e4331..595867b13a 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-last-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row-last-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row.png index b1c1335397..b6d47b6714 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-body-row.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row-first-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row-first-cell.png index b4f6f1ae4e..8d298b84cd 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row-first-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row-first-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row-last-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row-last-cell.png index ced9280fbb..6a2f89efe7 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row-last-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row-last-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row.png index a12aa2aa00..50459b15bf 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/first-header-row.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-details-opened-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-details-opened-cell.png index ae0e6a59ea..af187ff02f 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-details-opened-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-details-opened-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-details-opened.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-details-opened.png index a157abe2ac..a780a48886 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-details-opened.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-details-opened.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-first-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-first-cell.png index 65a228d510..a060c6ff01 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-first-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-first-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-last-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-last-cell.png index c315e60816..36105ec9b5 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-last-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row-last-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row.png index 2a3ea3108c..c08a14d45d 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-body-row.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row-first-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row-first-cell.png index d6107d5fb5..fcb0d7b47c 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row-first-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row-first-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row-last-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row-last-cell.png index 3340dd4004..d182ba617e 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row-last-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row-last-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row.png index 06b0bafd7e..f68fb7e649 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/last-header-row.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-bottom.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-bottom.png index d4c17467f5..44d82f723c 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-bottom.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-bottom.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-left.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-left.png index 215da4bdb8..41c1e368ca 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-left.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-left.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-top.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-top.png index 94dc1743fa..3e25ccb30e 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-top.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/overflow-top.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-footer-last-body-row-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-footer-last-body-row-cell.png index bbb0a550a1..d2d9df7d15 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-footer-last-body-row-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-footer-last-body-row-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-footer-last-body-row.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-footer-last-body-row.png index 4e74c5a415..7b8c508edf 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-footer-last-body-row.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-footer-last-body-row.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-header-first-body-row-cell.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-header-first-body-row-cell.png index 932502359f..14ff2e2875 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-header-first-body-row-cell.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-header-first-body-row-cell.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-header-first-body-row.png b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-header-first-body-row.png index aa6da272ce..c95e29273f 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-header-first-body-row.png and b/packages/grid/test/visual/base/screenshots/grid-focus/baseline/without-header-first-body-row.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/column-border-width.png b/packages/grid/test/visual/base/screenshots/grid/baseline/column-border-width.png index feb59dfee2..291e1f4e74 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/column-border-width.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/column-border-width.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/disabled.png b/packages/grid/test/visual/base/screenshots/grid/baseline/disabled.png index 9671616b96..0472ab1d61 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/disabled.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/disabled.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/dragover-below-last-row-all-rows-visible.png b/packages/grid/test/visual/base/screenshots/grid/baseline/dragover-below-last-row-all-rows-visible.png index 41f4196dee..ec0bf3e95b 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/dragover-below-last-row-all-rows-visible.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/dragover-below-last-row-all-rows-visible.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/dragover.png b/packages/grid/test/visual/base/screenshots/grid/baseline/dragover.png index ba4ac0bcd8..3947f75e15 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/dragover.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/dragover.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/empty-state.png b/packages/grid/test/visual/base/screenshots/grid/baseline/empty-state.png index 2bf33acad8..01461d6016 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/empty-state.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/empty-state.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/highlight-row-color.png b/packages/grid/test/visual/base/screenshots/grid/baseline/highlight-row-color.png index e13934a34b..48989cabba 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/highlight-row-color.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/highlight-row-color.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-column-groups.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-column-groups.png index b99ea0903b..ae796b44c9 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-column-groups.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-column-groups.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-end.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-end.png index 6285e018b9..76ffcb978c 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-end.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-end.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-middle.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-middle.png index a7f3f08c9a..76f28d59fe 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-middle.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-middle.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-start.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-start.png index 30ff79193a..0e9bfb0baf 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-start.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-frozen-start.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-header-footer.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-header-footer.png index 435004dcca..088e97d1e0 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-header-footer.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-header-footer.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-row-details.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-row-details.png index 8cb3702dac..19dbbeebec 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-row-details.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-row-details.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-end-frozen.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-end-frozen.png index ef6135cb57..6f5e94f7c3 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-end-frozen.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-end-frozen.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-end-initial.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-end-initial.png index cf2ad990b4..6f5e94f7c3 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-end-initial.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-end-initial.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-start-frozen.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-start-frozen.png index 612b3f4def..7459b6f961 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-start-frozen.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-start-frozen.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-start-initial.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-start-initial.png index 575225c757..4946a1f320 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-start-initial.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-selection-start-initial.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-initial.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-initial.png index 98c50c1cbe..d798278edc 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-initial.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-initial.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-multi-asc-asc.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-multi-asc-asc.png index 996b8e9267..8e64571d94 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-multi-asc-asc.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-multi-asc-asc.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-multi-asc-desc.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-multi-asc-desc.png index 2244dc0288..2aa07813b8 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-multi-asc-desc.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-multi-asc-desc.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-single-asc.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-single-asc.png index 7e205faaff..6fd83e2dac 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-single-asc.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-single-asc.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-single-desc.png b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-single-desc.png index bdeaf4abb9..9dde949171 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-single-desc.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/ltr-sorting-single-desc.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/row-border-width.png b/packages/grid/test/visual/base/screenshots/grid/baseline/row-border-width.png index a9ce513e81..39c4a6df27 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/row-border-width.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/row-border-width.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-above-details.png b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-above-details.png index 64cb7c6bd7..dc2c74d0ea 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-above-details.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-above-details.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-above.png b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-above.png index c7742e992e..3eb31025c0 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-above.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-above.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-below-details.png b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-below-details.png index b751f53294..95da08f8b2 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-below-details.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-below-details.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-below.png b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-below.png index bb7bd87026..daa8f4fe6d 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-below.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-below.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-on-top.png b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-on-top.png index 01398a4b50..3e70a9aabf 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-on-top.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragover-on-top.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragstart.png b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragstart.png index 3ebe0bf30e..7d3c0d6c75 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragstart.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/row-dragstart.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-column-groups.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-column-groups.png index d191817c48..724a6afbc3 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-column-groups.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-column-groups.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-end.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-end.png index 0afa9d2742..dcbda152c9 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-end.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-end.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-middle.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-middle.png index 6e16befa7d..97ba044144 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-middle.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-middle.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-start.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-start.png index e1e910ce43..c6bdf6a3cc 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-start.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-frozen-start.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-header-footer.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-header-footer.png index a7f618826f..ebd5376cf3 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-header-footer.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-header-footer.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-row-details.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-row-details.png index 15564d1727..7be12c426a 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-row-details.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-row-details.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-end-frozen.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-end-frozen.png index 2741a4bed6..510b0a0d54 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-end-frozen.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-end-frozen.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-end-initial.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-end-initial.png index 7290c1f00a..510b0a0d54 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-end-initial.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-end-initial.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-start-frozen.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-start-frozen.png index 93ae74125f..8ecccd0460 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-start-frozen.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-start-frozen.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-start-initial.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-start-initial.png index ce61aeba65..4e7f49a667 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-start-initial.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-selection-start-initial.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-initial.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-initial.png index 3ab3967615..911b69b181 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-initial.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-initial.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-multi-asc-asc.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-multi-asc-asc.png index f003a869a7..37cf09f9f0 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-multi-asc-asc.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-multi-asc-asc.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-multi-asc-desc.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-multi-asc-desc.png index e38f4ac726..724a7e1b39 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-multi-asc-desc.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-multi-asc-desc.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-single-asc.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-single-asc.png index 234f83603a..97d0b19d82 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-single-asc.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-single-asc.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-single-desc.png b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-single-desc.png index 3c30ecde74..9194ef29da 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-single-desc.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/rtl-sorting-single-desc.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/selected-row-color.png b/packages/grid/test/visual/base/screenshots/grid/baseline/selected-row-color.png index 6047c729b5..8ba6a56c46 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/selected-row-color.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/selected-row-color.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/theme-row-stripes.png b/packages/grid/test/visual/base/screenshots/grid/baseline/theme-row-stripes.png index c1497b4153..92d2ae26f5 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/theme-row-stripes.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/theme-row-stripes.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/tree-default.png b/packages/grid/test/visual/base/screenshots/grid/baseline/tree-default.png index 936c159f27..0ff86d23f6 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/tree-default.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/tree-default.png differ diff --git a/packages/grid/test/visual/base/screenshots/grid/baseline/tree-overflow.png b/packages/grid/test/visual/base/screenshots/grid/baseline/tree-overflow.png index 04e3ee282c..1088adf275 100644 Binary files a/packages/grid/test/visual/base/screenshots/grid/baseline/tree-overflow.png and b/packages/grid/test/visual/base/screenshots/grid/baseline/tree-overflow.png differ