feat: create BarChart component #2637
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
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. |
artursantiago
requested review from
eduardoformiga and
lucasfp13
and removed request for
a team
|
Can you add the preview on storybook? |
I just fixed the preview link. You can test it now |
Guilera
force-pushed
the
feat/add-progress-bar-component
branch
from
248eeac to
a9b3f0c
Compare
| // -------------------------------------------------------- | ||
|
|
||
| --fs-progress-bar-height: 4px; | ||
| --fs-progress-bar-radius: 4px; |
There was a problem hiding this comment.
@renatamottam we don't have this for border radius, should we add a new token with this value (Are we using it in the future)? I'm considering to use --fs-border-radius-pill instead?
There was a problem hiding this comment.
I also think its a good idea, the difference is basically none.
The first 3 border-radius has --fs-progress-bar-radius: 4px; and the last 3 has --fs-progress-bar-radius: var(--fs-border-radius-pill); // (100px)
|
@artursantiago I discussed this component with @renatamottam, and I believe this component should not be a |
hellofanny
changed the title
| import type { HTMLAttributes } from 'react' | ||
|
|
||
| export interface BarChartProps extends HTMLAttributes<HTMLDivElement> { | ||
| /* Current value of the progress */ |
There was a problem hiding this comment.
| /* Current value of the progress */ | |
| /* Current value of the bar */ |
|
We decided to keep this specific component inside The role of this element (progress bar, presentation, etc.) wasn’t very clear. We checked other applications like Amazon, Mercado Livre, and Samsung, but couldn’t find a consistent pattern. Since this component isn’t being used elsewhere, we’ve opted to keep it specific for now. If needed in the future, we can revisit the decision. Closing this PR in favor of the new one: |
What's the purpose of this pull request?
This pull request adds the ProgressBar component. Initially, this component will be used in the Reviews & Ratings section of the product page to display the percentage of each star rating from the reviews.
How it works?
This PR introduces the
ProgressBarmolecule component. It acceptsvalue,min, andmaxas props, with default values set to0forvalue,0formin, and100formax.To ensure the interface remains stable, the component includes a safeguard mechanism: if there is any inconsistency in the props (e.g.,
minbeing greater thanmax), asafeMaxvalue is calculated to prevent the interface from breaking.How to test it?
Starters Deploy Preview
Preview
References
JIRA TASK: SFS-2066
Figma