Fix #5096 - Component Styles: Remove use of !important now that @layer is used

[FlipWarthog]

Fix #5096 - Component Styles: Remove use of !important now that @layer is used

@melloware @mertsincan, I did a side-by-side comparison running the showcase locally and looking at primereact.org and did not see any appreciable differences. As far as I can tell, now that @layer primereact is in place, !important is no longer needed.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview		Nov 10, 2023 0:05am

[melloware]

@bweis would like your thoughts on this one too.

[nitrogenous]

Sidebar's full screen option is not working properly

[melloware]

@nitrogenous similar to Dialog I just added the important back into Sidebar Full if you want to try again. @FlipWarthog and I work together.

[nitrogenous]

@melloware @FlipWarthog Thank you so much y'all! I have just fixed this solution in another PR. I think we can continue to proceed here.

Fullscreen issue PR
#5272

@nitrogenous similar to Dialog I just added the important back into Sidebar Full if you want to try again. @FlipWarthog and I work together.

[melloware]

@nitrogenous ok so in sidebar full is the !important still needed on the left and top I see your removed from the width and height ?

[nitrogenous]

@nitrogenous ok so in sidebar full is the !important still needed on the left and top I see your removed from the width and height ?

I don't think we need them anymore there was a logical problem while assigning the positioning classes but now it's fixed. It should work properly but let me double check

[gucal]

Hello there,

Thank you for your effort.

Components with resizable attributes such as data tables and tree tables should remain !important.
Because if the user gives an initial value for Column, e.g: <Column style={{{{ width: 200 }}/>, they may have problems resizing it later. Other than that, there does not seem to be an error.

I'll check and fix it.

Thank you for your contribution.

[gucal]

Hello there,

Thank you for your effort.

Components with resizable attributes such as data tables and tree tables should remain !important. Because if the user gives an initial value for Column, e.g: <Column style={{{{ width: 200 }}/>, they may have problems resizing it later. Other than that, there does not seem to be an error.

I'll check and fix it.

Thank you for your contribution.

It was reverted with this commit. 1ec2e3c.

Thank you!

[melloware]

Thanks @gucal !

[FlipWarthog]

@gucal @melloware I'll review these changes and sync them up on my PrimeVue PR for the same

[FlipWarthog]

PrimeVue PR is update to match this: primefaces/primevue#4638

[mertsincan]

@FlipWarthog thanks a lot for your PR! I found an issue, virtualscroller loading is not working on DataTable. You can check it our showcase.
My fix; primefaces/primevue#4993

Best Regards,

[melloware]

@mertsincan one more fix is needed we found in PrimeReact dialogs the left and top need to be important.

top: 0px !important;
left: 0px  !important;

See: #5635