primefaces / primefaces/primereact
[v11] Progress: When the progress % is too low the ProgresBar.Value becomes unreadable
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
My impl is somewhat default from the suggested one in the docs, this is the result I get:
This is my current impl:
´´´
columnHelper.accessor('recentCompletionPercentage', {
id: 'Completion%',
enableSorting: true,
header: sortableHeader,
cell: ({ getValue }) => {
const completionPct = parseFloat(getValue());
return (
<ProgressBar
value={completionPct}
formatter={(val: number) => `${val.toFixed(1)}%`}
className="w-full"
>
<ProgressBar.Track className="h-4.5">
<ProgressBar.Indicator className={cn('rounded-xs', getProgressColor(completionPct))}>
<ProgressBar.Label>
<ProgressBar.Value />
</ProgressBar.Label>
</ProgressBar.Indicator>
</ProgressBar.Track>
</ProgressBar>
);
},
}),
´´´
This might be blurring the line between feature-request and bug report, since the data becomes unreadable I feel this leans towards bug report.
For what I as an user would expect to see, I don't think it matters that much as long as I can read the data.
Reproducer
No response
System Information
System:
OS: Linux 6.14 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
CPU: (16) x64 AMD Ryzen 7 9800X3D 8-Core Processor
Memory: 37.73 GB / 60.44 GB
Container: Yes
Shell: 5.2.21 - /bin/bash
Binaries:
Node: 24.11.1 - /home/thiago-barbosa/.nvm/versions/node/v24.11.1/bin/node
npm: 11.6.2 - /home/thiago-barbosa/.nvm/versions/node/v24.11.1/bin/npm
Browsers:
Chrome: 141.0.7390.76
npmPackages:
primereact: ^11.0.0-alpha.1 => 11.0.0-alpha.9
react: 19.2.1 => 19.2.1
tailwindcss: ^4.1.17 => 4.1.18
Steps to reproduce the behavior
No response
Expected behavior
The Progres.Value should be readable when the % is low
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the ProgressBar component and reproduce the supplied JSX with a low completion percentage. Inspect how the Indicator, Label, and Value render at small widths; done means the percentage remains readable when the progress value is low.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100