Skip to content

[v11] Progress: When the progress % is too low the ProgresBar.Value becomes unreadable #8472

@ThiagoBarbosaDev

Description

@ThiagoBarbosaDev

Describe the bug

My impl is somewhat default from the suggested one in the docs, this is the result I get:

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: BugIssue contains a defect related to a specific component.

    Type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions