feat(progresscircle): update story and hcm

Author: aramos-adobe

.changeset/itchy-kids-travel.md

@@ -4,7 +4,7 @@
 
 ## Progress circle S2 migration
 
-This is the S2 migration of the progress circle. It has changed to an svg element to allow CSS styles such as `stroke-linecap`. This was necessary to match the design.
+This is the S2 migration of the progress circle. The original markup has changed to an svg and circle element to allow CSS styles such as `stroke-linecap`. This was necessary to match the design. The `--small/--medium/--large` sizing classes have been deprecated in favor of t-shirt classes `--sizeS/--sizeM/--sizeL`
 
 ### Animation
 
@@ -13,12 +13,6 @@ This animation was created by React Spectrum and used to keep the same speed and
 
 ### Added tokens
 
-`--spectrum-in-field-progress-circle-edge-to-fill`
-`--spectrum-in-field-progress-circle-size-75`
-`--spectrum-in-field-progress-circle-size-100`
-`--spectrum-in-field-progress-circle-size-200`
-`--spectrum-in-field-progress-circle-size-300`
-
 ### Removed styles & mods
 
 `--spectrum-progress-circle-track-border-color-over-background`

components/progresscircle/index.css

@@ -1,5 +1,5 @@
 /*!
-Copyright 2023 Adobe. All rights reserved.
+Copyright 2024 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -14,7 +14,7 @@ governing permissions and limitations under the License.
 
 .spectrum-ProgressCircle {
 	/* circle unfilled border color */
-	--spectrum-progress-circle-track-border-color: var(--spectrum-gray-200);
+	--spectrum-progress-circle-track-border-color: var(--spectrum-track-color);
 
 	--spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400);
 	--spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000);
@@ -42,6 +42,7 @@ governing permissions and limitations under the License.
 	.spectrum-ProgressCircle {
 		/* fill is bright color */
 		--highcontrast-progress-circle-fill-border-color: Highlight;
+		--highcontrast-progressbar-track-color: Canvas;
 	}
 }
 
@@ -76,7 +77,7 @@ governing permissions and limitations under the License.
 
 .spectrum-ProgressCircle-track {
 	stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
-	stroke: var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color));
+	stroke: var(--highcontrast-progressbar-track-color, var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color)));
 }
 
 /* circle progress filled */
@@ -92,8 +93,8 @@ governing permissions and limitations under the License.
 	.spectrum-ProgressCircle-fill {
 		will-change: transform;
 		animation:
-			1s infinite spectrum-fills-rotate 0.2s,
-			1s infinite spectrum-dashoffset-animation 0s;
+			1s cubic-bezier(.6, .1, .3, .9) infinite spectrum-fills-rotate,
+			1s cubic-bezier(.25, .1, .25, 1.3) infinite spectrum-dashoffset-animation;
 		transform-origin: center;
 	}
 }

components/progresscircle/stories/progresscircle.stories.js

@@ -1,7 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isIndeterminate, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
+import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types";
+import metadata from "../metadata/metadata.json";
 import packageJson from "../package.json";
 import { ProgressCircleGroup } from "./progresscircle.test.js";
 import { Template } from "./template.js";
@@ -15,17 +15,7 @@ export default {
 	argTypes: {
 		size: size(["s", "m", "l"]),
 		isIndeterminate,
-		staticColor: {
-			name: "Static color",
-			description: "Variants that can be used when the progress circle needs to be placed on top of a colored background or a visual.",
-			type: { name: "string" },
-			table: {
-				type: { summary: "string" },
-				category: "Advanced",
-			},
-			options: ["white", "black"],
-			control: "select",
-		},
+		staticColor,
 		value: {
 			control: {
 				type: "range",
@@ -48,7 +38,6 @@ export default {
 		},
 		packageJson,
 		metadata,
-		layout: "centered"
 	},
 };
 
@@ -119,7 +108,7 @@ StaticWhiteIndeterminate.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
-export const StaticBlackDeterminate = Template.bind({});
+export const StaticBlackDeterminate = Sizing.bind({});
 StaticBlackDeterminate.tags = ["!dev"];
 StaticBlackDeterminate.storyName = "Static black, default";
 StaticBlackDeterminate.args = {
@@ -130,7 +119,7 @@ StaticBlackDeterminate.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
-export const StaticBlackIndeterminate = Template.bind({});
+export const StaticBlackIndeterminate = Sizing.bind({});
 StaticBlackIndeterminate.tags = ["!dev"];
 StaticBlackIndeterminate.storyName = "Static black, indeterminate";
 StaticBlackIndeterminate.args = {

components/progresscircle/stories/template.js

@@ -59,13 +59,3 @@ export const Template = ({
 		</div>
 	`;
 };
-
-export const ProgressCircleGroup = (args) => html`
-	${window.isChromatic() ? html`
-		${Template(args)}
-		${Template({
-			...args,
-			isIndeterminate: true,
-		})}
-	` : Template(args)}
-`;