Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Aramos-adobe/css1035-infield-progress-cirlce-s2-migration #3430

Open
wants to merge 7 commits into
base: aramos-adobe/css763-progress-circle-s2-tokens
Choose a base branch
from

Conversation

aramos-adobe
Copy link
Collaborator

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

  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.
  1. 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. ✨

Copy link

changeset-bot bot commented Dec 5, 2024

🦋 Changeset detected

Latest commit: 221c244

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

This PR includes changesets to release 2 packages
Name Type
@spectrum-css/infieldprogresscircle Major
@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

@aramos-adobe aramos-adobe self-assigned this Dec 5, 2024
@aramos-adobe 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 aramos-adobe force-pushed the aramos-adobe/css1035-infield-progress-cirlce-s2-migration branch from b64f3e9 to 4d277c7 Compare January 9, 2025 22:16
@aramos-adobe aramos-adobe force-pushed the aramos-adobe/css1035-infield-progress-cirlce-s2-migration branch from 4d277c7 to 221c244 Compare January 9, 2025 22:19
Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a hold-over from when we had the old static docs site. This file can be safely deleted entirely.

...ProgressCircle.args,
},
parameters: {
...ProgressCircle.parameters
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. 🤷‍♀️

Screenshot 2025-01-16 at 4 04 54 PM

Comment on lines +5 to +7
## Infield Progresscircle S2 Migration

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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a quick typo at the beginning here: "progress cirlce" should be "progress circle."

Also, I'd be fine with maybe updating this changelog description. It's not really a subcomponent of the regular progress circle, right? We've separated it out, it's a net-new component for Figma as well, so it could be helpful to make it sound more like a new component, rather than a subcomponent.

@@ -0,0 +1,44 @@
/*!
Copyright 2023 Adobe. All rights reserved.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wanna update the copyright year? I don't think they get updated automatically, or at least we haven't done that yet.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

*/

export default {
title: "Components/In-field progress circle",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you please remove the Components/ prefix? Right now, this component is actually in a "Components" folder in the side nav, instead of out and about!

Screenshot 2025-01-16 at 3 59 55 PM

Comment on lines +13 to +22
size: {
name: "Size",
type: { name: "string", required: true },
table: {
type: { summary: "string" },
category: "Component",
},
options: ["s", "m", "l", "xl" ],
control: "select",
},
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's refactor this to use the sizes function now that this branch is all updated!

"publishConfig": {
"access": "public"
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would you also add the spectrum key to this package.json?

 "spectrum": [
    {
      "guidelines": "https://spectrum.adobe.com/page/progress-circle",
      "rootClass": "spectrum-InfieldProgressCircle",
      "swc": "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/"
    }
  ]

I think we need at least the rootClass here, because we use this spectrum data in the ComponentDetails block. I'm not convinced it's totally working right now, but I think we should still add this data.

},
},
args: {
...ProgressCircle.args,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we have to redeclare the rootClass: "spectrum-InfieldProgressCircle here too, so that we are correctly picking up the github repo link in the resource card. Right now, we're just linking to regular progress circle, but you made this beautiful new component that we should link to instead!


export const Template = ({
customClasses = [],
rootClass,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also wonder if spectrum-InfieldProgressCircle should actually be here, instead of within the custom classes of progress circle.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants