@spectrum-css/button - npm Package Compare versions

Comparing version 11.3.1 to 12.0.0

CHANGELOG.md

@@ -6,2 +6,50 @@ # Change Log
 
+<a name="12.0.0"></a>
+#12.0.0
+🗓
[phone] • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/button@11.3.1...@spectrum-css/button@12.0.0)
+
+### 🐛 Bug fixes
+
+- **button:**support for wrapping text ([#2248](https://github.com/adobe/spectrum-css/issues/2248))([3f14a86](https://github.com/adobe/spectrum-css/commit/3f14a86))
+
+      ###
+      🛑 BREAKING CHANGES
+
+      	*
+      	**button:** changes vertical flex alignment to start.
+
+Previously when the button had an icon and the text was wrapping, the
+icon was vertically aligned center and the text was aligned center.
+
+This fixes this to match with the design spec: for the version of the
+button that uses a workflow icon, the icon should stay aligned to the
+top, and the text should be aligned left (start). This uses the defined
+token for the space between the top of the component and the workflow
+icon (--spectrum-component-top-to-workflow-icon-\*).
+
+- docs(button): rename storybook control to layout
+
+Rename Storybook control for stacking buttons to "layout" with specified
+options, which is a more appropriate name. The control has also been
+made visible.
+
+- fix(button): support any existing use of ui icons
+
+Support any existing use of ui icons with the updated wrapping behavior.
+And add Chromatic only testing of them to the Wrapping story.
+
+Workflow icons are intended, with the use of the
+spectrum-component-top-to-workflow-icon tokens, but UI icons have not
+yet been specifically excluded in guidelines and are currently in use
+within SplitButton in this library. This keeps UI icons that are
+smaller than the intended workflow icon, better vertically centered
+with the text within the button.
+
+- feat(button): mod property for icon margin top
+
+Add a mod property to make it easy to modify the margin-block-start of
+the icon, in case of alignment issues with icons that are not the
+intended workflow sizes.
+
 <a name="11.3.1"></a>
@@ -8,0 +56,0 @@ ##11.3.1

dist/mods.json

@@ -35,2 +35,3 @@ {
     "--mod-button-height",
+    "--mod-button-icon-margin-block-start",
     "--mod-button-line-height",
@@ -43,2 +44,5 @@ "--mod-button-margin-block",
     "--mod-button-static-content-color",
+    "--mod-button-text-align",
+    "--mod-button-text-align-with-icon",
+    "--mod-button-top-to-icon",
     "--mod-button-top-to-text",
@@ -45,0 +49,0 @@ "--mod-focus-indicator-gap",

metadata/mods.md

@@ -35,2 +35,3 @@ | Modifiable custom properties               |
 | `--mod-button-height`                      |
+| `--mod-button-icon-margin-block-start`     |
 | `--mod-button-line-height`                 |
@@ -43,2 +44,5 @@ | `--mod-button-margin-block`                |
 | `--mod-button-static-content-color`        |
+| `--mod-button-text-align`                  |
+| `--mod-button-text-align-with-icon`        |
+| `--mod-button-top-to-icon`                 |
 | `--mod-button-top-to-text`                 |
@@ -45,0 +49,0 @@ | `--mod-focus-indicator-gap`                |

package.json

 {
   "name": "@spectrum-css/button",
-  "version": "11.3.1",
+  "version": "12.0.0",
   "description": "The Spectrum CSS button component",
@@ -18,3 +18,3 @@ "license": "Apache-2.0",
   "peerDependencies": {
-    "@spectrum-css/icon": ">=4",
+    "@spectrum-css/icon": ">=6",
     "@spectrum-css/progresscircle": ">=2",
@@ -37,3 +37,3 @@ "@spectrum-css/tokens": ">=13"
   },
-  "gitHead": "6068b4ea6e89d71d3d537d3797e77701d2d354e5"
+  "gitHead": "565294a2619aac3267e1bbdb563f8027808b67a2"
 }

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";
 
-import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
-
 export default {
@@ -85,2 +85,3 @@ title: "Components/Button",
 			name: "Static color",
+			description: "Variants that can be used when a button needs to be placed on top of a colored background or a visual.",
 			type: { name: "string" },
@@ -93,3 +94,19 @@ table: {
 			control: "select",
-		}
+		},
+		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"
+		},
 	},
@@ -104,2 +121,4 @@ args: {
 		isPending: false,
+		showIconOnlyButton: true,
+		layout: "inline",
 	},
@@ -118,39 +137,61 @@ parameters: {
 
+/**
+ * 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.
+ * Used as the base template for the stories.
+ */
 const CustomButton = ({
 	iconName,
 	staticColor,
+	layout,
+	showIconOnlyButton,
 	customStyles = {},
 	...args
-}) => html`
-	<div
-				style=${ifDefined(styleMap({
-			padding: "1rem",
-			backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
-			...customStyles
-		}))}
-	>
-		${Template({
-			...args,
-			staticColor,
-			iconName: undefined,
-		})}
-		${Template({
-			...args,
-			staticColor,
-			iconName: undefined,
-			treatment: "outline",
-		})}
-		${Template({
-			...args,
-			staticColor,
-			iconName: iconName ?? "Edit",
-		})}
-		${Template({
-			...args,
-			staticColor,
-			hideLabel: true,
-			iconName: iconName ?? "Edit",
-		})}
-	</div>
-`;
+}) => {
+	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({
+				...args,
+				staticColor,
+				iconName: undefined,
+			}))}
+			${ButtonWrap(layout, Template({
+				...args,
+				staticColor,
+				iconName: undefined,
+				treatment: "outline",
+			}))}
+			${ButtonWrap(layout, Template({
+				...args,
+				staticColor,
+				iconName: iconName ?? "Edit",
+			}))}
+			${when(showIconOnlyButton, () =>
+				ButtonWrap(layout, Template({
+					...args,
+					staticColor,
+					hideLabel: true,
+					iconName: iconName ?? "Edit",
+				}))
+			)}
+		</div>
+	`;
+};
 
@@ -168,3 +209,3 @@ const PendingButton = ({
 		<div>
-		${Typography({
+			${Typography({
 				semantics: "heading",
@@ -202,3 +243,3 @@ size: "xxs",
 		<div>
-		${Typography({
+			${Typography({
 				semantics: "heading",
@@ -228,2 +269,33 @@ size: "xxs",
 
+/**
+ * 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});
+};
+
 export const Accent = CustomButton.bind({});
@@ -279,1 +351,10 @@ Accent.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.",
+};

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

Improved metrics

Total package byte prevSize

550505

increased by1.98%

Lines of code

4787

increased by4.18%

No dependency changes