feat: add Circular Progress #2122
Conversation
🦋 Changeset detectedLatest commit: 9e20581 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
✅ PR title follows Conventional Commits specification. |
snitin315
force-pushed
the
feat/circular-progressbar
branch
from
db5a314 to
3109768
Compare
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 9e20581:
|
snitin315
requested review from
chaitanyadeorukhkar,
kamleshchandnani,
anuraghazra and
saurabhdaware
as code owners
|
@snitin315 can you check this once? this is also present on master. Not sure if this layout shift is intended or not. Screen.Recording.2024-04-16.at.4.23.02.PM.mov |
packages/blade/src/components/ProgressBar/CircularProgressBar.web.tsx
Outdated
Show resolved
Hide resolved
packages/blade/src/components/ProgressBar/CircularProgressBar.web.tsx
Outdated
Show resolved
Hide resolved
| if (progressVariant === 'circular' && isIndeterminate) { | ||
| throwBladeError({ | ||
| moduleName: 'ProgressBar', | ||
| message: `Cannot set 'isIndeterminate' when 'variant' is 'circular'.`, |
There was a problem hiding this comment.
So we aren't sufficing the spinner usecase with Circular progressbar is it?
There was a problem hiding this comment.
Yes. The Spinner will be a separate component.
| size: 24, | ||
| strokeWidth: 3, |
There was a problem hiding this comment.
these values are pixels or spacing tokens or sizing tokens?
There was a problem hiding this comment.
size tokens, updated 👍🏻
@anuraghazra I'll check this separately. |
There was a problem hiding this comment.
The percentage is not showing up even with the showPercentage: true option in meter. Is that expected? There might be usecases of showing percentage in middle in circular meter on dashboard no?
There was a problem hiding this comment.
It's intended. We don't show percentage in the meter variant. https://blade.razorpay.com/?path=/story/components-progressbar--progress-bar-meter-variant&args=showPercentage:!true
There was a problem hiding this comment.
Lets remove the variant meter and progress from storybooks table?
There was a problem hiding this comment.
It's using autodocs so it's auto-generated, we will need to manually define all props otherwise. I think it's fine to keep it as is now since it is supported.
API
Current API
<ProgressBar variant="meter | progress">Ideal New API
<ProgressBar type="meter | progress" variant="linear | circular" >Proposed API to Avoid Breaking Change
<ProgressBar type="meter | progress" variant="linear | circular | meter | progress">typeprop is provided throw an error when thevariantismeterorprogress.Related Stacked PRs
Component Checklist