[Checkbox][WIP] New features

[prudho]

Description

Following #2009, I think that indeed checkboxes need some fancy new features too. So I open this PR as a draft and discussion topic.

For now, I just add colored and outline checkboxes too see what it's possible to implement.

The others options i'm thinking are:

• icons instead of check mark.
• animated checks (js and Transition are paving the way).
• label text depending on checkbox state...

What do you guys think about this ?

Testcase

JSFiddle

Screenshot

Related issues

#393, #550, #2009

[lubber-de]

I like the approach to make outline optional 👍🏼 ! I also like your additional ideas 🙂

[prudho]

Icon instead of checkmark is doable:

But it will require more tests and code than previous modifications. Should I create another PR ?

[lubber-de]

But it will require more tests and code than previous modifications. Should I create another PR ?

Up to you 😉 Just make sure that each PR is based on current develop (or do everything in one PR)

[lubber-de]

I have a suggestion/idea/question: What about replacing outline by bordered? We already have bordered icon and bordered image

https://fomantic-ui.com/elements/icon.html#bordered-colored

However, a checkbox/radio always has an "outline" or is "bordered". Your new feature does only make the outline/border more prominent/bold/colored

Opinion?

[prudho]

Yeah I don't know how to really name it, since I "copy" class name from another framework. And I struck to find another class name for a no bordered checkbox as well (well the border disapear when checked).

[prudho]

I've added the icon variation. Works well overall, except for sizes, i'm not comfortable with advanced scss yet 😞