Closed Neosoulink closed 2 months ago
Ahh its working fine with PR theme: https://primereact.org/radiobutton/ Its the TailWind theme that is incorrect.
I will mark this ticket as Tailwind related.
Hum... I'm not sure, but I tried to remove all the styling and style getting the same behavior, is it really Tailwind?
As I mentioned, it's working fine on version 10.5.0
cc: @melloware
Yes see showcase with a PR theme it works fine: https://primereact.org/radiobutton/ fully themed so something in the TailWind theme is not right.
AS a note after 10.5.0 the RadioButton was updated and the PR themes were updated but it looks like the TailWind theme was not. I am not a Tailwind guy so a PR is welcome for anyone that wants to figure it out!
It actually the same as this Checkbox issue and Tailwind: https://github.com/primefaces/primereact/issues/6423
Checkbox was fixed but Radiobutton wasn't if you want to look at that PR?
cc @gcko
Yes It looks quite similar to #6423
And gcko's PR fix was mostly about adding classNames
helper to the InputSwitch
and CheckBox
themes:
- className: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+ className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
However, the current RadioButton
already uses the classNames
helper...
radiobutton: ({ context }) => ({
className: classNames(
'flex justify-center items-center',
'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
context.checked
? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400'
: 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
{
'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
'cursor-default opacity-60': context.disabled
}
)
}),
But the checkbox is working on the latest version
If you look he also added an input
section to the Checkbox i believe.
Yes he did:
input: {
className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
},
But no matter the changes I'm making, I'm still not able to apply a custom style to the RadioButton
in the latest version of Primereact
@gcko can you take a look at this since you are familiar with Tailwind and the PR structures?
sure i'll take a look
Describe the bug
Using the latest version of
PrimeReact
and wanting to use theRadioButton
component, I realized that it was returning a default native radio button, unstyled. (see the screenshot).
This error behavior is happening on version
10.6.x
and higherReproducer
https://stackblitz.com/edit/u8l8sa?file=src%2FApp.jsx
System Information
Steps to reproduce the behavior
I forked the official example and even there it's not working
-> https://stackblitz.com/edit/u8l8sa?file=src%2FApp.jsx
Expected behavior
No response