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;
}
:host(:active) .btn,
.btn[active] {
background: grey;
}
:host([disabled]) {
pointer-events: none;
}
@ -140,12 +145,12 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
connectedCallback() {
super.connectedCallback();
this.__setupKeydownDelegation();
this.__setupDelegation();
}
disconnectedCallback() {
super.disconnectedCallback();
this.__teardownKeydownDelegation();
this.__teardownDelegation();
}
__clickDelegationHandler(e) {
@ -153,19 +158,29 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
this.$$slot('_button').click();
}
__setupKeydownDelegation() {
__setupDelegation() {
this.addEventListener('keydown', this.__keydownDelegationHandler);
this.addEventListener('keyup', this.__keyupDelegationHandler);
}
__teardownKeydownDelegation() {
__teardownDelegation() {
this.removeEventListener('keydown', this.__keydownDelegationHandler);
this.removeEventListener('keyup', this.__keyupDelegationHandler);
}
__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)
// and make click handlers on button work on space and enter
if (e.keyCode === 32 /* space */ || e.keyCode === 13 /* enter */) {
e.preventDefault();
this.shadowRoot.querySelector('.btn').removeAttribute('active');
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 { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js';
@ -117,6 +117,8 @@ describe('lion-button', () => {
`);
pressSpace(form.querySelector('lion-button'));
await aTimeout();
await aTimeout();
expect(formSubmitSpy.called).to.be.true;
});
@ -130,6 +132,8 @@ describe('lion-button', () => {
`);
pressEnter(form.querySelector('lion-button'));
await aTimeout();
await aTimeout();
expect(formSubmitSpy.called).to.be.true;
});