@spectrum-css/button - npm Package Compare versions

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

CHANGELOG.md

 # Change Log
 
+## 14.0.0-s2-foundations.11
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`8e772ef`](https://github.com/adobe/spectrum-css/commit/8e772efd757f5e88fd4048a5c0229472f9bf90cf) Thanks [@pfulton](https://github.com/pfulton)! - Updated build to set cssnano to discardUnused: false
+
+### Patch Changes
+
+- Updated dependencies [[`8e772ef`](https://github.com/adobe/spectrum-css/commit/8e772efd757f5e88fd4048a5c0229472f9bf90cf)]:
+  - @spectrum-css/progresscircle@4.0.0-s2-foundations.11
+  - @spectrum-css/icon@8.0.0-s2-foundations.12
+  - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
 ## 14.0.0-s2-foundations.10
@@ -7,7 +20,7 @@
 
-- [#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
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543) 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)]:
+- Updated dependencies [[`0844aad`](https://github.com/adobe/spectrum-css/commit/0844aadba2fefb844a66370ff6e9b4704f6c1543)]:
   - @spectrum-css/progresscircle@4.0.0-s2-foundations.10
@@ -14,0 +27,0 @@ - @spectrum-css/icon@8.0.0-s2-foundations.11

package.json

 {
 	"name": "@spectrum-css/button",
-	"version": "14.0.0-s2-foundations.10",
+	"version": "14.0.0-s2-foundations.11",
 	"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 { Variants } from "@spectrum-css/preview/decorators";
 import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
@@ -9,31 +9,32 @@ import { html } from "lit";
 import { when } from "lit/directives/when.js";
-import { capitalize } from "lodash-es";
+import { capitalize, lowerCase } from "lodash-es";
 
 import "../index.css";
-import "../themes/express.css";
-import "../themes/spectrum.css";
 
-export const Template = ({
-	rootClass = "spectrum-Button",
-	id = getRandomId("button"),
-	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,
-} = {}, context = {}) => {
+export const Template = (
+	{
+		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,
+	} = {},
+	context = {}
+) => {
 	const { updateArgs } = context;
@@ -49,3 +50,3 @@
           typeof size !== "undefined",
-        [`${rootClass}--static${capitalize(staticColor)}`]:
+        [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]:
           typeof staticColor !== "undefined",
@@ -107,1 +108,102 @@ [`${rootClass}--iconOnly`]: hideLabel,
 };
+
+/**
+ * Multiple button variations displayed in one story template.
+ * Used as the base template for the stories.
+ */
+const CustomButton = ({ iconName, ...args }, context) => html`
+  ${Template(
+    {
+      ...args,
+      iconName: undefined,
+    },
+    context
+  )}
+  ${Template(
+    {
+      ...args,
+      iconName: iconName ?? "Edit",
+    },
+    context
+  )}
+  ${Template(
+    {
+      ...args,
+      hideLabel: true,
+      iconName: iconName ?? "Edit",
+    },
+    context
+  )}
+`;
+
+export const ButtonGroups = Variants({
+	Template: CustomButton,
+	testData: [
+		...["accent", "negative", "primary", "secondary"].map((variant) => ({
+			testHeading: capitalize(variant),
+			variant,
+		})),
+		...["fill", "outline"].map((treatment) => ({
+			testHeading: capitalize(treatment),
+			treatment,
+		})),
+		{
+			testHeading: "Text wrapping with workflow icon",
+			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.",
+			withStates: false,
+			Template,
+		},
+		{
+			testHeading: "Text wrapping with UI icon",
+			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.",
+			withStates: false,
+			Template,
+		},
+		{
+			testHeading: "Text wrapping with larger UI icon",
+			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.",
+			withStates: false,
+			Template,
+		},
+	],
+	stateData: [
+		{
+			testHeading: "Disabled",
+			isDisabled: true,
+		},
+		{
+			testHeading: "Hovered",
+			isHovered: true,
+		},
+		{
+			testHeading: "Focused",
+			isFocused: true,
+		},
+		{
+			testHeading: "Active",
+			isActive: true,
+		},
+		{
+			testHeading: "Pending",
+			isPending: true,
+		},
+	],
+	sizeDirection: "row",
+});

No alert changes

Improved metrics

Total package byte prevSize

416156

increased by0.7%

Lines of code

4877

increased by2.09%

No dependency changes