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

Comparing version 0.41.0 to 0.41.1

package.json

 {
     "name": "@spectrum-web-components/button",
-    "version": "0.41.0",
+    "version": "0.41.1",
     "publishConfig": {
@@ -85,11 +85,11 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.41.0",
-        "@spectrum-web-components/clear-button": "^0.41.0",
-        "@spectrum-web-components/close-button": "^0.41.0",
-        "@spectrum-web-components/icon": "^0.41.0",
-        "@spectrum-web-components/icons-ui": "^0.41.0",
-        "@spectrum-web-components/shared": "^0.41.0"
+        "@spectrum-web-components/base": "^0.41.1",
+        "@spectrum-web-components/clear-button": "^0.41.1",
+        "@spectrum-web-components/close-button": "^0.41.1",
+        "@spectrum-web-components/icon": "^0.41.1",
+        "@spectrum-web-components/icons-ui": "^0.41.1",
+        "@spectrum-web-components/shared": "^0.41.1"
     },
     "devDependencies": {
-        "@spectrum-css/button": "^11.2.0"
+        "@spectrum-css/button": "^11.2.1"
     },
@@ -102,3 +102,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "0bf38fd427adc39804b228a4c61de623e5ebb82e"
+    "gitHead": "1eded35d98d01973b40990486b86840ba464a2da"
 }

src/button-base.css.dev.js

 "use strict";
 import { css } from "@spectrum-web-components/base";
 const styles = css`
-:host{display:inline-flex;vertical-align:top;--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-100);--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([dir]){-webkit-appearance:none}:host([disabled]){cursor:auto;pointer-events:none}#button{inset:0;position:absolute}::slotted(sp-overlay),::slotted(sp-tooltip){position:absolute}:host:after{pointer-events:none}slot[name=icon]::slotted(img),slot[name=icon]::slotted(svg){fill:currentcolor;stroke:currentcolor;height:var(
---spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)
-);width:var(
---spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)
+:host{display:inline-flex;vertical-align:top;--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-100);--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([dir]){-webkit-appearance:none}:host([disabled]){cursor:auto;pointer-events:none}#button{inset:0;position:absolute}::slotted(sp-overlay),::slotted(sp-tooltip){position:absolute}:host:after{pointer-events:none}slot[name=icon]::slotted(img),slot[name=icon]::slotted(svg){fill:currentcolor;stroke:currentcolor;block-size:var(
+--spectrum-icon-size,var(--spectrum-workflow-icon-size-100)
+);inline-size:var(
+--spectrum-icon-size,var(--spectrum-workflow-icon-size-100)
 )}[icon-only]+#label{display:contents}:host([size=xs]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-50);--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-75);--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=l]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-200);--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-300);--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-400);--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}
@@ -9,0 +9,0 @@ `;

src/button-base.css.js

 "use strict";import{css as s}from"@spectrum-web-components/base";const e=s`
-:host{display:inline-flex;vertical-align:top;--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-100);--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([dir]){-webkit-appearance:none}:host([disabled]){cursor:auto;pointer-events:none}#button{inset:0;position:absolute}::slotted(sp-overlay),::slotted(sp-tooltip){position:absolute}:host:after{pointer-events:none}slot[name=icon]::slotted(img),slot[name=icon]::slotted(svg){fill:currentcolor;stroke:currentcolor;height:var(
---spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)
-);width:var(
---spectrum-alias-workflow-icon-size-m,var(--spectrum-global-dimension-size-225)
+:host{display:inline-flex;vertical-align:top;--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-100);--spectrum-icon-size:var(--spectrum-workflow-icon-size-100)}:host([dir]){-webkit-appearance:none}:host([disabled]){cursor:auto;pointer-events:none}#button{inset:0;position:absolute}::slotted(sp-overlay),::slotted(sp-tooltip){position:absolute}:host:after{pointer-events:none}slot[name=icon]::slotted(img),slot[name=icon]::slotted(svg){fill:currentcolor;stroke:currentcolor;block-size:var(
+--spectrum-icon-size,var(--spectrum-workflow-icon-size-100)
+);inline-size:var(
+--spectrum-icon-size,var(--spectrum-workflow-icon-size-100)
 )}[icon-only]+#label{display:contents}:host([size=xs]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-50);--spectrum-icon-size:var(--spectrum-workflow-icon-size-50)}:host([size=s]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-75);--spectrum-icon-size:var(--spectrum-workflow-icon-size-75)}:host([size=l]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-200);--spectrum-icon-size:var(--spectrum-workflow-icon-size-200)}:host([size=xl]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-300);--spectrum-icon-size:var(--spectrum-workflow-icon-size-300)}:host([size=xxl]){--spectrum-progress-circle-size:var(--spectrum-workflow-icon-size-400);--spectrum-icon-size:var(--spectrum-workflow-icon-size-400)}
 `;export default e;
 //# sourceMappingURL=button-base.css.js.map

src/button.css.dev.js

@@ -139,3 +139,3 @@ "use strict";
 )
-)}@media (hover:hover){:host(:hover){box-shadow:none}:host(:hover){background-color:var(
+)}@media (hover:hover){:host(:hover){background-color:var(
 --highcontrast-button-background-color-hover,var(
@@ -148,3 +148,3 @@ --mod-button-background-color-hover,var(--spectrum-button-background-color-hover)
 )
-);color:var(
+);box-shadow:none;color:var(
 --highcontrast-button-content-color-hover,var(
@@ -205,6 +205,4 @@ --mod-button-content-color-hover,var(--spectrum-button-content-color-hover)
 --mod-button-focus-ring-thickness,var(--spectrum-button-focus-ring-thickness)
-) ButtonText;forced-color-adjust:none}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default:ButtonText;--highcontrast-button-content-color-default:ButtonFace;--highcontrast-button-background-color-disabled:ButtonFace;--highcontrast-button-background-color-hover:Highlight;--highcontrast-button-background-color-down:Highlight;--highcontrast-button-background-color-focus:Highlight;--highcontrast-button-content-color-hover:ButtonFace;--highcontrast-button-content-color-down:ButtonFace;--highcontrast-button-content-color-focus:ButtonFace}:host([variant=accent][treatment=fill]) #label{forced-color-adjust:none}}:host([static=white]){--spectrum-button-focus-indicator-color:var(
+) ButtonText;forced-color-adjust:none}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default:ButtonText;--highcontrast-button-content-color-default:ButtonFace;--highcontrast-button-background-color-disabled:ButtonFace;--highcontrast-button-background-color-hover:Highlight;--highcontrast-button-background-color-down:Highlight;--highcontrast-button-background-color-focus:Highlight;--highcontrast-button-content-color-hover:ButtonFace;--highcontrast-button-content-color-down:ButtonFace;--highcontrast-button-content-color-focus:ButtonFace}:host([variant=accent][treatment=fill]) #label{forced-color-adjust:none}}:host([static=black]),:host([static=white]){--spectrum-button-focus-indicator-color:var(
 --mod-static-black-focus-indicator-color,var(--spectrum-static-black-focus-indicator-color)
-)}:host([static=black]){--spectrum-button-focus-indicator-color:var(
---mod-static-black-focus-indicator-color,var(--spectrum-static-black-focus-indicator-color)
 )}:host{--spectrum-button-background-color-default:var(
@@ -211,0 +209,0 @@ --system-spectrum-button-background-color-default

src/button.css.js

@@ -137,3 +137,3 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 )
-)}@media (hover:hover){:host(:hover){box-shadow:none}:host(:hover){background-color:var(
+)}@media (hover:hover){:host(:hover){background-color:var(
 --highcontrast-button-background-color-hover,var(
@@ -146,3 +146,3 @@ --mod-button-background-color-hover,var(--spectrum-button-background-color-hover)
 )
-);color:var(
+);box-shadow:none;color:var(
 --highcontrast-button-content-color-hover,var(
@@ -203,6 +203,4 @@ --mod-button-content-color-hover,var(--spectrum-button-content-color-hover)
 --mod-button-focus-ring-thickness,var(--spectrum-button-focus-ring-thickness)
-) ButtonText;forced-color-adjust:none}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default:ButtonText;--highcontrast-button-content-color-default:ButtonFace;--highcontrast-button-background-color-disabled:ButtonFace;--highcontrast-button-background-color-hover:Highlight;--highcontrast-button-background-color-down:Highlight;--highcontrast-button-background-color-focus:Highlight;--highcontrast-button-content-color-hover:ButtonFace;--highcontrast-button-content-color-down:ButtonFace;--highcontrast-button-content-color-focus:ButtonFace}:host([variant=accent][treatment=fill]) #label{forced-color-adjust:none}}:host([static=white]){--spectrum-button-focus-indicator-color:var(
+) ButtonText;forced-color-adjust:none}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default:ButtonText;--highcontrast-button-content-color-default:ButtonFace;--highcontrast-button-background-color-disabled:ButtonFace;--highcontrast-button-background-color-hover:Highlight;--highcontrast-button-background-color-down:Highlight;--highcontrast-button-background-color-focus:Highlight;--highcontrast-button-content-color-hover:ButtonFace;--highcontrast-button-content-color-down:ButtonFace;--highcontrast-button-content-color-focus:ButtonFace}:host([variant=accent][treatment=fill]) #label{forced-color-adjust:none}}:host([static=black]),:host([static=white]){--spectrum-button-focus-indicator-color:var(
 --mod-static-black-focus-indicator-color,var(--spectrum-static-black-focus-indicator-color)
-)}:host([static=black]){--spectrum-button-focus-indicator-color:var(
---mod-static-black-focus-indicator-color,var(--spectrum-static-black-focus-indicator-color)
 )}:host{--spectrum-button-background-color-default:var(
@@ -209,0 +207,0 @@ --system-spectrum-button-background-color-default

src/spectrum-button.css.dev.js

@@ -139,3 +139,3 @@ "use strict";
 )
-)}@media (hover:hover){:host(:hover){box-shadow:none}:host(:hover){background-color:var(
+)}@media (hover:hover){:host(:hover){background-color:var(
 --highcontrast-button-background-color-hover,var(
@@ -148,3 +148,3 @@ --mod-button-background-color-hover,var(--spectrum-button-background-color-hover)
 )
-);color:var(
+);box-shadow:none;color:var(
 --highcontrast-button-content-color-hover,var(
@@ -205,6 +205,4 @@ --mod-button-content-color-hover,var(--spectrum-button-content-color-hover)
 --mod-button-focus-ring-thickness,var(--spectrum-button-focus-ring-thickness)
-) ButtonText;forced-color-adjust:none}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default:ButtonText;--highcontrast-button-content-color-default:ButtonFace;--highcontrast-button-background-color-disabled:ButtonFace;--highcontrast-button-background-color-hover:Highlight;--highcontrast-button-background-color-down:Highlight;--highcontrast-button-background-color-focus:Highlight;--highcontrast-button-content-color-hover:ButtonFace;--highcontrast-button-content-color-down:ButtonFace;--highcontrast-button-content-color-focus:ButtonFace}:host([variant=accent][treatment=fill]) #label{forced-color-adjust:none}}:host([static=white]){--spectrum-button-focus-indicator-color:var(
+) ButtonText;forced-color-adjust:none}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default:ButtonText;--highcontrast-button-content-color-default:ButtonFace;--highcontrast-button-background-color-disabled:ButtonFace;--highcontrast-button-background-color-hover:Highlight;--highcontrast-button-background-color-down:Highlight;--highcontrast-button-background-color-focus:Highlight;--highcontrast-button-content-color-hover:ButtonFace;--highcontrast-button-content-color-down:ButtonFace;--highcontrast-button-content-color-focus:ButtonFace}:host([variant=accent][treatment=fill]) #label{forced-color-adjust:none}}:host([static=black]),:host([static=white]){--spectrum-button-focus-indicator-color:var(
 --mod-static-black-focus-indicator-color,var(--spectrum-static-black-focus-indicator-color)
-)}:host([static=black]){--spectrum-button-focus-indicator-color:var(
---mod-static-black-focus-indicator-color,var(--spectrum-static-black-focus-indicator-color)
 )}:host{--spectrum-button-background-color-default:var(
@@ -211,0 +209,0 @@ --system-spectrum-button-background-color-default

src/spectrum-button.css.js

@@ -137,3 +137,3 @@ "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
 )
-)}@media (hover:hover){:host(:hover){box-shadow:none}:host(:hover){background-color:var(
+)}@media (hover:hover){:host(:hover){background-color:var(
 --highcontrast-button-background-color-hover,var(
@@ -146,3 +146,3 @@ --mod-button-background-color-hover,var(--spectrum-button-background-color-hover)
 )
-);color:var(
+);box-shadow:none;color:var(
 --highcontrast-button-content-color-hover,var(
@@ -203,6 +203,4 @@ --mod-button-content-color-hover,var(--spectrum-button-content-color-hover)
 --mod-button-focus-ring-thickness,var(--spectrum-button-focus-ring-thickness)
-) ButtonText;forced-color-adjust:none}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default:ButtonText;--highcontrast-button-content-color-default:ButtonFace;--highcontrast-button-background-color-disabled:ButtonFace;--highcontrast-button-background-color-hover:Highlight;--highcontrast-button-background-color-down:Highlight;--highcontrast-button-background-color-focus:Highlight;--highcontrast-button-content-color-hover:ButtonFace;--highcontrast-button-content-color-down:ButtonFace;--highcontrast-button-content-color-focus:ButtonFace}:host([variant=accent][treatment=fill]) #label{forced-color-adjust:none}}:host([static=white]){--spectrum-button-focus-indicator-color:var(
+) ButtonText;forced-color-adjust:none}:host([variant=accent][treatment=fill]){--highcontrast-button-background-color-default:ButtonText;--highcontrast-button-content-color-default:ButtonFace;--highcontrast-button-background-color-disabled:ButtonFace;--highcontrast-button-background-color-hover:Highlight;--highcontrast-button-background-color-down:Highlight;--highcontrast-button-background-color-focus:Highlight;--highcontrast-button-content-color-hover:ButtonFace;--highcontrast-button-content-color-down:ButtonFace;--highcontrast-button-content-color-focus:ButtonFace}:host([variant=accent][treatment=fill]) #label{forced-color-adjust:none}}:host([static=black]),:host([static=white]){--spectrum-button-focus-indicator-color:var(
 --mod-static-black-focus-indicator-color,var(--spectrum-static-black-focus-indicator-color)
-)}:host([static=black]){--spectrum-button-focus-indicator-color:var(
---mod-static-black-focus-indicator-color,var(--spectrum-static-black-focus-indicator-color)
 )}:host{--spectrum-button-background-color-default:var(
@@ -209,0 +207,0 @@ --system-spectrum-button-background-color-default

stories/index.js

@@ -91,31 +91,17 @@ "use strict";
 export function renderButton(properties) {
-  if (properties.variant) {
-    return html`
-            <sp-button
-                variant="${properties.variant}"
-                treatment="${properties.treatment}"
-                ?quiet="${!!properties.quiet}"
-                ?disabled=${!!properties.disabled}
-                size=${properties.size || "m"}
-                href=${ifDefined(properties.href)}
-                target=${ifDefined(properties.target)}
-                ?warning=${properties.warning}
-                ?pending=${!!properties.pending}
-                ?icon-only=${properties.iconOnly}
-            >
-                ${properties.content || "Click Me"}
-            </sp-button>
-        `;
-  } else {
-    return html`
-            <sp-button
-                ?quiet="${!!properties.quiet}"
-                ?disabled=${!!properties.disabled}
-                size=${properties.size}
-                ?pending=${!!properties.pending}
-            >
-                ${properties.content || "Click Me"}
-            </sp-button>
-        `;
-  }
+  return html`
+        <sp-button
+            ?disabled=${!!properties.disabled}
+            href=${ifDefined(properties.href)}
+            ?icon-only=${properties.iconOnly}
+            ?pending=${!!properties.pending}
+            ?quiet="${!!properties.quiet}"
+            size=${properties.size}
+            target=${ifDefined(properties.target)}
+            treatment=${ifDefined(properties.treatment)}
+            variant=${ifDefined(properties.variant)}
+        >
+            ${properties.content || "Click Me"}
+        </sp-button>
+    `;
 }
@@ -122,0 +108,0 @@ export function renderButtonSet(properties) {

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

Worsened metrics

Total package byte prevSize

864887

decreased by-0.3%

Lines of code

8622

decreased by-0.25%

Dependency changes

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

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

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

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

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

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