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

aramos-adobe · 2024-12-05T19:12:26Z

Description

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

Mods

--mod-progress-cirlce-stroke-width

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

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

Regression testing

Validate:

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

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

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 · 2024-12-05T19:12:31Z

🦋 Changeset detected

Latest commit: 2730b96

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.

components/infieldprogresscircle/metadata/infieldprogresscircle.yml

marissahuysentruyt · 2025-01-16T21:07:52Z

components/infieldprogresscircle/stories/infieldprogresscircle.stories.js

+		...ProgressCircle.args,
+	},
+	parameters: {
+		...ProgressCircle.parameters


What do you think about adding the tokens design file?

parameters: { ...ProgressCircle.parameters, design: { type: "figma", url: "https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=14970-6050", } }

That way, the design add-on tab will have the in-field progress circle designs that are maybe more relevant. Is that more valuable than just the regular progress circle desktop designs...I'm not sure. I think most of the other components in s2-foundations-redux are linked to the desktop design files (not the tokens design files), but I wanted to call it out just in case. 🤷‍♀️

.changeset/flat-snails-admire.md

components/infieldprogresscircle/index.css

marissahuysentruyt · 2025-01-16T21:13:22Z

components/infieldprogresscircle/themes/express.css

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.

components/infieldprogresscircle/stories/infieldprogresscircle.stories.js

components/infieldprogresscircle/package.json

components/infieldprogresscircle/stories/infieldprogresscircle.stories.js

components/infieldprogresscircle/stories/template.js

github-actions · 2025-01-24T20:20:13Z

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

github-actions · 2025-01-24T20:22:50Z

File metrics

Summary

Total size: 2.23 MB^*
Total change (Δ): 🔴 ⬆ 2.28 KB (0.10%)

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 · 2025-01-28T21:35:34Z

components/button/stories/template.js

-			)
+			InfieldProgressCircle({
+				size: size,
+				staticColor,


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

marissahuysentruyt · 2025-01-28T21:45:09Z

components/infieldprogresscircle/themes/express.css

We can delete both the express.css and spectrum.css theme files for S2 components! 🥳

marissahuysentruyt · 2025-01-28T21:49:56Z

components/infieldprogresscircle/package.json

+  "spectrum": [
+    {
+      "guidelines": "https://spectrum.adobe.com/page/progress-circle",
+      "rootClass": "spectrum-InfieldProgresscircle",


Oh excellent- thanks for adding this spectrum data! Looks like we just need to capitalize the first c in "Circle" to match the CSS and root class declarations in the other files.

marissahuysentruyt · 2025-01-28T22:08:40Z

components/infieldprogresscircle/stories/infieldprogresscircle.stories.js

+import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { size } from "@spectrum-css/preview/types";
+import { default as ProgressCircle } from "@spectrum-css/progresscircle/stories/progresscircle.stories.js";
+import packageJson from "../package.json";


Oh! We need the metadata.json stuff.

Suggested change

import packageJson from "../package.json";

import metadata from "../dist/metadata.json";

import packageJson from "../package.json";

Something might be missing somewhere. It doesn't look like infield progress circle is correctly building the metadata.json in its dist file.

marissahuysentruyt · 2025-01-28T22:12:14Z

components/infieldprogresscircle/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@spectrum-css/infieldprogresscircle",
+  "version": "0.0.0",


Maybe get a second opinion, but should this version number be 1.0.0? Or does that happen when changesets creates a release for us to merge?

marissahuysentruyt · 2025-01-28T22:36:54Z

components/infieldprogresscircle/index.css

+*/
+
+.spectrum-InfieldProgressCircle {
+	--mod-progress-circle-thickness: var(--mod-progress-cirlce-stroke-width, 2px);


This 2px- I see in Figma that there's a token progress-circle-thickness-small. Should we be using that instead of the hardcoded 2px?

Also, do we want to introduce a mod for this? Are we creating a mod for a mod? 🙃 I don't know the answer to that question, but is this infield progress circle supposed to just overwrite any of the progress circle mods, including --mod-progress-circle-stroke-width? Should this line just be --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small)?

And if not- I caught another misspelling of circle in that --mod-progress-circle-stroke-width. Those pesky L's and C's 😆

marissahuysentruyt · 2025-01-28T22:53:51Z

components/infieldprogresscircle/stories/infieldprogresscircle.stories.js

+// ********* DOCS ONLY ********* //
+
+export const Sizing = (args, context) => Sizes({
+	Template: Template,


We can just write Template, here, as opposed to Template: Template if you want to reduce some repetitiveness.

Same thing for the Indeterminate story.

marissahuysentruyt · 2025-01-28T22:56:45Z

components/infieldprogresscircle/stories/infieldprogresscircle.stories.js

+StaticWhiteDeterminate.storyName = "Static white, default";
+StaticWhiteDeterminate.args = {
+	staticColor: "white",
+	isIndeterminate: false,


Any time we have isIndeterminate: false, we can just rely on progress circle's default arg, where isIndeterminate is already false. We don't need to redeclare it!

marissahuysentruyt · 2025-01-28T22:58:19Z

components/textfield/stories/template.js

 			isIndeterminate: true,
-			size: "s",
+			size: size,
 			customClasses: customProgressCircleClasses,


Should this be customInfieldProgressCircleClasses? Is that the intention here?

marissahuysentruyt · 2025-01-28T22:59:53Z

components/infieldprogresscircle/stories/template.js

+	rootClass = "spectrum-InfieldProgressCircle",
+	size = "m",
+	staticColor,
+	...item


What's the ...item for here? Is that referencing the parent component that infield PC would be in, like the picker or button?

It's just to spread the rest of props nested in Progress Circle.

marissahuysentruyt · 2025-01-29T15:20:33Z

components/infieldprogresscircle/project.json

+		"clean": {},
+		"compare": {},
+		"format": {},
+		"lint": {},


Suggested change

"lint": {},

"lint": {},

"report": {},

Looking at some other project.jsons, I think we need a "report": {} line.

…s-cirlce-s2-migration

aramos-adobe self-assigned this Dec 5, 2024

aramos-adobe added ready-for-review S2 Spectrum 2 labels Dec 5, 2024

aramos-adobe force-pushed the aramos-adobe/css763-progress-circle-s2-tokens branch from 13e35a1 to c97dee1 Compare January 8, 2025 01:07

aramos-adobe mentioned this pull request Jan 8, 2025

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

Merged

9 tasks

aramos-adobe force-pushed the aramos-adobe/css1035-infield-progress-cirlce-s2-migration branch 2 times, most recently from 4d277c7 to 221c244 Compare January 9, 2025 22:19

marissahuysentruyt requested changes Jan 16, 2025

View reviewed changes

aramos-adobe requested a review from marissahuysentruyt January 21, 2025 18:33

aramos-adobe force-pushed the aramos-adobe/css763-progress-circle-s2-tokens branch 2 times, most recently from aa3e105 to b4c24e8 Compare January 22, 2025 20:48

Base automatically changed from aramos-adobe/css763-progress-circle-s2-tokens to spectrum-two January 24, 2025 19:49

aramos-adobe force-pushed the aramos-adobe/css1035-infield-progress-cirlce-s2-migration branch from 3748245 to 33da0e2 Compare January 27, 2025 22:09

marissahuysentruyt requested changes Jan 28, 2025

View reviewed changes

marissahuysentruyt reviewed Jan 29, 2025

View reviewed changes

aramos-adobe changed the title ~~Aramos-adobe/css1035-infield-progress-cirlce-s2-migration~~ feat(infield-progress-cirlce): new component, sharing tokens from progress circle Jan 29, 2025

aramos-adobe added 8 commits January 29, 2025 11:27

feat(infieldprogress): add new component

3508efe

feat(infieldcircle): new component

aacdaf8

feat(ifpc): updating template and vrts

20401ad

chore(ifpc): updating story changes

c7021e4

chore(ifpc): cleaning up build files

1864da3

feat(ifpc): add infield loader to components

865ac54

feat(infieldprogress): add new component

21bc576

feat(ifpc): updating template and vrts

5a38f63

aramos-adobe force-pushed the aramos-adobe/css1035-infield-progress-cirlce-s2-migration branch from de1cc68 to 5a38f63 Compare January 29, 2025 16:35

aramos-adobe added 2 commits January 29, 2025 15:37

feat(ifpc): updating package, story, template

846c408

Merge branch 'spectrum-two' into aramos-adobe/css1035-infield-progres…

6a0a84d

…s-cirlce-s2-migration

aramos-adobe added 4 commits January 29, 2025 15:45

chore(ifpc): spectrum two updates

1379b1c

chore(ifpc): adding dist files

a328891

Merge branch 'spectrum-two' into aramos-adobe/css1035-infield-progres…

351bea9

…s-cirlce-s2-migration

Merge branch 'spectrum-two' into aramos-adobe/css1035-infield-progres…

2730b96

…s-cirlce-s2-migration

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

aramos-adobe commented Dec 5, 2024

changeset-bot bot commented Dec 5, 2024 •

edited

Loading

marissahuysentruyt left a comment

marissahuysentruyt Jan 16, 2025

marissahuysentruyt Jan 16, 2025

github-actions bot commented Jan 24, 2025 •

edited

Loading

github-actions bot commented Jan 24, 2025 •

edited

Loading

infieldprogresscircle

marissahuysentruyt left a comment

marissahuysentruyt Jan 28, 2025

marissahuysentruyt Jan 28, 2025

marissahuysentruyt Jan 28, 2025

marissahuysentruyt Jan 28, 2025

marissahuysentruyt Jan 29, 2025

marissahuysentruyt Jan 28, 2025

marissahuysentruyt Jan 28, 2025

marissahuysentruyt Jan 28, 2025

marissahuysentruyt Jan 28, 2025

marissahuysentruyt Jan 28, 2025

marissahuysentruyt Jan 28, 2025

aramos-adobe Jan 31, 2025

marissahuysentruyt Jan 29, 2025

	import packageJson from "../package.json";
	import metadata from "../dist/metadata.json";
	import packageJson from "../package.json";

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

Are you sure you want to change the base?

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

Conversation

aramos-adobe commented Dec 5, 2024

Description

Mods

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Dec 5, 2024 • edited Loading

🦋 Changeset detected

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 24, 2025 • edited Loading

github-actions bot commented Jan 24, 2025 • edited Loading

File metrics

Summary

infieldprogresscircle

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Dec 5, 2024 •

edited

Loading

github-actions bot commented Jan 24, 2025 •

edited

Loading

github-actions bot commented Jan 24, 2025 •

edited

Loading