@spectrum-css/actionbutton - npm Package Compare versions

Comparing version 6.1.1 to 6.1.2

CHANGELOG.md

 # Change Log
 
+## 6.1.2
+
+### Patch Changes
+
+- [#3045](https://github.com/adobe/spectrum-css/pull/3045) [`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277) Thanks [@castastrophe](https://github.com/castastrophe)! - Improve changeset suggestions by using exports instead of files in component packages
+
+- Updated dependencies [[`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277)]:
+  - @spectrum-css/icon@7.1.3
+
 ## 6.1.1
@@ -32,3 +41,5 @@
 <a name="6.0.0"></a>
-#6.0.0
+
+## 6.0.0
+
 🗓
@@ -48,3 +59,5 @@ 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.2.6...@spectrum-css/actionbutton@6.0.0)
 <a name="5.2.6"></a>
-##5.2.6
+
+## 5.2.6
+
 🗓
@@ -56,3 +69,5 @@ 2024-03-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.2.5...@spectrum-css/actionbutton@5.2.6)
 <a name="5.2.5"></a>
-##5.2.5
+
+## 5.2.5
+
 🗓
@@ -64,3 +79,5 @@ 2024-02-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.2.4...@spectrum-css/actionbutton@5.2.5)
 <a name="5.2.4"></a>
-##5.2.4
+
+## 5.2.4
+
 🗓
@@ -72,3 +89,5 @@ 2024-02-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.2.3...@spectrum-css/actionbutton@5.2.4)
 <a name="5.2.3"></a>
-##5.2.3
+
+## 5.2.3
+
 🗓
@@ -80,3 +99,5 @@ 2024-02-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.2.2...@spectrum-css/actionbutton@5.2.3)
 <a name="5.2.2"></a>
-##5.2.2
+
+## 5.2.2
+
 🗓
@@ -88,3 +109,5 @@ 2024-02-06
 <a name="5.2.1"></a>
-##5.2.1
+
+## 5.2.1
+
 🗓
@@ -96,3 +119,5 @@ 2024-02-05 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.2.0...@spectrum-css/actionbutton@5.2.1)
 <a name="5.2.0"></a>
-#5.2.0
+
+## 5.2.0
+
 🗓
@@ -104,3 +129,5 @@ 2024-02-05 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.1.0...@spectrum-css/actionbutton@5.2.0)
 <a name="5.1.0"></a>
-#5.1.0
+
+## 5.1.0
+
 🗓
@@ -118,3 +145,5 @@ 2024-01-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.18...@spectrum-css/actionbutton@5.1.0)
 <a name="5.0.18"></a>
-##5.0.18
+
+## 5.0.18
+
 🗓
@@ -126,3 +155,5 @@ 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.17...@spectrum-css/actionbutton@5.0.18)
 <a name="5.0.17"></a>
-##5.0.17
+
+## 5.0.17
+
 🗓
@@ -134,3 +165,5 @@ 2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.16...@spectrum-css/actionbutton@5.0.17)
 <a name="5.0.16"></a>
-##5.0.16
+
+## 5.0.16
+
 🗓
@@ -142,3 +175,5 @@ 2023-12-04 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.15...@spectrum-css/actionbutton@5.0.16)
 <a name="5.0.15"></a>
-##5.0.15
+
+## 5.0.15
+
 🗓
@@ -150,3 +185,5 @@ 2023-11-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.13...@spectrum-css/actionbutton@5.0.15)
 <a name="5.0.14"></a>
-##5.0.14
+
+## 5.0.14
+
 🗓
@@ -158,3 +195,5 @@ 2023-11-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.13...@spectrum-css/actionbutton@5.0.14)
 <a name="5.0.13"></a>
-##5.0.13
+
+## 5.0.13
+
 🗓
@@ -166,3 +205,5 @@ 2023-11-09 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.12...@spectrum-css/actionbutton@5.0.13)
 <a name="5.0.12"></a>
-##5.0.12
+
+## 5.0.12
+
 🗓
@@ -174,3 +215,5 @@ 2023-10-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.11...@spectrum-css/actionbutton@5.0.12)
 <a name="5.0.11"></a>
-##5.0.11
+
+## 5.0.11
+
 🗓
@@ -182,3 +225,5 @@ 2023-09-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.10...@spectrum-css/actionbutton@5.0.11)
 <a name="5.0.10"></a>
-##5.0.10
+
+## 5.0.10
+
 🗓
@@ -190,3 +235,5 @@ 2023-09-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.9...@spectrum-css/actionbutton@5.0.10)
 <a name="5.0.9"></a>
-##5.0.9
+
+## 5.0.9
+
 🗓
@@ -198,3 +245,5 @@ 2023-09-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.8...@spectrum-css/actionbutton@5.0.9)
 <a name="5.0.8"></a>
-##5.0.8
+
+## 5.0.8
+
 🗓
@@ -208,3 +257,5 @@ 2023-09-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.7...@spectrum-css/actionbutton@5.0.8)
 <a name="5.0.7"></a>
-##5.0.7
+
+## 5.0.7
+
 🗓
@@ -216,3 +267,5 @@ 2023-09-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.6...@spectrum-css/actionbutton@5.0.7)
 <a name="5.0.6"></a>
-##5.0.6
+
+## 5.0.6
+
 🗓
@@ -224,3 +277,5 @@ 2023-08-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.5...@spectrum-css/actionbutton@5.0.6)
 <a name="5.0.5"></a>
-##5.0.5
+
+## 5.0.5
+
 🗓
@@ -232,3 +287,5 @@ 2023-08-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.4...@spectrum-css/actionbutton@5.0.5)
 <a name="5.0.4"></a>
-##5.0.4
+
+## 5.0.4
+
 🗓
@@ -242,3 +299,5 @@ 2023-08-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.3...@spectrum-css/actionbutton@5.0.4)
 <a name="5.0.3"></a>
-##5.0.3
+
+## 5.0.3
+
 🗓
@@ -250,3 +309,5 @@ 2023-08-22 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.2...@spectrum-css/actionbutton@5.0.3)
 <a name="5.0.2"></a>
-##5.0.2
+
+## 5.0.2
+
 🗓
@@ -258,3 +319,5 @@ 2023-08-22 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.0...@spectrum-css/actionbutton@5.0.2)
 <a name="5.0.1"></a>
-##5.0.1
+
+## 5.0.1
+
 🗓
@@ -266,3 +329,5 @@ 2023-08-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@5.0.0...@spectrum-css/actionbutton@5.0.1)
 <a name="5.0.0"></a>
-#5.0.0
+
+## 5.0.0
+
 🗓
@@ -280,3 +345,5 @@ 2023-08-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.13...@spectrum-css/actionbutton@5.0.0)
 <a name="4.0.13"></a>
-##4.0.13
+
+## 4.0.13
+
 🗓
@@ -288,3 +355,5 @@ 2023-08-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.12...@spectrum-css/actionbutton@4.0.13)
 <a name="4.0.12"></a>
-##4.0.12
+
+## 4.0.12
+
 🗓
@@ -296,3 +365,5 @@ 2023-08-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.11...@spectrum-css/actionbutton@4.0.12)
 <a name="4.0.11"></a>
-##4.0.11
+
+## 4.0.11
+
 🗓
@@ -304,3 +375,5 @@ 2023-08-03 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.10...@spectrum-css/actionbutton@4.0.11)
 <a name="4.0.10"></a>
-##4.0.10
+
+## 4.0.10
+
 🗓
@@ -314,3 +387,5 @@ 2023-07-24 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.9...@spectrum-css/actionbutton@4.0.10)
 <a name="4.0.9"></a>
-##4.0.9
+
+## 4.0.9
+
 🗓
@@ -322,3 +397,5 @@ 2023-07-17 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.8...@spectrum-css/actionbutton@4.0.9)
 <a name="4.0.8"></a>
-##4.0.8
+
+## 4.0.8
+
 🗓
@@ -332,3 +409,5 @@ 2023-07-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.7...@spectrum-css/actionbutton@4.0.8)
 <a name="4.0.7"></a>
-##4.0.7
+
+## 4.0.7
+
 🗓
@@ -340,3 +419,5 @@ 2023-07-11 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.6...@spectrum-css/actionbutton@4.0.7)
 <a name="4.0.6"></a>
-##4.0.6
+
+## 4.0.6
+
 🗓
@@ -348,3 +429,5 @@ 2023-06-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.5...@spectrum-css/actionbutton@4.0.6)
 <a name="4.0.5"></a>
-##4.0.5
+
+## 4.0.5
+
 🗓
@@ -356,3 +439,5 @@ 2023-06-21 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.4...@spectrum-css/actionbutton@4.0.5)
 <a name="4.0.4"></a>
-##4.0.4
+
+## 4.0.4
+
 🗓
@@ -364,3 +449,5 @@ 2023-06-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.3...@spectrum-css/actionbutton@4.0.4)
 <a name="4.0.3"></a>
-##4.0.3
+
+## 4.0.3
+
 🗓
@@ -374,3 +461,5 @@ 2023-06-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.2...@spectrum-css/actionbutton@4.0.3)
 <a name="4.0.2"></a>
-##4.0.2
+
+## 4.0.2
+
 🗓
@@ -382,3 +471,5 @@ 2023-06-02 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.1...@spectrum-css/actionbutton@4.0.2)
 <a name="4.0.1"></a>
-##4.0.1
+
+## 4.0.1
+
 🗓
@@ -391,3 +482,3 @@ 2023-06-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@4.0.0...@spectrum-css/actionbutton@4.0.1)
 
-# 4.0.0
+## 4.0.0
 
@@ -768,3 +859,3 @@ 🗓 2023-05-23 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@3.0.45...@spectrum-css/actionbutton@4.0.0)
 
-# 3.0.0
+## 3.0.0
 
@@ -851,3 +942,3 @@ 🗓 2022-10-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@2.1.8...@spectrum-css/actionbutton@3.0.0)
 
-# 2.1.0
+## 2.1.0
 
@@ -910,3 +1001,3 @@ 🗓 2022-07-27 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@2.0.5...@spectrum-css/actionbutton@2.1.0)
 
-# 2.0.0
+## 2.0.0
 
@@ -1062,3 +1153,3 @@ 🗓 2022-06-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@1.1.14...@spectrum-css/actionbutton@2.0.0)
 
-# 1.1.0
+## 1.1.0
 
@@ -1187,3 +1278,3 @@ 🗓 2021-12-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@1.0.10...@spectrum-css/actionbutton@1.1.0)
 
-# 1.0.0
+## 1.0.0
 
@@ -1196,3 +1287,3 @@ 🗓 2021-02-02 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actionbutton@1.0.0-beta.1...@spectrum-css/actionbutton@1.0.0)
 
-# 1.0.0-beta.1
+## 1.0.0-beta.1
 
@@ -1199,0 +1290,0 @@ 🗓 2020-12-04

metadata/mods.md

@@ -53,6 +53,3 @@ | Modifiable custom properties                                      |
 | `--mod-animation-duration-100`                                    |
-| `--mod-button-animation-duration`                                 |
-| `--mod-button-font-family`                                        |
-| `--mod-button-line-height`                                        |
 | `--mod-line-height-100`                                           |
 | `--mod-sans-font-family-stack`                                    |

package.json

 {
 	"name": "@spectrum-css/actionbutton",
-	"version": "6.1.1",
+	"version": "6.1.2",
 	"description": "The Spectrum CSS action button component",
@@ -16,3 +16,12 @@ "license": "Apache-2.0",
 	},
-	"main": "dist/index.css",
+	"exports": {
+		".": "./dist/index.css",
+		"./CHANGELOG.md": "./CHANGELOG.md",
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./metadata/metadata.json",
+		"./metadata/*": "./metadata/*",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
 	"files": [
@@ -22,5 +31,6 @@ "dist/*",
 		"package.json",
-		"stories/template.js",
-		"metadata/mods.md"
+		"stories/*",
+		"metadata/*"
 	],
+	"main": "dist/index.css",
 	"peerDependencies": {
@@ -27,0 +37,0 @@ "@spectrum-css/icon": ">=7",

stories/template.js

@@ -0,1 +1,2 @@
+import { getRandomId } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
@@ -6,7 +7,6 @@ import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
+import { capitalize } from "lodash-es";
 
-import { capitalize, lowerCase } from "lodash-es";
+import "../index.css";
 
-import "@spectrum-css/actionbutton/index.css";
-
 /**
@@ -17,2 +17,30 @@ * @todo load order should not influence the icon size but it is; fix this
 
+/**
+ * @typedef API
+ * @property {string} [rootClass="spectrum-ActionButton"]
+ * @property {string} [size="m"]
+ * @property {string|undefined} [iconName]
+ * @property {string|undefined} [iconSet]
+ * @property {string|undefined} [label]
+ * @property {boolean} [isQuiet=false]
+ * @property {boolean} [isSelected=false]
+ * @property {boolean} [isEmphasized=false]
+ * @property {boolean} [isHovered=false]
+ * @property {boolean} [isFocused=false]
+ * @property {boolean} [isActive=false]
+ * @property {boolean} [isDisabled=false]
+ * @property {"false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog"} [hasPopup="false"]
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup
+ * @property {string} [popupId]
+ * @property {boolean} [hideLabel=false]
+ * @property {"white"|"black"|undefined} [staticColor]
+ * @property {string[]} [customClasses=[]]
+ */
+
+/**
+ *
+ * @param {API} args
+ * @param {import('@storybook/types').StoryContext<import('@storybook/web-components').WebComponentsRenderer, API>} context
+ * @returns {import('lit').TemplateResult}
+ */
 export const Template = ({
@@ -31,3 +59,4 @@ rootClass = "spectrum-ActionButton",
 	isDisabled = false,
-	hasPopup = false,
+	hasPopup = "false",
+	popupId,
 	hideLabel = false,
@@ -39,12 +68,12 @@ staticColor,
 	onclick,
-	id,
+	id = getRandomId("actionbutton"),
 	testId,
-	role,
-	...globals
-}) => {
-
+	role = "button",
+} = {}, context = {}) => {
+	const { updateArgs } = context;
 	return html`
 		<button
 			aria-label=${ifDefined(label)}
-			aria-haspopup=${hasPopup ? "true" : "false"}
+			aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)}
+			aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined}
 			aria-pressed=${isSelected ? "true" : "false"}
@@ -57,3 +86,3 @@ class=${classMap({
 				[`${rootClass}--emphasized`]: isEmphasized,
-				[`${rootClass}--static${capitalize(lowerCase(staticColor))}`]:
+				[`${rootClass}--static${capitalize(staticColor)}`]:
 					typeof staticColor !== "undefined",
@@ -67,12 +96,21 @@ ["is-disabled"]: isDisabled,
 			})}
-			id=${ifDefined(id)}
-			data-testid=${ifDefined(testId)}
+			id=${id}
+			data-testid=${testId ?? id}
 			role=${ifDefined(role)}
-			style=${ifDefined(styleMap(customStyles))}
+			style=${styleMap(customStyles)}
 			?disabled=${isDisabled}
-			@click=${onclick}
+			@click=${onclick ?? function() {
+				updateArgs({
+					isSelected: !isSelected
+				});
+			}}
+			@focusin=${function() {
+				updateArgs({ isFocused: true });
+			}}
+			@focusout=${function() {
+				updateArgs({ isFocused: false });
+			}}
 		>
-			${when(hasPopup, () =>
+			${when(hasPopup && hasPopup !== "false", () =>
 				Icon({
-					...globals,
 					size,
@@ -82,7 +120,6 @@ iconName: "CornerTriangle",
 					customClasses: [`${rootClass}-hold`],
-				})
+				}, context)
 			)}
 			${when(iconName, () =>
 				Icon({
-					...globals,
 					size,
@@ -92,3 +129,3 @@ iconName,
 					customClasses: [`${rootClass}-icon`, ...customIconClasses],
-				})
+				}, context)
 			)}
@@ -95,0 +132,0 @@ ${when(

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

294524

increased by38.51%

Number of package files

15

increased by25%

Lines of code

2402

increased by12.56%

No dependency changes