Refactor Radio, Checkbox and Toggle

[adamkudrna]

• Unify API with other form fields: error → helperText moved to Unify error vs. helperText props #28
• Get rid of deprecated SCSS settings and tools (colors, forms, icons)

[mbohal]

It is possible, that we might need both error and helperText. Presently we are abusing helperText to show validation errors. That works, but it prevents us from using helper Text for something not error related.

Maybe we should modify the API on all input elements to accep both helperText and errorText?

[adamkudrna]

That's a question of UX. I've seen both approaches: single helperText, or helpText along with errorText. Since we don't want to limit the UX design, we should probably support having both options – helperText and errorText.

[bedrich-schindler]

Mainly, we have to unify differences between usage of error vs helperText+validationState across all components, not only Radio, CheckBox and Toogle. It is weird to have different approaches of passing these values into components. So this is the first part of issue we probably agree on.

Then I am in to have two different props for setting these values, errorText and helpText, so we can set both independently. With this change, we will have to remove validationState prop and remove old error prop. And I also tend to use helpText instead of helperText.

The only thing I am not sure about is if we will need some help icon or not. If yes, then we will have to have prop for help icon, something like helpIcon. But it is only weak point I see now. Maybe icon is not necessary. It is totally up to @adamkudrna.

I am still thinking about icons because it is not so handy to pass all these icons like sortingAscIcon, sortingDescIcon, helpIcon (if it is needed) to components all the time. And in case we will need to have helpIcon then I would like to open discussion aboutIconContext component. We already have TranslationContext that can pass translations to components globally and it can be same for icons.

[mbohal]

have two different props for setting these values, errorText and helpText
I like these names

The only thing I am not sure about is if we will need some help icon or not.

Could we make helpText and errorText accept nodes and/or text and then we could pass in the icons inline? That would open other possibilities such as passing into helperText a button that opens documentation modal and such things.

Something like (I didnt test this code):

<MyComponent
  helpText={<><Icon type="help"> I'm the help text.</>}
/>

[adamkudrna]

I would like to open discussion about IconContext component.

I'm already excited!

we could pass in the icons inline? That would open other possibilities such as passing into helperText a button that opens documentation modal and such things.

Links might be useful, I second that. Not sure about icons, though. I can better imagine help icon with popover inside label but that's another discussion.

I'm moving this to a standalone issue since the discussion is far beyond the scope of the original issue.

[adamkudrna]

Beware of visual glitch in Checkbox in warning state:

[adamkudrna]

And here, Chrome/Android: