@spectrum-web-components/button - npm Package Compare versions

Comparing version 0.42.4 to 0.42.5

package.json

 {
     "name": "@spectrum-web-components/button",
-    "version": "0.42.4",
+    "version": "0.42.5",
     "publishConfig": {
@@ -85,9 +85,9 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.42.4",
-        "@spectrum-web-components/clear-button": "^0.42.4",
-        "@spectrum-web-components/close-button": "^0.42.4",
-        "@spectrum-web-components/icon": "^0.42.4",
-        "@spectrum-web-components/icons-ui": "^0.42.4",
-        "@spectrum-web-components/progress-circle": "^0.42.4",
-        "@spectrum-web-components/shared": "^0.42.4"
+        "@spectrum-web-components/base": "^0.42.5",
+        "@spectrum-web-components/clear-button": "^0.42.5",
+        "@spectrum-web-components/close-button": "^0.42.5",
+        "@spectrum-web-components/icon": "^0.42.5",
+        "@spectrum-web-components/icons-ui": "^0.42.5",
+        "@spectrum-web-components/progress-circle": "^0.42.5",
+        "@spectrum-web-components/shared": "^0.42.5"
     },
@@ -103,3 +103,3 @@ "devDependencies": {
     ],
-    "gitHead": "4924ffd06681ced537edaed873a9ce8b42cf155c"
+    "gitHead": "f29fd737947945de8cd6f5bc03fb389d386c9c3a"
 }

test/button.test.js

@@ -12,2 +12,3 @@ "use strict";
 import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
+import { stub } from "sinon";
 import {
@@ -21,14 +22,43 @@ a11ySnapshot,
   testForLitDevWarnings(
-    async () => await fixture(
-      html`
-                    <sp-button tabindex="0">Button</sp-button>
-                `
-    )
+    async () => await fixture(html`
+                <sp-button tabindex="0">Button</sp-button>
+            `)
   );
+  describe("dev mode", () => {
+    let consoleWarnStub;
+    before(() => {
+      window.__swc.verbose = true;
+      consoleWarnStub = stub(console, "warn");
+    });
+    afterEach(() => {
+      consoleWarnStub.resetHistory();
+    });
+    after(() => {
+      window.__swc.verbose = false;
+      consoleWarnStub.restore();
+    });
+    it("warns in devMode when white/black variant is provided", async () => {
+      const el = await fixture(html`
+                <sp-button tabindex="0" variant="white">Button</sp-button>
+            `);
+      await elementUpdated(el);
+      expect(consoleWarnStub.called).to.be.true;
+      const spyCall = consoleWarnStub.getCall(0);
+      expect(
+        spyCall.args.at(0).includes("deprecated"),
+        "confirm deprecated variant warning"
+      ).to.be.true;
+      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        data: {
+          localName: "sp-button",
+          type: "api",
+          level: "default"
+        }
+      });
+    });
+  });
   it("loads default", async () => {
-    const el = await fixture(
-      html`
-                <sp-button tabindex="0">Button</sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button tabindex="0">Button</sp-button>
+        `);
     await elementUpdated(el);
@@ -42,7 +72,5 @@ expect(el).to.not.be.undefined;
   it("loads default w/ element content", async () => {
-    const el = await fixture(
-      html`
-                <sp-button label="Button"><svg></svg></sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button label="Button"><svg></svg></sp-button>
+        `);
     await elementUpdated(el);
@@ -53,10 +81,8 @@ expect(el).to.not.be.undefined;
   it("loads default w/ an icon", async () => {
-    const el = await fixture(
-      html`
-                <sp-button label="">
-                    Button
-                    <svg slot="icon"></svg>
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button label="">
+                Button
+                <svg slot="icon"></svg>
+            </sp-button>
+        `);
     await elementUpdated(el);
@@ -69,9 +95,7 @@ expect(el).to.not.be.undefined;
   it("loads default only icon", async () => {
-    const el = await fixture(
-      html`
-                <sp-button label="Button" icon-only>
-                    <svg slot="icon"></svg>
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button label="Button" icon-only>
+                <svg slot="icon"></svg>
+            </sp-button>
+        `);
     await elementUpdated(el);
@@ -82,7 +106,5 @@ expect(el).to.not.be.undefined;
   it("has a stable/predictable `updateComplete`", async () => {
-    const test = await fixture(
-      html`
-                <div></div>
-            `
-    );
+    const test = await fixture(html`
+            <div></div>
+        `);
     let keydownTime = -1;
@@ -114,7 +136,5 @@ let updateComplete1 = -1;
   it('manages "role"', async () => {
-    const el = await fixture(
-      html`
-                <sp-button>Button</sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button>Button</sp-button>
+        `);
     await elementUpdated(el);
@@ -131,10 +151,8 @@ expect(el.getAttribute("role")).to.equal("button");
     const testNode = document.createTextNode("Button");
-    const el = await fixture(
-      html`
-                <sp-button>
-                    ${testNode}
-                    <svg slot="icon"></svg>
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button>
+                ${testNode}
+                <svg slot="icon"></svg>
+            </sp-button>
+        `);
     await elementUpdated(el);
@@ -151,7 +169,5 @@ const labelTestableEl = el;
   it("loads with href", async () => {
-    const el = await fixture(
-      html`
-                <sp-button href="test_url">With Href</sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button href="test_url">With Href</sp-button>
+        `);
     await elementUpdated(el);
@@ -162,9 +178,5 @@ expect(el).to.not.be.undefined;
   it("loads with href and target", async () => {
-    const el = await fixture(
-      html`
-                <sp-button href="test_url" target="_blank">
-                    With Target
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button href="test_url" target="_blank">With Target</sp-button>
+        `);
     await elementUpdated(el);
@@ -176,9 +188,5 @@ expect(el).to.not.be.undefined;
     let focusedCount = 0;
-    const el = await fixture(
-      html`
-                <sp-button href="test_url" target="_blank">
-                    With Target
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button href="test_url" target="_blank">With Target</sp-button>
+        `);
     await elementUpdated(el);
@@ -208,7 +216,5 @@ const input = document.createElement("input");
     const clickSpy = spy();
-    const el = await fixture(
-      html`
-                <sp-button @click=${() => clickSpy()}>Button</sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button @click=${() => clickSpy()}>Button</sp-button>
+        `);
     await elementUpdated(el);
@@ -236,7 +242,5 @@ el.click();
   it("`disabled` manages `tabindex`", async () => {
-    const el = await fixture(
-      html`
-                <sp-button disabled>Button</sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button disabled>Button</sp-button>
+        `);
     await elementUpdated(el);
@@ -255,9 +259,5 @@ expect(el.tabIndex).to.equal(-1);
   it("manages `aria-disabled`", async () => {
-    const el = await fixture(
-      html`
-                <sp-button href="test_url" target="_blank">
-                    With Target
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button href="test_url" target="_blank">With Target</sp-button>
+        `);
     await elementUpdated(el);
@@ -273,15 +273,13 @@ expect(el.hasAttribute("aria-disabled"), "initially not").to.be.false;
   it("manages aria-label from disabled state", async () => {
-    const el = await fixture(
-      html`
-                <sp-button
-                    href="test_url"
-                    target="_blank"
-                    label="clickable"
-                    disabled
-                    pending-label="Pending Button"
-                >
-                    Click me
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button
+                href="test_url"
+                target="_blank"
+                label="clickable"
+                disabled
+                pending-label="Pending Button"
+            >
+                Click me
+            </sp-button>
+        `);
     await elementUpdated(el);
@@ -300,14 +298,12 @@ expect(el.getAttribute("aria-label")).to.equal("clickable");
   it("manages aria-label from pending state", async () => {
-    const el = await fixture(
-      html`
-                <sp-button
-                    href="test_url"
-                    target="_blank"
-                    label="clickable"
-                    pending
-                >
-                    Click me
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button
+                href="test_url"
+                target="_blank"
+                label="clickable"
+                pending
+            >
+                Click me
+            </sp-button>
+        `);
     await elementUpdated(el);
@@ -326,14 +322,12 @@ expect(el.getAttribute("aria-label")).to.equal("Pending");
   it("manages aria-label set from outside", async () => {
-    const el = await fixture(
-      html`
-                <sp-button
-                    href="test_url"
-                    target="_blank"
-                    aria-label="test"
-                    pending-label="Pending Button"
-                >
-                    Click me
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button
+                href="test_url"
+                target="_blank"
+                aria-label="test"
+                pending-label="Pending Button"
+            >
+                Click me
+            </sp-button>
+        `);
     await elementUpdated(el);
@@ -355,7 +349,5 @@ expect(el.getAttribute("aria-label")).to.equal("test");
   it("updates pending label accessibly", async () => {
-    const el = await fixture(
-      html`
-                <sp-button href="test_url" target="_blank">Button</sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button href="test_url" target="_blank">Button</sp-button>
+        `);
     await elementUpdated(el);
@@ -388,9 +380,5 @@ el.pending = true;
   it("manages tabIndex while disabled", async () => {
-    const el = await fixture(
-      html`
-                <sp-button href="test_url" target="_blank">
-                    With Target
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button href="test_url" target="_blank">With Target</sp-button>
+        `);
     await elementUpdated(el);
@@ -410,9 +398,5 @@ expect(el.tabIndex).to.equal(0);
     const clickSpy = spy();
-    const el = await fixture(
-      html`
-                <sp-button disabled @click=${() => clickSpy()}>
-                    Button
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button disabled @click=${() => clickSpy()}>Button</sp-button>
+        `);
     await elementUpdated(el);
@@ -426,7 +410,5 @@ expect(clickSpy.callCount).to.equal(0);
     const clickSpy = spy();
-    const el = await fixture(
-      html`
-                <sp-button @click=${() => clickSpy()}>Button</sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button @click=${() => clickSpy()}>Button</sp-button>
+        `);
     await elementUpdated(el);
@@ -544,18 +526,16 @@ el.dispatchEvent(
     const resetSpy = spy();
-    const test = await fixture(
-      html`
-                <form
-                    @submit=${(event) => {
-        event.preventDefault();
-        submitSpy();
-      }}
-                    @reset=${(event) => {
-        event.preventDefault();
-        resetSpy();
-      }}
-                >
-                    <sp-button>Button</sp-button>
-                </form>
-            `
-    );
+    const test = await fixture(html`
+            <form
+                @submit=${(event) => {
+      event.preventDefault();
+      submitSpy();
+    }}
+                @reset=${(event) => {
+      event.preventDefault();
+      resetSpy();
+    }}
+            >
+                <sp-button>Button</sp-button>
+            </form>
+        `);
     const el = test.querySelector("sp-button");
@@ -581,7 +561,5 @@ await elementUpdated(el);
     const clickSpy = spy();
-    const el = await fixture(
-      html`
-                <sp-button href="test_url">With Href</sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button href="test_url">With Href</sp-button>
+        `);
     await elementUpdated(el);
@@ -599,9 +577,7 @@ el.anchorElement.addEventListener("click", (event) => {
   it('manages "active" while focused', async () => {
-    const el = await fixture(
-      html`
-                <sp-button label="Button">
-                    <svg slot="icon"></svg>
-                </sp-button>
-            `
-    );
+    const el = await fixture(html`
+            <sp-button label="Button">
+                <svg slot="icon"></svg>
+            </sp-button>
+        `);
     await elementUpdated(el);
@@ -623,7 +599,5 @@ el.focus();
     it("manages [quiet]", async () => {
-      const el = await fixture(
-        html`
-                    <sp-button quiet>Button</sp-button>
-                `
-      );
+      const el = await fixture(html`
+                <sp-button quiet>Button</sp-button>
+            `);
       await elementUpdated(el);
@@ -636,7 +610,5 @@ expect(el.treatment).to.equal("outline");
     it('upgrades [variant="cta"] to [variant="accent"]', async () => {
-      const el = await fixture(
-        html`
-                    <sp-button variant="cta">Button</sp-button>
-                `
-      );
+      const el = await fixture(html`
+                <sp-button variant="cta">Button</sp-button>
+            `);
       await elementUpdated(el);
@@ -646,7 +618,5 @@ expect(el.variant).to.equal("accent");
     it('manages [variant="overBackground"]', async () => {
-      const el = await fixture(
-        html`
-                    <sp-button variant="overBackground">Button</sp-button>
-                `
-      );
+      const el = await fixture(html`
+                <sp-button variant="overBackground">Button</sp-button>
+            `);
       await elementUpdated(el);
@@ -658,7 +628,5 @@ expect(el.hasAttribute("variant")).to.not.equal("overBackground");
     it('forces [variant="accent"]', async () => {
-      const el = await fixture(
-        html`
-                    <sp-button variant="not-supported">Button</sp-button>
-                `
-      );
+      const el = await fixture(html`
+                <sp-button variant="not-supported">Button</sp-button>
+            `);
       await elementUpdated(el);
@@ -665,0 +633,0 @@ expect(el.variant).to.equal("accent");

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

849647

increased by0.06%

Worsened metrics

Lines of code

5966

decreased by-0.53%

Dependency changes

• Updated@spectrum-web-components/base@^0.42.5

• Updated@spectrum-web-components/clear-button@^0.42.5

• Updated@spectrum-web-components/close-button@^0.42.5

• Updated@spectrum-web-components/icon@^0.42.5

• Updated@spectrum-web-components/icons-ui@^0.42.5

• Updated@spectrum-web-components/progress-circle@^0.42.5

• Updated@spectrum-web-components/shared@^0.42.5