@lion/button
Advanced tools
Comparing version 0.3.5 to 0.3.6
@@ -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 @@ |
{ | ||
"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" | ||
} |
@@ -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 @@ |
@@ -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 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
34277
512