diff --git a/packages/grid-pro/test/visual/lumo/grid-pro.test.js b/packages/grid-pro/test/visual/lumo/grid-pro.test.js index ef4cf78317d..0bbd75f95ac 100644 --- a/packages/grid-pro/test/visual/lumo/grid-pro.test.js +++ b/packages/grid-pro/test/visual/lumo/grid-pro.test.js @@ -1,5 +1,6 @@ import { fixtureSync, nextRender } from '@vaadin/testing-helpers'; import { visualDiff } from '@web/test-runner-visual-regression'; +import { sendKeys } from '@web/test-runner-commands'; import { getContainerCell } from '../../helpers.js'; import { users } from '../users.js'; import '../../../theme/lumo/vaadin-grid-pro.js'; @@ -15,6 +16,70 @@ describe('grid-pro', () => { div.style.width = '200px'; }); + describe('editable-cell', () => { + beforeEach(async () => { + element = fixtureSync( + ` + + + + + `, + div + ); + element.items = users; + await nextRender(element); + div.style.width = '300px'; + element.focus(); + }); + + describe('default', () => { + beforeEach(async () => { + // Focus the header cell + await sendKeys({ press: 'Tab' }); + }); + + it('editable-cell focus', async () => { + // Focus the editable cell + await sendKeys({ press: 'Tab' }); + + await visualDiff(div, 'editable-cell-focus'); + }); + + it('read-only-cell focus', async () => { + // Focus the editable cell + await sendKeys({ press: 'Tab' }); + + // Focus the read-only cell + await sendKeys({ press: 'ArrowRight' }); + + await visualDiff(div, 'read-only-cell-focus'); + }); + }); + + ['highlight-editable-cells', 'highlight-read-only-cells'].forEach((theme) => { + describe(theme, () => { + beforeEach(() => { + element.setAttribute('theme', theme); + }); + + it('default', async () => { + await visualDiff(div, `theme-${theme}`); + }); + + it('focus', async () => { + // Focus the header cell + await sendKeys({ press: 'Tab' }); + + // Focus the editable cell + await sendKeys({ press: 'Tab' }); + + await visualDiff(div, `theme-${theme}-focus`); + }); + }); + }); + }); + describe('edit-column-text', () => { beforeEach(async () => { element = fixtureSync( @@ -29,7 +94,7 @@ describe('grid-pro', () => { await nextRender(element); }); - it('select', async () => { + it('text', async () => { const cell = getContainerCell(element.$.items, 0, 0); cell._content.dispatchEvent(new CustomEvent('dblclick', { bubbles: true })); await visualDiff(div, 'edit-column-text'); diff --git a/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/editable-cell-focus.png b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/editable-cell-focus.png new file mode 100644 index 00000000000..6dabf183075 Binary files /dev/null and b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/editable-cell-focus.png differ diff --git a/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/read-only-cell-focus.png b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/read-only-cell-focus.png new file mode 100644 index 00000000000..f6eed8fe81d Binary files /dev/null and b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/read-only-cell-focus.png differ diff --git a/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-editable-cells-focus.png b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-editable-cells-focus.png new file mode 100644 index 00000000000..ba0cbe6648f Binary files /dev/null and b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-editable-cells-focus.png differ diff --git a/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-editable-cells.png b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-editable-cells.png new file mode 100644 index 00000000000..aeb2a5ea1f4 Binary files /dev/null and b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-editable-cells.png differ diff --git a/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-read-only-cells-focus.png b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-read-only-cells-focus.png new file mode 100644 index 00000000000..828580aa707 Binary files /dev/null and b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-read-only-cells-focus.png differ diff --git a/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-read-only-cells.png b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-read-only-cells.png new file mode 100644 index 00000000000..9835fbc6463 Binary files /dev/null and b/packages/grid-pro/test/visual/lumo/screenshots/grid-pro/baseline/theme-highlight-read-only-cells.png differ diff --git a/packages/grid-pro/test/visual/material/grid-pro.test.js b/packages/grid-pro/test/visual/material/grid-pro.test.js index 2c7784e2bf0..76147f0cd28 100644 --- a/packages/grid-pro/test/visual/material/grid-pro.test.js +++ b/packages/grid-pro/test/visual/material/grid-pro.test.js @@ -1,5 +1,6 @@ import { fixtureSync, nextRender } from '@vaadin/testing-helpers'; import { visualDiff } from '@web/test-runner-visual-regression'; +import { sendKeys } from '@web/test-runner-commands'; import { getContainerCell } from '../../helpers.js'; import { users } from '../users.js'; import '../../../theme/material/vaadin-grid-pro.js'; @@ -15,6 +16,47 @@ describe('grid-pro', () => { div.style.width = '200px'; }); + describe('editable-cell', () => { + beforeEach(async () => { + element = fixtureSync( + ` + + + + + `, + div + ); + element.items = users; + await nextRender(element); + div.style.width = '300px'; + element.focus(); + }); + + it('editable-cell focus', async () => { + // Focus the header cell + await sendKeys({ press: 'Tab' }); + + // Focus the editable cell + await sendKeys({ press: 'Tab' }); + + await visualDiff(div, 'editable-cell-focus'); + }); + + it('read-only-cell focus', async () => { + // Focus the header cell + await sendKeys({ press: 'Tab' }); + + // Focus the editable cell + await sendKeys({ press: 'Tab' }); + + // Focus the read-only cell + await sendKeys({ press: 'ArrowRight' }); + + await visualDiff(div, 'read-only-cell-focus'); + }); + }); + describe('edit-column-text', () => { beforeEach(async () => { element = fixtureSync( @@ -29,7 +71,7 @@ describe('grid-pro', () => { await nextRender(element); }); - it('select', async () => { + it('text', async () => { const cell = getContainerCell(element.$.items, 0, 0); cell._content.dispatchEvent(new CustomEvent('dblclick', { bubbles: true })); await visualDiff(div, 'edit-column-text'); diff --git a/packages/grid-pro/test/visual/material/screenshots/grid-pro/baseline/editable-cell-focus.png b/packages/grid-pro/test/visual/material/screenshots/grid-pro/baseline/editable-cell-focus.png new file mode 100644 index 00000000000..f5f42d029e5 Binary files /dev/null and b/packages/grid-pro/test/visual/material/screenshots/grid-pro/baseline/editable-cell-focus.png differ diff --git a/packages/grid-pro/test/visual/material/screenshots/grid-pro/baseline/read-only-cell-focus.png b/packages/grid-pro/test/visual/material/screenshots/grid-pro/baseline/read-only-cell-focus.png new file mode 100644 index 00000000000..ec1b53f90ea Binary files /dev/null and b/packages/grid-pro/test/visual/material/screenshots/grid-pro/baseline/read-only-cell-focus.png differ diff --git a/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js b/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js index 3c7e3652d52..be319e742ed 100644 --- a/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js +++ b/packages/grid-pro/theme/lumo/vaadin-grid-pro-styles.js @@ -1,5 +1,6 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; import '@vaadin/vaadin-lumo-styles/color.js'; +import '@vaadin/vaadin-lumo-styles/style.js'; registerStyles( 'vaadin-grid-pro', @@ -14,6 +15,41 @@ registerStyles( pointer-events: none; box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); } + + [part~='editable-cell'], + [part~='editable-cell'] ::slotted(vaadin-grid-cell-content) { + cursor: var(--lumo-clickable-cursor); + } + + [part~='editable-cell']:hover, + [part~='editable-cell']:focus { + background-color: var(--lumo-contrast-5pct); + background-clip: padding-box; + } + + /* Indicate editable cells */ + + :host([theme~='highlight-editable-cells']) [part~='editable-cell'] { + background-color: var(--lumo-contrast-5pct); + background-clip: border-box; + } + + :host([theme~='highlight-editable-cells']) [part~='editable-cell']:hover, + :host([theme~='highlight-editable-cells']) [part~='editable-cell']:focus { + background-color: var(--lumo-contrast-10pct); + } + + /* Indicate read-only cells */ + + :host([theme~='highlight-read-only-cells']) [part~='body-cell']:not([part~='editable-cell']) { + background-image: repeating-linear-gradient( + 135deg, + transparent, + transparent 6px, + var(--lumo-contrast-5pct) 6px, + var(--lumo-contrast-5pct) 14px + ); + } `, { moduleId: 'lumo-grid-pro' } ); diff --git a/packages/grid-pro/theme/material/vaadin-grid-pro-styles.js b/packages/grid-pro/theme/material/vaadin-grid-pro-styles.js index 29ae4017bef..33073c20f6e 100644 --- a/packages/grid-pro/theme/material/vaadin-grid-pro-styles.js +++ b/packages/grid-pro/theme/material/vaadin-grid-pro-styles.js @@ -8,6 +8,17 @@ registerStyles( :host([navigating]) [part~='cell']:active { box-shadow: inset 0 0 0 2px var(--material-primary-color); } + + [part~='editable-cell'], + [part~='editable-cell'] ::slotted(vaadin-grid-cell-content) { + cursor: pointer; + } + + [part~='row'] > [part~='editable-cell']:hover, + [part~='row'] > [part~='editable-cell']:focus { + background-color: var(--material-grid-pro-editable-cell-hover-background-color, rgba(0, 0, 0, 0.04)); + background-clip: padding-box; + } `, { moduleId: 'material-grid-pro' } );