feat(progress-circle): migrate progress circle component to second-generation architecture #5743

castastrophe · 2025-09-19T15:29:59Z

Description

Updates the 2nd-gen Progress Circle component to the latest CSS styles from Spectrum CSS spectrum-two branch. This updates Progress Circle for the barebones milestone components with more complete S2 functionality including determinate/indeterminate states, sizing variants, and static color options.

Note: there are known rendering issues with the SVG being cut off at the bottom but it has been approved to move forward and resolve that issue at a later time.

Related issue(s)

fixes SWC-1270

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

Verify Progress Circle component functionality
1. Go to Storybook Progress Circle stories
2. Test determinate progress values (0-100%)
3. Expect smooth visual progress indication
Validate indeterminate state
1. Toggle indeterminate property in Storybook
2. Observe animated loading indicator
3. Expect continuous rotation animation
Test sizing variants
1. Review small (s), medium (m), and large (l) sizes
2. Compare visual consistency across sizes
3. Expect proportional scaling of circle and stroke width
Verify static color variants
1. Test static-color="white" on dark backgrounds
2. Test static-color="black" on light backgrounds
3. Expect appropriate contrast and visibility
Validate accessibility features
1. Check aria-label, role="progressbar" attributes
2. Test screen reader announcements
3. Expect proper accessibility tree structure

changeset-bot · 2025-09-19T15:30:04Z

⚠️ No Changeset found

Latest commit: 6360869

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

github-actions · 2025-09-19T15:41:48Z

📚 Branch Preview

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-5743

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

github-actions · 2025-09-19T15:44:51Z

Tachometer results

Currently, no packages are changed by this PR...

castastrophe · 2025-09-19T15:47:27Z

second-gen/packages/swc/components/progress-circle/ProgressCircle.ts

+        const radius = `calc(50% - ${strokeWidth / 2}px)`;
+
        return html`
-            <slot @slotchange=${this.handleSlotchange}></slot>


For the sake of simplifying this for S2, I've regressed some of this functionality by removing the slot and leveraging our SVG approach. Would love to have a larger conversation around this for S2 but this seemed sufficient for the base requirement of getting the S2 styles and rendering into the component.

Yeah, I don't really see a good reason for us to continue supporting both the slot-based and attribute-based interfaces for providing accessible label text.

That said, I would like to decouple that decision from the initial Barebones component migration, to keep Barebones scoped as minimally as possible.

On the branch where I've been exploring the nuances of our layering / inheritance scheme, I experimentally re-added the slot to the new, SVG-based render() implementation, and it seemed to work fine; just needed to set display: none; on the slot to echo what's done in 1st-gen.

No need to reverse the change on this branch, but I will include the slot re-addition in my follow-up PR, along with a @todo to make a decision on deprecation.

castastrophe · 2025-09-19T15:48:33Z

second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts

    render: () => html`
        <div
-            style="background-color: rgba(0,0,0,0.4); padding: 24px; display: flex; gap: 24px; align-items: center;"
+            style="background: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); padding: 24px; display: flex; gap: 24px; align-items: center;"


Added our pretty gradients here for static white/black which match how design demos these styles. They're meant to be on visually busy backgrounds like gradients or images so that drives home that guidance in Storybook as well.

castastrophe · 2025-09-19T15:48:58Z

second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts

    `,
 };
-
-export const WithSlottedContent: Story = {


I removed the slot for the purposes of my S2 update but we can always bring this back.

Per my earlier comment, I don't want to remove the slot just yet, but I'm fine with removing the story.

Per the minimalistic Barebones requirements, the state of each component's stories is not a thing we're worrying about for Barebones. We'll circle back after the Barebones milestone to do a holistic look at the stories for all 5 initial components and try to establish some best practices and patterns at that point.

castastrophe · 2025-09-19T15:49:15Z

second-gen/packages/swc/components/progress-circle/ProgressCircle.ts


 import progressCircleStyles from './progress-circle.css';

+function capitalize(str?: string): string {


I kind of liked this utility living separately but let me know how you want to handle this in the SWC infrastructure.

For now, what you've done here looks great. Again, we can circle back after Barebones to discuss how we want to handle utilities like this more generally in 2nd-gen.

second-gen/packages/swc/components/progress-circle/ProgressCircle.ts

graynorton

I've left a bunch of individual comments that I somehow managed not to include as part of this review 😛, but this looks good to me, and I'd like to proceed with merging into Barebones.

As noted in my individual comments, we can continue to iterate in place.

castastrophe force-pushed the castastrophe/feat-progress-circle-s2-migration-css-1270 branch from e670fbe to 5b68b5d Compare September 19, 2025 15:39

castastrophe force-pushed the castastrophe/feat-progress-circle-s2-migration-css-1270 branch from 5b68b5d to f9dba02 Compare September 19, 2025 15:44

castastrophe force-pushed the castastrophe/feat-progress-circle-s2-migration-css-1270 branch from f9dba02 to 059fbd3 Compare September 19, 2025 15:44

castastrophe self-assigned this Sep 19, 2025

castastrophe added Component: Progress Circle Spectrum CSS Needs discussion Proposed UX or spec changes Discovery S2 Spectrum 2 Issues related to Spectrum 2 2nd gen These issues or PRs map to our 2nd generation work to modernizing infrastructure. labels Sep 19, 2025

castastrophe force-pushed the castastrophe/feat-progress-circle-s2-migration-css-1270 branch from 059fbd3 to 1794e2c Compare September 30, 2025 14:15

castastrophe added 2 commits October 2, 2025 12:58

feat(badge): s2 styling and render brought in

285a525

fix(badge,progress-circle): remove modifiers

b3ca31d

castastrophe force-pushed the castastrophe/feat-progress-circle-s2-migration-css-1270 branch from 1794e2c to 1231083 Compare October 2, 2025 17:00

castastrophe commented Oct 2, 2025

View reviewed changes

chore: adding docs notes and todos to 2nd gen

6360869

castastrophe force-pushed the castastrophe/feat-progress-circle-s2-migration-css-1270 branch from 1231083 to 6360869 Compare October 2, 2025 17:44

castastrophe added ready-for-review and removed Needs discussion Proposed UX or spec changes Discovery labels Oct 2, 2025

castastrophe changed the title ~~feat(progress-circle): s2 styling and render~~ feat(progress-circle): migrate progress circle component to second-generation architecture Oct 2, 2025

castastrophe marked this pull request as ready for review October 2, 2025 17:52

castastrophe requested a review from a team as a code owner October 2, 2025 17:52

graynorton approved these changes Oct 2, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(progress-circle): migrate progress circle component to second-generation architecture #5743

feat(progress-circle): migrate progress circle component to second-generation architecture #5743

castastrophe commented Sep 19, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Sep 19, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 19, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 19, 2025

Uh oh!

castastrophe Sep 19, 2025

Uh oh!

graynorton Oct 2, 2025

Uh oh!

castastrophe Sep 19, 2025

Uh oh!

castastrophe Sep 19, 2025

Uh oh!

graynorton Oct 2, 2025

Uh oh!

castastrophe Sep 19, 2025

Uh oh!

graynorton Oct 2, 2025

Uh oh!

Uh oh!

graynorton left a comment

Uh oh!

Uh oh!


		import progressCircleStyles from './progress-circle.css';

		function capitalize(str?: string): string {

feat(progress-circle): migrate progress circle component to second-generation architecture #5743

Are you sure you want to change the base?

feat(progress-circle): migrate progress circle component to second-generation architecture #5743

Conversation

castastrophe commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issue(s)

Author's checklist

Reviewer's checklist

Manual review test cases

Uh oh!

changeset-bot bot commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview

🔍 Visual Regression Test Results

Uh oh!

github-actions bot commented Sep 19, 2025

Tachometer results

Uh oh!

castastrophe Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

graynorton Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

castastrophe Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

castastrophe Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

graynorton Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

castastrophe Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

graynorton Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

graynorton left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

castastrophe commented Sep 19, 2025 •

edited

Loading

changeset-bot bot commented Sep 19, 2025 •

edited

Loading

github-actions bot commented Sep 19, 2025 •

edited

Loading