feat(progressbar): s2 migration (#2659)

Author: Melissa Thompson

.changeset/proud-jokes-rule.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/progressbar": major
+---
+
+feat(progressbar): S2 migration
+
+Progress bar now uses Spectrum 2 tokens and specifications. This migration includes updated colors, font sizes, and spacing. No mods were harmed in the migration of this component (all `--mod` properties remain the same).

components/progressbar/index.css

@@ -1,32 +1,50 @@
 {
   "sourceFile": "index.css",
   "selectors": [
+    ".spectrum-Meter",
+    ".spectrum-Meter--sizeL",
+    ".spectrum-Meter--sizeS",
+    ".spectrum-Meter.is-negative .spectrum-ProgressBar-fill",
+    ".spectrum-Meter.is-notice .spectrum-ProgressBar-fill",
+    ".spectrum-Meter.is-positive .spectrum-ProgressBar-fill",
+    ".spectrum-Meter.spectrum-Meter--sizeL",
+    ".spectrum-Meter.spectrum-Meter--sizeS",
     ".spectrum-ProgressBar",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-fill",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-label",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)",
+    ".spectrum-ProgressBar .spectrum-ProgressBar-track",
     ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
+    ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)",
+    ".spectrum-ProgressBar--sideLabel",
     ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label",
     ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage",
     ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track",
     ".spectrum-ProgressBar--sizeL",
     ".spectrum-ProgressBar--sizeS",
     ".spectrum-ProgressBar--sizeXL",
-    ".spectrum-ProgressBar-fill",
-    ".spectrum-ProgressBar-label",
-    ".spectrum-ProgressBar-percentage",
+    ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill",
+    ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label",
+    ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage",
+    ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track",
     ".spectrum-ProgressBar-track",
-    ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel",
-    ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite",
-    ".spectrum-ProgressBar:dir(rtl)",
-    ".spectrum-ProgressBar:lang(ja)",
-    ".spectrum-ProgressBar:lang(ko)",
-    ".spectrum-ProgressBar:lang(zh)",
     "0%",
-    "[dir=\"rtl\"] .spectrum-ProgressBar",
+    "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill",
     "to"
   ],
   "modifiers": [
     "--mod-progressbar-animation-duration-indeterminate",
     "--mod-progressbar-animation-ease-in-out-indeterminate",
     "--mod-progressbar-fill-color",
+    "--mod-progressbar-fill-color-negative",
+    "--mod-progressbar-fill-color-notice",
+    "--mod-progressbar-fill-color-positive",
     "--mod-progressbar-fill-color-white",
     "--mod-progressbar-fill-size-indeterminate",
     "--mod-progressbar-font-size",
@@ -41,7 +59,8 @@
     "--mod-progressbar-spacing-top-to-text",
     "--mod-progressbar-text-color",
     "--mod-progressbar-thickness",
-    "--mod-progressbar-track-color"
+    "--mod-progressbar-track-color",
+    "--mod-spacing-progressbar-label-to-text"
   ],
   "component": [
     "--spectrum-progress-bar-maximum-width",
@@ -53,7 +72,6 @@
     "--spectrum-progressbar-animation-duration-indeterminate",
     "--spectrum-progressbar-animation-ease-in-out-indeterminate",
     "--spectrum-progressbar-corner-radius",
-    "--spectrum-progressbar-dir-indeterminate-multiplier",
     "--spectrum-progressbar-fill-color",
     "--spectrum-progressbar-fill-color-negative",
     "--spectrum-progressbar-fill-color-notice",
@@ -70,35 +88,29 @@
     "--spectrum-progressbar-size-2500",
     "--spectrum-progressbar-size-2800",
     "--spectrum-progressbar-size-default",
-    "--spectrum-progressbar-sized-font-size",
-    "--spectrum-progressbar-sized-size-default",
-    "--spectrum-progressbar-sized-spacing-top-to-text",
-    "--spectrum-progressbar-sized-thickness",
     "--spectrum-progressbar-spacing-label-to-progressbar",
     "--spectrum-progressbar-spacing-label-to-text",
     "--spectrum-progressbar-spacing-top-to-text",
-    "--spectrum-progressbar-static-white-track-color",
     "--spectrum-progressbar-text-color",
     "--spectrum-progressbar-thickness",
     "--spectrum-progressbar-track-color",
-    "--spectrum-progressbar-track-color-default",
     "--spectrum-progressbar-track-color-white"
   ],
   "global": [
-    "--spectrum-accent-color-900",
+    "--spectrum-accent-content-color-default",
     "--spectrum-animation-duration-2000",
     "--spectrum-animation-ease-in-out",
     "--spectrum-cjk-line-height-100",
-    "--spectrum-component-top-to-text",
     "--spectrum-component-top-to-text-100",
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-full",
     "--spectrum-font-size-100",
     "--spectrum-font-size-200",
+    "--spectrum-font-size-300",
     "--spectrum-font-size-75",
-    "--spectrum-gray-200",
+    "--spectrum-gray-300",
     "--spectrum-line-height-100",
     "--spectrum-meter-default-width",
     "--spectrum-meter-inline-size",
@@ -110,20 +122,25 @@
     "--spectrum-meter-thickness-large",
     "--spectrum-meter-thickness-s",
     "--spectrum-meter-thickness-small",
-    "--spectrum-meter-top-to-text",
     "--spectrum-negative-visual-color",
-    "--spectrum-neutral-content-color-default",
+    "--spectrum-neutral-subdued-content-color-default",
     "--spectrum-notice-visual-color",
     "--spectrum-positive-visual-color",
     "--spectrum-spacing-200",
     "--spectrum-spacing-75",
     "--spectrum-transparent-white-300",
-    "--spectrum-white"
+    "--spectrum-transparent-white-700",
+    "--spectrum-transparent-white-900"
   ],
   "system-theme": [],
-  "passthroughs": ["--mod-fieldlabel-font-size"],
+  "passthroughs": [
+    "--mod-meter-inline-size",
+    "--mod-meter-max-width",
+    "--mod-meter-min-width"
+  ],
   "high-contrast": [
     "--highcontrast-progressbar-fill-color",
+    "--highcontrast-progressbar-fill-color-white",
     "--highcontrast-progressbar-track-color"
   ]
 }

components/progressbar/metadata/metadata.json

@@ -3,6 +3,9 @@
 | `--mod-progressbar-animation-duration-indeterminate`    |
 | `--mod-progressbar-animation-ease-in-out-indeterminate` |
 | `--mod-progressbar-fill-color`                          |
+| `--mod-progressbar-fill-color-negative`                 |
+| `--mod-progressbar-fill-color-notice`                   |
+| `--mod-progressbar-fill-color-positive`                 |
 | `--mod-progressbar-fill-color-white`                    |
 | `--mod-progressbar-fill-size-indeterminate`             |
 | `--mod-progressbar-font-size`                           |
@@ -18,3 +21,4 @@
 | `--mod-progressbar-text-color`                          |
 | `--mod-progressbar-thickness`                           |
 | `--mod-progressbar-track-color`                         |
+| `--mod-spacing-progressbar-label-to-text`               |

components/progressbar/metadata/mods.md

@@ -32,7 +32,7 @@
 	],
 	"peerDependencies": {
 		"@spectrum-css/fieldlabel": ">=8",
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
+		"@spectrum-css/tokens": ">=14.0.0-next.6"
 	},
 	"peerDependenciesMeta": {
 		"@spectrum-css/fieldlabel": {

components/progressbar/package.json

@@ -21,12 +21,12 @@ export default {
 		customWidth: {
 			name: "Custom width",
 			defaultValue: 192,
-			description: "Adjust the width of the component between 48px and 768px. 192px is the default width on desktop, while 240px is the default on mobile.",
+			description: "A number to adjust the width of the component. Spectrum 2 specifications limit the component width to be between 48px and 768px.",
 			type: { name: "number" },
 			table: {
 				type: { summary: "number" },
 				category: "Component",
-				defaultValue: { summary: 192 },
+				defaultValue: { summary: 200 },
 			},
 			control: { type: "range", min: 48, max: 768,},
 		},
@@ -87,7 +87,7 @@ export default {
 		label: "Loading",
 		labelPosition: "top",
 		value: 0,
-		customWidth: 192,
+		customWidth: 200,
 		isIndeterminate: false,
 		showValueLabel: true,
 	},
@@ -99,6 +99,31 @@ export default {
 		packageJson,
 		metadata,
 	},
+	decorators: [
+		(Story, context) => 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: "flex",
+					flexDirection: "column",
+					alignItems: "flex-start",
+					gap: "1rem",
+					"--mod-detail-margin-end": ".3rem",
+				})}
+			>
+				${Story(context)}
+			</div>
+		`,
+	],
 };
 
 /**

components/progressbar/stories/progressbar.stories.js

@@ -12,7 +12,7 @@ export const Template = ({
 	rootClass = "spectrum-ProgressBar",
 	customClasses = [],
 	labelPosition,
-	staticColor,
+	isStaticWhite,
 	customWidth,
 	isIndeterminate = false,
 	label,

components/progressbar/stories/template.js

@@ -3906,7 +3906,7 @@ __metadata:
     "@spectrum-css/tokens": "workspace:^"
   peerDependencies:
     "@spectrum-css/fieldlabel": ">=8"
-    "@spectrum-css/tokens": ">=14.0.0-next.3"
+    "@spectrum-css/tokens": ">=14.0.0-next.6"
   peerDependenciesMeta:
     "@spectrum-css/fieldlabel":
       optional: true