[Bug]: Progress bar not working for max prop value greater than 100

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

https://ui.shadcn.com

MIT License

73.83k stars 4.54k forks source link

[Bug]: Progress bar not working for max prop value greater than 100 #3082

Open imaxisXD opened 7 months ago

imaxisXD commented 7 months ago

Describe the bug

The progress bar has a max prop that accepts a number and a value prop which also accepts a number. However, the current implementation does not support a max prop value greater than 100.

Affected component/components

Progress

How to reproduce

In the Progress component add max prop value greater than 100 and see the magic.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Every browser

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

imaxisXD commented 7 months ago

The fix is simple for this just change the logic transform property and it will work for every value

*<ProgressPrimitive.Indicator className="h-full w-full flex-1 bg-purple-500/60 transition-all" style={{ transform: `translateX(-${100 - ((value || 0) / (max || 100)) 100}%)`, }} />**

troypoulter commented 6 months ago

I’ve also encountered this issue and found your solution helpful—thanks for sharing! 🔥

Would you like to submit the PR, or would it be alright if I took care of it?

imaxisXD commented 6 months ago

@troypoulter No problem man you can test the solution I gave and if things go well you can raise the PR !

Thank you