@spectrum-css/button - npm Package Compare versions

Comparing version 13.2.0 to 13.3.0

CHANGELOG.md

 # Change Log
 
+## 13.3.0
+
+### Minor Changes
+
+- [#3086](https://github.com/adobe/spectrum-css/pull/3086) [`d49ea11`](https://github.com/adobe/spectrum-css/commit/d49ea118abbeb0c2195630dcccf64ac64bbcacbc) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - Adds the ability to disable text wrapping within the button component's label by applying the class `.spectrum-Button--noWrap` to `.spectrum-Button`. If the text overflows the maximum allowed width of the button, an ellipsis `...` indicator will show. Please note that this option is not a part of the design specification and should be used carefully, with consideration of this overflow behavior and the readability of the button's content.
+
 ## 13.2.0
@@ -4,0 +10,0 @@

metadata/metadata.json

@@ -9,2 +9,3 @@ {
     ".spectrum-Button .spectrum-ProgressCircle",
+    ".spectrum-Button--noWrap .spectrum-Button-label",
     ".spectrum-Button--sizeL",
@@ -102,2 +103,3 @@ ".spectrum-Button--sizeM",
     "--mod-button-margin-right",
+    "--mod-button-max-inline-size",
     "--mod-button-min-width",
@@ -104,0 +106,0 @@ "--mod-button-padding-label-to-icon",

metadata/mods.md

@@ -40,2 +40,3 @@ | Modifiable custom properties               |
 | `--mod-button-margin-right`                |
+| `--mod-button-max-inline-size`             |
 | `--mod-button-min-width`                   |
@@ -42,0 +43,0 @@ | `--mod-button-padding-label-to-icon`       |

package.json

 {
 	"name": "@spectrum-css/button",
-	"version": "13.2.0",
+	"version": "13.3.0",
 	"description": "The Spectrum CSS button component",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

stories/button.stories.js

@@ -7,3 +7,3 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { ButtonGroups } from "./button.test.js";
-import { ButtonsWithIconOptions, TextOverflowTemplate, TreatmentTemplate } from "./template.js";
+import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, TreatmentTemplate } from "./template.js";
 
@@ -62,2 +62,10 @@ /**
 		staticColor,
+		noWrap: {
+			name: "Disable label wrap",
+			description: "Used to keep the button label text on one line. Note that this option is not a part of the design specifications which intend for the label to wrap. Use with care and consideration of this option's overflow behavior and the readability of the button's content.",
+			type: { name: "boolean" },
+			table: {
+				category: "Advanced",
+			},
+		},
 	},
@@ -75,2 +83,3 @@ args: {
 		isHovered: false,
+		noWrap: false,
 	},
@@ -292,1 +301,18 @@ parameters: {
 };
+
+/**
+ * The normal behavior for lengthy text in the given horizontal space available is that it will wrap to form another line. By using the `.spectrum-Button--noWrap` class, the lengthy button text will not cause a line break and the width of the button will expand until it reaches its maximum width.
+ * Please note: this can cause undesired overflow experiences and to help prevent this, the overflowing text will attempt to hide by showing an ellipsis (...). This is demonstrated in the last two examples below, by constraining the maximum width of the button.
+ * This option is not part of the design spec, so please use carefully, with consideration of the overflow behavior and the readability of the button's content.
+ * */
+
+export const DisableWrapping = TextWrapTemplate.bind({});
+DisableWrapping.tags = ["!dev"];
+DisableWrapping.storyName = "Disable label wrap";
+DisableWrapping.args = {
+	variant: "primary",
+};
+
+DisableWrapping.parameters = {
+	chromatic: { disableSnapshot: true },
+};

stories/button.test.js

@@ -42,5 +42,7 @@ import { Variants } from "@spectrum-css/preview/decorators";
 		})),
-		...["fill", "outline"].map((treatment) => ({
-			testHeading: capitalize(treatment),
-			treatment,
+		// Note: In Spectrum 2, outline buttons are no longer available in accent and negative options.
+		...["accent", "negative", "primary", "secondary"].map((variant) => ({
+			testHeading: capitalize(variant) + " - outline",
+			variant,
+			treatment: "outline",
 		})),
@@ -53,4 +55,3 @@ {
 			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.",
+			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,
@@ -66,4 +67,3 @@ Template,
 			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.",
+			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,
@@ -73,2 +73,23 @@ Template,
 		{
+			testHeading: "Disable label wrapping",
+			customStyles: {
+				"max-inline-size": "120px",
+			},
+			label: "Be a premium member",
+			noWrap: true,
+			withStates: false,
+			Template,
+		},
+		{
+			testHeading: "Disable label wrapping with workflow icon",
+			customStyles: {
+				"max-inline-size": "120px",
+			},
+			iconName: "Star",
+			label: "Be a premium member",
+			withStates: false,
+			noWrap: true,
+			Template,
+		},
+		{
 			testHeading: "Text wrapping with larger UI icon",
@@ -80,4 +101,3 @@ customStyles: {
 			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.",
+			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,
@@ -84,0 +104,0 @@ Template,

stories/template.js

@@ -35,2 +35,3 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 	ariaControls,
+	noWrap = false,
 } = {}, context = {}) => {
@@ -55,2 +56,3 @@ const { updateArgs } = context;
         ["is-active"]: isActive,
+        [`${rootClass}--noWrap`]: noWrap,
         ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
@@ -174,2 +176,37 @@ })}
   `,
+});
+
+export const TextWrapTemplate = (args) => Container({
+	direction: "column",
+	wrapperStyles: {
+		rowGap: "12px",
+		maxInlineSize: "120px",
+	},
+	content: html`
+    ${Template({
+      ...args,
+      customStyles: {
+        
+      },
+      label: "Be a premium member",
+			noWrap: true,
+    })}
+    ${Template({
+      ...args,
+      customStyles: {
+        "max-inline-size": "100%",
+      },
+      label: "Be a premium member",
+			noWrap: true,
+    })}
+    ${Template({
+      ...args,
+      customStyles: {
+        "max-inline-size": "100%",
+      },
+      iconName: "Star",
+			label: "Be a premium member",
+      noWrap: true,
+    })}
+  `,
 });

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

570519

increased by0.75%

Lines of code

5024

increased by2.05%

No dependency changes