Skip to content

Commit d183849

Browse files
vursenvursen
authored
feat: add disabled property to grid (#3445) (#2211)
1 parent cd9210e commit d183849

File tree

11 files changed

+203
-1
lines changed

11 files changed

+203
-1
lines changed

‎src/vaadin-grid-disabled-mixin.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!--
2+
@license
3+
Copyright (c) 2017 Vaadin Ltd.
4+
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
-->
6+
7+
<script>
8+
window.Vaadin = window.Vaadin || {};
9+
Vaadin.Grid = Vaadin.Grid || {};
10+
11+
/**
12+
* @polymerMixin
13+
*/
14+
Vaadin.Grid.DisabledMixin = superClass => class DisabledMixin extends superClass {
15+
static get properties() {
16+
return {
17+
disabled: {
18+
type: Boolean,
19+
value: false,
20+
observer: '_disabledChanged',
21+
reflectToAttribute: true
22+
}
23+
};
24+
}
25+
26+
/** @protected */
27+
_disabledChanged(disabled) {
28+
if (disabled) {
29+
this.setAttribute('tabindex', '-1');
30+
this.setAttribute('aria-disabled', 'true');
31+
} else {
32+
this.removeAttribute('tabindex');
33+
this.removeAttribute('aria-disabled');
34+
}
35+
}
36+
37+
/**
38+
* Overrides the default element `click` method in order to prevent
39+
* firing the `click` event when the element is disabled.
40+
* @protected
41+
* @override
42+
*/
43+
click() {
44+
if (!this.disabled) {
45+
super.click();
46+
}
47+
}
48+
};
49+
</script>

‎src/vaadin-grid-styles.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@
3232
display: none !important;
3333
}
3434
35+
:host([disabled]) {
36+
pointer-events: none;
37+
animation: none;
38+
}
39+
3540
#scroller {
3641
display: block;
3742
transform: translateY(0);

‎src/vaadin-grid.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
<link rel="import" href="../../polymer/polymer.html">
88
<link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
9+
<link rel="import" href="vaadin-grid-disabled-mixin.html">
910
<link rel="import" href="vaadin-grid-scroller.html">
1011
<link rel="import" href="vaadin-grid-a11y-mixin.html">
1112
<link rel="import" href="vaadin-grid-active-item-mixin.html">
@@ -322,7 +323,8 @@
322323
Vaadin.Grid.EventContextMixin(
323324
Vaadin.Grid.DragAndDropMixin(
324325
Vaadin.Grid.StylingMixin(
325-
Vaadin.Grid.ScrollerElement)))))))))))))))))) {
326+
Vaadin.Grid.DisabledMixin(
327+
Vaadin.Grid.ScrollerElement))))))))))))))))))) {
326328

327329
static get is() {
328330
return 'vaadin-grid';

‎test/disabled.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!doctype html>
2+
3+
<html>
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>disabled tests</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
8+
9+
<script src="settings.js"></script>
10+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
11+
<script src="../../web-component-tester/browser.js"></script>
12+
<link rel="import" href="../../test-fixture/test-fixture.html">
13+
14+
<link rel="import" href="helpers.html">
15+
<link rel="import" href="../vaadin-grid.html">
16+
</head>
17+
<body>
18+
<test-fixture id="grid">
19+
<template>
20+
<vaadin-grid>
21+
<vaadin-grid-column path="foo"></vaadin-grid-column>
22+
<vaadin-grid-column path="bar"></vaadin-grid-column>
23+
</vaadin-grid>
24+
</template>
25+
</text-fixture>
26+
27+
<script>
28+
describe('disabled', () => {
29+
let grid;
30+
31+
beforeEach(() => {
32+
grid = fixture('grid');
33+
grid.items = [
34+
{foo: '1', bar: '1'},
35+
{foo: '2', bar: '2'}
36+
];
37+
flushGrid(grid);
38+
});
39+
40+
it('should not set the disabled property by default', () => {
41+
expect(grid.disabled).to.be.false;
42+
});
43+
44+
it('should reflect the disabled property to the attribute', () => {
45+
grid.disabled = true;
46+
expect(grid.hasAttribute('disabled')).to.be.true;
47+
48+
grid.disabled = false;
49+
expect(grid.hasAttribute('disabled')).to.be.false;
50+
});
51+
52+
it('should set the aria-disabled attribute when disabled', () => {
53+
grid.disabled = true;
54+
expect(grid.getAttribute('aria-disabled')).to.equal('true');
55+
56+
grid.disabled = false;
57+
expect(grid.hasAttribute('aria-disabled')).to.be.false;
58+
});
59+
60+
it('should set the tabindex attribute to -1 when disabled', () => {
61+
grid.disabled = true;
62+
expect(grid.getAttribute('tabindex')).to.equal('-1');
63+
64+
grid.disabled = false;
65+
expect(grid.hasAttribute('tabindex')).to.be.false;
66+
});
67+
68+
it('should prevent firing click events when disabled', () => {
69+
const spy = sinon.spy();
70+
grid.addEventListener('click', spy);
71+
grid.disabled = true;
72+
grid.click();
73+
expect(spy.called).to.be.false;
74+
});
75+
76+
it('should set pointer-events: none when disabled', () => {
77+
grid.disabled = true;
78+
expect(getComputedStyle(grid).pointerEvents).to.equal('none');
79+
grid.disabled = false;
80+
expect(getComputedStyle(grid).pointerEvents).not.to.equal('none');
81+
});
82+
});
83+
</script>
84+
</body>
85+
</html>

‎test/test-suites.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const batch4 = [
4747
const batch5 = [
4848
'test/million-dollar-scrolling.html',
4949
'test/row-details.html',
50+
'test/disabled.html',
5051
];
5152

5253
const polymer2Only = [

‎test/visual/disabled.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>disabled visual tests</title>
6+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
7+
<script>
8+
const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
9+
document.write(`<link rel="import" href="../../theme/${theme}/vaadin-grid.html">`);
10+
11+
const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
12+
document.documentElement.setAttribute('dir', dir);
13+
</script>
14+
<script src="../../demo/grid-demo-data.js"></script>
15+
<link href="../../demo/x-data-provider.html" rel="import">
16+
</head>
17+
18+
<body>
19+
<style media="screen">
20+
.capture-block {
21+
display: inline-block;
22+
width: 800px;
23+
}
24+
</style>
25+
26+
<div class="capture-block" id="disabled">
27+
<dom-bind>
28+
<template>
29+
<custom-style>
30+
<style>
31+
vaadin-grid {
32+
height: 250px;
33+
}
34+
</style>
35+
</custom-style>
36+
<x-array-data-provider items="{{items}}"></x-array-data-provider>
37+
<vaadin-grid items="[[items]]" size="200" disabled>
38+
<vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
39+
<vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
40+
<vaadin-grid-column path="email"></vaadin-grid-column>
41+
</vaadin-grid>
42+
</template>
43+
</dom-bind>
44+
</div>
45+
</body>

‎test/visual/screens/vaadin-grid/disabled-lumo/disabled/chrome.png

17.8 KB
Loading

‎test/visual/screens/vaadin-grid/disabled-material/disabled/chrome.png

18.3 KB
Loading

‎test/visual/test.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,13 @@ gemini.suite('vaadin-grid', (rootSuite) => {
7777
});
7878
});
7979

80+
gemini.suite(`disabled-${theme}`, (suite) => {
81+
suite
82+
.setUrl(`disabled.html?theme=${theme}`)
83+
.setCaptureElements('.capture-block')
84+
.capture('disabled');
85+
});
86+
8087
gemini.suite(`drag-and-drop-${theme}`, (suite) => {
8188
suite
8289
.setUrl(`drag-and-drop.html?theme=${theme}`)

‎theme/lumo/vaadin-grid-styles.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@
2929
--_lumo-grid-selected-row-color: var(--lumo-primary-color-10pct);
3030
}
3131

32+
:host([disabled]) {
33+
opacity: 0.7;
34+
}
35+
3236
/* No (outer) border */
3337

3438
:host(:not([theme~="no-border"])) {

0 commit comments

Comments
 (0)