Feature Request: Config Option to compliment state selectors

[StoraH]

Feature request

This issue is a request to add an option in the DaisyUI config that allows complementing the pseudo-classes that control the state (e.g. :checked) of a component with any selector of choice.

Rationale

I tried to use DaisyUI together with radix UI and for the most part, it works great. The way radix is handling the state of its components is through data attributes like [data-state] and that's where it became an issue for certain components like Toggle. I like that daisy is "locked" to write a checkbox as an actual checkbox but it would be nice to be able to opt-in to handle the state with javascript.

Proposed Implementation

Please look at the pull request linked to this issue for details.
When writing the code (and this issue) I had a look at how the prefix option was implemented and tried to follow the same patterns. I think some optimizations can be made in the way the configuration is read since they are very similar.

[StoraH]

The issue doesn't seem to be assigned to me, please help 🙏

[saadeghi]

Thank you for contribution.
But I'm not sure if this should be a config. We can simply add class names for checkboxes or radio buttons that need look as active.

For example we can add both selectors in daisyUI:

.toggle:checked,
.toggle-checked{

}

And it allows us to have a custom element that looks like a checked checkbox.

I think this is simpler and less confusing than having a exclusive config object for it.

[StoraH]

Thanks for the fast reply!
Yes, that would suffice in the scenario where you have control over the HTML, but when using a third-party library like radix that owns the HTML it gets trickier. I think is a good idea to unlock the possibility to choose the state selectors to match the pattern of the app you working on.

Edit: I really liked(❤️) how clean the CSS code was when I looked and it and even tho it's just adding one state class now it might become a slippery slope.

[saadeghi]

I don't have experience working with Radix. Can you please tell me how you use daisyUI classes in Radix and what exactly is the issue?
Can you have a custom class name for a checked checkbox or does Radix add a data-attribute or...?

Because we can add anything to daisyUI source code [to integrate with other libraries] as CSS selectors and if people are not using them, unused selectors will be purged in production.

[StoraH]

I created a sandbox, easier than explaining the base usage 😄 https://codesandbox.io/s/determined-goldstine-oqgcne?file=/App.js
I saw that the color of the radix toggle looks a bit off and I traced it down to that the tailwind reset gets applied last. So don't mind that one.

The data-state attribute looks like the one radix uses doc.

[saadeghi]

Thank you!
I see that Radix is also controlling aria-checked attribute when we check the checkbox.
Since ARIA attributes are considered as a11y standard, I think applying style to .toggle[aria-checked=true] will fix everything. It makes the checkbox to show as checked when Radix changes aria-checked to true and it will be compatible to any other component library that use the standard aria values.

So, all it takes is to add .toggle[aria-checked=true] to this file (lines 11, 32, 43, 54)

other components that need this addition would be checkbox, radio, rating

[StoraH]

I did even think of that, really good idea 👌 Feels like the correct solution. Let me know if you need any help!

[saadeghi]

I will fix it today. Thank you 🙌

[quangv]

Does this work with btn-primary for example:

<form className="group">
  <button className="btn group-focus-within:btn-primary group-focus-within:text-primary-content" />
</form>