search

tailwindlabs / tailwindcss-custom-forms

A better base for styling form elements with Tailwind CSS.
https://tailwindcss-custom-forms.netlify.app/
MIT License
1.55k stars 73 forks source link

Implement indeterminate icon for checkboxes #85

Closed swanson closed 3 years ago

swanson commented 3 years ago

Adds an indeterminate state icon to checkboxes

image

The icon is this SVG that Adam / Steve provided: https://gist.github.com/adamwathan/77588f8c72d8f21d1022253a38a4fb03

Icon can be customized using an indeterminateIcon property and respects the iconColor customization as well.

Closes #27 Closes #62 Closes #50 (thanks for these PRs as they were a good starting point!)

adamwathan commented 3 years ago

@swanson What's the reason for using [indeterminate] instead of the :indeterminate pseudo selector? I keep seeing both approaches in different articles online but can't find a good explanation for why you would use one vs. the other.

swanson commented 3 years ago

@swanson What's the reason for using [indeterminate] instead of the :indeterminate pseudo selector? I keep seeing both approaches in different articles online but can't find a good explanation for why you would use one vs. the other.

I'm not sure, but he pseudo selector does match the conventions of the project better and seems equally "official" to me: https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate. The honest answer is that I was building off the other PRs and that's what they used :)

adamwathan commented 3 years ago

Haha gotcha! I have been working on this for the past little bit to see if there was an approach that didn't require a new key like indeterminateIcon and landed on this PR:

https://github.com/tailwindlabs/tailwindcss-custom-forms/pull/86

Going to go with that approach instead I think but really appreciate your work on this and also appreciate the nudge to just get this stupid feature done ❤️