feat: indicate editable and read-only cells visually (#2309)

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(
+        `
+          <vaadin-grid-pro style="height: 100px;">
+            <vaadin-grid-pro-edit-column path="name.first"></vaadin-grid-pro-edit-column>
+            <vaadin-grid-column path="name.last"></vaadin-grid-column>
+          </vaadin-grid-pro>
+        `,
+        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');

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(
+        `
+          <vaadin-grid-pro style="height: 100px;">
+            <vaadin-grid-pro-edit-column path="name.first"></vaadin-grid-pro-edit-column>
+            <vaadin-grid-column path="name.last"></vaadin-grid-column>
+          </vaadin-grid-pro>
+        `,
+        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');

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

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