@lion/button - npm Package Compare versions

Comparing version 0.7.12 to 0.7.13

CHANGELOG.md

 # Change Log
 
+## 0.7.13
+
+### Patch Changes
+
+- e42071d8: Types for overlays, tooltip and button
+- Updated dependencies [75107a4b]
+  - @lion/core@0.12.0
+
 ## 0.7.12
@@ -4,0 +12,0 @@

package.json

 {
   "name": "@lion/button",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "description": "A button that is easily styleable and accessible in all contexts",
@@ -35,3 +35,3 @@ "license": "MIT",
   "dependencies": {
-    "@lion/core": "0.11.0"
+    "@lion/core": "0.12.0"
   },
@@ -38,0 +38,0 @@ "keywords": [

src/LionButton.js

@@ -10,4 +10,7 @@ import {
 
-const isKeyboardClickEvent = e => e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */
-const isSpaceKeyboardClickEvent = e => e.keyCode === 32 || e.key === 32; /* space */
+const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) =>
+  e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */
+const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) =>
+  // @ts-expect-error
+  e.keyCode === 32 || e.key === 32; /* space */
 
@@ -135,4 +138,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) {
 
+  /** @type {HTMLButtonElement} */
   get _nativeButtonNode() {
-    return Array.from(this.children).find(child => child.slot === '_button');
+    return /** @type {HTMLButtonElement} */ (Array.from(this.children).find(
+      child => child.slot === '_button',
+    ));
   }
@@ -148,8 +154,7 @@
       _button: () => {
-        if (!this.constructor._button) {
-          this.constructor._button = document.createElement('button');
-          this.constructor._button.setAttribute('tabindex', '-1');
-          this.constructor._button.setAttribute('aria-hidden', 'true');
-        }
-        return this.constructor._button.cloneNode();
+        /** @type {HTMLButtonElement} */
+        const buttonEl = document.createElement('button');
+        buttonEl.setAttribute('tabindex', '-1');
+        buttonEl.setAttribute('aria-hidden', 'true');
+        return buttonEl;
       },
@@ -182,2 +187,5 @@ };
 
+  /**
+   * @param {import('lit-element').PropertyValues } changedProperties
+   */
   updated(changedProperties) {
@@ -200,2 +208,3 @@ super.updated(changedProperties);
    * without side effects caused by the click bubbling back up to lion-button.
+   * @param {Event} e
    */
@@ -243,2 +252,5 @@ __clickDelegationHandler(e) {
 
+  /**
+   * @param {KeyboardEvent} e
+   */
   __keydownHandler(e) {
@@ -257,2 +269,5 @@ if (this.active || !isKeyboardClickEvent(e)) {
     this.active = true;
+    /**
+     * @param {KeyboardEvent} keyupEvent
+     */
     const keyupHandler = keyupEvent => {
@@ -267,2 +282,5 @@ if (isKeyboardClickEvent(keyupEvent)) {
 
+  /**
+   * @param {KeyboardEvent} e
+   */
   __keyupHandler(e) {
@@ -269,0 +287,0 @@ if (isKeyboardClickEvent(e)) {

test/lion-button.test.js

@@ -6,2 +6,9 @@ import { browserDetection } from '@lion/core';
 
+/**
+ * @typedef {import('@lion/button/src/LionButton').LionButton} LionButton
+ */
+
+/**
+ * @param {HTMLElement} el
+ */
 function getClickArea(el) {
@@ -16,3 +23,3 @@ if (el.shadowRoot) {
   it('behaves like native `button` in terms of a11y', async () => {
-    const el = await fixture(`<lion-button>foo</lion-button>`);
+    const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
     expect(el.getAttribute('role')).to.equal('button');
@@ -23,3 +30,3 @@ expect(el.getAttribute('tabindex')).to.equal('0');
   it('has .type="submit" and type="submit" by default', async () => {
-    const el = await fixture(`<lion-button>foo</lion-button>`);
+    const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
     expect(el.type).to.equal('submit');
@@ -32,3 +39,5 @@ expect(el.getAttribute('type')).to.be.equal('submit');
   it('sync type down to the native button', async () => {
-    const el = await fixture(`<lion-button type="button">foo</lion-button>`);
+    const el = /** @type {LionButton} */ (await fixture(
+      `<lion-button type="button">foo</lion-button>`,
+    ));
     expect(el.type).to.equal('button');
@@ -41,3 +50,3 @@ expect(el.getAttribute('type')).to.be.equal('button');
   it('hides the native button in the UI', async () => {
-    const el = await fixture(`<lion-button>foo</lion-button>`);
+    const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
     expect(el._nativeButtonNode.getAttribute('tabindex')).to.equal('-1');
@@ -48,3 +57,3 @@ expect(window.getComputedStyle(el._nativeButtonNode).clip).to.equal('rect(0px, 0px, 0px, 0px)');
   it('is hidden when attribute hidden is true', async () => {
-    const el = await fixture(`<lion-button hidden>foo</lion-button>`);
+    const el = /** @type {LionButton} */ (await fixture(`<lion-button hidden>foo</lion-button>`));
     expect(el).not.to.be.displayed;
@@ -54,3 +63,3 @@ });
   it('can be disabled imperatively', async () => {
-    const el = await fixture(`<lion-button disabled>foo</lion-button>`);
+    const el = /** @type {LionButton} */ (await fixture(`<lion-button disabled>foo</lion-button>`));
     expect(el.getAttribute('tabindex')).to.equal('-1');
@@ -74,3 +83,3 @@ expect(el.getAttribute('aria-disabled')).to.equal('true');
     it('updates "active" attribute on host when mousedown/mouseup on button', async () => {
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
       el.dispatchEvent(new Event('mousedown'));
@@ -89,3 +98,3 @@
     it('updates "active" attribute on host when mousedown on button and mouseup anywhere else', async () => {
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
 
@@ -104,3 +113,3 @@ el.dispatchEvent(new Event('mousedown'));
     it('updates "active" attribute on host when space keydown/keyup on button', async () => {
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
 
@@ -119,3 +128,3 @@ el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 }));
     it('updates "active" attribute on host when space keydown on button and space keyup anywhere else', async () => {
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
 
@@ -134,3 +143,3 @@ el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 }));
     it('updates "active" attribute on host when enter keydown/keyup on button', async () => {
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
 
@@ -149,3 +158,3 @@ el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 13 }));
     it('updates "active" attribute on host when enter keydown on button and space keyup anywhere else', async () => {
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
 
@@ -166,3 +175,3 @@ el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 13 }));
     it('has a role="button" by default', async () => {
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
       expect(el.getAttribute('role')).to.equal('button');
@@ -175,3 +184,5 @@ el.role = 'foo';
     it('does not override user provided role', async () => {
-      const el = await fixture(`<lion-button role="foo">foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(
+        `<lion-button role="foo">foo</lion-button>`,
+      ));
       expect(el.getAttribute('role')).to.equal('foo');
@@ -181,3 +192,3 @@ });
     it('has a tabindex="0" by default', async () => {
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
       expect(el.getAttribute('tabindex')).to.equal('0');
@@ -187,3 +198,5 @@ });
     it('has a tabindex="-1" when disabled', async () => {
-      const el = await fixture(`<lion-button disabled>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(
+        `<lion-button disabled>foo</lion-button>`,
+      ));
       expect(el.getAttribute('tabindex')).to.equal('-1');
@@ -199,3 +212,5 @@ el.disabled = false;
     it('does not override user provided tabindex', async () => {
-      const el = await fixture(`<lion-button tabindex="5">foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(
+        `<lion-button tabindex="5">foo</lion-button>`,
+      ));
       expect(el.getAttribute('tabindex')).to.equal('5');
@@ -205,3 +220,5 @@ });
     it('disabled does not override user provided tabindex', async () => {
-      const el = await fixture(`<lion-button tabindex="5" disabled>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(
+        `<lion-button tabindex="5" disabled>foo</lion-button>`,
+      ));
       expect(el.getAttribute('tabindex')).to.equal('-1');
@@ -215,3 +232,3 @@ el.disabled = false;
       const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
       expect(el.hasAttribute('aria-labelledby')).to.be.true;
@@ -227,3 +244,3 @@ const wrapperId = el.getAttribute('aria-labelledby');
     it('has a native button node with aria-hidden set to true', async () => {
-      const el = await fixture('<lion-button></lion-button>');
+      const el = /** @type {LionButton} */ (await fixture('<lion-button></lion-button>'));
 
@@ -234,3 +251,3 @@ expect(el._nativeButtonNode.getAttribute('aria-hidden')).to.equal('true');
     it('is accessible', async () => {
-      const el = await fixture(`<lion-button>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
       await expect(el).to.be.accessible();
@@ -240,3 +257,5 @@ });
     it('is accessible when disabled', async () => {
-      const el = await fixture(`<lion-button disabled>foo</lion-button>`);
+      const el = /** @type {LionButton} */ (await fixture(
+        `<lion-button disabled>foo</lion-button>`,
+      ));
       await expect(el).to.be.accessible({ ignoredRules: ['color-contrast'] });
@@ -249,3 +268,3 @@ });
       it('behaves like native `button` when clicked', async () => {
-        const formSubmitSpy = sinon.spy(e => e.preventDefault());
+        const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
         const form = await fixture(html`
@@ -264,3 +283,3 @@ <form @submit="${formSubmitSpy}">
       it('behaves like native `button` when interacted with keyboard space', async () => {
-        const formSubmitSpy = sinon.spy(e => e.preventDefault());
+        const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
         const form = await fixture(html`
@@ -281,3 +300,3 @@ <form @submit="${formSubmitSpy}">
       it('behaves like native `button` when interacted with keyboard enter', async () => {
-        const formSubmitSpy = sinon.spy(e => e.preventDefault());
+        const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
         const form = await fixture(html`
@@ -323,3 +342,3 @@ <form @submit="${formSubmitSpy}">
       it.skip('works with implicit form submission on-enter inside an input', async () => {
-        const formSubmitSpy = sinon.spy(e => e.preventDefault());
+        const formSubmitSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
         const form = await fixture(html`
@@ -345,3 +364,3 @@ <form @submit="${formSubmitSpy}">
       it('behaves like native `button` when clicked', async () => {
-        const formButtonClickedSpy = sinon.spy();
+        const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy());
         const form = await fixture(html`
@@ -360,3 +379,3 @@ <form @submit=${ev => ev.preventDefault()}>
       it('behaves like native `button` when interacted with keyboard space', async () => {
-        const formButtonClickedSpy = sinon.spy();
+        const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy());
         const form = await fixture(html`
@@ -378,3 +397,3 @@ <form @submit=${ev => ev.preventDefault()}>
       it('behaves like native `button` when interacted with keyboard enter', async () => {
-        const formButtonClickedSpy = sinon.spy();
+        const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy());
         const form = await fixture(html`
@@ -397,3 +416,3 @@ <form @submit=${ev => ev.preventDefault()}>
       it.skip('works with implicit form submission on-enter inside an input', async () => {
-        const formButtonClickedSpy = sinon.spy();
+        const formButtonClickedSpy = /** @type {EventListener} */ (sinon.spy());
         const form = await fixture(html`
@@ -420,4 +439,6 @@ <form @submit=${ev => ev.preventDefault()}>
     it('is fired once', async () => {
-      const clickSpy = sinon.spy();
-      const el = await fixture(html`<lion-button @click="${clickSpy}">foo</lion-button>`);
+      const clickSpy = /** @type {EventListener} */ (sinon.spy());
+      const el = /** @type {LionButton} */ (await fixture(
+        html`<lion-button @click="${clickSpy}">foo</lion-button>`,
+      ));
 
@@ -449,4 +470,6 @@ getClickArea(el).click();
       before(async () => {
-        const nativeButtonEl = await fixture('<button>foo</button>');
-        const lionButtonEl = await fixture('<lion-button>foo</lion-button>');
+        const nativeButtonEl = /** @type {LionButton} */ (await fixture('<button>foo</button>'));
+        const lionButtonEl = /** @type {LionButton} */ (await fixture(
+          '<lion-button>foo</lion-button>',
+        ));
         nativeButtonEvent = await prepareClickEvent(nativeButtonEl);
@@ -472,3 +495,3 @@ lionButtonEvent = await prepareClickEvent(lionButtonEl);
       it('has host in the target property', async () => {
-        const el = await fixture('<lion-button>foo</lion-button>');
+        const el = /** @type {LionButton} */ (await fixture('<lion-button>foo</lion-button>'));
         const event = await prepareClickEvent(el);
@@ -475,0 +498,0 @@ expect(event.target).to.equal(el);

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

64861

increased by5.82%

Number of package files

10

increased by11.11%

Lines of code

771

increased by13.05%

Dependency changes

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

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

• Updated@lion/core@0.12.0