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' }
);