@spectrum-css/actionbutton - npm Package Compare versions

Comparing version 5.2.7-next.1 to 5.2.7-next.2

package.json

 {
   "name": "@spectrum-css/actionbutton",
-  "version": "5.2.7-next.1",
+  "version": "5.2.7-next.2",
   "description": "The Spectrum CSS action button component",
@@ -16,6 +16,6 @@ "license": "Apache-2.0",
   },
-  "main": "dist/index-vars.css",
+  "main": "dist/index.css",
   "peerDependencies": {
     "@spectrum-css/icon": ">=4",
-    "@spectrum-css/tokens": ">=13"
+    "@spectrum-css/tokens": "^14.0.0-next.3"
   },
@@ -28,4 +28,3 @@ "peerDependenciesMeta": {
   "devDependencies": {
-    "@spectrum-css/commons": "^9.1.4-next.0",
-    "@spectrum-css/component-builder-simple": "^5.0.6-next.1"
+    "@spectrum-css/commons": "^9.1.4-next.1"
   },
@@ -35,3 +34,3 @@ "publishConfig": {
   },
-  "gitHead": "2216cf58a18fb79d0cb987c485f7c4c177b7925f"
+  "gitHead": "35c5f608be3785b57e7cdfd982378fff080accc2"
 }

project.json

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

stories/actionbutton.stories.js

@@ -1,9 +0,133 @@
-import { argTypes, ActionButtons } from "./index";
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
 
+import { Template } from "./template";
+
+import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+
+/**
+ * The action button component represents an action a user can take.
+ */
 export default {
 	title: "Components/Action button",
-	description:
-		"The action button component represents an action a user can take.",
 	component: "ActionButton",
-	argTypes: argTypes,
+	argTypes: {
+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["xs", "s", "m", "l", "xl"],
+			control: "select",
+		},
+		iconName: {
+			...(IconStories?.argTypes?.iconName ?? {}),
+			if: false,
+		},
+		label: {
+			name: "Label",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Content",
+			},
+			control: { type: "text" },
+		},
+		isQuiet: {
+			name: "Quiet styling",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+		},
+		isEmphasized: {
+			name: "Emphasized styling",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+		},
+		isDisabled: {
+			name: "Disabled",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		isSelected: {
+			name: "Selected",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "State",
+			},
+			control: "boolean",
+		},
+		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",
+		},
+		hideLabel: {
+			name: "Hide label",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Advanced",
+			},
+			control: "boolean",
+		},
+		hasPopup: {
+			name: "Has popup",
+			description: "True if the button triggers a popup action.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Advanced",
+			},
+			control: "boolean",
+		},
+		staticColor: {
+			name: "StaticColor",
+			type: { name: "string" },
+			table: {
+				type: { summary: "string" },
+				category: "Advanced",
+			},
+			options: ["white", "black"],
+			control: "select",
+		},
+	},
 	args: {
@@ -16,2 +140,7 @@ rootClass: "spectrum-ActionButton",
 		hasPopup: false,
+		isActive: false,
+		isFocused: false,
+		isHovered: false,
+		isSelected: false,
+		isDisabled: false,
 	},
@@ -23,37 +152,268 @@ parameters: {
 		status: {
-			type: process.env.MIGRATED_PACKAGES.includes("actionbutton")
-				? "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 1em 1em;
+					/* 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: "1rem",
+					"--mod-detail-margin-end": ".3rem",
+				})}
+			>
+				${Story(context)}
+			</div>
+		`,
+	],
 };
 
-export const Default = ActionButtons.bind({});
-Default.args = {};
+const ActionButtons = (args) => html` <div
+	style=${styleMap({
+		display: "flex",
+		gap: "1rem",
+	})}
+	id="render-root"
+>
+	${Template({
+		...args,
+		label: "More",
+		iconName: undefined,
+	})}
+	${Template({
+		...args,
+		label: "More",
+	})}
+	${Template(args)}
+	${Template({
+		...args,
+		hasPopup: true,
+	})}
+	<!-- Save truncation for VRTs -->
+	${when(window.isChromatic(), () =>
+		Template({
+			...args,
+			label: "Truncate this long content",
+			iconName: undefined,
+			customStyles: { maxInlineSize: "100px" },
+		})
+	)}
+	${when(window.isChromatic(), () =>
+		Template({
+			...args,
+			label: "Truncate this long content",
+			customStyles: { maxInlineSize: "100px" },
+		})
+	)}
+</div>`;
 
-export const Selected = ActionButtons.bind({});
-Selected.args = {
-	isSelected: true
-};
+const States = (args) =>
+	html` <div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Default"],
+			})}
+			${ActionButtons(args)}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Selected"],
+			})}
+			${ActionButtons({
+				...args,
+				isSelected: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Focused"],
+			})}
+			${ActionButtons({
+				...args,
+				isFocused: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Hovered"],
+			})}
+			${ActionButtons({
+				...args,
+				isHovered: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Active"],
+			})}
+			${ActionButtons({
+				...args,
+				isActive: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Disabled"],
+			})}
+			${ActionButtons({
+				...args,
+				isDisabled: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Disabled + selected"],
+			})}
+			${ActionButtons({
+				...args,
+				isSelected: true,
+				isDisabled: true,
+			})}
+		</div>`;
 
-export const Disabled = ActionButtons.bind({});
-Disabled.args = {
-	isDisabled: true
-};
+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],
+				],
+			})}
+			${ActionButtons({
+				...args,
+				size,
+			})}
+		</div>`;
+	})}`;
 
-export const SelectedDisabled = ActionButtons.bind({});
-SelectedDisabled.args = {
-	isSelected: true,
-	isDisabled: true
+const Variants = (args) =>
+	html` ${window.isChromatic()
+		? html` <div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Standard"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: ".3rem",
+						})}
+					>
+						${States(args)}
+					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Emphasized"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: ".3rem",
+						})}
+					>
+						${States({
+							...args,
+							isEmphasized: true,
+						})}
+					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Quiet"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: ".3rem",
+						})}
+					>
+						${States({
+							...args,
+							isQuiet: true,
+						})}
+					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Sizing"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: ".3rem",
+						})}
+					>
+						${Sizes(args)}
+					</div>
+				</div>`
+		: ActionButtons(args)}`;
+
+export const Default = Variants.bind({});
+Default.args = {};
+
+export const StaticBlack = Variants.bind({});
+StaticBlack.args = {
+	staticColor: "black",
 };
 
-export const Emphasized = ActionButtons.bind({});
-Emphasized.args = {
-	isEmphasized: true
+export const StaticWhite = Variants.bind({});
+StaticWhite.args = {
+	/* Force dark mode to make typography readable */
+	color: "dark",
+	staticColor: "white",
 };
 
-export const SelectedEmphasized = ActionButtons.bind({});
-SelectedEmphasized.args = {
-	isEmphasized: true,
-	isSelected: true
+export const WithForcedColors = Variants.bind({});
+WithForcedColors.parameters = {
+	chromatic: { forcedColors: "active" },
 };

stories/template.js

@@ -9,3 +9,3 @@ import { html } from "lit";
 
-import "../index.css";
+import "@spectrum-css/actionbutton/index.css";
 
@@ -26,2 +26,5 @@ /**
 	isEmphasized = false,
+	isHovered = false,
+	isFocused = false,
+	isActive = false,
 	isDisabled = false,
@@ -36,2 +39,3 @@ hasPopup = false,
 	id,
+	testId,
 	role,
@@ -45,3 +49,4 @@ ...globals
 		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	} catch (e) {
+	}
+	catch (e) {
 		console.warn(e);
@@ -63,7 +68,11 @@ }
 					typeof staticColor !== "undefined",
-				[`is-disabled`]: isDisabled,
-				[`is-selected`]: isSelected,
+				["is-disabled"]: isDisabled,
+				["is-selected"]: isSelected,
+				["is-hover"]: isHovered,
+				["is-focus-visible"]: isFocused,
+				["is-active"]: isActive,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}
+			data-testid=${ifDefined(testId)}
 			role=${ifDefined(role)}
@@ -78,3 +87,4 @@ style=${ifDefined(styleMap(customStyles))}
 					size,
-					iconName: "CornerTriangle100",
+					iconName: "CornerTriangle",
+					setName: "ui",
 					customClasses: [`${rootClass}-hold`],
@@ -81,0 +91,0 @@ })

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

Improved metrics

Total package byte prevSize

438242

increased by37.67%

Dev dependency count

1

decreased by-50%

Lines of code

3000

increased by16.6%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes