feat(actionbutton): s2 migration

adobe · Apr 17, 2024 · de5e49c · de5e49c
1 parent b3b3aa5
commit de5e49c
Show file tree

Hide file tree

Showing 8 changed files with 276 additions and 383 deletions.
diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
@@ -15,9 +15,26 @@ sections:
       ### Version 6.0.0
       #### Spectrum 2 release
       Action button now uses Spectrum 2 tokens and specifications. A few notable changes:
-      - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
-      - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
-      - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+      - Medium is now the default size and `.spectrum-Switch--sizeM` has been removed.
+      - Includes the Spectrum 2 down state transform.
+      - The component border was not removed to continue support for Windows High Contrast Mode (WHCM), but the color was adjusted to `transparent` and the mod custom properties were removed so as not to interfere with WHCM accessibility.
+      - Background and content colors were updated.
+      - Mod custom properties have been adjusted:
+        - Renamed:
+          - `--mod-line-height-100` renamed to `--mod-button-line-height`.
+          - `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`.
+          - `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`.
+        - Removed:
+          - `--mod-actionbutton-border-color-default`
+          - `--mod-actionbutton-border-color-disabled`
+          - `--mod-actionbutton-border-color-down`
+          - `--mod-actionbutton-border-color-focus`
+          - `--mod-actionbutton-border-color-hover`
+          - `--mod-actionbutton-border-width`
+          - `--mod-actionbutton-static-content-color`
+        - New:
+          - `--mod-actionbutton-font-weight`
+
 
       ### Versions prior to 6.0.0
       #### Action Button now requires a class on its icon

diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md
@@ -14,13 +14,7 @@
 | `--mod-actionbutton-background-color-hover`                       |
 | `--mod-actionbutton-background-color-hover-selected`              |
 | `--mod-actionbutton-background-color-hover-selected-emphasized`   |
-| `--mod-actionbutton-border-color-default`                         |
-| `--mod-actionbutton-border-color-disabled`                        |
-| `--mod-actionbutton-border-color-down`                            |
-| `--mod-actionbutton-border-color-focus`                           |
-| `--mod-actionbutton-border-color-hover`                           |
 | `--mod-actionbutton-border-radius`                                |
-| `--mod-actionbutton-border-width`                                 |
 | `--mod-actionbutton-content-color-default`                        |
 | `--mod-actionbutton-content-color-default-selected`               |
 | `--mod-actionbutton-content-color-default-selected-emphasized`    |
@@ -43,11 +37,11 @@
 | `--mod-actionbutton-focus-indicator-gap`                          |
 | `--mod-actionbutton-focus-indicator-thickness`                    |
 | `--mod-actionbutton-font-size`                                    |
+| `--mod-actionbutton-font-weight`                                  |
 | `--mod-actionbutton-height`                                       |
 | `--mod-actionbutton-icon-size`                                    |
 | `--mod-actionbutton-label-color`                                  |
 | `--mod-actionbutton-min-width`                                    |
-| `--mod-actionbutton-static-content-color`                         |
 | `--mod-actionbutton-text-to-visual`                               |
 | `--mod-button-animation-duration`                                 |
 | `--mod-button-font-family`                                        |

diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json
@@ -16,7 +16,7 @@
   "main": "dist/index.css",
   "peerDependencies": {
     "@spectrum-css/icon": ">=4",
-    "@spectrum-css/tokens": "^14.0.0-next.3"
+    "@spectrum-css/tokens": "^14.0.0-next.6"
   },
   "peerDependenciesMeta": {
     "@spectrum-css/icon": {

diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
@@ -1,6 +1,7 @@
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
+import { withDownStateDimensionCapture } from "../../../.storybook/decorators";
 
 import { Template } from "./template";
 
@@ -137,6 +138,8 @@ export default {
 		isQuiet: false,
 		isEmphasized: false,
 		hasPopup: false,
+		hideLabel: false,
+		label: "",
 		isActive: false,
 		isFocused: false,
 		isHovered: false,
@@ -178,6 +181,7 @@ export default {
 				${Story(context)}
 			</div>
 		`,
+		withDownStateDimensionCapture(".spectrum-ActionButton:not(:disabled)")
 	],
 };
 
@@ -229,17 +233,6 @@ const States = (args) =>
 			})}
 			${ActionButtons(args)}
 		</div>
-		<div>
-			${Typography({
-				semantics: "detail",
-				size: "s",
-				content: ["Selected"],
-			})}
-			${ActionButtons({
-				...args,
-				isSelected: true,
-			})}
-		</div>
 		<div>
 			${Typography({
 				semantics: "detail",
@@ -283,35 +276,21 @@ const States = (args) =>
 				...args,
 				isDisabled: true,
 			})}
-		</div>
-		<div>
-			${Typography({
-				semantics: "detail",
-				size: "s",
-				content: ["Disabled + selected"],
-			})}
-			${ActionButtons({
-				...args,
-				isSelected: true,
-				isDisabled: true,
-			})}
 		</div>`;
 
 const Sizes = (args) =>
-	html` ${["s", "m", "l", "xl"].map((size) => {
+	html` ${["xs", "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],
 				],
 			})}
@@ -328,7 +307,7 @@ const Variants = (args) =>
 					${Typography({
 						semantics: "detail",
 						size: "l",
-						content: ["Standard"],
+						content: ["Standard - not selected"],
 					})}
 					<div
 						style=${styleMap({
@@ -344,7 +323,7 @@ const Variants = (args) =>
 					${Typography({
 						semantics: "detail",
 						size: "l",
-						content: ["Emphasized"],
+						content: ["Quiet - not selected"],
 					})}
 					<div
 						style=${styleMap({
@@ -355,15 +334,15 @@ const Variants = (args) =>
 					>
 						${States({
 							...args,
-							isEmphasized: true,
+							isQuiet: true,
 						})}
 					</div>
 				</div>
 				<div class="spectrum-Typography">
 					${Typography({
 						semantics: "detail",
 						size: "l",
-						content: ["Quiet"],
+						content: ["Standard and Quiet - Selected"],
 					})}
 					<div
 						style=${styleMap({
@@ -374,10 +353,33 @@ const Variants = (args) =>
 					>
 						${States({
 							...args,
-							isQuiet: true,
+							isSelected: true
 						})}
 					</div>
 				</div>
+				<!-- Static color variants don't have emphasized option -->
+				${when(!args.staticColor, () => html`
+					<div class="spectrum-Typography">
+						${Typography({
+							semantics: "detail",
+							size: "l",
+							content: ["Standard and Quiet - Emphasized Selected"],
+						})}
+						<div
+							style=${styleMap({
+								display: "flex",
+								flexDirection: "column",
+								gap: ".3rem",
+							})}
+						>
+							${States({
+								...args,
+								isSelected: true,
+								isEmphasized: true,
+							})}
+						</div>
+					</div>
+				`)}
 				<div class="spectrum-Typography">
 					${Typography({
 						semantics: "detail",

diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
@@ -37,66 +37,54 @@ export const Template = ({
 	testId,
 	role,
 	...globals
-}) => {
-	const { express } = globals;
-
-	try {
-		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	}
-	catch (e) {
-		console.warn(e);
-	}
-
-	return html`
-		<button
-			aria-label=${ifDefined(label)}
-			aria-haspopup=${hasPopup ? "true" : "false"}
-			aria-pressed=${isSelected ? "true" : "false"}
-			class=${classMap({
-				[rootClass]: true,
-				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof size !== "undefined",
-				[`${rootClass}--quiet`]: isQuiet,
-				[`${rootClass}--emphasized`]: isEmphasized,
-				[`${rootClass}--static${capitalize(lowerCase(staticColor))}`]:
-					typeof staticColor !== "undefined",
-				["is-disabled"]: isDisabled,
-				["is-selected"]: isSelected,
-				["is-hover"]: isHovered,
-				["is-focus-visible"]: isFocused,
-				["is-active"]: isActive,
-				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-			})}
-			id=${ifDefined(id)}
-			data-testid=${ifDefined(testId)}
-			role=${ifDefined(role)}
-			style=${ifDefined(styleMap(customStyles))}
-			?disabled=${isDisabled}
-			@click=${onclick}
-		>
-			${when(hasPopup, () =>
-				Icon({
-					...globals,
-					size,
-					iconName: "CornerTriangle",
-					setName: "ui",
-					customClasses: [`${rootClass}-hold`],
-				})
-			)}
-			${when(iconName, () =>
-				Icon({
-					...globals,
-					size,
-					iconName,
-					setName: iconSet,
-					customClasses: [`${rootClass}-icon`, ...customIconClasses],
-				})
-			)}
-			${when(
-				label && !hideLabel,
-				() => html`<span class="${rootClass}-label">${label}</span>`
-			)}
-		</button>
-	`;
-};
+}) => html`
+	<button
+		aria-label=${ifDefined(label)}
+		aria-haspopup=${hasPopup ? "true" : "false"}
+		aria-pressed=${isSelected ? "true" : "false"}
+		class=${classMap({
+			[rootClass]: true,
+			[`${rootClass}--size${size?.toUpperCase()}`]:
+				typeof size !== "undefined",
+			[`${rootClass}--quiet`]: isQuiet,
+			[`${rootClass}--emphasized`]: isEmphasized,
+			[`${rootClass}--static${capitalize(lowerCase(staticColor))}`]:
+				typeof staticColor !== "undefined",
+			["is-disabled"]: isDisabled,
+			["is-selected"]: isSelected,
+			["is-hover"]: isHovered,
+			["is-focus-visible"]: isFocused,
+			["is-active"]: isActive,
+			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+		})}
+		id=${ifDefined(id)}
+		data-testid=${ifDefined(testId)}
+		role=${ifDefined(role)}
+		style=${ifDefined(styleMap(customStyles))}
+		?disabled=${isDisabled}
+		@click=${onclick}
+	>
+		${when(hasPopup, () =>
+			Icon({
+				...globals,
+				size,
+				iconName: "CornerTriangle",
+				setName: "ui",
+				customClasses: [`${rootClass}-hold`],
+			})
+		)}
+		${when(iconName, () =>
+			Icon({
+				...globals,
+				size,
+				iconName,
+				setName: iconSet,
+				customClasses: [`${rootClass}-icon`, ...customIconClasses],
+			})
+		)}
+		${when(
+			label && !hideLabel,
+			() => html`<span class="${rootClass}-label">${label}</span>`
+		)}
+	</button>
+`;
diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css