fix(button): sync type property instead of delegating

Author: daKmoR

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);
   }
 
   /**

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(`<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 () => {