@spectrum-css/button - npm Package Compare versions

Comparing version 13.3.0 to 13.4.0

CHANGELOG.md

 # Change Log
 
+## 13.4.0
+
+### Minor Changes
+
+- [#3197](https://github.com/adobe/spectrum-css/pull/3197) [`1eac198`](https://github.com/adobe/spectrum-css/commit/1eac198754ca1e60f96a64c7cf5e7c7a4758b1f3) Thanks [@cdransf](https://github.com/cdransf)! - Replaces all of occurrences of --spectrum-component-pill-edge-to-text-_ (intended to be used as padding) in the button component with the appropriate corner-radius-_ tokens.
+
 ## 13.3.0
@@ -4,0 +10,0 @@

metadata/metadata.json

@@ -198,3 +198,2 @@ {
     "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-100",
     "--spectrum-disabled-background-color",
@@ -201,0 +200,0 @@ "--spectrum-disabled-border-color",

package.json

 {
 	"name": "@spectrum-css/button",
-	"version": "13.3.0",
+	"version": "13.4.0",
 	"description": "The Spectrum CSS button component",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

stories/button.stories.js

@@ -129,2 +129,3 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 	iconName: "Actions",
+	iconSet: "workflow",
 };
@@ -131,0 +132,0 @@

stories/button.test.js

@@ -10,24 +10,26 @@ import { Variants } from "@spectrum-css/preview/decorators";
  */
-const CustomButton = ({ iconName, ...args }, context) => html`
+const CustomButton = ({ iconName, iconSet, ...args }, context) => html`
   ${Template(
-    {
-      ...args,
-      iconName: undefined,
-    },
-    context
+	{
+		...args,
+		iconName: undefined,
+	},
+	context
   )}
   ${Template(
-    {
-      ...args,
-      iconName: iconName ?? "Edit",
-    },
-    context
+	{
+		...args,
+		iconName: iconName ?? "Edit",
+		iconSet: iconSet ?? "workflow",
+	},
+	context
   )}
   ${Template(
-    {
-      ...args,
-      hideLabel: true,
-      iconName: iconName ?? "Edit",
-    },
-    context
+	{
+		...args,
+		hideLabel: true,
+		iconName: iconName ?? "Edit",
+		iconSet: iconSet ?? "workflow",
+	},
+	context
   )}
@@ -55,2 +57,3 @@ `;
 			iconName: "Edit",
+			iconSet: "workflow",
 			label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.",
@@ -67,2 +70,3 @@ withStates: false,
 			iconName: "Cross100",
+			iconSet: "ui",
 			label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.",
@@ -88,2 +92,3 @@ withStates: false,
 			iconName: "Star",
+			iconSet: "workflow",
 			label: "Be a premium member",
@@ -101,2 +106,3 @@ withStates: false,
 			iconName: "ArrowDown600",
+			iconSet: "ui",
 			label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.",
@@ -103,0 +109,0 @@ withStates: false,

stories/template.js

@@ -23,2 +23,3 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 	iconName,
+	iconSet = "workflow",
 	iconAfterLabel = false,
@@ -41,66 +42,65 @@ variant,
 	return html`
-    <button
-      class=${classMap({
-        [rootClass]: true,
-        [`${rootClass}--${treatment}`]: typeof treatment !== "undefined",
-        [`${rootClass}--${variant}`]: typeof variant !== "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,
-        [`${rootClass}--noWrap`]: noWrap,
-        ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-      })}
-      id=${ifDefined(id)}
-      style=${styleMap(customStyles)}
-      ?disabled=${isDisabled}
-      @click=${onclick ??
-      function () {
-        // Toggle the is-pending state on-click
-        updateArgs({ isPending: true });
+	<button
+		class=${classMap({
+			[rootClass]: true,
+			[`${rootClass}--${treatment}`]: typeof treatment !== "undefined",
+			[`${rootClass}--${variant}`]: typeof variant !== "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,
+			[`${rootClass}--noWrap`]: noWrap,
+			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+		})}
+		id=${ifDefined(id)}
+		style=${styleMap(customStyles)}
+		?disabled=${isDisabled}
+		@click=${onclick ??
+		function () {
+			// Toggle the is-pending state on-click
+			updateArgs({ isPending: true });
 
-        setTimeout(() => {
-          updateArgs({ isPending: false });
-        }, 3000);
-      }}
-      @focusin=${function() {
-        updateArgs({ isFocused: true });
-      }}
-      @focusout=${function() {
-        updateArgs({ isFocused: false });
-      }}
-      aria-label=${ifDefined(hideLabel ? iconName : undefined)}
-      aria-expanded=${ifDefined(ariaExpanded?.toString())}
-      aria-controls=${ifDefined(ariaControls)}
-      data-testid=${ifDefined(testId)}
-    >
-      ${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
-        )
-      )}
-    </button>
-  `;
+			setTimeout(() => {
+				updateArgs({ isPending: false });
+			}, 3000);
+		}}
+		@focusin=${function() {
+			updateArgs({ isFocused: true });
+		}}
+		@focusout=${function() {
+			updateArgs({ isFocused: false });
+		}}
+		aria-label=${ifDefined(hideLabel ? iconName : undefined)}
+		aria-expanded=${ifDefined(ariaExpanded?.toString())}
+		aria-controls=${ifDefined(ariaControls)}
+		data-testid=${ifDefined(testId)}
+	>
+		${when(iconName && !iconAfterLabel, () =>
+			Icon({ iconName, setName: iconSet, size }, context)
+		)}
+		${when(label && !hideLabel, () => 
+			html`<span class=${`${rootClass}-label`}>${label}</span>`
+		)}
+		${when(iconName && iconAfterLabel, () =>
+			Icon({ iconName, setName: iconSet, size }, context)
+		)}
+		${when(isPending, () =>
+			ProgressCircle(
+				{
+					size: "s",
+					testId: "progress-circle",
+					staticColor,
+					isIndeterminate: true,
+				},
+				context
+			)
+		)}
+	</button>
+	`;
 };
@@ -115,3 +115,3 @@
 	...args
-}) => Container({
+}, context = {}) => Container({
 	withBorder: false,
@@ -123,16 +123,16 @@ direction: "row",
 	content: html`
-    ${Template({
-      ...args,
-      iconName: undefined,
-    })}
-    ${Template({
-      ...args,
-      iconName: iconName ?? "Edit",
-    })}
-    ${Template({
-      ...args,
-      hideLabel: true,
-      iconName: iconName ?? "Edit",
-    })}
-  `,
+		${Template({
+			...args,
+			iconName: undefined,
+		}, context)}
+		${Template({
+			...args,
+			iconName: iconName ?? "Edit",
+		}, context)}
+		${Template({
+			...args,
+			hideLabel: true,
+			iconName: iconName ?? "Edit",
+		}, context)}
+	`,
 });
@@ -143,3 +143,3 @@
  */
-export const TreatmentTemplate = (args) => Container({
+export const TreatmentTemplate = (args, context = {}) => Container({
 	withBorder: false,
@@ -150,4 +150,4 @@ direction: "column",
 	},
-	content: html`${["fill", "outline"].map((treatment) => ButtonsWithIconOptions({ ...args, treatment }))}`,
-});
+	content: html`${["fill", "outline"].map((treatment) => ButtonsWithIconOptions({ ...args, treatment }, context))}`,
+}, context);
 
@@ -157,3 +157,3 @@ /**
  */
-export const TextOverflowTemplate = (args) => Container({
+export const TextOverflowTemplate = (args, context = {}) => Container({
 	withBorder: false,
@@ -165,21 +165,22 @@ direction: "column",
 	content: html`
-    ${Template({
-      ...args,
-      customStyles: {
-        "max-inline-size": "480px",
-      },
-      label: "An example of text overflow behavior when there is no icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
-    })}
-    ${Template({
-      ...args,
-      customStyles: {
-        "max-inline-size": "480px",
-      },
-      iconName: "Edit",
-      label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
-    })}
+	${Template({
+		...args,
+		customStyles: {
+			"max-inline-size": "480px",
+		},
+		label: "An example of text overflow behavior when there is no icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
+	}, context)}
+	${Template({
+		...args,
+		customStyles: {
+			"max-inline-size": "480px",
+		},
+		iconName: "Edit",
+		iconSet: "workflow",
+		label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.",
+	}, context)}
   `,
-});
+}, context);
 
-export const TextWrapTemplate = (args) => Container({
+export const TextWrapTemplate = (args, context = {}) => Container({
 	direction: "column",
@@ -191,28 +192,27 @@ wrapperStyles: {
 	content: html`
-    ${Template({
-      ...args,
-      customStyles: {
-        
-      },
-      label: "Be a premium member",
+		${Template({
+			...args,
+			customStyles: {},
+			label: "Be a premium member",
 			noWrap: true,
-    })}
-    ${Template({
-      ...args,
-      customStyles: {
-        "max-inline-size": "100%",
-      },
-      label: "Be a premium member",
+		}, context)}
+		${Template({
+			...args,
+			customStyles: {
+				"max-inline-size": "100%",
+			},
+			label: "Be a premium member",
 			noWrap: true,
-    })}
-    ${Template({
-      ...args,
-      customStyles: {
-        "max-inline-size": "100%",
-      },
-      iconName: "Star",
+		}, context)}
+		${Template({
+			...args,
+			customStyles: {
+				"max-inline-size": "100%",
+			},
+			iconName: "Star",
+			iconSet: "workflow",
 			label: "Be a premium member",
-      noWrap: true,
-    })}
-  `,
-});
+			noWrap: true,
+		}, context)}
+	`,
+}, context);

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

569855

decreased by-0.12%

Lines of code

5019

decreased by-0.1%

No dependency changes