@lion/button - npm Package Compare versions

Comparing version 0.12.0 to 0.13.0

CHANGELOG.md

 # Change Log
 
+## 0.13.0
+
+### Minor Changes
+
+- 72067c0d: **BREAKING** Upgrade to [lit](https://lit.dev/) version 2
+
+  This does not change any of the public APIs of lion.
+  It however effects you when you have your own extension layer or your own components especially when using directives.
+  See the [official lit upgrade guide](https://lit.dev/docs/releases/upgrade/).
+
+  **BREAKING** Upgrade to [ScopedElements](https://open-wc.org/docs/development/scoped-elements/) version 2
+
+  This version of `@open-wc/scoped-elements` is now following the [Scoped Custom Element Registries](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md) and automatically loads a polyfill [@webcomponents/scoped-custom-element-registry](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry).
+
+  This means tag names are no longer being rewritten with a hash.
+
+  ```js
+  import { css, LitElement } from 'lit';
+  import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+  import { MyButton } from './MyButton.js';
+
+  export class MyElement extends ScopedElementsMixin(LitElement) {
+    static get scopedElements() {
+      return {
+        'my-button': MyButton,
+      };
+    }
+
+    render() {
+      return html`
+        <my-button>click me</my-button>
+      `;
+    }
+  }
+  ```
+
+  ```html
+  <!-- before (ScopedElements 1.x) -->
+  <my-element>
+    #shadow-root
+    <my-button-23243424>click me</my-button-23243424>
+  </my-element>
+
+  <!-- after (ScopedElements 2.x) -->
+  <my-element>
+    #shadow-root
+    <my-button>click me</my-button>
+  </my-element>
+  ```
+
+### Patch Changes
+
+- Updated dependencies [72067c0d]
+  - @lion/core@0.18.0
+
 ## 0.12.0
@@ -4,0 +59,0 @@

package.json

 {
   "name": "@lion/button",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "A button that is easily styleable and accessible in all contexts",
@@ -39,3 +39,3 @@ "license": "MIT",
   "dependencies": {
-    "@lion/core": "0.17.0"
+    "@lion/core": "0.18.0"
   },
@@ -42,0 +42,0 @@ "keywords": [

src/LionButton.d.ts

 declare const LionButton_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@lion/core/types/SlotMixinTypes").SlotHost> & Pick<typeof import("@lion/core/types/SlotMixinTypes").SlotHost, "prototype"> & Pick<{
     new (): HTMLElement;
     prototype: HTMLElement;
-}, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/core/types/DisabledWithTabIndexMixinTypes").DisabledWithTabIndexHost> & Pick<typeof import("@lion/core/types/DisabledWithTabIndexMixinTypes").DisabledWithTabIndexHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/core/types/DisabledMixinTypes").DisabledHost> & Pick<typeof import("@lion/core/types/DisabledMixinTypes").DisabledHost, "prototype"> & Pick<typeof LitElement, "prototype" | "render" | "styles" | "getStyles" | "properties" | "observedAttributes" | "createProperty">;
+}, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/core/types/DisabledWithTabIndexMixinTypes").DisabledWithTabIndexHost> & Pick<typeof import("@lion/core/types/DisabledWithTabIndexMixinTypes").DisabledWithTabIndexHost, "prototype"> & import("@open-wc/dedupe-mixin").Constructor<import("@lion/core/types/DisabledMixinTypes").DisabledHost> & Pick<typeof import("@lion/core/types/DisabledMixinTypes").DisabledHost, "prototype"> & Pick<typeof LitElement, "prototype" | "_$litElement$" | "enabledWarnings" | "enableWarning" | "disableWarning" | "addInitializer" | "_initializers" | "elementProperties" | "properties" | "elementStyles" | "styles" | "observedAttributes" | "createProperty" | "shadowRootOptions">;
 /**
@@ -23,3 +23,3 @@ * @typedef {import('@lion/core').TemplateResult} TemplateResult
     };
-    static get styles(): import("@lion/core").CSSResult[];
+    static get styles(): import("lit").CSSResultGroup[];
     /**
@@ -99,4 +99,8 @@ *
 }
-export type TemplateResult = import("@lion/core").TemplateResult;
+export type TemplateResult = {
+    _$litType$: 1 | 2;
+    strings: TemplateStringsArray;
+    values: unknown[];
+};
 import { LitElement } from "@lion/core";
 export {};

src/LionButton.js

@@ -165,5 +165,5 @@ import {
   get _nativeButtonNode() {
-    return /** @type {HTMLButtonElement} */ (Array.from(this.children).find(
-      child => child.slot === '_button',
-    ));
+    return /** @type {HTMLButtonElement} */ (
+      Array.from(this.children).find(child => child.slot === '_button')
+    );
   }
@@ -170,0 +170,0 @@

test/lion-button.test.js

 /* eslint-disable lit-a11y/click-events-have-key-events */
 import { browserDetection } from '@lion/core';
-import { aTimeout, expect, fixture, html, oneEvent, unsafeStatic } from '@open-wc/testing';
+import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
+import { unsafeStatic, html } from 'lit/static-html.js';
 import sinon from 'sinon';
@@ -40,5 +41,5 @@ import '@lion/core/differentKeyEventNamesShimIE';
   it('sync type down to the native button', async () => {
-    const el = /** @type {LionButton} */ (await fixture(
-      `<lion-button type="button">foo</lion-button>`,
-    ));
+    const el = /** @type {LionButton} */ (
+      await fixture(`<lion-button type="button">foo</lion-button>`)
+    );
     const { nativeButtonNode } = getProtectedMembers(el);
@@ -179,5 +180,5 @@
     it('does not override user provided role', async () => {
-      const el = /** @type {LionButton} */ (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');
@@ -192,5 +193,5 @@ });
     it('has a tabindex="-1" when disabled', async () => {
-      const el = /** @type {LionButton} */ (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');
@@ -206,5 +207,5 @@ el.disabled = false;
     it('does not override user provided tabindex', async () => {
-      const el = /** @type {LionButton} */ (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');
@@ -214,5 +215,5 @@ });
     it('disabled does not override user provided tabindex', async () => {
-      const el = /** @type {LionButton} */ (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');
@@ -238,5 +239,5 @@ el.disabled = false;
       const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
-      const el = /** @type {LionButton} */ (await fixture(
-        `<lion-button aria-labelledby="some-id another-id">foo</lion-button>`,
-      ));
+      const el = /** @type {LionButton} */ (
+        await fixture(`<lion-button aria-labelledby="some-id another-id">foo</lion-button>`)
+      );
       expect(el.getAttribute('aria-labelledby')).to.equal('some-id another-id');
@@ -253,3 +254,4 @@ browserDetectionStub.restore();
 
-    it('is accessible', async () => {
+    // TODO: enable when native button is not a child anymore
+    it.skip('is accessible', async () => {
       const el = /** @type {LionButton} */ (await fixture(`<lion-button>foo</lion-button>`));
@@ -259,6 +261,7 @@ await expect(el).to.be.accessible();
 
-    it('is accessible when disabled', async () => {
-      const el = /** @type {LionButton} */ (await fixture(
-        `<lion-button disabled>foo</lion-button>`,
-      ));
+    // TODO: enable when native button is not a child anymore
+    it.skip('is accessible when disabled', async () => {
+      const el = /** @type {LionButton} */ (
+        await fixture(`<lion-button disabled>foo</lion-button>`)
+      );
       await expect(el).to.be.accessible({ ignoredRules: ['color-contrast'] });
@@ -277,5 +280,5 @@ });
         `);
-        const button /** @type {LionButton} */ = /** @type {LionButton} */ (form.querySelector(
-          'lion-button',
-        ));
+        const button /** @type {LionButton} */ = /** @type {LionButton} */ (
+          form.querySelector('lion-button')
+        );
         button.click();
@@ -292,5 +295,5 @@ expect(formSubmitSpy).to.have.been.calledOnce;
         `);
-        const button /** @type {LionButton} */ = /** @type {LionButton} */ (form.querySelector(
-          'lion-button',
-        ));
+        const button /** @type {LionButton} */ = /** @type {LionButton} */ (
+          form.querySelector('lion-button')
+        );
         button.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
@@ -326,11 +329,11 @@ await aTimeout(0);
         `);
-        const btn /** @type {LionButton} */ = /** @type {LionButton} */ (form.querySelector(
-          'lion-button',
-        ));
-        const firstName = /** @type {HTMLInputElement} */ (form.querySelector(
-          'input[name=firstName]',
-        ));
-        const lastName = /** @type {HTMLInputElement} */ (form.querySelector(
-          'input[name=lastName]',
-        ));
+        const btn /** @type {LionButton} */ = /** @type {LionButton} */ (
+          form.querySelector('lion-button')
+        );
+        const firstName = /** @type {HTMLInputElement} */ (
+          form.querySelector('input[name=firstName]')
+        );
+        const lastName = /** @type {HTMLInputElement} */ (
+          form.querySelector('input[name=lastName]')
+        );
         firstName.value = 'Foo';
@@ -449,5 +452,5 @@ lastName.value = 'Bar';
       const clickSpy = /** @type {EventListener} */ (sinon.spy());
-      const el = /** @type {LionButton} */ (await fixture(
-        html` <lion-button @click="${clickSpy}">foo</lion-button> `,
-      ));
+      const el = /** @type {LionButton} */ (
+        await fixture(html` <lion-button @click="${clickSpy}">foo</lion-button> `)
+      );
 
@@ -469,13 +472,15 @@ el.click();
 
-      const el = /** @type {HTMLDivElement} */ (await fixture(
-        html`
-          <div @click="${outsideSpy}">
-            <form @click="${formSpyEarly}">
-              <div @click="${insideSpy}">
-                <lion-button>foo</lion-button>
-              </div>
-            </form>
-          </div>
-        `,
-      ));
+      const el = /** @type {HTMLDivElement} */ (
+        await fixture(
+          html`
+            <div @click="${outsideSpy}">
+              <form @click="${formSpyEarly}">
+                <div @click="${insideSpy}">
+                  <lion-button>foo</lion-button>
+                </div>
+              </form>
+            </div>
+          `,
+        )
+      );
       const lionButton = /** @type {LionButton} */ (el.querySelector('lion-button'));
@@ -498,9 +503,11 @@ const form = /** @type {HTMLFormElement} */ (el.querySelector('form'));
     it('works when connected to different form', async () => {
-      const form1El = /** @type {HTMLFormElement} */ (await fixture(
-        html`
-          <form>
-            <lion-button>foo</lion-button>
-          </form>
-        `,
-      ));
+      const form1El = /** @type {HTMLFormElement} */ (
+        await fixture(
+          html`
+            <form>
+              <lion-button>foo</lion-button>
+            </form>
+          `,
+        )
+      );
       const lionButton = /** @type {LionButton} */ (form1El.querySelector('lion-button'));
@@ -517,11 +524,13 @@
 
-      const form2El = /** @type {HTMLFormElement} */ (await fixture(
-        html`
-          <div @click="${outsideSpy}">
-            <form @click="${formSpyEarly}">
-              <div @click="${insideSpy}">${lionButton}</div>
-            </form>
-          </div>
-        `,
-      ));
+      const form2El = /** @type {HTMLFormElement} */ (
+        await fixture(
+          html`
+            <div @click="${outsideSpy}">
+              <form @click="${formSpyEarly}">
+                <div @click="${insideSpy}">${lionButton}</div>
+              </form>
+            </div>
+          `,
+        )
+      );
       const form2Node = /** @type {HTMLFormElement} */ (form2El.querySelector('form'));
@@ -552,5 +561,5 @@
         const nativeButtonEl = /** @type {LionButton} */ (await fixture('<button>foo</button>'));
-        const lionButtonEl = /** @type {LionButton} */ (await fixture(
-          '<lion-button>foo</lion-button>',
-        ));
+        const lionButtonEl = /** @type {LionButton} */ (
+          await fixture('<lion-button>foo</lion-button>')
+        );
         nativeButtonEvent = await prepareClickEvent(nativeButtonEl);
@@ -597,5 +606,5 @@ lionButtonEvent = await prepareClickEvent(lionButtonEl);
           const clickSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
-          const el = /** @type {LionButton} */ (await fixture(
-            `<lion-button type="${type}">foo</lion-button>`,
-          ));
+          const el = /** @type {LionButton} */ (
+            await fixture(`<lion-button type="${type}">foo</lion-button>`)
+          );
           const tag = unsafeStatic(container);
@@ -602,0 +611,0 @@ await fixture(html`<${tag} @click="${clickSpy}">${el}</${tag}>`);

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

95070

increased by2.31%

Lines of code

1476

increased by0.89%

Dependency changes

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

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@1.6.32.0.4(transitive)

• + Added@open-wc/scoped-elements@2.2.4(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

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

• - Removed@open-wc/scoped-elements@1.3.7(transitive)

• - Removedlit-element@2.4.0(transitive)

• - Removedlit-html@1.4.1(transitive)

• Updated@lion/core@0.18.0