@lion/button - npm Package Compare versions

Comparing version 0.3.5 to 0.3.6

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.3.6](https://github.com/ing-bank/lion/compare/@lion/button@0.3.5...@lion/button@0.3.6) (2019-08-14)
+
+
+### Bug Fixes
+
+* **button:** sync type property instead of delegating ([b3a1f91](https://github.com/ing-bank/lion/commit/b3a1f91))
+
+
+
+
+
 ## [0.3.5](https://github.com/ing-bank/lion/compare/@lion/button@0.3.4...@lion/button@0.3.5) (2019-08-07)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lion/button",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "A button that is easily styleable and accessible in all contexts",
@@ -38,5 +38,5 @@ "author": "ing-bank",
   "devDependencies": {
-    "@lion/form": "^0.1.49",
+    "@lion/form": "^0.1.50",
     "@lion/icon": "^0.2.5",
-    "@lion/input": "^0.1.44",
+    "@lion/input": "^0.1.45",
     "@open-wc/demoing-storybook": "^0.2.0",
@@ -47,3 +47,3 @@ "@open-wc/testing": "^2.0.6",
   },
-  "gitHead": "f32aab653391872e23a25ecacb17111ad0b941a0"
+  "gitHead": "6cd0e34abc5f4c175e9a788bb860f9fa72fa808a"
 }

src/LionButton.js

@@ -1,7 +0,4 @@
-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() {
@@ -17,2 +14,6 @@ return {
       },
+      type: {
+        type: String,
+        reflect: true,
+      },
     };
@@ -111,10 +112,2 @@ }
 
-  get delegations() {
-    return {
-      ...super.delegations,
-      target: () => this.$$slot('_button'),
-      attributes: ['type'],
-    };
-  }
-
   get slots() {
@@ -134,5 +127,10 @@ return {
 
+  get _nativeButtonNode() {
+    return this.querySelector('[slot=_button]');
+  }
+
   constructor() {
     super();
     this.role = 'button';
+    this.type = 'submit';
     this.active = false;
@@ -152,2 +150,12 @@ this.__setupDelegationInConstructor();
 
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('type')) {
+      const native = this._nativeButtonNode;
+      if (native) {
+        native.type = this.type;
+      }
+    }
+  }
+
   _redispatchClickEvent(oldEvent) {
@@ -158,3 +166,3 @@ // replacing `MouseEvent` with `oldEvent.constructor` breaks IE
     this.__enforceHostEventTarget(newEvent);
-    this.$$slot('_button').dispatchEvent(newEvent);
+    this._nativeButtonNode.dispatchEvent(newEvent);
   }
@@ -161,0 +169,0 @@

test/lion-button.test.js

@@ -30,12 +30,16 @@ import { expect, fixture, html, aTimeout, oneEvent } from '@open-wc/testing';
 
-  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');
   });
@@ -45,5 +49,4 @@
     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');
   });
@@ -50,0 +53,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34277

increased by1.83%

Lines of code

512

increased by1.99%

No dependency changes