new progressbar component of claim branch && more values available #2060
Conversation
maria-vslvn
requested review from
alfetopito,
alongoni,
ramirotw and
matextrem
alongoni
added
app:CowSwap
|
|
|
||
| export const ProgressContainer = styled.div` | ||
| background-color: ${({ theme }) => transparentize(0.61, theme.text1)}; | ||
| height: 16px; |
There was a problem hiding this comment.
Hey @maria-vslvn, I love it! Works fine!
Maybe we can add 24px height in order to have more space inside the bar and increase the font size of the variable %. (to font-size: 16px; and font-weight: 900;)
Another thing, we can decrease a bit the font-size of the values at the top (to 12px).
It'll look like this:
There was a problem hiding this comment.
Excellent work Maria, looks perfect!
While it does make sense for the component in isolation that's not how we envision the component to be used regarding the state handling.
Could you please remove the internal state and add a callback as a parameter like in the proposed API on the issue #2008 (comment) named onPercentageClick or onClick.
Then, instead of using the setProgressVal(value) you'd call onPercentageClick(value).
The parent component is the who'll hold the state and update the ProgressBar component by passing the updated value component.
You can have a test parent component, but it's not required for the current ProgressBar component.
Let me know if you have any questions
|
@alfetopito please check the updates |
|
Scrollbar LGTM itself, but is this OK that it becomes 100% filled when I select any option, including 0%? |
|
It would be great to have this PR merged soonish, we are arriving the point where we need it |
please take a look in the Profile page
the issue should be fixed |
|
Changes LGTM! |
ramirotw
added
the
Auto-merge
Summary
Fixes #2008
New Progress Bar component was created, values can be set by clicking the numbers at the top of the bar or via dragging the bar or clicking at any bar point.
To Test
ProfileThe bar is at the bottom of the form