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

ProgressBar's CSS seems to conflict with MeterGroup's CSS #6528

Closed
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@Tubbbe
Copy link
Contributor

Tubbbe commented Apr 30, 2024

Describe the bug

Hello,

I waited for the release of 10.6.4 to play with MeterGroup (#6340)

However, I spent a long time before understanding why I had no color: when I have a ProgressBar on my screen, MeterGroup's CSS no longer works.

And even with two ProgressBars and a MeterGroup, when I delete one ProgressBar, the CSS for the other ProgressBar no longer works.

With the example given, you can try deleting one ProgressBar, then the other, then putting one back, then the other, and see how this affects the CSS.

Reproducer

https://stackblitz.com/edit/vitejs-vite-kxawqj?file=src%2FApp.tsx

PrimeReact version

10.6.4

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Firefox 125.0.3 ; Brave 1.65.123

Steps to reproduce the behavior

  1. Add a MeterGroup : <MeterGroup values={[{ label: 'Hey', value: 15, color: 'red' }]}></MeterGroup>
  2. Add a ProgressBar : <ProgressBar value={33} color={'yellow'} />color={'red'} />` : the MeterGroup is working, but the ProgressBar's CSS is broken
  3. Add a second ProgressBar : <ProgressBar value={66} color={'red'} /> : both ProgressBar are working, but the MeterGroup's CSS is broken

Expected behavior

CSS for all components must work

@Tubbbe Tubbbe added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Apr 30, 2024
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels May 1, 2024
@melloware melloware self-assigned this May 1, 2024
@melloware melloware added this to the 10.7.0 milestone May 1, 2024
melloware added a commit to melloware/primereact that referenced this issue May 1, 2024
@melloware
Copy link
Member

Thanks for the report I submitted a fix!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment