Add special className to style boolean cells (checkbox) in Vanilla package

[andresgutgon]

What?

Hi I was using the lib and I noticed Vanilla React has the same styles for input type='text' and input type='checkbox'. Would be possible to have different styles? This way is easier to style it

Order

Also noticed when is a checkbox boolean the position is the same as with type=text
Now:

<label>My label</label>
<input type='checkbox' />

Wouldn't be better to put the cell inside the label?

<label>
  <input type='checkbox' />
  <div>My label</div>
</label>

I think is a common practice for checkboxes

Changing the order checkbox can look like this

Thanks!

[sdirix]

Thanks for the contribution, we'll take a look very soon! ❤️

[andresgutgon]

Nice! Thanks @sdirix what do you think about the order of label/input when is a boolean/checkbox?

At the moment only added the class to style the checkbox. But the order remains the same as with input

[sdirix]

Nice! Thanks @sdirix what do you think about the order of label/input when is a boolean/checkbox?

At the moment only added the class to style the checkbox. But the order remains the same as with input

Can you point me to some occurrences where the input is defined within a label? I'm not aware of that pattern. The MDN documentation also doesn't showcase it.

[sdirix]

Can you take a look at the failing test cases?

[andresgutgon]

Can you point me to some occurrences where the input is defined within a label?

Uhmm maybe is just me. I always do checkbox/radio this way. But maybe is not something standard. Feel free to ignore.

[andresgutgon]

I think I fixed the specs, let me know if it works. Thanks!

[sdirix]

LGTM!

[coveralls]

Coverage remained the same at 84.242% when pulling ff27e63 on andresgutgon:fix/vanilla-react-styles-for-checkbox into e9400b6 on eclipsesource:master.

[sdirix]

Thanks again for the contribution ;)