Apply new checkbox and radio styles

[zolhorvath]

Issue

This PR fixes #15 and fixes #19 .

Screenshot / UI changes

See #63 (comment)

Testing instructions

• Add https://github.com/zolhorvath/seven-refresh/ as drupal-profile (sevenrefresh) to a Drupal project.
• Remove core/themes/seven
• Make sure that this theme is installed to themes/custom/seven
• Symlink core/misc to themes/custom/misc
• Run yarn && yarn build:css in the theme's root
• Install a Drupal with profile sevenrefresh. This will enable additional field types such as telephone or date_range and enable styleguide Drupal modules.

After that Drupal is installed, Styleguide will be the front page and you'll have the test form at /contact/checkbox_radio.

[zolhorvath]

Current status

Just waiting for PR #57.

[zolhorvath]

Screenshots after master merge:

ubuntu-windows-screenshots.zip
mobile-osx-screenshots.zip

Ready for the first review

[ckrina]

Thanks @zolhorvath for all the work!
The only thing I've seen is the styles for the error in the checkbox when it's checked. It should behave as the blue and the black: red background and white checked icon.

[zolhorvath]

The only thing I've seen is the styles for the error in the checkbox when it's checked. It should behave as the blue and the black: red background and white checked icon.

I'm sure that this changed during the development :(

[ckrina]

I'm sorry, we removed the designs for this specific state during an accessibility review because it seemed no necessary, but finally it was added again just in case it was needed in the future. I'm not really sure when we added it again 😔

[ckrina]

The checked checkbox with error should have the background red and the icon white, following the other checked states pattern. (sorry for repeating this, I initially posted it as a normal comment)

[zolhorvath]

@ckrina Checkbox fixed.

Updated screenshots (with the updated checked error state):

Checkboxes Radios - Ubuntu and Windows.zip
Checkboxes Radios - Mobile and OSX.zip

[lauriii]

The element contains a transition which isn't documented in the design system. @ckrina do we want to add the transition to the style guide or remove it from the CSS?

[lauriii]

There are few instances of checkboxes created outside form API. We probably should open issue to Drupal.org to create JS theme function for checkbox and then override the markup in Claro.

[ckrina]

I realized about the transition, but so far we haven't defined animation patterns and principles. It's one of that things we still need to work in, sorry. So maybe it can be documented somehow so we know where we're applying it so far and come back to it later on if it has to be modified.

[zolhorvath]

There are few instances of checkboxes created outside form API

@lauriii could you please give us examples?