You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Feature Request: Add variant and status-position props to UProgress component
Description
I’m a junior developer, and I’ve been working on enhancing the flexibility of the Progress component by adding two new props: variant and status-position. These props allow for better customization, especially when using the Progress component in different design contexts.
variant: This prop allows you to choose between two styles for the progress bar: linear and circular. The circular variant provides a circular progress bar instead of the default linear style.
status-position: This prop controls the position of the progress status (the percentage or label) relative to the progress bar. The possible values are:
inside: The status is displayed inside the circle (for the circular variant).
outside: The status is displayed outside the circle.
Motivation
This update would help in using the Progress component more flexibly across different layouts, providing options for both linear and circular progress indicators with customizable label placements.
What I've Done
I’m still a junior developer, so the implementation is not perfect, but a good portion of the work is done. I’ve added the variant and status-position props to the Progress component. I’d love to know if this is something you’d like to integrate into the main repository and whether I can open a pull request for it.
Additional Notes
The variant prop accepts values linear or circular.
The status-position prop accepts values inside or outside.
Would love to hear your thoughts on this approach!
Description
Feature Request: Add
variant
andstatus-position
props toUProgress
componentDescription
I’m a junior developer, and I’ve been working on enhancing the flexibility of the
Progress
component by adding two new props:variant
andstatus-position
. These props allow for better customization, especially when using theProgress
component in different design contexts.variant
: This prop allows you to choose between two styles for the progress bar:linear
andcircular
. Thecircular
variant provides a circular progress bar instead of the default linear style.status-position
: This prop controls the position of the progress status (the percentage or label) relative to the progress bar. The possible values are:inside
: The status is displayed inside the circle (for thecircular
variant).outside
: The status is displayed outside the circle.Motivation
This update would help in using the
Progress
component more flexibly across different layouts, providing options for both linear and circular progress indicators with customizable label placements.What I've Done
I’m still a junior developer, so the implementation is not perfect, but a good portion of the work is done. I’ve added the
variant
andstatus-position
props to theProgress
component. I’d love to know if this is something you’d like to integrate into the main repository and whether I can open a pull request for it.Additional Notes
variant
prop accepts valueslinear
orcircular
.status-position
prop accepts valuesinside
oroutside
.Would love to hear your thoughts on this approach!
Additional context
Reka UI : Progress Circular
The text was updated successfully, but these errors were encountered: