Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Progress Max is not included in usage, effectively ignored #3112

Open
rsxdalv opened this issue Sep 9, 2024 · 0 comments
Open

Progress Max is not included in usage, effectively ignored #3112

rsxdalv opened this issue Sep 9, 2024 · 0 comments

Comments

@rsxdalv
Copy link

rsxdalv commented Sep 9, 2024

Bug report

Regular html has both value and max. So does the ProgressPrimitive however it does not actually use the max when provided in the code for copy pasting, which is not valid.
https://www.radix-ui.com/primitives/docs/components/progress

If the attribute is defined but not used, that is incorrect behavior and creates a real mismatch with other than being misleading.

I am seeing this cascade down to shadcn and v0.dev so I hope that fixing it here will fix it for all.

Current Behavior

    <ProgressPrimitive.Indicator
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />

Expected behavior

    <ProgressPrimitive.Indicator
      style={{ transform: `translateX(-${100 - ((value || 0) / (max || 100)) * 100}%)` }}
    />

Reproducible example

CodeSandbox Template

Suggested solution

Additional context

Your environment

Software Name(s) Version
Radix Package(s)
React n/a
Browser
Assistive tech
Node n/a
npm/yarn
Operating System
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant