@lion/switch - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.1.3](https://github.com/ing-bank/lion/compare/@lion/switch@0.1.2...@lion/switch@0.1.3) (2019-10-28)
+
+
+### Bug Fixes
+
+* **switch:** cross-browser fixes ([cb747d9](https://github.com/ing-bank/lion/commit/cb747d9))
+
+
+
+
+
 ## [0.1.2](https://github.com/ing-bank/lion/compare/@lion/switch@0.1.1...@lion/switch@0.1.2) (2019-10-25)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lion/switch",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A Switch is used for switching a property or feature on and off",
@@ -48,3 +48,3 @@ "author": "ing-bank",
   },
-  "gitHead": "3869e823751c4dcf984df5dd7a9aaa3d615b72e7"
+  "gitHead": "d44f6d85feb0b4c04f6076d709072ab980024821"
 }

src/LionButtonSwitch.js

@@ -1,7 +0,10 @@
-import { LionButton } from '@lion/button';
-import { html, css } from '@lion/core';
+import { html, css, LitElement, DisabledWithTabIndexMixin } from '@lion/core';
 
-export class LionButtonSwitch extends LionButton {
+export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) {
   static get properties() {
     return {
+      role: {
+        type: String,
+        reflect: true,
+      },
       checked: {
@@ -16,3 +19,2 @@ type: Boolean,
     return [
-      ...super.styles,
       css`
@@ -24,14 +26,16 @@ :host {
           height: 16px;
-          /* Override "button" styles */
-          min-height: auto;
-          padding: 0;
+          outline: 0;
         }
 
         .btn {
+          position: relative;
           height: 100%;
-          /* Override "button" styles */
-          min-height: auto;
-          padding: 0;
+          outline: 0;
         }
 
+        :host(:focus) .btn {
+          /* if you extend, please overwrite */
+          outline: 2px solid #bde4ff;
+        }
+
         .button-switch__track {
@@ -58,7 +62,8 @@ background: #eee;
 
-  // eslint-disable-next-line class-methods-use-this
-  _renderBefore() {
+  render() {
     return html`
-      <div class="button-switch__track"></div>
-      <div class="button-switch__thumb"></div>
+      <div class="btn">
+        <div class="button-switch__track"></div>
+        <div class="button-switch__thumb"></div>
+      </div>
     `;
@@ -72,2 +77,4 @@ }
     this.addEventListener('click', this.__handleToggleStateChange);
+    this.addEventListener('keydown', this.__handleKeydown);
+    this.addEventListener('keyup', this.__handleKeyup);
   }
@@ -80,7 +87,2 @@
 
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    this.removeAttribute('type');
-  }
-
   __handleToggleStateChange() {
@@ -90,2 +92,4 @@ if (this.disabled) {
     }
+    // Force IE11 to focus the component.
+    this.focus();
     this.checked = !this.checked;
@@ -100,2 +104,16 @@ this.dispatchEvent(
 
+  // eslint-disable-next-line class-methods-use-this
+  __handleKeydown(e) {
+    // prevent "space" scrolling on "macOS"
+    if (e.keyCode === 32) {
+      e.preventDefault();
+    }
+  }
+
+  __handleKeyup(e) {
+    if ([32 /* space */, 13 /* enter */].indexOf(e.keyCode) !== -1) {
+      this.__handleToggleStateChange();
+    }
+  }
+
   /**
@@ -102,0 +120,0 @@ * We synchronously update aria-checked to support voice over on safari.

stories/index.stories.js

@@ -7,2 +7,3 @@ import { storiesOf, html } from '@open-wc/demoing-storybook';
 import '../lion-input-switch.js';
+import '../lion-button-switch.js';
 import '@lion/form/lion-form.js';
@@ -87,2 +88,8 @@
     `;
-  });
+  })
+  .add(
+    'Button',
+    () => html`
+      <lion-button-switch></lion-button-switch>
+    `,
+  );

test/lion-button-switch.test.js

 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
 
-import { LionButton } from '@lion/button';
-
 import '../lion-button-switch.js';
@@ -16,6 +14,2 @@
 
-  it('should behave like a button', () => {
-    expect(el instanceof LionButton).to.be.true;
-  });
-
   it('should be focusable', () => {
@@ -22,0 +16,0 @@ expect(el.tabIndex).to.equal(0);

No alert changes

Improved metrics

Total package byte prevSize

17191

increased by4.01%

Lines of code

413

increased by4.82%

No dependency changes