@spectrum-css/actionbutton - npm Package Compare versions

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

CHANGELOG.md

 # Change Log
 
+## 7.0.0-s2-foundations.1
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e) Thanks [@pfulton](https://github.com/pfulton)! - Fixes an issue where vars.css was not being populated with the correct values
+
+### Patch Changes
+
+- Updated dependencies [[`39bbd6c`](https://github.com/adobe/spectrum-css/commit/39bbd6cbb7eac7c71515ef2417554cb115eba00e)]:
+  - @spectrum-css/icon@8.0.0-s2-foundations.1
+  - @spectrum-css/tokens@15.0.0-s2-foundations.1
+
 ## 7.0.0-s2-foundations.0
@@ -4,0 +16,0 @@

package.json

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

stories/template.js

@@ -0,1 +1,2 @@
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html } from "lit";
@@ -6,7 +7,5 @@ import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
-
 import { capitalize, lowerCase } from "lodash-es";
+import "../index.css";
 
-import "@spectrum-css/actionbutton/index.css";
-
 /**
@@ -42,3 +41,2 @@ * @todo load order should not influence the icon size but it is; fix this
 }) => {
-
 	return html`
@@ -96,1 +94,244 @@ <button
 };
+
+const ActionButtons = (args) => html` <div
+	style=${styleMap({
+		"display": "flex",
+		"gap": "16px",
+	})}
+	id="render-root"
+>
+	${Template({
+		...args,
+		label: "More",
+		iconName: undefined,
+	})}
+	${Template({
+		...args,
+		label: "More",
+	})}
+	${Template(args)}
+	${Template({
+		...args,
+		hasPopup: true,
+	})}
+	<!-- Save truncation for VRTs -->
+	${Template({
+		...args,
+		label: "Truncate this long content",
+		iconName: undefined,
+		customStyles: {
+			display: window.isChromatic() ? undefined : "none",
+			maxInlineSize: "100px"
+		},
+	})}
+	${Template({
+		...args,
+		label: "Truncate this long content",
+		customStyles: {
+			display: window.isChromatic() ? undefined : "none",
+			maxInlineSize: "100px"
+		},
+	})}
+</div>`;
+
+const States = (args) =>
+	html` <div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Default"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			${ActionButtons(args)}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Selected"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			${ActionButtons({
+				...args,
+				isSelected: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Focused"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			${ActionButtons({
+				...args,
+				isFocused: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Hovered"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			${ActionButtons({
+				...args,
+				isHovered: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Active"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			${ActionButtons({
+				...args,
+				isActive: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Disabled"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			${ActionButtons({
+				...args,
+				isDisabled: true,
+			})}
+		</div>
+		<div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: ["Disabled + selected"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			${ActionButtons({
+				...args,
+				isSelected: true,
+				isDisabled: true,
+			})}
+		</div>`;
+
+const Sizes = (args) =>
+	html` ${["s", "m", "l", "xl"].map((size) => {
+		return html` <div>
+			${Typography({
+				semantics: "detail",
+				size: "s",
+				content: [
+					{
+						xxs: "Extra-extra-small",
+						xs: "Extra-small",
+						s: "Small",
+						m: "Medium",
+						l: "Large",
+						xl: "Extra-large",
+						xxl: "Extra-extra-large",
+					}[size],
+				],
+				customClasses: ["chromatic-ignore"],
+			})}
+			${ActionButtons({
+				...args,
+				size,
+			})}
+		</div>`;
+	})}`;
+
+export const Variants = (args) => html`
+	<style>
+		.spectrum-Detail { display: inline-block; }
+		.spectrum-Typography > div {
+			border: 1px solid var(--spectrum-gray-200);
+			border-radius: 4px;
+			padding: 0 1em 1em;
+			/* Why seafoam? Because it separates it from the component styles. */
+			--mod-detail-font-color: var(--spectrum-seafoam-900);
+		}
+	</style>
+	<div style=${styleMap({
+		"display": window.isChromatic() ? "flex" : "none",
+		"flex-direction": "column",
+		"align-items": "flex-start",
+		"gap": "16px",
+		"--mod-detail-margin-end": "4.8px",
+	})}>
+		<div class="spectrum-Typography">
+			${Typography({
+				semantics: "detail",
+				size: "l",
+				content: ["Standard"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			<div style=${styleMap({
+				"display": "flex",
+				"flex-direction": "column",
+				"gap": "4.8px",
+			})}>
+				${States(args)}
+			</div>
+		</div>
+		<div class="spectrum-Typography">
+			${Typography({
+				semantics: "detail",
+				size: "l",
+				content: ["Emphasized"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			<div style=${styleMap({
+				"display": "flex",
+				"flex-direction": "column",
+				"gap": "4.8px",
+			})}>
+				${States({
+					...args,
+					isEmphasized: true,
+				})}
+			</div>
+		</div>
+		<div class="spectrum-Typography">
+			${Typography({
+				semantics: "detail",
+				size: "l",
+				content: ["Quiet"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			<div style=${styleMap({
+				"display": "flex",
+				"flex-direction": "column",
+				"gap": "4.8px",
+			})}>
+				${States({
+					...args,
+					isQuiet: true,
+				})}
+			</div>
+		</div>
+		<div class="spectrum-Typography">
+			${Typography({
+				semantics: "detail",
+				size: "l",
+				content: ["Sizing"],
+				customClasses: ["chromatic-ignore"],
+			})}
+			<div style=${styleMap({
+				"display": "flex",
+				"flex-direction": "column",
+				"gap": "4.8px",
+			})}>
+				${Sizes(args)}
+			</div>
+		</div>
+	</div>
+	<div style=${styleMap({
+		display: window.isChromatic() ? "none" : undefined,
+	})}>
+		${ActionButtons(args)}
+	</div>
+`;

No alert changes

Improved metrics

Total package byte prevSize

119037

increased by4.77%

Lines of code

1323

increased by22.39%

No dependency changes