-
Notifications
You must be signed in to change notification settings - Fork 1.2k
[v11] Progress: When the progress % is too low the ProgresBar.Value becomes unreadable #8472
Copy link
Copy link
Labels
Type: BugIssue contains a defect related to a specific component.Issue contains a defect related to a specific component.
Milestone
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.18Steps to reproduce the behavior
No response
Expected behavior
The Progres.Value should be readable when the % is low
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Type: BugIssue contains a defect related to a specific component.Issue contains a defect related to a specific component.