@spectrum-css/button - npm Package Compare versions

Comparing version 12.0.3-next.0 to 13.0.0

CHANGELOG.md

@@ -6,2 +6,25 @@ # Change Log
 
+<a name="13.0.0"></a>
+#13.0.0
+🗓
[phone] • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/button@12.0.2...@spectrum-css/button@13.0.0)
+
+### ✨ Features
+
+\*use storybook v8 ([#2604](https://github.com/adobe/spectrum-css/issues/2604))([166ab23](https://github.com/adobe/spectrum-css/commit/166ab23))
+
+### 🐛 Bug fixes
+
+-     **button:**pending state width, transition ([#2570](https://github.com/adobe/spectrum-css/issues/2570))([7b67bff](https://github.com/adobe/spectrum-css/commit/7b67bff))
+
+  \*feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
+
+      	###
+      	🛑 BREAKING CHANGES
+
+      		*
+      		- Removes component-builder & component-builder-simple for script leveraging postcss
+
+* Imports added to index.css and themes/express.css
+
 <a name="12.0.2"></a>
@@ -8,0 +31,0 @@ ##12.0.2

metadata/mods.md

 | Modifiable custom properties               |
 | ------------------------------------------ |
+| `--mod-animation-duration-100`             |
 | `--mod-bold-font-weight`                   |
@@ -47,2 +48,4 @@ | `--mod-button-animation-duration`          |
 | `--mod-focus-indicator-gap`                |
+| `--mod-line-height-100`                    |
+| `--mod-sans-font-family-stack`             |
 | `--mod-static-black-focus-indicator-color` |

package.json

 {
-  "name": "@spectrum-css/button",
-  "version": "12.0.3-next.0",
-  "description": "The Spectrum CSS button component",
-  "license": "Apache-2.0",
-  "author": "Adobe",
-  "homepage": "https://opensource.adobe.com/spectrum-css/button-accent",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/adobe/spectrum-css.git",
-    "directory": "components/button"
-  },
-  "bugs": {
-    "url": "https://github.com/adobe/spectrum-css/issues"
-  },
-  "main": "dist/index-vars.css",
-  "peerDependencies": {
-    "@spectrum-css/icon": ">=6",
-    "@spectrum-css/progresscircle": ">=2",
-    "@spectrum-css/tokens": ">=13"
-  },
-  "peerDependenciesMeta": {
-    "@spectrum-css/icon": {
-      "optional": true
-    },
-    "@spectrum-css/progresscircle": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@spectrum-css/commons": "^9.1.3",
-    "@spectrum-css/component-builder-simple": "^5.0.6-next.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "2ae0074b630fe8e02678c5ded57158933110ce26"
+	"name": "@spectrum-css/button",
+	"version": "13.0.0",
+	"description": "The Spectrum CSS button component",
+	"license": "Apache-2.0",
+	"author": "Adobe",
+	"homepage": "https://opensource.adobe.com/spectrum-css/button-accent",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/adobe/spectrum-css.git",
+		"directory": "components/button"
+	},
+	"bugs": {
+		"url": "https://github.com/adobe/spectrum-css/issues"
+	},
+	"main": "dist/index.css",
+	"peerDependencies": {
+		"@spectrum-css/icon": ">=6",
+		"@spectrum-css/progresscircle": ">=2",
+		"@spectrum-css/tokens": ">=13"
+	},
+	"peerDependenciesMeta": {
+		"@spectrum-css/icon": {
+			"optional": true
+		},
+		"@spectrum-css/progresscircle": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@spectrum-css/commons": "^10.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "ee96fec864d2f60be456b50964dacfa8d562d9b8"
 }

project.json

@@ -9,9 +9,9 @@ {
 		"compare": {},
+		"format": {},
 		"lint": {},
-		"validate": {},
-
 		"test": {
 			"defaultConfiguration": "scope"
-		}
+		},
+		"validate": {}
 	}
 }

stories/button.stories.js

 import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
 
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+
 import { Template } from "./template";
 
+/**
+ * Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+ */
 export default {
 	title: "Components/Button",
-	description:
-		"Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.",
 	component: "Button",
@@ -73,2 +73,29 @@ argTypes: {
 		},
+		isHovered: {
+			name: "Hovered",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		isFocused: {
+			name: "Focused",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		isActive: {
+			name: "Active",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
 		isPending: {
@@ -82,3 +109,2 @@ name: "Pending",
 			control: "boolean",
-			if: { arg: "staticColor", neq: "black" }
 		},
@@ -92,2 +118,3 @@ staticColor: {
 				category: "Advanced",
+
 			},
@@ -97,18 +124,2 @@ options: ["white", "black"],
 		},
-		showIconOnlyButton: {
-			table: {
-				disable: true,
-			},
-		},
-		layout: {
-		    name: "Layout",
-		    description: "How the buttons align in the preview (Storybook only).",
-		    type: { name: "string" },
-			table: { 
-			    type: { summary: "string" },
-			    category: "Advanced"
-			},
-			options: ["stacked","inline"],
-			control: "radio"
-		},
 	},
@@ -119,8 +130,9 @@ args: {
 		label: "Edit",
+		treatment: "fill",
 		variant: "accent",
-		treatment: "fill",
 		isDisabled: false,
 		isPending: false,
-		showIconOnlyButton: true,
-		layout: "inline",
+		isActive: false,
+		isFocused: false,
+		isHovered: false,
 	},
@@ -132,22 +144,36 @@ parameters: {
 		status: {
-			type: process.env.MIGRATED_PACKAGES.includes("button")
-				? "migrated"
-				: undefined,
+			type: "migrated",
 		},
+		html: {
+			root: "#render-root"
+		}
 	},
+	decorators: [
+		(Story, context) => html`
+			<style>
+				.spectrum-Detail { display: inline-block; }
+				.spectrum-Typography > div {
+					border: 1px solid var(--spectrum-gray-200);
+					border-radius: 4px;
+					padding: 0 10px 10px;
+					/* Why seafoam? Because it separates it from the component styles. */
+					--mod-detail-font-color: var(--spectrum-seafoam-900);
+				}
+			</style>
+			<div
+				style=${styleMap({
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "flex-start",
+					gap: "10px",
+					"--mod-detail-margin-end": "6px",
+				})}
+			>
+				${Story(context)}
+			</div>
+		`,
+	],
 };
 
 /**
- * Optional wrapper for each button used within other templates, to assist with the "stacked"
- * layout and the testing of wrapping text.
- */
-const ButtonWrap = (layout, content) => {
-	const buttonWrapStyles = {
-		'margin-block': '15px',
-		'max-width': '480px',
-	};
-	return layout === "stacked" ? html`<div style=${styleMap(buttonWrapStyles)}>${content}</div>` : content;
-};
-
-/**
  * Multiple button variations displayed in one story template.
@@ -158,62 +184,70 @@ * Used as the base template for the stories.
 	iconName,
-	staticColor,
-	layout,
-	showIconOnlyButton,
-	customStyles = {},
 	...args
-}) => {
-	return html`
-		<div
-			style=${ifDefined(styleMap({
-				padding: "1rem",
-				backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
-				...customStyles
-			}))}
-		>
-			${ButtonWrap(layout, Template({
+}) => html`
+	${Template({
+		...args,
+		iconName: undefined,
+	})}
+	${Template({
+		...args,
+		iconName: iconName ?? "Edit",
+	})}
+	${Template({
+		...args,
+		hideLabel: true,
+		iconName: iconName ?? "Edit",
+	})}
+`;
+
+const States = (args) =>
+	html` <div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Default"],
+			})}
+			${Treatment(args)}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Selected"],
+			})}
+			${Treatment({
 				...args,
-				staticColor,
-				iconName: undefined,
-			}))}
-			${ButtonWrap(layout, Template({
+				isSelected: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Focused"],
+			})}
+			${Treatment({
 				...args,
-				staticColor,
-				iconName: undefined,
-				treatment: "outline",
-			}))}
-			${ButtonWrap(layout, Template({
+				isFocused: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Hovered"],
+			})}
+			${Treatment({
 				...args,
-				staticColor,
-				iconName: iconName ?? "Edit",
-			}))}
-			${when(showIconOnlyButton, () =>
-				ButtonWrap(layout, Template({
-					...args,
-					staticColor,
-					hideLabel: true,
-					iconName: iconName ?? "Edit",
-				}))
-			)}
+				isHovered: true,
+			})}
 		</div>
-	`;
-};
-
-const PendingButton = ({
-	staticColor,
-	customStyles = {},
-	...args
-}) => html`
-	<div style=${styleMap({
-		display: "flex",
-		flexDirection: "column",
-		gap: ".3rem",
-	})}>
 		<div>
 			${Typography({
-				semantics: "heading",
-				size: "xxs",
-				content: ["Default"],
+				semantics: "detail",
+				size: "s",
+				content: ["Active"],
 			})}
-			${CustomButton({
+			${Treatment({
 				...args,
+				isActive: true,
 			})}
@@ -223,32 +257,21 @@ </div>
 			${Typography({
-				semantics: "heading",
-				size: "xxs",
-				content: ["Static White"],
+				semantics: "detail",
+				size: "s",
+				content: ["Disabled"],
 			})}
-			${CustomButton({
+			${Treatment({
 				...args,
-				staticColor: "white",
+				isDisabled: true,
 			})}
 		</div>
-	</div>
-`;
-
-const ButtonsWithForcedColors = ({
-	customStyles = {},
-	...args
-}) => html`
-	<div style=${styleMap({
-		display: "flex",
-		flexDirection: "column",
-		gap: ".3rem",
-	})}>
 		<div>
 			${Typography({
-				semantics: "heading",
-				size: "xxs",
-				content: ["Default"],
+				semantics: "detail",
+				size: "s",
+				content: ["Disabled + selected"],
 			})}
-			${CustomButton({
+			${Treatment({
 				...args,
-				variant: "accent"
+				isSelected: true,
+				isDisabled: true,
 			})}
@@ -258,68 +281,195 @@ </div>
 			${Typography({
-				semantics: "heading",
-				size: "xxs",
-				content: ["Pending State"],
+				semantics: "detail",
+				size: "s",
+				content: ["Pending"],
 			})}
-			${CustomButton({
+			${Treatment({
 				...args,
-				isDisabled: true,
 				isPending: true,
 			})}
-		</div>
-	</div>
-`;
+		</div>`;
 
-/**
- * Wrapping story template, displaying some additional variants for Chromatic.
- */
-const WrappingTemplate = ({layout, ...args}) => {
-	if (window.isChromatic()) {
-		return html`
-			${CustomButton({layout, ...args})}
-			<div style=${ifDefined(styleMap({ padding: "1rem" }))}>
-				${ButtonWrap(layout, Template({
-					...args,
-					iconName: "Edit",
-					treatment: "outline",
-				}))}
-				${ButtonWrap(layout, Template({
-					...args,
-					// Uses a UI icon that is smaller than workflow sizing, to test alignment:
-					iconName: "Cross100",
-				}))}
-				${ButtonWrap(layout, Template({
-					...args,
-					// UI icon that is larger than workflow sizing:
-					iconName: "ArrowDown600",
-					treatment: "outline",
-				}))}
-			</div>
-		`;
-	}
-	// Otherwise use the default template.
-	return CustomButton({layout, ...args});
-};
+const Sizes = (args) =>
+	html` ${["s", "m", "l", "xl"].map((size) => {
+		return html` <div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: [
+					{
+						xxs: "Extra-extra-small",
+						xs: "Extra-small",
+						s: "Small",
+						m: "Medium",
+						l: "Large",
+						xl: "Extra-large",
+						xxl: "Extra-extra-large",
+					}[size],
+				],
+			})}
+			${Treatment({ ...args, size })}
+		</div>`;
+	})}`;
 
-export const Accent = CustomButton.bind({});
-Accent.args = {
-	variant: "accent",
-};
+const Treatment = (args) =>
+	html`
+<div
+	style=${styleMap({
+		display: "flex",
+		gap: "10px",
+	})}
+	id="render-root"
+>
+	${["fill", "outline"].map((treatment) => CustomButton({ ...args, treatment }))}
+</div>`;
 
-export const Negative = CustomButton.bind({});
-Negative.args = {
-	variant: "negative",
-	iconName: "Delete",
-};
+const Wrapping = (args) => html`
+	${Template({
+	...args,
+	customStyles: {
+		"max-inline-size": "480px",
+	},
+	iconName: "Edit",
+	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.",
+})}
+	${Template({
+	...args,
+	customStyles: {
+		"max-inline-size": "480px",
+	},
+	// Uses a UI icon that is smaller than workflow sizing, to test alignment:
+	iconName: "Cross100",
+	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.",
+})}
+	${Template({
+	...args,
+	customStyles: {
+		"max-inline-size": "480px",
+	},
+	// UI icon that is larger than workflow sizing:
+	iconName: "ArrowDown600",
+	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.",
+})}`;
 
-export const Primary = CustomButton.bind({});
-Primary.args = {
-	variant: "primary",
-};
+const Variants = (args) =>
+	html` ${window.isChromatic()
+		? html` <div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Accent"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: "10px",
+						})}
+					>
+						${States(args)}
+					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Negative"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: "10px",
+						})}
+					>
+						${States({
+							...args,
+							variant: "negative"
+						})}
+					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Primary"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: "10px",
+						})}
+					>
+						${States({
+							...args,
+							variant: "primary"
+						})}
+					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Secondary"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: "10px",
+						})}
+					>
+						${States({
+							...args,
+							variant: "secondary"
+						})}
+					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Sizing"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: "10px",
+						})}
+					>
+						${Sizes(args)}
+					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Wrapping"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: "10px",
+							padding: "6px"
+						})}
+					>
+						${Wrapping(args)}
+					</div>
+				</div>
+		` : html`
+<div
+	style=${styleMap({
+		display: "flex",
+		gap: "10px",
+	})}
+	id="render-root"
+>${CustomButton(args)}</div>`}`;
 
-export const Secondary = CustomButton.bind({});
-Secondary.args = {
-	variant: "secondary",
-};
+export const Default = Variants.bind({});
+Default.args = {};
 
-export const StaticColorWhite = CustomButton.bind({});
+export const StaticColorWhite = Variants.bind({});
 StaticColorWhite.args = {
@@ -329,3 +479,3 @@ staticColor: "white",
 
-export const StaticColorBlack = CustomButton.bind({});
+export const StaticColorBlack = Variants.bind({});
 StaticColorBlack.args = {
@@ -335,17 +485,5 @@ staticColor: "black",
 
-export const Disabled = CustomButton.bind({});
-Disabled.args = {
-	isDisabled: true,
-	iconName: "Actions",
-};
-
-export const Pending = PendingButton.bind({});
-Pending.args = {
-	isDisabled: true,
-	isPending: true,
-};
-
-export const WithForcedColors = ButtonsWithForcedColors.bind({});
+export const WithForcedColors = Variants.bind({});
 WithForcedColors.parameters = {
-  chromatic: { forcedColors: "active" },
+	chromatic: { forcedColors: "active" },
 };
@@ -355,10 +493,1 @@ WithForcedColors.args = {
 };
-
-export const Wrapping = WrappingTemplate.bind({});
-Wrapping.storyName = "Wrapping";
-Wrapping.args = {
-	layout: "stacked",
-	showIconOnlyButton: false,
-	variant: "accent",
-	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/preview-api";
 import { html } from "lit";
@@ -7,2 +8,3 @@ import { classMap } from "lit/directives/class-map.js";
 
+
 import { capitalize, lowerCase } from "lodash-es";
@@ -16,20 +18,24 @@
 export const Template = ({
-  rootClass = "spectrum-Button",
-  id,
-  customClasses = [],
-  customStyles = {},
-  size = "m",
-  label,
-  hideLabel = false,
-  iconName,
-  iconAfterLabel = false,
-  variant,
-  staticColor,
-  treatment,
-  onclick,
-  isDisabled = false,
-  isPending = false,
-  ariaExpanded,
-  ariaControls,
-  ...globals
+	rootClass = "spectrum-Button",
+	id,
+	testId,
+	customClasses = [],
+	customStyles = {},
+	size = "m",
+	label,
+	hideLabel = false,
+	iconName,
+	iconAfterLabel = false,
+	variant,
+	staticColor,
+	treatment,
+	onclick,
+	isDisabled = false,
+	isHovered = false,
+	isFocused = false,
+	isActive = false,
+	isPending = false,
+	ariaExpanded,
+	ariaControls,
+	...globals
 }) => {
@@ -40,7 +46,10 @@ const { express } = globals;
 		else import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-	} catch (e) {
+	}
+	catch (e) {
 		console.warn(e);
 	}
 
-  return html`
+	const [, updateArgs] = useArgs();
+
+	return html`
     <button
@@ -54,3 +63,7 @@ class=${classMap({
         [`${rootClass}--iconOnly`]: hideLabel,
-        "is-pending": isPending,
+        ["is-pending"]: isPending,
+        ["is-disabled"]: isDisabled,
+				["is-hover"]: isHovered,
+				["is-focus-visible"]: isFocused,
+				["is-active"]: isActive,
         ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -61,6 +74,13 @@ })}
       ?disabled=${isDisabled}
-      @click=${onclick}
+      @click=${onclick ?? function() {
+        // Toggle the is-pending state on-click
+        updateArgs({ isPending: true });
+        setTimeout(() => {
+          updateArgs({ isPending: false });
+        }, 3000);
+      }}
       aria-label=${ifDefined(hideLabel ? iconName : undefined)}
       aria-expanded=${ifDefined(ariaExpanded?.toString())}
       aria-controls=${ifDefined(ariaControls)}
+      data-testid=${ifDefined(testId)}
     >
@@ -73,8 +93,14 @@ ${when(iconName && !iconAfterLabel, () => Icon({ ...globals, iconName, size }))}
       ${when(isPending, () => {
-          const isOverBackground = staticColor === 'white';
-          return ProgressCircle({ ...globals, size: 's', overBackground: isOverBackground, isIndeterminate: true, addStaticBackground: false })
-        }
-      )}
+        const isOverBackground = staticColor === "white";
+        return ProgressCircle({
+          ...globals,
+          size: "s",
+          testId: "progress-circle",
+          overBackground: isOverBackground,
+          isIndeterminate: true,
+          addStaticBackground: false
+        });
+      })}
     </button>
   `;
 };

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

808334

increased by46.36%

Dev dependency count

1

decreased by-50%

Number of package files

29

increased by16%

Lines of code

5541

increased by15.97%

Number of low quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes