@lion/button - npm Package Compare versions

Comparing version 0.1.48 to 0.2.0

CHANGELOG.md

@@ -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 @@

package.json

 {
   "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"
 }

src/LionButton.js

@@ -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;
-    }
-  }
 }

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

27691

increased by1.22%

Worsened metrics

Lines of code

390

decreased by-4.65%

Dependency changes

• Updated@lion/core@^0.1.13