ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #96 from ing-bank/fix/buttonActiveState

Browse source 
fix(button): indicate visually the active state on enter/space
This commit is contained in:
Mikhail Bashkirov 2019-06-13 17:32:18 +02:00 committed by GitHub
commit 285bd11775
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/button/src/LionButton.js
View file

@ -87,6 +87,11 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
fill: whitesmoke; fill: whitesmoke;
} }
:host(:active) .btn,
.btn[active] {
background: grey;
}
:host([disabled]) { :host([disabled]) {
pointer-events: none; pointer-events: none;
} }
@ -140,12 +145,12 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
this.__setupKeydownDelegation(); this.__setupDelegation();
} }
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this.__teardownKeydownDelegation(); this.__teardownDelegation();
} }
__clickDelegationHandler(e) { __clickDelegationHandler(e) {
@ -153,19 +158,29 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
this.$$slot('_button').click(); this.$$slot('_button').click();
} }
__setupKeydownDelegation() { __setupDelegation() {
this.addEventListener('keydown', this.__keydownDelegationHandler); this.addEventListener('keydown', this.__keydownDelegationHandler);
this.addEventListener('keyup', this.__keyupDelegationHandler);
} }
__teardownKeydownDelegation() { __teardownDelegation() {
this.removeEventListener('keydown', this.__keydownDelegationHandler); this.removeEventListener('keydown', this.__keydownDelegationHandler);
this.removeEventListener('keyup', this.__keyupDelegationHandler);
} }
__keydownDelegationHandler(e) { __keydownDelegationHandler(e) {
if (e.keyCode === 32 /* space */ || e.keyCode === 13 /* enter */) {
e.preventDefault();
this.shadowRoot.querySelector('.btn').setAttribute('active', '');
}
}
__keyupDelegationHandler(e) {
// Makes the real button the trigger in forms (will submit form, as opposed to paper-button) // Makes the real button the trigger in forms (will submit form, as opposed to paper-button)
// and make click handlers on button work on space and enter // and make click handlers on button work on space and enter
if (e.keyCode === 32 /* space */ || e.keyCode === 13 /* enter */) { if (e.keyCode === 32 /* space */ || e.keyCode === 13 /* enter */) {
e.preventDefault(); e.preventDefault();
this.shadowRoot.querySelector('.btn').removeAttribute('active');
this.$$slot('_button').click(); this.$$slot('_button').click();
} }
} }

6
packages/button/test/lion-button.test.js
View file

@ -1,4 +1,4 @@
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html, aTimeout } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js'; import { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js';
@ -117,6 +117,8 @@ describe('lion-button', () => {
`); `);
pressSpace(form.querySelector('lion-button')); pressSpace(form.querySelector('lion-button'));
await aTimeout();
await aTimeout();
expect(formSubmitSpy.called).to.be.true; expect(formSubmitSpy.called).to.be.true;
}); });
@ -130,6 +132,8 @@ describe('lion-button', () => {
`); `);
pressEnter(form.querySelector('lion-button')); pressEnter(form.querySelector('lion-button'));
await aTimeout();
await aTimeout();
expect(formSubmitSpy.called).to.be.true; expect(formSubmitSpy.called).to.be.true;
}); });