diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js index 46526e5f3..8a7281e32 100644 --- a/packages/button/src/LionButton.js +++ b/packages/button/src/LionButton.js @@ -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); } /** diff --git a/packages/button/test/lion-button.test.js b/packages/button/test/lion-button.test.js index 0b6792aa6..713f5ac01 100644 --- a/packages/button/test/lion-button.test.js +++ b/packages/button/test/lion-button.test.js @@ -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(`foo`); - 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(`foo`); - 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(`foo`); + 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(`foo`); - 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 () => {