@spectrum-css/button - npm Package Compare versions

Comparing version 13.1.2 to 13.1.3

CHANGELOG.md

 # Change Log
 
+## 13.1.3
+
+### Patch Changes
+
+- [#3107](https://github.com/adobe/spectrum-css/pull/3107) [`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2) Thanks [@castastrophe](https://github.com/castastrophe)! - Incorporate glob export for the dist directory in all component packages as well as glob markdown exports (to include both CHANGELOG and READMEs).
+
+  Sort keys in the package.json assets.
+
+- Updated dependencies [[`83d5a17`](https://github.com/adobe/spectrum-css/commit/83d5a171bd850df693707611203ecce21f22e7d2)]:
+  - @spectrum-css/progresscircle@3.1.4
+  - @spectrum-css/icon@7.1.4
+
 ## 13.1.2
@@ -4,0 +16,0 @@

package.json

 {
 	"name": "@spectrum-css/button",
-	"version": "13.1.2",
+	"version": "13.1.3",
 	"description": "The Spectrum CSS button component",
@@ -18,3 +18,4 @@ "license": "Apache-2.0",
 		".": "./dist/index.css",
-		"./CHANGELOG.md": "./CHANGELOG.md",
+		"./*.md": "./*.md",
+		"./dist/*": "./dist/*",
 		"./index-*.css": "./dist/index-*.css",
@@ -27,5 +28,6 @@ "./index.css": "./dist/index.css",
 	},
+	"main": "dist/index.css",
 	"files": [
 		"dist/*",
-		"CHANGELOG.md",
+		"*.md",
 		"package.json",
@@ -35,3 +37,2 @@ "stories/*",
 	],
-	"main": "dist/index.css",
 	"peerDependencies": {
@@ -38,0 +39,0 @@ "@spectrum-css/icon": ">=7",

stories/button.stories.js

 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
+import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types";
-import { version } from "../package.json";
+import pkgJson from "../package.json";
 import { ButtonGroups } from "./button.test.js";
+import { ButtonsWithIconOptions, TextOverflowTemplate, TreatmentTemplate } from "./template.js";
 
@@ -76,4 +78,5 @@ /**
 		},
-		componentVersion: version,
+		packageJson: pkgJson,
 	},
+	tags: ["!autodocs"],
 };
@@ -119,1 +122,169 @@
 };
+
+// ********* DOCS ONLY ********* //
+
+/**
+ * Buttons come in four different sizes: small, medium, large, and extra large. The medium size is
+ * the default and most frequently used option. Use the other sizes sparingly; they should be used
+ * to create a hierarchy of importance within the page.
+ */
+export const Sizing = (args, context) => Sizes({
+	Template: ButtonsWithIconOptions,
+	withHeading: false,
+	withBorder: false,
+	...args,
+}, context);
+Sizing.args = {};
+Sizing.tags = ["!dev"];
+Sizing.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * The accent button communicates strong emphasis and is reserved for encouraging critical
+ * actions. In general, only use the emphasized option for the most important action on the page.
+ */
+export const Accent = ButtonsWithIconOptions.bind({});
+Accent.tags = ["!dev"];
+Accent.args = {
+	variant: "accent",
+};
+Accent.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * The primary button is for medium emphasis. Use it in place of an accent button when the
+ * action requires less prominence, or if there are multiple primary actions of the same importance
+ * in the same view. Both the fill (default) and outline styles are demonstrated in this example.
+ */
+export const Primary = TreatmentTemplate.bind({});
+Primary.tags = ["!dev"];
+Primary.args = {
+	variant: "primary",
+	treatmentLayout: "stacked",
+};
+Primary.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * The secondary button is for low emphasis. It’s paired with other button types to surface less
+ * prominent actions, and should never be the only button in a group. Both the fill (default) and
+ * outline styles are demonstrated in this example.
+ */
+export const Secondary = TreatmentTemplate.bind({});
+Secondary.tags = ["!dev"];
+Secondary.args = {
+	variant: "secondary",
+	treatmentLayout: "stacked",
+};
+Secondary.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * The negative button is for emphasizing actions that can be destructive or have negative
+ * consequences if taken. Use it sparingly.
+ */
+export const Negative = ButtonsWithIconOptions.bind({});
+Negative.tags = ["!dev"];
+Negative.args = {
+	variant: "negative",
+};
+Negative.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const StaticWhitePrimary = TreatmentTemplate.bind({});
+StaticWhitePrimary.tags = ["!dev"];
+StaticWhitePrimary.args = {
+	variant: "primary",
+	treatmentLayout: "stacked",
+	staticColor: "white",
+};
+StaticWhitePrimary.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const StaticWhiteSecondary = TreatmentTemplate.bind({});
+StaticWhiteSecondary.tags = ["!dev"];
+StaticWhiteSecondary.args = {
+	variant: "secondary",
+	treatmentLayout: "stacked",
+	staticColor: "white",
+};
+StaticWhiteSecondary.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const StaticBlackPrimary = TreatmentTemplate.bind({});
+StaticBlackPrimary.tags = ["!dev"];
+StaticBlackPrimary.args = {
+	variant: "primary",
+	treatmentLayout: "stacked",
+	staticColor: "black",
+};
+StaticBlackPrimary.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const StaticBlackSecondary = TreatmentTemplate.bind({});
+StaticBlackSecondary.tags = ["!dev"];
+StaticBlackSecondary.args = {
+	variant: "secondary",
+	treatmentLayout: "stacked",
+	staticColor: "black",
+};
+StaticBlackSecondary.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * The pending button is for indicating that a quick progress action is taking place. In this case, the
+ * label and optional icon disappear and a progress circle appears. The progress circle always shows an
+ * indeterminate progress. We recommend the use of the `.is-pending` class on the component’s parent
+ * container, but there is also an option to use an attribute of `pending` instead. Buttons should have
+ * the disabled attribute when the pending state is applied.
+ */
+export const Pending = TreatmentTemplate.bind({});
+Pending.tags = ["!dev"];
+Pending.args = {
+	variant: "accent",
+	isPending: true,
+	onclick: () => {},
+};
+Pending.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * A button in a disabled state shows that an action exists, but is not available in that circumstance. 
+ * This state can be used to maintain layout continuity and to communicate that an action may become
+ * available later.
+ */
+export const Disabled = TreatmentTemplate.bind({});
+Disabled.tags = ["!dev"];
+Disabled.args = {
+	variant: "accent",
+	isDisabled: true,
+};
+Disabled.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+/**
+ * When the button text is too long for the horizontal space available, it wraps to form another line. 
+ * When there is no icon present, the text is aligned center. When there is an icon present, the text is
+ * aligned `start` (left with a writing direction of left-to-right) and the icon remains vertically aligned
+ * at the top.
+ */
+export const WithWrapping = TextOverflowTemplate.bind({});
+WithWrapping.tags = ["!dev"];
+WithWrapping.storyName = "Text overflow behavior";
+WithWrapping.args = {
+	variant: "primary",
+};
+WithWrapping.parameters = {
+	chromatic: { disableSnapshot: true },
+};

stories/template.js

 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
@@ -103,1 +103,71 @@ import { html } from "lit";
 };
+
+/**
+ * Displays multiple buttons with text label, icon + text label, and icon only.
+ * Used in the display of some docs-only stories.
+ */
+export const ButtonsWithIconOptions = ({
+	iconName,
+	...args
+}) => Container({
+	withBorder: false,
+	direction: "row",
+	wrapperStyles: {
+		columnGap: "12px",
+	},
+	content: html`
+    ${Template({
+      ...args,
+      iconName: undefined,
+    })}
+    ${Template({
+      ...args,
+      iconName: iconName ?? "Edit",
+    })}
+    ${Template({
+      ...args,
+      hideLabel: true,
+      iconName: iconName ?? "Edit",
+    })}
+  `,
+});
+
+/**
+ * Display the buttons with icon options for each treatment option.
+ */
+export const TreatmentTemplate = (args) => Container({
+	withBorder: false,
+	direction: "column",
+	wrapperStyles: {
+		rowGap: "12px",
+	},
+	content: html`${["fill", "outline"].map((treatment) => ButtonsWithIconOptions({ ...args, treatment }))}`,
+});
+
+/**
+ * Display the text overflow behavior of buttons.
+ */
+export const TextOverflowTemplate = (args) => Container({
+	withBorder: false,
+	direction: "column",
+	wrapperStyles: {
+		rowGap: "12px",
+	},
+	content: html`
+    ${Template({
+      ...args,
+      customStyles: {
+        "max-inline-size": "480px",
+      },
+      label: "An example of text overflow behavior when there is no icon. 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",
+      },
+      iconName: "Edit",
+      label: "An example of text overflow behavior when the button has an icon. 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

562597

increased by1.81%

Number of package files

21

increased by5%

Lines of code

4870

increased by4.82%

No dependency changes