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

fix(button): sync type property instead of delegating

Browse source
This commit is contained in:
Thomas Allmer 2019-08-02 16:24:47 +02:00 committed by Joren Broekema
parent eb1e295576
commit b3a1f912bc
2 changed files with 35 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,6 @@
import { css, html, DelegateMixin, SlotMixin, DisabledWithTabIndexMixin } from '@lion/core';
import { LionLitElement } from '@lion/core/src/LionLitElement.js';
import { css, html, SlotMixin, DisabledWithTabIndexMixin, LitElement } from '@lion/core';
export class LionButton extends DisabledWithTabIndexMixin(
DelegateMixin(SlotMixin(LionLitElement)),
) {
export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) {
static get properties() {
return {
role: {
@ -14,6 +11,10 @@ export class LionButton extends DisabledWithTabIndexMixin(
type: Boolean,
reflect: true,
},
type: {
type: String,
reflect: true,
},
};
}
@ -107,14 +108,6 @@ export class LionButton extends DisabledWithTabIndexMixin(
];
}
get delegations() {
return {
...super.delegations,
target: () => this.$$slot('_button'),
attributes: ['type'],
};
}
get slots() {
return {
...super.slots,
@ -129,9 +122,14 @@ export class LionButton extends DisabledWithTabIndexMixin(
};
}
get _nativeButtonNode() {
return this.querySelector('[slot=_button]');
}
constructor() {
super();
this.role = 'button';
this.type = 'submit';
this.active = false;
this.__setupDelegationInConstructor();
}
@ -146,12 +144,22 @@ export class LionButton extends DisabledWithTabIndexMixin(
this.__teardownEvents();
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('type')) {
const native = this._nativeButtonNode;
if (native) {
native.type = this.type;
}
}
}
_redispatchClickEvent(oldEvent) {
// replacing `MouseEvent` with `oldEvent.constructor` breaks IE
const newEvent = new MouseEvent(oldEvent.type, oldEvent);
newEvent.__isRedispatchedOnNativeButton = true;
this.__enforceHostEventTarget(newEvent);
this.$$slot('_button').dispatchEvent(newEvent);
this._nativeButtonNode.dispatchEvent(newEvent);
}
/**

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

@ -27,23 +27,26 @@ describe('lion-button', () => {
expect(el.getAttribute('tabindex')).to.equal('0');
});
it('has no type by default on the native button', async () => {
it('has .type="submit" and type="submit" by default', async () => {
const el = await fixture(`<lion-button>foo</lion-button>`);
const nativeButton = el.$$slot('_button');
expect(nativeButton.getAttribute('type')).to.be.null;
expect(el.type).to.equal('submit');
expect(el.getAttribute('type')).to.be.equal('submit');
expect(el._nativeButtonNode.type).to.equal('submit');
expect(el._nativeButtonNode.getAttribute('type')).to.be.equal('submit');
});
it('has type="submit" on the native button when set', async () => {
const el = await fixture(`<lion-button type="submit">foo</lion-button>`);
const nativeButton = el.$$slot('_button');
expect(nativeButton.getAttribute('type')).to.equal('submit');
it('sync type down to the native button', async () => {
const el = await fixture(`<lion-button type="button">foo</lion-button>`);
expect(el.type).to.equal('button');
expect(el.getAttribute('type')).to.be.equal('button');
expect(el._nativeButtonNode.type).to.equal('button');
expect(el._nativeButtonNode.getAttribute('type')).to.be.equal('button');
});
it('hides the native button in the UI', async () => {
const el = await fixture(`<lion-button>foo</lion-button>`);
const nativeButton = el.$$slot('_button');
expect(nativeButton.getAttribute('tabindex')).to.equal('-1');
expect(window.getComputedStyle(nativeButton).visibility).to.equal('hidden');
expect(el._nativeButtonNode.getAttribute('tabindex')).to.equal('-1');
expect(window.getComputedStyle(el._nativeButtonNode).visibility).to.equal('hidden');
});
it('can be disabled imperatively', async () => {