docs(progresscircle): making some changes

Author: aramos-adobe

.changeset/itchy-kids-travel.md

@@ -6,6 +6,8 @@
 
 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`
 
+The `.spectrum-ProgressCircle--small`, `.spectrum-ProgressCircle--medium`, and `.spectrum-ProgressCircle--large` sizing classes were deprecated and removed from the CSS in favor of the t-shirt sizes.
+
 ### Animation
 
 `@keyframes spectrum-dashoffset-animation`:

components/progresscircle/index.css

@@ -96,7 +96,7 @@ governing permissions and limitations under the License.
 	stroke: var(--highcontrast-progressbar-track-color, var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color)));
 }
 
-/* circle progress filled */
+/* circle: progress filled */
 .spectrum-ProgressCircle-fill {
 	stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
 	stroke: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color)));
@@ -114,3 +114,14 @@ governing permissions and limitations under the License.
 		transform-origin: center;
 	}
 }
+
+/* windows high contrast mode */
+@media (forced-colors: active) {
+	.spectrum-ProgressCircle {
+		/* fill is bright color */
+		--highcontrast-progress-circle-fill-border-color: Highlight;
+
+		/* fill over background is bright color */
+		--highcontrast-progress-circle-fill-border-color-over-background: Highlight;
+	}
+}

components/progresscircle/stories/template.js

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