@spectrum-css/actionbutton - npm Package Compare versions

Comparing version 7.0.0-s2-foundations.1 to 7.0.0-s2-foundations.2

CHANGELOG.md

 # Change Log
 
+## 7.0.0-s2-foundations.2
+
+### Major Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58) Thanks [@pfulton](https://github.com/pfulton)! - Preserves `themes` folder in `dist` artifacts for easier downstream consumption
+
+### Patch Changes
+
+- Updated dependencies [[`b00388b`](https://github.com/adobe/spectrum-css/commit/b00388b3ab026989f261f7bcdd77699521f45d58)]:
+  - @spectrum-css/icon@8.0.0-s2-foundations.2
+  - @spectrum-css/tokens@15.0.0-s2-foundations.2
+
 ## 7.0.0-s2-foundations.1
@@ -4,0 +16,0 @@

dist/metadata.json

 {
   "selectors": [
+    ".is-selected:scope",
     ".spectrum-ActionButton",
+    ".spectrum-ActionButton--emphasized:scope",
+    ".spectrum-ActionButton--quiet:scope",
     ".spectrum-ActionButton--sizeL",
@@ -9,4 +12,6 @@ ".spectrum-ActionButton--sizeM",
     ".spectrum-ActionButton--sizeXS",
+    ".spectrum-ActionButton--staticBlack:scope",
+    ".spectrum-ActionButton--staticWhite:scope",
     ".spectrum-ActionButton-hold",
-    ".spectrum-ActionButton-hold + .spectrum-ActionButton-icon",
+    ".spectrum-ActionButton-hold+.spectrum-ActionButton-icon",
     ".spectrum-ActionButton-icon",
@@ -21,14 +26,5 @@ ".spectrum-ActionButton-icon:only-child",
     ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.is-selected",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.is-selected",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton::-moz-focus-inner",
     ".spectrum-ActionButton:active",
     ".spectrum-ActionButton:after",
-    ".spectrum-ActionButton:dir(rtl)",
     ".spectrum-ActionButton:disabled",
@@ -39,2 +35,3 @@ ".spectrum-ActionButton:focus",
     ".spectrum-ActionButton:hover",
+    ":scope:dir(rtl)",
     "a.spectrum-ActionButton"
@@ -41,0 +38,0 @@ ],

package.json

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

stories/template.js

@@ -8,2 +8,3 @@ import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { capitalize, lowerCase } from "lodash-es";
+
 import "../index.css";
@@ -39,4 +40,12 @@
 	role,
-	...globals
-}) => {
+}, context = {}) => {
+	const { globals = {} } = context;
+
+	if (globals.context === "express") {
+		import("../themes/express.css");
+	}
+	else if (globals.context === "legacy") {
+		import("../themes/legacy.css");
+	}
+
 	return html`
@@ -71,3 +80,2 @@ <button
 				Icon({
-					...globals,
 					size,
@@ -77,7 +85,6 @@ iconName: "CornerTriangle",
 					customClasses: [`${rootClass}-hold`],
-				})
+				}, context)
 			)}
 			${when(iconName, () =>
 				Icon({
-					...globals,
 					size,
@@ -87,3 +94,3 @@ iconName,
 					customClasses: [`${rootClass}-icon`, ...customIconClasses],
-				})
+				}, context)
 			)}
@@ -98,3 +105,3 @@ ${when(
 
-const ActionButtons = (args) => html` <div
+const ActionButtons = (args, context) => html` <div
 	style=${styleMap({
@@ -110,12 +117,12 @@ "display": "flex",
 		iconName: undefined,
-	})}
+	}, context)}
 	${Template({
 		...args,
 		label: "More",
-	})}
-	${Template(args)}
+	}, context)}
+	${Template(args, context)}
 	${Template({
 		...args,
 		hasPopup: true,
-	})}
+	}, context)}
 	<!-- Save truncation for VRTs -->
@@ -130,3 +137,3 @@ ${Template({
 		},
-	})}
+	}, context)}
 	${Template({
@@ -139,6 +146,6 @@ ...args,
 		},
-	})}
+	}, context)}
 </div>`;
 
-const States = (args) =>
+const States = (args, context) =>
 	html` <div>
@@ -150,4 +157,4 @@ ${Typography({
 				customClasses: ["chromatic-ignore"],
-			})}
-			${ActionButtons(args)}
+			}, context)}
+			${ActionButtons(args, context)}
 		</div>
@@ -172,7 +179,7 @@ <div>
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			${ActionButtons({
 				...args,
 				isFocused: true,
-			})}
+			}, context)}
 		</div>
@@ -185,7 +192,7 @@ <div>
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			${ActionButtons({
 				...args,
 				isHovered: true,
-			})}
+			}, context)}
 		</div>
@@ -198,7 +205,7 @@ <div>
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			${ActionButtons({
 				...args,
 				isActive: true,
-			})}
+			}, context)}
 		</div>
@@ -211,7 +218,7 @@ <div>
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			${ActionButtons({
 				...args,
 				isDisabled: true,
-			})}
+			}, context)}
 		</div>
@@ -224,3 +231,3 @@ <div>
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			${ActionButtons({
@@ -230,6 +237,6 @@ ...args,
 				isDisabled: true,
-			})}
+			}, context)}
 		</div>`;
 
-const Sizes = (args) =>
+const Sizes = (args, context) =>
 	html` ${["s", "m", "l", "xl"].map((size) => {
@@ -252,11 +259,11 @@ return html` <div>
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			${ActionButtons({
 				...args,
 				size,
-			})}
+			}, context)}
 		</div>`;
 	})}`;
 
-export const Variants = (args) => html`
+export const Variants = (args, context) => html`
 	<style>
@@ -285,3 +292,3 @@ .spectrum-Detail { display: inline-block; }
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			<div style=${styleMap({
@@ -292,3 +299,3 @@ "display": "flex",
 			})}>
-				${States(args)}
+				${States(args, context)}
 			</div>
@@ -302,3 +309,3 @@ </div>
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			<div style=${styleMap({
@@ -312,3 +319,3 @@ "display": "flex",
 					isEmphasized: true,
-				})}
+				}, context)}
 			</div>
@@ -322,3 +329,3 @@ </div>
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			<div style=${styleMap({
@@ -332,3 +339,3 @@ "display": "flex",
 					isQuiet: true,
-				})}
+				}, context)}
 			</div>
@@ -342,3 +349,3 @@ </div>
 				customClasses: ["chromatic-ignore"],
-			})}
+			}, context)}
 			<div style=${styleMap({
@@ -349,3 +356,3 @@ "display": "flex",
 			})}>
-				${Sizes(args)}
+				${Sizes(args, context)}
 			</div>
@@ -357,4 +364,4 @@ </div>
 	})}>
-		${ActionButtons(args)}
+		${ActionButtons(args, context)}
 	</div>
 `;

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

152839

increased by28.4%

Number of package files

12

increased by33.33%

Lines of code

1709

increased by29.18%

No dependency changes