feat: add disabled property to grid (#3445) (#2211)

vaadin · Apr 4, 2022 · d183849 · d183849
1 parent cd9210e
commit d183849
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 1 deletion.
diff --git a/src/vaadin-grid-disabled-mixin.html b/src/vaadin-grid-disabled-mixin.html
@@ -0,0 +1,49 @@
+<!--
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+-->
+
+<script>
+  window.Vaadin = window.Vaadin || {};
+  Vaadin.Grid = Vaadin.Grid || {};
+
+  /**
+   * @polymerMixin
+   */
+  Vaadin.Grid.DisabledMixin = superClass => class DisabledMixin extends superClass {
+    static get properties() {
+      return {
+        disabled: {
+          type: Boolean,
+          value: false,
+          observer: '_disabledChanged',
+          reflectToAttribute: true
+        }
+      };
+    }
+
+    /** @protected */
+    _disabledChanged(disabled) {
+      if (disabled) {
+        this.setAttribute('tabindex', '-1');
+        this.setAttribute('aria-disabled', 'true');
+      } else {
+        this.removeAttribute('tabindex');
+        this.removeAttribute('aria-disabled');
+      }
+    }
+
+    /**
+     * Overrides the default element `click` method in order to prevent
+     * firing the `click` event when the element is disabled.
+     * @protected
+     * @override
+     */
+    click() {
+      if (!this.disabled) {
+        super.click();
+      }
+    }
+  };
+</script>
diff --git a/src/vaadin-grid-styles.html b/src/vaadin-grid-styles.html
@@ -32,6 +32,11 @@
         display: none !important;
       }
 
+      :host([disabled]) {
+        pointer-events: none;
+        animation: none;
+      }
+
       #scroller {
         display: block;
         transform: translateY(0);

diff --git a/src/vaadin-grid.html b/src/vaadin-grid.html
@@ -6,6 +6,7 @@
 
 <link rel="import" href="../../polymer/polymer.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
+<link rel="import" href="vaadin-grid-disabled-mixin.html">
 <link rel="import" href="vaadin-grid-scroller.html">
 <link rel="import" href="vaadin-grid-a11y-mixin.html">
 <link rel="import" href="vaadin-grid-active-item-mixin.html">
@@ -322,7 +323,8 @@
                                     Vaadin.Grid.EventContextMixin(
                                       Vaadin.Grid.DragAndDropMixin(
                                         Vaadin.Grid.StylingMixin(
-                                          Vaadin.Grid.ScrollerElement)))))))))))))))))) {
+                                          Vaadin.Grid.DisabledMixin(
+                                            Vaadin.Grid.ScrollerElement))))))))))))))))))) {
 
       static get is() {
         return 'vaadin-grid';

diff --git a/test/disabled.html b/test/disabled.html
@@ -0,0 +1,85 @@
+<!doctype html>
+
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>disabled tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="settings.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="../vaadin-grid.html">
+</head>
+<body>
+  <test-fixture id="grid">
+    <template>
+      <vaadin-grid>
+        <vaadin-grid-column path="foo"></vaadin-grid-column>
+        <vaadin-grid-column path="bar"></vaadin-grid-column>
+      </vaadin-grid>
+    </template>
+  </text-fixture>
+
+  <script>
+    describe('disabled', () => {
+      let grid;
+
+      beforeEach(() => {
+        grid = fixture('grid');
+        grid.items = [
+          {foo: '1', bar: '1'},
+          {foo: '2', bar: '2'}
+        ];
+        flushGrid(grid);
+      });
+
+      it('should not set the disabled property by default', () => {
+        expect(grid.disabled).to.be.false;
+      });
+
+      it('should reflect the disabled property to the attribute', () => {
+        grid.disabled = true;
+        expect(grid.hasAttribute('disabled')).to.be.true;
+
+        grid.disabled = false;
+        expect(grid.hasAttribute('disabled')).to.be.false;
+      });
+
+      it('should set the aria-disabled attribute when disabled', () => {
+        grid.disabled = true;
+        expect(grid.getAttribute('aria-disabled')).to.equal('true');
+
+        grid.disabled = false;
+        expect(grid.hasAttribute('aria-disabled')).to.be.false;
+      });
+
+      it('should set the tabindex attribute to -1 when disabled', () => {
+        grid.disabled = true;
+        expect(grid.getAttribute('tabindex')).to.equal('-1');
+
+        grid.disabled = false;
+        expect(grid.hasAttribute('tabindex')).to.be.false;
+      });
+
+      it('should prevent firing click events when disabled', () => {
+        const spy = sinon.spy();
+        grid.addEventListener('click', spy);
+        grid.disabled = true;
+        grid.click();
+        expect(spy.called).to.be.false;
+      });
+
+      it('should set pointer-events: none when disabled', () => {
+        grid.disabled = true;
+        expect(getComputedStyle(grid).pointerEvents).to.equal('none');
+        grid.disabled = false;
+        expect(getComputedStyle(grid).pointerEvents).not.to.equal('none');
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -47,6 +47,7 @@ const batch4 = [
 const batch5 = [
   'test/million-dollar-scrolling.html',
   'test/row-details.html',
+  'test/disabled.html',
 ];
 
 const polymer2Only = [

diff --git a/test/visual/disabled.html b/test/visual/disabled.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>disabled visual tests</title>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-grid.html">`);
+
+    const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
+    document.documentElement.setAttribute('dir', dir);
+  </script>
+  <script src="../../demo/grid-demo-data.js"></script>
+  <link href="../../demo/x-data-provider.html" rel="import">
+</head>
+
+<body>
+  <style media="screen">
+    .capture-block {
+      display: inline-block;
+      width: 800px;
+    }
+  </style>
+
+  <div class="capture-block" id="disabled">
+    <dom-bind>
+      <template>
+        <custom-style>
+          <style>
+            vaadin-grid {
+              height: 250px;
+            }
+          </style>
+        </custom-style>
+        <x-array-data-provider items="{{items}}"></x-array-data-provider>
+        <vaadin-grid items="[[items]]" size="200" disabled>
+          <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
+          <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
+          <vaadin-grid-column path="email"></vaadin-grid-column>
+        </vaadin-grid>
+      </template>
+    </dom-bind>
+  </div>
+</body>
diff --git a/test/visual/screens/vaadin-grid/disabled-lumo/disabled/chrome.png b/test/visual/screens/vaadin-grid/disabled-lumo/disabled/chrome.png
diff --git a/test/visual/screens/vaadin-grid/disabled-material/disabled/chrome.png b/test/visual/screens/vaadin-grid/disabled-material/disabled/chrome.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -77,6 +77,13 @@ gemini.suite('vaadin-grid', (rootSuite) => {
       });
     });
 
+    gemini.suite(`disabled-${theme}`, (suite) => {
+      suite
+        .setUrl(`disabled.html?theme=${theme}`)
+        .setCaptureElements('.capture-block')
+        .capture('disabled');
+    });
+
     gemini.suite(`drag-and-drop-${theme}`, (suite) => {
       suite
         .setUrl(`drag-and-drop.html?theme=${theme}`)

diff --git a/theme/lumo/vaadin-grid-styles.html b/theme/lumo/vaadin-grid-styles.html
@@ -29,6 +29,10 @@
         --_lumo-grid-selected-row-color: var(--lumo-primary-color-10pct);
       }
 
+      :host([disabled]) {
+        opacity: 0.7;
+      }
+
       /* No (outer) border */
 
       :host(:not([theme~="no-border"])) {

diff --git a/theme/material/vaadin-grid-styles.html b/theme/material/vaadin-grid-styles.html
@@ -12,6 +12,10 @@
         color: var(--material-body-text-color);
       }
 
+      :host([disabled]) {
+        opacity: 0.7;
+      }
+
       [part~="cell"] {
         min-height: 48px;
         -webkit-tap-highlight-color: transparent;