feat(infield-progress-cirlce): new component, sharing tokens from progress circle

[aramos-adobe]

Description

The infield progresscirlce is a subcomponent of the progress circle which is used in button, combobox, textfield and picker template files. It's smaller in block size and has its own t-shirt sizing.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

1. Open the storybook for the infield progress circle:
   - [x] Toggle Intedeterminate mode
   - [x] Exists in combobox, button, picker components isLoading states

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: 79bfc0c

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/infieldprogresscircle	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

[marissahuysentruyt]

I know I left a barrage of comments! This is moving along nicely, most of comments are just clean up after the rebase.

Now that spectrum-two is up to date, we have all of our test files, so we'll need a brand new infieldprogresscircle.test.js file and tests written 🥳 We should also update the documentation page with the new stories and docs.

[marissahuysentruyt]

I think the hope for spectrum-two is that there are no more themes! Looks like the rest of the components have had their express.css and spectrum.css files deleted.

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 2.61 MB^*
Total change (Δ): 🔴 ⬆ 2.28 KB (0.09%)

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

Package	Size	Δ
infieldprogresscircle	1.46 KB	🎉 new

Details

infieldprogresscircle

Filename	Head	Compared to base
index.css	1.46 KB	🔴 ⬆ 1.46 KB (Infinity%)
metadata.json	0.84 KB	🔴 ⬆ 0.84 KB (Infinity%)

* 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.

[marissahuysentruyt]

This is getting close- thanks for splitting this off from the other progress circle migration!

My main set of concerns I think is just related to this not being an already-published NPM package. So the ComponentDetails cards don't render at the top of this page since we can't fetch the data from NPM. There's also no metadata.json in the dist output for this component. I'm not sure where to start with that unfortunately (it might be a @castastrophe question)

If I could be really picky, I'd like to request a change to the regular progress circle controls. I noticed that the value control in progresscircle.stories.js doesn't have maybe all of the usual settings, like name, description, etc. Could we update that so it matches the other controls better? This is the same control in progress bar:

value: {
	name: "Percent filled",
	type: { name: "number" },
	table: {
		type: { summary: "number" },
		category: "Content",
	},
	control: { type: "range", min: 0, max: 100,},
	if: { arg: "isIndeterminate", truthy: false },
},

It's a little more descriptive for users, categorizesvalue into the "Content" set of controls, and adds that conditional, so it won't even show for a default story if you wanted to get real fancy.

[marissahuysentruyt]

What's the reason for removing the testId: "progress-circle" line? Do we no longer need it?

[marissahuysentruyt]

Excellent work on this! I found a small wording suggestion and then one typo, but overall this is looking really great!

I think there's only one more place we have to update from "progress circle" to infield progress circle.

spectrum-css/components/combobox/stories/template.js

Line 66 in 67d6161

customProgressCircleClasses: ["spectrum-Combobox-progress-circle"],

I only noticed it because the changeset mentioned combobox, but I thought we didn't make any changes to combobox! I think in the combobox template.js file, we should change the customProgressCircleClasses to the customInfieldProgressCircle classes so it gets passed properly to textfield.

[marissahuysentruyt]

Just a typo with "circle"

Suggested change

	`--mod-progress-cirlce-stroke-width`
	`--mod-progress-circle-stroke-width`

[aramos-adobe]

Man I cannot spell circle at all 😅

[marissahuysentruyt]

Nice work on this! It really is looking fabulous 🤩 I have just a few small clean up things I think we could do before I'm good to approve!

1. I think we should remove the mods section of the changeset completely. They're not infield progress circle mods (we're using the regular progress circle mods as passthroughs for this component instead), so I'm not sure they need any specific attention drawn to them in the changeset. Feel free to get a second opinion on that though if you feel differently.

2. I would drop the 56c6806 commit that's listed in the commit history. That work looks like it's already in the spectrum-two branch but under a different SHA, so I wouldn't want to introduce duplicate work or commits or anything. (git rebase -i spectrum-two should do it)

I think when this branch was merged (as opposed to being rebased) with spectrum-two, it got the older commit SHA. But then when spectrum-two was rebased and pushed up, that's when things got a little off. I almost always (possibly 100% of the time) do rebasing now instead of merging

[marissahuysentruyt]

Thank you so much for all of your hard work on this! It looks AMAZING!

[rise-erpelding]

The component looks great! I have only a few changes to request here but they're mostly in the package.json, it looks like components' package.jsons might have changed in the recent rebase so we'd just want to align more closely with those changes.

[rise-erpelding]