@spectrum-css/button - npm Package Compare versions

Comparing version 12.0.3-next.0 to 14.0.0-next.3

package.json

 {
   "name": "@spectrum-css/button",
-  "version": "12.0.3-next.0",
+  "version": "14.0.0-next.3",
   "description": "The Spectrum CSS button component",
@@ -31,4 +31,4 @@ "license": "Apache-2.0",
   "devDependencies": {
-    "@spectrum-css/commons": "^9.1.3",
-    "@spectrum-css/component-builder-simple": "^5.0.6-next.0"
+    "@spectrum-css/commons": "^9.1.4-next.0",
+    "@spectrum-css/component-builder-simple": "^5.0.6-next.1"
   },
@@ -38,3 +38,3 @@ "publishConfig": {
   },
-  "gitHead": "2ae0074b630fe8e02678c5ded57158933110ce26"
+  "gitHead": "2216cf58a18fb79d0cb987c485f7c4c177b7925f"
 }

stories/button.stories.js

@@ -5,2 +5,3 @@ import { html } from "lit";
 import { when } from "lit/directives/when.js";
+import { withDownStateDimensionCapture } from "../../../.storybook/decorators";
 
@@ -16,2 +17,3 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 	component: "Button",
+	decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')],
 	argTypes: {
@@ -79,8 +81,12 @@ size: {
 			table: {
-				type: { summary: "boolean" },
-				category: "State",
+				disable: true
 			},
-			control: "boolean",
-			if: { arg: "staticColor", neq: "black" }
 		},
+		isPendingStory: {
+			name: "Pending story",
+			type: { name: "boolean" },
+			table: {
+				disable: true,
+			},
+		},
 		staticColor: {
@@ -93,5 +99,7 @@ name: "Static color",
 				category: "Advanced",
+
 			},
 			options: ["white", "black"],
 			control: "select",
+			if: { arg: "isPendingStory", truthy: false },
 		},
@@ -107,3 +115,3 @@ showIconOnlyButton: {
 		    type: { name: "string" },
-			table: { 
+			table: {
 			    type: { summary: "string" },
@@ -202,4 +210,12 @@ category: "Advanced"
 	customStyles = {},
+	layout,
 	...args
 }) => html`
+	${when(!window.isChromatic(), () =>
+		Typography({
+			semantics: "heading",
+			size: "xs",
+			content: ["Press any button to show the pending state on all buttons. Press again to remove the pending states."],
+		})
+	)}
 	<div style=${styleMap({
@@ -209,2 +225,3 @@ display: "flex",
 		gap: ".3rem",
+		marginTop: "1rem"
 	})}>
@@ -220,2 +237,21 @@ <div>
 			})}
+			${ButtonWrap(layout = "stacked", Template({
+				...args,
+				staticColor,
+				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.",
+			}))}
+			${when(window.isChromatic(), () => {
+				return html`
+					${CustomButton({
+						...args,
+						isPending: true,
+					})}
+
+					${ButtonWrap(layout = "stacked", Template({
+						...args,
+						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.",
+						isPending: true,
+					}))}
+				`;
+			})}
 		</div>
@@ -232,2 +268,38 @@ <div>
 			})}
+			<div
+				style=${ifDefined(styleMap({
+					padding: "1rem",
+					backgroundColor: "rgb(15, 121, 125)",
+					...customStyles
+				}))}
+			>
+				${ButtonWrap(layout = "stacked", Template({
+					...args,
+					staticColor: "white",
+					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.",
+				}))}
+			</div>
+			${when(window.isChromatic(), () => {
+				return html`
+					${CustomButton({
+						...args,
+						staticColor: "white",
+						isPending: true,
+					})}
+					<div
+						style=${ifDefined(styleMap({
+							padding: "1rem",
+							backgroundColor: "rgb(15, 121, 125)",
+							...customStyles
+						}))}
+					>
+						${ButtonWrap(layout = "stacked", Template({
+							...args,
+							staticColor: "white",
+							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.",
+							isPending: true,
+						}))}
+					</div>
+				`;
+			})}
 		</div>
@@ -342,4 +414,3 @@ </div>
 Pending.args = {
-	isDisabled: true,
-	isPending: true,
+	isPendingStory: true,
 };
@@ -362,2 +433,2 @@
 	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.",
-};
+};

stories/template.js

@@ -0,1 +1,2 @@
+import { useArgs } from "@storybook/client-api";
 import { html } from "lit";
@@ -30,2 +31,3 @@ import { classMap } from "lit/directives/class-map.js";
   isPending = false,
+  isPendingStory = false,
   ariaExpanded,
@@ -43,2 +45,4 @@ ariaControls,
 
+  const [, updateArgs] = useArgs();
+
   return html`
@@ -59,3 +63,7 @@ <button
       ?disabled=${isDisabled}
-      @click=${onclick}
+      @click=${!isPendingStory ? onclick : () => {
+        isPending
+          ? updateArgs({ isPending: false })
+          : updateArgs({ isPending: true });
+      }}
       aria-label=${ifDefined(hideLabel ? iconName : undefined)}
@@ -70,9 +78,14 @@ aria-expanded=${ifDefined(ariaExpanded?.toString())}
       ${when(iconName && iconAfterLabel, () => Icon({ ...globals, iconName, size }))}
-      ${when(isPending, () => {
-          const isOverBackground = staticColor === 'white';
-          return ProgressCircle({ ...globals, size: 's', overBackground: isOverBackground, isIndeterminate: true, addStaticBackground: false })
-        }
-      )}
+      ${when(isPendingStory, () => {
+        const isOverBackground = staticColor === 'white';
+        return ProgressCircle({
+          ...globals,
+          size: 's',
+          overBackground: isOverBackground,
+          isIndeterminate: true,
+          addStaticBackground: false
+        })
+      })}
     </button>
   `;
 };

No alert changes

Improved metrics

Total package byte prevSize

583029

5.56%

Lines of code

4921

2.99%

No dependency changes