feat(progress-circle): migrating s2 tokens, refactor markup to use SVG element

[aramos-adobe]

Description

S2 migration for progress circle

Changed from using border styles to stroke-* styles and attributes. The svg element allows for stroke-linecap to enable to the rounded path.

#3430 Infield progress circle will be sharing this. This component is used in button, picker, and combobox

Animation

@keyframes spectrum-dashoffset-animation:
This animation was created by React Spectrum and used to keep the same speed and bezier curve.

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
--spectrum-progress-circle-fill-border-color-over-background
--spectrum-progress-circle-track-border-style
--spectrum-progress-circle-track-border-style
--highcontrast-progress-circle-track-border-style
--mod-progress-circle-track-border-style
--spectrum-progress-circle-track-border-style

Validation steps

1. Open the storybook doc for the progress circle component:
   - [x] Choose static color options to see correct tokens applied
   - [x] Toggle indeterminate option see the animation
   - [x] Range slider to see the flow of progress track fill

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 4c4ddb8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/progresscircle	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

File metrics

Summary

Total size: 2.22 MB^*
Total change (Δ): 🟢 ⬇ 7.92 KB (-0.35%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
progresscircle	4.03 KB	🟢 ⬇ 6.47 KB

Details

progresscircle

Filename	Head	Compared to base
index.css	4.03 KB	🟢 ⬇ 6.47 KB (-61.60%)
metadata.json	1.80 KB	🟢 ⬇ 1.45 KB (-44.58%)

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[github-actions]

🚀 Deployed on https://pr-3380--spectrum-css.netlify.app

[marissahuysentruyt]

Woo- love the updated styles. I think I wrapped my head around the animation stuff, but if anything is confusing, let's pair! 🍐

A couple of other thoughts I wasn't sure where to put:

• Cassondra separated some of nested components in the s2-foundations-redux branch. For instance, progress bar and meter were nested together, but now they're totally separate (https://github.com/adobe/spectrum-css/tree/s2-foundations-redux/components/meter). Same thing with form being separated from field label. You may have already know, but is there a way in this branch we can prep for infield progress circle being separate from progress circle? Or maybe we leave our comment/note/Jira ticket for ourselves? Should these 2 components be nested like they are now, or should they be separated into different component directories?

• Let's just fix the typo in the file names. (infield-progresscirlce > progresscircle)

[marissahuysentruyt]

A lot of my first round of suggestions look to be addressed- thank you! I left some more questions and comments for you.

Like we sort of talked about during standup, it might be best to pull that last commit out for infield progress circle onto its own branch. We definitely don't want to lose any of that work, so I'd probably just make a new infield progress circle branch off of this branch first 🤷‍♀️ Then for this S2 regular progress circle branch, we could trim down the changes related to "old" progress circles becoming the infield progress circles. I have more comments/questions/suggestions for infield progress circle, but I didn't want to clutter this PR if we move that component. I'm up to help with this if anything I just tried to say is confusing!!!

With that in mind, maybe some of my comments (like for picker and combobox) would probably be moved over to that new branch.

I'm also curious if we should check with design about the progress circle that's within the textfield. It's got an isLoading state on main, and it looks like isLoading is still going to be around for S2 for textfield, so I think we may need to double check that the progress circle is in fact the "infield progress circle" in S2. At least that's my assumption. Here's Rise's blocked s2 textfield PR if you want to see.

Let's pair if you want help on any of this. I know I left a ton of questions again. 😬

[marissahuysentruyt]

Your rebase cleaned this up so nice! It's looking good, but I do have some questions for you:

Just wanted to be sure- the corner-radius-full token for the fill isn't used correct? Because we're using the stroke-linecap attribute? I saw it in the Figma file, but didn't see it used in a quick search of the CSS file. But I'm pretty sure that's why.

There's the changes in progress-bar.stories.js and tooltip.stories.js. I vote we revert those and I'll get a bug branch going to fix those pages.

The test files are here! Would you add the static black test case?

// progresscircle.test.js
...
{
			testHeading: "Static white",
			staticColor: "white",
		},
{
			testHeading: "Static black",
			staticColor: "black",
		},
...

[marissahuysentruyt]

I went through the CSS this morning and things are looking really good! I found we were missing the track-color token, but overall, I really love all the animation code we were able to remove! Nice work 😄

I did have a question about the animation (and this is a real nit-pick, so feel free to disregard if you are happy with the fill animation!). Is it "stopping" at the top of the progress circle just before the animation loops? I can't tell if that's my eyes playing tricks on me or if there's really a pause.

Screen.Recording.2025-01-09.at.9.15.35.AM.mov

Other than that, my final questions are really regarding high contrast mode.

[marissahuysentruyt]

This is so close! It's looking really good, and I got to resolve a TON of comments 🎉

One thing I'm still seeing is that we do not have the tests for staticBlack progress circles.

// progresscircle.test.js
...
{
			testHeading: "Static white",
			staticColor: "white",
		},
{
			testHeading: "Static black",
			staticColor: "black",
		},
...

I know you've talked with design about the WHCM borders, so thanks for reaching out to them. I can see the borders on the default/determinate progress circles. I think right now they match the direction you got from design.

Just to clarify- you said that for indeterminate progress circles, the borders AND track don't need to be there? I can see the indeterminate track in the static white, static black, and default options.

I checked out the React progress circle page on AssistivLabs and I'm now wondering if we should try to align more with them. I believe they set the track color the background color for WHCM (in the forced-colors: active query: --spectrum-loader-circle-medium-track-color: Background) Maybe we need to implement something like --spectrum-progress-circle-track-border-color: Background in the forced-colors query, or --highcontrast-progress-circle-track-border-color: Background? I think that would make the static white & static black stories behave more as I expected.

[marissahuysentruyt]

If I hadn't said it before, thanks for the code documentation comment! Very helpful 👍

[marissahuysentruyt]

Let's get that second approval and get this thing merrggedd! It looks awesome. Thanks for wading through all of my comments and ramblings!