@lion/button
Advanced tools
Comparing version 0.1.48 to 0.2.0
@@ -6,2 +6,20 @@ # Change Log | ||
# [0.2.0](https://github.com/ing-bank/lion/compare/@lion/button@0.1.48...@lion/button@0.2.0) (2019-07-25) | ||
### Bug Fixes | ||
* **button:** typo in package description ([1d4378e](https://github.com/ing-bank/lion/commit/1d4378e)) | ||
### Features | ||
* **button:** add template hooks for before/after default slot ([f478b98](https://github.com/ing-bank/lion/commit/f478b98)) | ||
* **button:** reduce to minimal css ([d4299de](https://github.com/ing-bank/lion/commit/d4299de)) | ||
* **button:** use DisabledWithTabIndexMixin ([732411c](https://github.com/ing-bank/lion/commit/732411c)) | ||
## [0.1.48](https://github.com/ing-bank/lion/compare/@lion/button@0.1.47...@lion/button@0.1.48) (2019-07-24) | ||
@@ -8,0 +26,0 @@ |
{ | ||
"name": "@lion/button", | ||
"version": "0.1.48", | ||
"description": "A button that is easily stylable and accessible in all contexts", | ||
"version": "0.2.0", | ||
"description": "A button that is easily styleable and accessible in all contexts", | ||
"author": "ing-bank", | ||
@@ -35,8 +35,8 @@ "homepage": "https://github.com/ing-bank/lion/", | ||
"dependencies": { | ||
"@lion/core": "^0.1.12" | ||
"@lion/core": "^0.1.13" | ||
}, | ||
"devDependencies": { | ||
"@lion/form": "^0.1.43", | ||
"@lion/icon": "^0.2.4", | ||
"@lion/input": "^0.1.39", | ||
"@lion/form": "^0.1.44", | ||
"@lion/icon": "^0.2.5", | ||
"@lion/input": "^0.1.40", | ||
"@open-wc/demoing-storybook": "^0.2.0", | ||
@@ -47,3 +47,3 @@ "@open-wc/testing": "^2.0.6", | ||
}, | ||
"gitHead": "8d81f84ea9b2618d45774370666710c9c462532a" | ||
"gitHead": "33652e5e494b694181f75ef4d6f3256c1af43419" | ||
} |
@@ -1,11 +0,9 @@ | ||
import { css, html, DelegateMixin, SlotMixin } from '@lion/core'; | ||
import { css, html, DelegateMixin, SlotMixin, DisabledWithTabIndexMixin } from '@lion/core'; | ||
import { LionLitElement } from '@lion/core/src/LionLitElement.js'; | ||
export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) { | ||
export class LionButton extends DisabledWithTabIndexMixin( | ||
DelegateMixin(SlotMixin(LionLitElement)), | ||
) { | ||
static get properties() { | ||
return { | ||
disabled: { | ||
type: Boolean, | ||
reflect: true, | ||
}, | ||
role: { | ||
@@ -15,6 +13,2 @@ type: String, | ||
}, | ||
tabindex: { | ||
type: Number, | ||
reflect: true, | ||
}, | ||
}; | ||
@@ -26,3 +20,5 @@ } | ||
<div class="btn"> | ||
${this._renderBefore()} | ||
<slot></slot> | ||
${this._renderAfter()} | ||
<slot name="_button"></slot> | ||
@@ -34,2 +30,12 @@ <div class="click-area" @click="${this.__clickDelegationHandler}"></div> | ||
// eslint-disable-next-line class-methods-use-this | ||
_renderBefore() { | ||
return html``; | ||
} | ||
// eslint-disable-next-line class-methods-use-this | ||
_renderAfter() { | ||
return html``; | ||
} | ||
static get styles() { | ||
@@ -42,3 +48,3 @@ return [ | ||
padding-bottom: 2px; | ||
height: 40px; /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */ | ||
min-height: 40px; /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */ | ||
outline: 0; | ||
@@ -50,11 +56,9 @@ background-color: transparent; | ||
.btn { | ||
height: 24px; | ||
min-height: 24px; | ||
display: flex; | ||
align-items: center; | ||
position: relative; | ||
border: 1px solid black; | ||
border-radius: 8px; | ||
background: whitesmoke; | ||
color: black; | ||
background: #eee; /* minimal styling to make it recognizable as btn */ | ||
padding: 7px 15px; | ||
outline: none; /* focus style handled below, else it follows boundaries of click-area */ | ||
} | ||
@@ -77,23 +81,16 @@ | ||
:host(:focus) { | ||
outline: none; | ||
} | ||
:host(:focus) .btn { | ||
border-color: lightblue; | ||
box-shadow: 0 0 8px lightblue, 0 0 0 1px lightblue; | ||
/* if you extend, please overwrite */ | ||
outline: 2px solid #bde4ff; | ||
} | ||
:host(:hover) .btn { | ||
background: black; | ||
color: whitesmoke; | ||
/* if you extend, please overwrite */ | ||
background: #f4f6f7; | ||
} | ||
:host(:hover) .btn ::slotted(lion-icon) { | ||
fill: whitesmoke; | ||
} | ||
:host(:active) .btn, | ||
.btn[active] { | ||
background: grey; | ||
/* if you extend, please overwrite */ | ||
background: gray; | ||
} | ||
@@ -106,6 +103,6 @@ | ||
:host([disabled]) .btn { | ||
/* if you extend, please overwrite */ | ||
background: lightgray; | ||
color: gray; | ||
fill: gray; | ||
border-color: gray; | ||
color: #adadad; | ||
fill: #adadad; | ||
} | ||
@@ -116,9 +113,2 @@ `, | ||
_requestUpdate(name, oldValue) { | ||
super._requestUpdate(name, oldValue); | ||
if (name === 'disabled') { | ||
this.__onDisabledChanged(oldValue); | ||
} | ||
} | ||
get delegations() { | ||
@@ -148,5 +138,3 @@ return { | ||
super(); | ||
this.disabled = false; | ||
this.role = 'button'; | ||
this.tabindex = 0; | ||
} | ||
@@ -215,11 +203,2 @@ | ||
} | ||
__onDisabledChanged() { | ||
if (this.disabled) { | ||
this.__originalTabIndex = this.tabindex; | ||
this.tabindex = -1; | ||
} else { | ||
this.tabindex = this.__originalTabIndex; | ||
} | ||
} | ||
} |
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
27691
390
Updated@lion/core@^0.1.13