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 { css, html, SlotMixin, DisabledWithTabIndexMixin, LitElement } from '@lion/core';
import { LionLitElement } from '@lion/core/src/LionLitElement.js';
export class LionButton extends DisabledWithTabIndexMixin( export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) {
DelegateMixin(SlotMixin(LionLitElement)),
) {
static get properties() { static get properties() {
return { return {
role: { role: {
@ -14,6 +11,10 @@ export class LionButton extends DisabledWithTabIndexMixin(
type: Boolean, type: Boolean,
reflect: true, 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() { get slots() {
return { return {
...super.slots, ...super.slots,
@ -129,9 +122,14 @@ export class LionButton extends DisabledWithTabIndexMixin(
}; };
} }
get _nativeButtonNode() {
return this.querySelector('[slot=_button]');
}
constructor() { constructor() {
super(); super();
this.role = 'button'; this.role = 'button';
this.type = 'submit';
this.active = false; this.active = false;
this.__setupDelegationInConstructor(); this.__setupDelegationInConstructor();
} }
@ -146,12 +144,22 @@ export class LionButton extends DisabledWithTabIndexMixin(
this.__teardownEvents(); this.__teardownEvents();
} }
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('type')) {
const native = this._nativeButtonNode;
if (native) {
native.type = this.type;
}
}
}
_redispatchClickEvent(oldEvent) { _redispatchClickEvent(oldEvent) {
// replacing `MouseEvent` with `oldEvent.constructor` breaks IE // replacing `MouseEvent` with `oldEvent.constructor` breaks IE
const newEvent = new MouseEvent(oldEvent.type, oldEvent); const newEvent = new MouseEvent(oldEvent.type, oldEvent);
newEvent.__isRedispatchedOnNativeButton = true; newEvent.__isRedispatchedOnNativeButton = true;
this.__enforceHostEventTarget(newEvent); 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'); 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 el = await fixture(`<lion-button>foo</lion-button>`);
const nativeButton = el.$$slot('_button'); expect(el.type).to.equal('submit');
expect(nativeButton.getAttribute('type')).to.be.null; 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 () => { it('sync type down to the native button', async () => {
const el = await fixture(`<lion-button type="submit">foo</lion-button>`); const el = await fixture(`<lion-button type="button">foo</lion-button>`);
const nativeButton = el.$$slot('_button'); expect(el.type).to.equal('button');
expect(nativeButton.getAttribute('type')).to.equal('submit'); 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 () => { it('hides the native button in the UI', async () => {
const el = await fixture(`<lion-button>foo</lion-button>`); const el = await fixture(`<lion-button>foo</lion-button>`);
const nativeButton = el.$$slot('_button'); expect(el._nativeButtonNode.getAttribute('tabindex')).to.equal('-1');
expect(nativeButton.getAttribute('tabindex')).to.equal('-1'); expect(window.getComputedStyle(el._nativeButtonNode).visibility).to.equal('hidden');
expect(window.getComputedStyle(nativeButton).visibility).to.equal('hidden');
}); });
it('can be disabled imperatively', async () => { it('can be disabled imperatively', async () => {