@spectrum-css/button - npm Package Compare versions

Comparing version 14.0.0-s2-foundations.9 to 14.0.0-s2-foundations.10

CHANGELOG.md

 # Change Log
 
+## 14.0.0-s2-foundations.10
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`54c5625`](https://github.com/adobe/spectrum-css/commit/54c56257bcca5872567a2bf0c5737e35b8190b05) Thanks [@pfulton](https://github.com/pfulton)! - Fixes to index.css imports to ensure appropriate system mappings get loaded
+
+### Patch Changes
+
+- Updated dependencies [[`54c5625`](https://github.com/adobe/spectrum-css/commit/54c56257bcca5872567a2bf0c5737e35b8190b05)]:
+  - @spectrum-css/progresscircle@4.0.0-s2-foundations.10
+  - @spectrum-css/icon@8.0.0-s2-foundations.11
+  - @spectrum-css/tokens@15.0.0-s2-foundations.10
+
 ## 14.0.0-s2-foundations.9
@@ -4,0 +17,0 @@

package.json

 {
 	"name": "@spectrum-css/button",
-	"version": "14.0.0-s2-foundations.9",
+	"version": "14.0.0-s2-foundations.10",
 	"description": "The Spectrum CSS button component",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

stories/template.js

 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
-import { useArgs } from "@storybook/preview-api";
 import { html } from "lit";
@@ -9,3 +9,3 @@ import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
-import { capitalize, lowerCase } from "lodash-es";
+import { capitalize } from "lodash-es";
 
@@ -18,3 +18,3 @@ import "../index.css";
 	rootClass = "spectrum-Button",
-	id,
+	id = getRandomId("button"),
 	testId,
@@ -40,3 +40,3 @@ customClasses = [],
 } = {}, context = {}) => {
-	const [, updateArgs] = useArgs();
+	const { updateArgs } = context;
 
@@ -49,18 +49,22 @@ return html`
         [`${rootClass}--${variant}`]: typeof variant !== "undefined",
-        [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
-        [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined",
+        [`${rootClass}--size${size?.toUpperCase()}`]:
+          typeof size !== "undefined",
+        [`${rootClass}--static${capitalize(staticColor)}`]:
+          typeof staticColor !== "undefined",
         [`${rootClass}--iconOnly`]: hideLabel,
         ["is-pending"]: isPending,
         ["is-disabled"]: isDisabled,
-				["is-hover"]: isHovered,
-				["is-focus-visible"]: isFocused,
-				["is-active"]: isActive,
+        ["is-hover"]: isHovered,
+        ["is-focus-visible"]: isFocused,
+        ["is-active"]: isActive,
         ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
       })}
       id=${ifDefined(id)}
-      style=${ifDefined(styleMap(customStyles))}
+      style=${styleMap(customStyles)}
       ?disabled=${isDisabled}
-      @click=${onclick ?? function() {
+      @click=${onclick ??
+      function () {
         // Toggle the is-pending state on-click
         updateArgs({ isPending: true });
+
         setTimeout(() => {
@@ -70,2 +74,8 @@ updateArgs({ isPending: false });
       }}
+      @focusin=${function() {
+        updateArgs({ isFocused: true });
+      }}
+      @focusout=${function() {
+        updateArgs({ isFocused: false });
+      }}
       aria-label=${ifDefined(hideLabel ? iconName : undefined)}
@@ -76,15 +86,25 @@ aria-expanded=${ifDefined(ariaExpanded?.toString())}
     >
-      ${when(iconName && !iconAfterLabel, () => Icon({ iconName, size }, context))}
-      ${when(label && !hideLabel,
+      ${when(iconName && !iconAfterLabel, () =>
+        Icon({ iconName, size }, context)
+      )}
+      ${when(
+        label && !hideLabel,
         () => html`<span class=${`${rootClass}-label`}>${label}</span>`
       )}
-      ${when(iconName && iconAfterLabel, () => Icon({ iconName, size }, context))}
-      ${when(isPending, () => ProgressCircle({
-        size: "s",
-        testId: "progress-circle",
-        staticColor,
-        isIndeterminate: true,
-      }, context))}
+      ${when(iconName && iconAfterLabel, () =>
+        Icon({ iconName, size }, context)
+      )}
+      ${when(isPending, () =>
+        ProgressCircle(
+          {
+            size: "s",
+            testId: "progress-circle",
+            staticColor,
+            isIndeterminate: true,
+          },
+          context
+        )
+      )}
     </button>
   `;
 };

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

413248

decreased by-0.16%

Lines of code

4777

decreased by-0.1%

No dependency changes