@lion/button - npm Package Compare versions

Comparing version 0.1.22 to 0.1.23

CHANGELOG.md

		@@ -6,2 +6,13 @@ # Change Log

		## [0.1.23](https://github.com/ing-bank/lion/compare/@lion/button@0.1.22...@lion/button@0.1.23) (2019-06-13)


		### Bug Fixes

		* button: indicate visually the active state on enter/space ([d809890](https://github.com/ing-bank/lion/commit/d809890))





		## [0.1.22](https://github.com/ing-bank/lion/compare/@lion/button@0.1.21...@lion/button@0.1.22) (2019-06-06)
		@@ -8,0 +19,0 @@

package.json

		{
		"name": "@lion/button",
		"version": "0.1.22",
		"version": "0.1.23",
		"description": "A button that is easily stylable and accessible in all contexts",
		@@ -46,3 +46,3 @@ "author": "ing-bank",
		},
		"gitHead": "1f6b2833d72fcbee379761e9e0429b0b6843fcd2"
		"gitHead": "5258296a25b502f9d6e52b0165e9848564e44cce"
		}

src/LionButton.js

		@@ -90,2 +90,7 @@ import { css, html, DelegateMixin, SlotMixin } from '@lion/core';

		:host(:active) .btn,
		.btn[active] {
		background: grey;
		}

		:host([disabled]) {
		@@ -144,3 +149,3 @@ pointer-events: none;
		super.connectedCallback();
		this.__setupKeydownDelegation();
		this.__setupDelegation();
		}
		@@ -150,3 +155,3 @@
		super.disconnectedCallback();
		this.__teardownKeydownDelegation();
		this.__teardownDelegation();
		}
		@@ -159,11 +164,20 @@

		__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)
		@@ -173,2 +187,3 @@ // and make click handlers on button work on space and enter
		e.preventDefault();
		this.shadowRoot.querySelector('.btn').removeAttribute('active');
		this.$$slot('_button').click();
		@@ -175,0 +190,0 @@ }

test/lion-button.test.js

		@@ -1,2 +0,2 @@
		import { expect, fixture, html } from '@open-wc/testing';
		import { expect, fixture, html, aTimeout } from '@open-wc/testing';
		import sinon from 'sinon';
		@@ -120,2 +120,4 @@ import { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js';
		pressSpace(form.querySelector('lion-button'));
		await aTimeout();
		await aTimeout();

		@@ -134,2 +136,4 @@ expect(formSubmitSpy.called).to.be.true;
		pressEnter(form.querySelector('lion-button'));
		await aTimeout();
		await aTimeout();

		@@ -136,0 +140,0 @@ expect(formSubmitSpy.called).to.be.true;

New alerts