@lion/button - npm Package Compare versions

Comparing version 0.5.11 to 0.5.12

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+## [0.5.12](https://github.com/ing-bank/lion/compare/@lion/button@0.5.11...@lion/button@0.5.12) (2020-04-29)
+
+
+### Bug Fixes
+
+* add display:none for hidden ([#692](https://github.com/ing-bank/lion/issues/692)) ([9731771](https://github.com/ing-bank/lion/commit/9731771c23a5ed8661558e62cb5e34b62cc2b8b7))
+* **button:** adjust button to more sensible default styling ([#674](https://github.com/ing-bank/lion/issues/674)) ([78cd503](https://github.com/ing-bank/lion/commit/78cd503b5ef4c54cce5bae5008397e1ce1242133))
+
+
+
+
+
 ## [0.5.11](https://github.com/ing-bank/lion/compare/@lion/button@0.5.10...@lion/button@0.5.11) (2020-04-02)
@@ -8,0 +20,0 @@

package.json

 {
   "name": "@lion/button",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "description": "A button that is easily styleable and accessible in all contexts",
@@ -37,3 +37,3 @@ "author": "ing-bank",
   "dependencies": {
-    "@lion/core": "0.5.1"
+    "@lion/core": "0.5.2"
   },
@@ -43,3 +43,3 @@ "devDependencies": {
   },
-  "gitHead": "b58aa65377d5e7a0cd4d87917980291c832e7120"
+  "gitHead": "2476211c21e3f785a909c71e8f94ff307fc6a4fc"
 }

README.md

 # Button
 
-> ## 🛠 Status: Pilot Phase
-> Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.
->
-> The goal of our pilot phase is to gather feedback from a private group of users.
-> Therefore, during this phase, we kindly ask you to:
-> - not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
-> - not publicly promote or link products derived from/based on Lion Web Components
->
-> As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)
-
 `lion-button` provides a button component that is easily stylable and is accessible.
@@ -14,0 +4,0 @@

src/LionButton.js

@@ -37,8 +37,4 @@ import {
         ${browserDetection.isIE11
-          ? html`
-              <div id="${this._buttonId}"><slot></slot></div>
-            `
-          : html`
-              <slot></slot>
-            `}
+          ? html`<div id="${this._buttonId}"><slot></slot></div>`
+          : html`<slot></slot>`}
         ${this._afterTemplate()}
@@ -65,4 +61,2 @@ <slot name="_button"></slot>
           display: inline-block;
-          padding-top: 2px;
-          padding-bottom: 2px;
           min-height: 40px; /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */
@@ -80,3 +74,3 @@ outline: 0;
           background: #eee; /* minimal styling to make it recognizable as btn */
-          padding: 7px 15px;
+          padding: 8px; /* vertical padding to fix with host min-height */
           outline: none; /* focus style handled below, else it follows boundaries of click-area */
@@ -87,2 +81,4 @@ }
           position: absolute;
+          top: 0;
+          left: 0;
           clip: rect(0 0 0 0);
@@ -94,2 +90,4 @@ clip-path: inset(50%);
           width: 1px;
+          padding: 0; /* reset default agent styles */
+          border: 0; /* reset default agent styles */
         }
@@ -103,3 +101,3 @@
           left: 0;
-          margin: -3px -1px;
+          margin: 0;
           padding: 0;
@@ -128,2 +126,6 @@ }
 
+        :host([hidden]) {
+          display: none;
+        }
+
         :host([disabled]) .btn {
@@ -169,5 +171,3 @@ /* if you extend, please overwrite */
     if (browserDetection.isIE11) {
-      this._buttonId = `button-${Math.random()
-        .toString(36)
-        .substr(2, 10)}`;
+      this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`;
       this.updateComplete.then(() => this.setAttribute('aria-labelledby', this._buttonId));
@@ -174,0 +174,0 @@ }

test/lion-button.test.js

@@ -52,2 +52,7 @@ import { browserDetection } from '@lion/core';
 
+  it('is hidden when attribute hidden is true', async () => {
+    const el = await fixture(`<lion-button hidden>foo</lion-button>`);
+    expect(el).not.to.be.displayed;
+  });
+
   it('can be disabled imperatively', async () => {
@@ -388,7 +393,3 @@ const el = await fixture(`<lion-button disabled>foo</lion-button>`);
       const clickSpy = sinon.spy();
-      const el = await fixture(
-        html`
-          <lion-button @click="${clickSpy}">foo</lion-button>
-        `,
-      );
+      const el = await fixture(html`<lion-button @click="${clickSpy}">foo</lion-button>`);
 
@@ -395,0 +396,0 @@ getTopElement(el).click();

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

58388

increased by0.26%

Worsened metrics

Lines of code

613

decreased by-0.16%

Number of lines in readme file

26

decreased by-27.78%

Dependency changes

• + Added@lion/core@0.5.2(transitive)

• - Removed@lion/core@0.5.1(transitive)

• Updated@lion/core@0.5.2