-
Notifications
You must be signed in to change notification settings - Fork 196
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
base: aramos-adobe/css763-progress-circle-s2-tokens
Are you sure you want to change the base?
Aramos-adobe/css1035-infield-progress-cirlce-s2-migration #3430
Conversation
🦋 Changeset detectedLatest commit: 221c244 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
13e35a1
to
c97dee1
Compare
b64f3e9
to
4d277c7
Compare
…x and picker to show examples
4d277c7
to
221c244
Compare
There was a problem hiding this 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.
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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. 🤷♀️
## 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. |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
size: { | ||
name: "Size", | ||
type: { name: "string", required: true }, | ||
table: { | ||
type: { summary: "string" }, | ||
category: "Component", | ||
}, | ||
options: ["s", "m", "l", "xl" ], | ||
control: "select", | ||
}, |
There was a problem hiding this comment.
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" | ||
} | ||
} |
There was a problem hiding this comment.
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, |
There was a problem hiding this comment.
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, |
There was a problem hiding this comment.
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.
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
- [x] Toggle Intedeterminate mode
- [x] Exists in combobox, button, picker components isLoading states
Regression testing
Validate:
Screenshots
To-do list