fix(suite): Fix firmware update progress bar #16417
Conversation
jvaclavik
force-pushed
the
fix-firmware-update-progress-bar
branch
from
e009972 to
4abf179
Compare
| )} | ||
| </Percentage> | ||
| </Wrapper> | ||
| <Box width="100%"> |
There was a problem hiding this comment.
I'm not happy about this one (it should be part of Column), but I would need to update alignItems:stretch in OnboardingStepBox which could lead many issues across the app. Not brave enough right now :D let's leave it for broader refactoring.
| font-variant-numeric: tabular-nums; | ||
| height: ${spacingsPx.xl}; | ||
| width: 30px; |
There was a problem hiding this comment.
It's intended not have fixed width, because otherwise progress bar is moving according to percentage value or checkmark
| height: 5px; | ||
| max-width: 100%; | ||
| width: 1%; | ||
| transform: ${({ $max, $value }) => `scaleX(${(100 / $max) * $value})`}; |
There was a problem hiding this comment.
There is a rounding bug in cases of long progressbar, so I rewrote it with width. Looks like everything is still working.
There was a problem hiding this comment.
Can't we just use Math.round?:)
| @@ -80,7 +80,7 @@ export type FramePropsKeys = keyof FrameProps; | |||
| type TransientFrameProps = TransientProps<FrameProps>; | |||
|
|
|||
| const getValueWithUnit = (value: string | number) => | |||
| typeof value === 'string' ? value : `${value}px`; | |||
| typeof value === 'number' ? `${value}px` : value; | |||
There was a problem hiding this comment.
Actually this makes sense to have it this way IMHO
| transform: ${({ $max, $value }) => `scaleX(${(100 / $max) * $value})`}; | ||
| transform-origin: left; | ||
| transition: transform 0.5s; | ||
| width: ${({ $max, $value }) => `calc((100% / ${$max}) * ${$value})`}; |
There was a problem hiding this comment.
I've changed this because it's better to use transform than to animate width:) It should be the same, do you think it bug is caused by this?
There was a problem hiding this comment.
Yes, I'm pretty sure it was, now it's working fine
Description
Related Issue
Resolve #16215
Screenshots:
before
after
