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

Comparing version 0.39.3 to 0.39.4

package.json

 {
     "name": "@spectrum-web-components/action-button",
-    "version": "0.39.3",
+    "version": "0.39.4",
     "publishConfig": {
@@ -60,7 +60,7 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.39.3",
-        "@spectrum-web-components/button": "^0.39.3",
-        "@spectrum-web-components/icon": "^0.39.3",
-        "@spectrum-web-components/icons-ui": "^0.39.3",
-        "@spectrum-web-components/shared": "^0.39.3"
+        "@spectrum-web-components/base": "^0.39.4",
+        "@spectrum-web-components/button": "^0.39.4",
+        "@spectrum-web-components/icon": "^0.39.4",
+        "@spectrum-web-components/icons-ui": "^0.39.4",
+        "@spectrum-web-components/shared": "^0.39.4"
     },
@@ -76,3 +76,3 @@ "devDependencies": {
     ],
-    "gitHead": "d7840b3a9b99db4de62c44e3fb91b69dec7319af"
+    "gitHead": "f745c90e8e9ea85ff10be025e058b14cc925ec9f"
 }

src/action-button.css.dev.js

@@ -62,3 +62,3 @@ "use strict";
 --mod-actionbutton-content-color-focus-selected-emphasized,var(--spectrum-white)
-)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-50)*2 + var(--spectrum-workflow-icon-size-50));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -77,2 +77,4 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 )
+);block-size:var(
+--mod-actionbutton-height,var(--spectrum-actionbutton-height)
 );border-color:var(
@@ -99,3 +101,3 @@ --highcontrast-actionbutton-border-color-default,var(
 var(--spectrum-actionbutton-edge-to-visual-only)
-));height:var(--mod-actionbutton-height,var(--spectrum-actionbutton-height));min-inline-size:var(
+));min-inline-size:var(
 --mod-actionbutton-min-width,var(--spectrum-actionbutton-min-width)
@@ -176,4 +178,6 @@ );padding-inline:var(
 )
-)}::slotted([slot=icon]){color:inherit;height:var(
+)}::slotted([slot=icon]){block-size:var(
 --mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
+);color:inherit;inline-size:var(
+--mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
 );margin-inline-end:calc(var(
@@ -191,5 +195,3 @@ --mod-actionbutton-edge-to-visual-only,
 var(--spectrum-actionbutton-edge-to-text)
-));width:var(
---mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
-)}.hold-affordance+::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(
+))}.hold-affordance+::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(
 --mod-actionbutton-edge-to-visual-only,
@@ -196,0 +198,0 @@ var(--spectrum-actionbutton-edge-to-visual-only)

src/action-button.css.js

@@ -60,3 +60,3 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 --mod-actionbutton-content-color-focus-selected-emphasized,var(--spectrum-white)
-)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-50)*2 + var(--spectrum-workflow-icon-size-50));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -75,2 +75,4 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 )
+);block-size:var(
+--mod-actionbutton-height,var(--spectrum-actionbutton-height)
 );border-color:var(
@@ -97,3 +99,3 @@ --highcontrast-actionbutton-border-color-default,var(
 var(--spectrum-actionbutton-edge-to-visual-only)
-));height:var(--mod-actionbutton-height,var(--spectrum-actionbutton-height));min-inline-size:var(
+));min-inline-size:var(
 --mod-actionbutton-min-width,var(--spectrum-actionbutton-min-width)
@@ -174,4 +176,6 @@ );padding-inline:var(
 )
-)}::slotted([slot=icon]){color:inherit;height:var(
+)}::slotted([slot=icon]){block-size:var(
 --mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
+);color:inherit;inline-size:var(
+--mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
 );margin-inline-end:calc(var(
@@ -189,5 +193,3 @@ --mod-actionbutton-edge-to-visual-only,
 var(--spectrum-actionbutton-edge-to-text)
-));width:var(
---mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
-)}.hold-affordance+::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(
+))}.hold-affordance+::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(
 --mod-actionbutton-edge-to-visual-only,
@@ -194,0 +196,0 @@ var(--spectrum-actionbutton-edge-to-visual-only)

src/spectrum-action-button.css.dev.js

@@ -62,3 +62,3 @@ "use strict";
 --mod-actionbutton-content-color-focus-selected-emphasized,var(--spectrum-white)
-)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-50)*2 + var(--spectrum-workflow-icon-size-50));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -77,2 +77,4 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 )
+);block-size:var(
+--mod-actionbutton-height,var(--spectrum-actionbutton-height)
 );border-color:var(
@@ -99,3 +101,3 @@ --highcontrast-actionbutton-border-color-default,var(
 var(--spectrum-actionbutton-edge-to-visual-only)
-));height:var(--mod-actionbutton-height,var(--spectrum-actionbutton-height));min-inline-size:var(
+));min-inline-size:var(
 --mod-actionbutton-min-width,var(--spectrum-actionbutton-min-width)
@@ -176,4 +178,6 @@ );padding-inline:var(
 )
-)}::slotted([slot=icon]){color:inherit;height:var(
+)}::slotted([slot=icon]){block-size:var(
 --mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
+);color:inherit;inline-size:var(
+--mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
 );margin-inline-end:calc(var(
@@ -191,5 +195,3 @@ --mod-actionbutton-edge-to-visual-only,
 var(--spectrum-actionbutton-edge-to-text)
-));width:var(
---mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
-)}.hold-affordance+::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(
+))}.hold-affordance+::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(
 --mod-actionbutton-edge-to-visual-only,
@@ -196,0 +198,0 @@ var(--spectrum-actionbutton-edge-to-visual-only)

src/spectrum-action-button.css.js

@@ -60,3 +60,3 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 --mod-actionbutton-content-color-focus-selected-emphasized,var(--spectrum-white)
-)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
+)}:host([size=xs]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-50)*2 + var(--spectrum-workflow-icon-size-50));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(
 --spectrum-action-button-edge-to-hold-icon-extra-small
@@ -75,2 +75,4 @@ );--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(
 )
+);block-size:var(
+--mod-actionbutton-height,var(--spectrum-actionbutton-height)
 );border-color:var(
@@ -97,3 +99,3 @@ --highcontrast-actionbutton-border-color-default,var(
 var(--spectrum-actionbutton-edge-to-visual-only)
-));height:var(--mod-actionbutton-height,var(--spectrum-actionbutton-height));min-inline-size:var(
+));min-inline-size:var(
 --mod-actionbutton-min-width,var(--spectrum-actionbutton-min-width)
@@ -174,4 +176,6 @@ );padding-inline:var(
 )
-)}::slotted([slot=icon]){color:inherit;height:var(
+)}::slotted([slot=icon]){block-size:var(
 --mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
+);color:inherit;inline-size:var(
+--mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
 );margin-inline-end:calc(var(
@@ -189,5 +193,3 @@ --mod-actionbutton-edge-to-visual-only,
 var(--spectrum-actionbutton-edge-to-text)
-));width:var(
---mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)
-)}.hold-affordance+::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(
+))}.hold-affordance+::slotted([slot=icon]),[icon-only]::slotted([slot=icon]){margin-inline-start:calc(var(
 --mod-actionbutton-edge-to-visual-only,
@@ -194,0 +196,0 @@ var(--spectrum-actionbutton-edge-to-visual-only)

test/action-button.test.js

@@ -15,3 +15,3 @@ "use strict";
 import { sendKeys } from "@web/test-runner-commands";
-import { spy } from "sinon";
+import { spy, stub } from "sinon";
 import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
@@ -36,2 +36,17 @@ import { m as BlackActionButton } from "../stories/action-button-black.stories.js";
   });
+  it('gardens "value" as a property', async () => {
+    const el = await fixture(
+      html`
+                <sp-action-button>Button</sp-action-button>
+            `
+    );
+    await elementUpdated(el);
+    expect(el.hasAttribute("value")).to.be.false;
+    el.value = "Value";
+    await elementUpdated(el);
+    expect(el.hasAttribute("value")).to.be.true;
+    el.value = "";
+    await elementUpdated(el);
+    expect(el.hasAttribute("value")).to.be.false;
+  });
   it("loads [hold-affordance]", async () => {
@@ -242,3 +257,38 @@ const el = await fixture(
   });
+  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 that `variant` is deprecated", async () => {
+      const el = await fixture(
+        html`
+                    <sp-action-button variant="white">Button</sp-action-button>
+                `
+      );
+      await elementUpdated(el);
+      expect(consoleWarnStub.called).to.be.true;
+      const spyCall = consoleWarnStub.getCall(0);
+      expect(
+        spyCall.args.at(0).includes('"variant"'),
+        "confirm variant-centric message"
+      ).to.be.true;
+      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        data: {
+          localName: "sp-action-button",
+          type: "api",
+          level: "default"
+        }
+      });
+    });
+  });
 });
 //# sourceMappingURL=action-button.test.js.map

No alert changes

Improved metrics

Total package byte prevSize

424271

increased by1.07%

Lines of code

3474

increased by1.7%

Dependency changes

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

• Updated@spectrum-web-components/button@^0.39.4

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

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

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