@spectrum-css/actionbutton - npm Package Compare versions

Comparing version 7.0.0-s2-foundations.11 to 7.0.0-s2-foundations.12

CHANGELOG.md

 # Change Log
 
+## 7.0.0-s2-foundations.12
+
+### 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/icon@8.0.0-s2-foundations.12
+  - @spectrum-css/tokens@15.0.0-s2-foundations.12
+
 ## 7.0.0-s2-foundations.11
@@ -7,5 +19,5 @@
 
-- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b92416b`](https://github.com/adobe/spectrum-css/commit/b92416b0126aa0164c791f5635a66e509b3b4184) Thanks [@pfulton](https://github.com/pfulton)! - Fix unsupported variables created in components/actionbutton/themes/spectrum.css
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`4265d20`](https://github.com/adobe/spectrum-css/commit/4265d208b6eb2db923e558fca100b4532b964e45) Thanks [@pfulton](https://github.com/pfulton)! - Fix unsupported variables created in components/actionbutton/themes/spectrum.css
 
-- Updated dependencies [[`b92416b`](https://github.com/adobe/spectrum-css/commit/b92416b0126aa0164c791f5635a66e509b3b4184)]:
+- Updated dependencies [[`4265d20`](https://github.com/adobe/spectrum-css/commit/4265d208b6eb2db923e558fca100b4532b964e45)]:
   - @spectrum-css/tokens@15.0.0-s2-foundations.11
@@ -12,0 +24,0 @@

dist/metadata.json

@@ -16,2 +16,3 @@ {
     ".spectrum-ActionButton.is-selected",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
     ".spectrum-ActionButton.is-selected:not(:disabled)",
@@ -21,3 +22,2 @@ ".spectrum-ActionButton.is-selected:not(:disabled) .spectrum-ActionButton-hold",
     ".spectrum-ActionButton.is-selected:not(:disabled) .spectrum-ActionButton-label",
-    ".spectrum-ActionButton.spectrum-ActionButton--emphasized.is-selected",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
@@ -69,2 +69,3 @@ ".spectrum-ActionButton.spectrum-ActionButton--sizeL",
     "--mod-actionbutton-border-width",
+    "--mod-actionbutton-content-color-defaul-selectedt",
     "--mod-actionbutton-content-color-default",
@@ -133,3 +134,2 @@ "--mod-actionbutton-content-color-default-selected",
     "--spectrum-actionbutton-border-color-focus",
-    "--spectrum-actionbutton-border-color-focus-selected",
     "--spectrum-actionbutton-border-color-hover",
@@ -139,3 +139,2 @@ "--spectrum-actionbutton-border-color-hover-selected",
     "--spectrum-actionbutton-border-width",
-    "--spectrum-actionbutton-content-color-defaul-selectedt",
     "--spectrum-actionbutton-content-color-default",
@@ -206,3 +205,2 @@ "--spectrum-actionbutton-content-color-default-selected",
     "--spectrum-gray-200",
-    "--spectrum-gray-25",
     "--spectrum-gray-300",
@@ -256,33 +254,18 @@ "--spectrum-gray-400",
     "--system-action-button-background-color-default",
-    "--system-action-button-background-color-default-selected",
     "--system-action-button-background-color-disabled",
-    "--system-action-button-background-color-disabled-selected",
     "--system-action-button-background-color-down",
-    "--system-action-button-background-color-down-selected",
     "--system-action-button-background-color-focus",
-    "--system-action-button-background-color-focus-selected",
     "--system-action-button-background-color-hover",
-    "--system-action-button-background-color-hover-selected",
     "--system-action-button-border-color-default",
-    "--system-action-button-border-color-default-selected",
     "--system-action-button-border-color-disabled",
-    "--system-action-button-border-color-disabled-selected",
     "--system-action-button-border-color-down",
-    "--system-action-button-border-color-down-selected",
     "--system-action-button-border-color-focus",
-    "--system-action-button-border-color-focus-selected",
     "--system-action-button-border-color-hover",
-    "--system-action-button-border-color-hover-selected",
     "--system-action-button-border-radius",
     "--system-action-button-border-width",
     "--system-action-button-content-color-default",
-    "--system-action-button-content-color-default-selected",
     "--system-action-button-content-color-disabled",
     "--system-action-button-content-color-down",
-    "--system-action-button-content-color-down-selected",
     "--system-action-button-content-color-focus",
-    "--system-action-button-content-color-focus-selected",
     "--system-action-button-content-color-hover",
-    "--system-action-button-content-color-hover-selected",
-    "--system-action-button-dir-rtl-logical-rotation",
     "--system-action-button-edge-to-hold-icon",
@@ -292,11 +275,2 @@ "--system-action-button-edge-to-text",
     "--system-action-button-edge-to-visual-only",
-    "--system-action-button-emphasized-selected-background-color-default",
-    "--system-action-button-emphasized-selected-background-color-down",
-    "--system-action-button-emphasized-selected-background-color-focus",
-    "--system-action-button-emphasized-selected-background-color-hover",
-    "--system-action-button-emphasized-selected-content-color-default",
-    "--system-action-button-emphasized-selected-content-color-down",
-    "--system-action-button-emphasized-selected-content-color-focus",
-    "--system-action-button-emphasized-selected-content-color-hover",
-    "--system-action-button-focus-indicator-border-radius",
     "--system-action-button-focus-indicator-color",
@@ -333,2 +307,10 @@ "--system-action-button-focus-indicator-gap",
     "--system-action-button-selected-content-color-hover",
+    "--system-action-button-selected-emphasized-background-color-default",
+    "--system-action-button-selected-emphasized-background-color-down",
+    "--system-action-button-selected-emphasized-background-color-focus",
+    "--system-action-button-selected-emphasized-background-color-hover",
+    "--system-action-button-selected-emphasized-content-color-default",
+    "--system-action-button-selected-emphasized-content-color-down",
+    "--system-action-button-selected-emphasized-content-color-focus",
+    "--system-action-button-selected-emphasized-content-color-hover",
     "--system-action-button-size-l-edge-to-hold-icon",
@@ -380,26 +362,16 @@ "--system-action-button-size-l-edge-to-text",
     "--system-action-button-static-black-background-color-default",
-    "--system-action-button-static-black-background-color-default-selected",
     "--system-action-button-static-black-background-color-disabled",
-    "--system-action-button-static-black-background-color-disabled-selected",
     "--system-action-button-static-black-background-color-down",
-    "--system-action-button-static-black-background-color-down-selected",
     "--system-action-button-static-black-background-color-focus",
-    "--system-action-button-static-black-background-color-focus-selected",
     "--system-action-button-static-black-background-color-hover",
-    "--system-action-button-static-black-background-color-hover-selected",
     "--system-action-button-static-black-border-color-default",
     "--system-action-button-static-black-border-color-disabled",
-    "--system-action-button-static-black-border-color-disabled-selected",
     "--system-action-button-static-black-border-color-down",
     "--system-action-button-static-black-border-color-focus",
     "--system-action-button-static-black-border-color-hover",
-    "--system-action-button-static-black-content-color-defaul-selectedt",
     "--system-action-button-static-black-content-color-default",
     "--system-action-button-static-black-content-color-disabled",
     "--system-action-button-static-black-content-color-down",
-    "--system-action-button-static-black-content-color-down-selected",
     "--system-action-button-static-black-content-color-focus",
-    "--system-action-button-static-black-content-color-focus-selected",
     "--system-action-button-static-black-content-color-hover",
-    "--system-action-button-static-black-content-color-hover-selected",
     "--system-action-button-static-black-focus-indicator-color",
@@ -417,3 +389,3 @@ "--system-action-button-static-black-quiet-border-color-default",
     "--system-action-button-static-black-selected-border-color-disabled",
-    "--system-action-button-static-black-selected-content-color-default",
+    "--system-action-button-static-black-selected-content-color-defaul-selectedt",
     "--system-action-button-static-black-selected-content-color-down",
@@ -423,14 +395,8 @@ "--system-action-button-static-black-selected-content-color-focus",
     "--system-action-button-static-white-background-color-default",
-    "--system-action-button-static-white-background-color-default-selected",
     "--system-action-button-static-white-background-color-disabled",
-    "--system-action-button-static-white-background-color-disabled-selected",
     "--system-action-button-static-white-background-color-down",
-    "--system-action-button-static-white-background-color-down-selected",
     "--system-action-button-static-white-background-color-focus",
-    "--system-action-button-static-white-background-color-focus-selected",
     "--system-action-button-static-white-background-color-hover",
-    "--system-action-button-static-white-background-color-hover-selected",
     "--system-action-button-static-white-border-color-default",
     "--system-action-button-static-white-border-color-disabled",
-    "--system-action-button-static-white-border-color-disabled-selected",
     "--system-action-button-static-white-border-color-down",
@@ -440,10 +406,6 @@ "--system-action-button-static-white-border-color-focus",
     "--system-action-button-static-white-content-color-default",
-    "--system-action-button-static-white-content-color-default-selected",
     "--system-action-button-static-white-content-color-disabled",
     "--system-action-button-static-white-content-color-down",
-    "--system-action-button-static-white-content-color-down-selected",
     "--system-action-button-static-white-content-color-focus",
-    "--system-action-button-static-white-content-color-focus-selected",
     "--system-action-button-static-white-content-color-hover",
-    "--system-action-button-static-white-content-color-hover-selected",
     "--system-action-button-static-white-focus-indicator-color",
@@ -450,0 +412,0 @@ "--system-action-button-static-white-quiet-border-color-default",

dist/mods.md

@@ -24,2 +24,3 @@ | Modifiable custom properties                                    |
 | --mod-actionbutton-border-width                                 |
+| --mod-actionbutton-content-color-defaul-selectedt               |
 | --mod-actionbutton-content-color-default                        |
@@ -26,0 +27,0 @@ | --mod-actionbutton-content-color-default-selected               |

package.json

 {
 	"name": "@spectrum-css/actionbutton",
-	"version": "7.0.0-s2-foundations.11",
+	"version": "7.0.0-s2-foundations.12",
 	"description": "The Spectrum CSS action button component",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

stories/template.js

@@ -1,2 +0,2 @@
-import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Variants } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
@@ -10,4 +10,2 @@ import { classMap } from "lit/directives/class-map.js";
 import "../index.css";
-import "../themes/express.css";
-import "../themes/spectrum.css";
 
@@ -68,3 +66,3 @@ /**
 	onclick,
-	id = getRandomId("actionbutton"),
+	id,
 	testId,
@@ -95,4 +93,4 @@ role = "button",
 			})}
-			id=${id}
-			data-testid=${testId ?? id}
+			id=${ifDefined(id)}
+			data-testid=${ifDefined(testId)}
 			role=${ifDefined(role)}
@@ -132,1 +130,78 @@ style=${styleMap(customStyles)}
 };
+
+export const ActionButtons = (args, context) => {
+	return html`
+		${Template(args, context)}
+		${Template({
+			...args,
+			iconName: undefined,
+		}, context)}
+		${Template({
+			...args,
+			hideLabel: true,
+		}, context)}
+		${Template({
+			...args,
+			hasPopup: "menu",
+			label: "Has pop-up",
+			iconName: undefined,
+		}, context)}
+	`;
+};
+
+const Truncation = (args, context) => {
+	return html`
+		${Template(args, context)}
+		${Template({
+			...args,
+			iconName: undefined,
+		}, context)}
+	`;
+};
+
+export const ActionButtonGroup = Variants({
+	Template: ActionButtons,
+	stateDirection: "column",
+	testData: [
+		{
+			testHeading: "Standard"
+		},
+		{
+			testHeading: "Emphasized",
+			isEmphasized: true,
+		},
+		{
+			testHeading: "Quiet",
+			isQuiet: true,
+		},
+		{
+			Template: Truncation,
+			testHeading: "Truncation",
+			label: "Truncate this long content",
+			customStyles: {
+				maxInlineSize: "100px"
+			},
+			withStates: false,
+		},
+	],
+	stateData: [{
+		testHeading: "Disabled",
+		isDisabled: true,
+	}, {
+		testHeading: "Selected",
+		isSelected: true,
+	}, {
+		testHeading: "Focused",
+		isFocused: true,
+	}, {
+		testHeading: "Hovered",
+		isHovered: true,
+	}, {
+		testHeading: "Active",
+		isActive: true,
+	}, {
+		testHeading: "Disabled + selected",
+		isDisabled: true,
+		isSelected: 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

Worsened metrics

Total package byte prevSize

272331

decreased by-3.31%

Lines of code

2744

decreased by-1.68%

No dependency changes