feat(closebutton)!: migrate to S2 (#2564)

BREAKING CHANGE: migrates Close Button to Spectrum 2 Additionally: * test: increase chromatic coverage * fix(closebutton): pass staticColor as arg for SB display * chore(closebutton): remove themes dir * docs(closebutton): adds s2 migration notes * chore(closebutton): specify s2 tokens release for dependency --------- Co-authored-by: Patrick Fulton <[email protected]>
adobe · Apr 18, 2024 · 105e8c4 · 105e8c4
1 parent 566ef4e
commit 105e8c4
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 28 deletions.
diff --git a/components/closebutton/metadata/closebutton.yml b/components/closebutton/metadata/closebutton.yml
@@ -8,7 +8,7 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/closebutton/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### x/x/2024 - Version 5.0.0
+      ### Version 5.0.0
       #### Spectrum 2 release
       Close button now uses Spectrum 2 tokens and specifications. A few notable changes and additions:
         * Removes all static-specific `--mod` custom properties since they are no longer needed. The existing background-color mods can be used instead:
@@ -32,11 +32,11 @@ sections:
         * The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
         * The regular and large "Icon size" variants have been removed.
 
-      ### 8/16/2023 - Version 4.0.0
+      ### Version 4.0.0
       #### Remove focus-ring class
       We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
 
-      ### 8/3/2022 - Version 2.0.0
+      ### Version 2.0.0
       #### Sizing and Spectrum tokens migration
       Close button was migrated to use Spectrum tokens. Close button now supports different sizes. By default, the following icons should be used for each size:
 

diff --git a/components/closebutton/package.json b/components/closebutton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/closebutton",
-  "version": "5.0.0-next.1",
+  "version": "5.0.0-next.2",
   "description": "The Spectrum CSS close button component",
   "license": "Apache-2.0",
   "author": "Adobe",
@@ -19,7 +19,7 @@
     "@spectrum-css/tokens": "^14.0.0-next.3"
   },
   "devDependencies": {
-    "@spectrum-css/commons": "^9.1.4-next.0"
+    "@spectrum-css/commons": "^9.1.4-next.1"
   },
   "publishConfig": {
     "access": "public"

diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js
@@ -55,29 +55,25 @@ export default {
 	},
 };
 
-const CloseButton = ({
-	staticColor,
-	...args
-}) => {
+const CloseButton = (args) => {
 	return html`
 		<div
 			style=${ifDefined(styleMap({
 				padding: "1rem",
-				backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
 			}))}
 		>
-			${Template({...args, staticColor})}
+			${Template(args)}
 			${when(window.isChromatic(), () =>
 				html`
 					${Template({
-							...args,
-							isDisabled: true,
-						})}
+						...args,
+						isDisabled: true,
+					})}
 					${html`
 						<div
 							style=${ifDefined(styleMap({
 								padding: "1rem",
-								backgroundColor: "rgb(15, 121, 125)"
+								background: "var(--spectrum-examples-gradient-static-white)"
 							}))}
 						>
 							${Template({
@@ -95,7 +91,7 @@ const CloseButton = ({
 						<div
 							style=${ifDefined(styleMap({
 								padding: "1rem",
-								backgroundColor: "rgb(181, 209, 211)"
+								background: "var(--spectrum-examples-gradient-static-black)"
 							}))}
 						>
 							${Template({
@@ -113,7 +109,7 @@ const CloseButton = ({
 			)}
 		</div>
 	`;
-}
+};
 
 export const Default = CloseButton.bind({});
 Default.args = {};
diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js
@@ -21,17 +21,17 @@ export const Template = ({
 }) => {
 	let iconName = "Cross300";
 	switch (size) {
-		case "s":
-			iconName = "Cross200";
-			break;
-		case "l":
-			iconName = "Cross400";
-			break;
-		case "xl":
-			iconName = "Cross500";
-			break;
-		default:
-			iconName = "Cross300";
+	case "s":
+		iconName = "Cross200";
+		break;
+	case "l":
+		iconName = "Cross400";
+		break;
+	case "xl":
+		iconName = "Cross500";
+		break;
+	default:
+		iconName = "Cross300";
 	}
 
 	return html`