Material-ui: [Checkbox] Add checked animation

[SamiSaves]

The Checkbox component is missing the animation for the icon when toggling it. This makes checking the checkbox look bit cluncky, especially when toggling it from the label.

In material design demo you can clearly see the icon animated when you toggle it: https://material-components.github.io/material-components-web-catalog/#/component/checkbox

Compare it to the current implementation in material-ui. See especially how it looks when toggling it by clicking the label.
https://material-ui.com/components/checkboxes/

Even in v0 has some kind of animation, which in my opinion makes it look better than the current version https://v0.material-ui.com/#/components/checkbox

• [x] This is a v1.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Edit: Updated outdated link

[eps1lon]

Good catch. The design spec also displays an animation: https://material.io/design/components/selection-controls.html#checkboxes

It currently has a transition but for fill whereas mcw has an opacity transition. That might be the issue here?

[calebissharp]

@eps1lon Is it alright if I work on this?

[eps1lon]

@calebissharp
That'd be great.

[oliviertassinari]

In case somebody wants to work on this issue, he can benchmark MCW implementation.

[NawarA]

Also, opening this open to a greater discussion, the spec calls for animated icons, with 3 durations: simple (100 ms - what MUI currently uses), (200ms average - the checkbox example above), and complex (500ms).

spec:
https://material.io/design/iconography/animated-icons.html#usage

Looks like there are a few transitions here:
1) enable to disable (and the reverse transition)
2) transition between two icons on click
3) animate the same icon onclick

[eluchsinger]

@oliviertassinari Did anyone work on this one? Would it still be in v4 or already v5?

[oliviertassinari]

@eluchsinger Not I'm aware of. I would be cautious with the bundle size and customization implications. I don't think that it should land in v4.

[davecaruso]

much earlier when i animated the radio button component, i also started working on this issue, but never finished it. a partial implementation of the animated checkbox is on npm but it's not complete, nor the most quality code.

for people who are browsing this issue and just want a thing that works, that may be of use to them.

[eluchsinger]

I would do it myself, but I am not an animations expert and lack a bit of the time to look into it. If I find some time I can do it myself and create a PR.

[benatkin]

Notably GMail doesn't use it, at least for selecting messages. It would be interesting design decision to default to animated in long forms but default to Material UI's current implementation in table views. Not one I'm capable of making except for my own sites because IANAD but it seems like a good idea to me! I'm also sure Material UI could handle it but not sure it would be worth the effort.

[NawarA]

re: worth the effort.

Its just CSS animations, right? lol Can't we use Google's open source repo for CSS? The code is right there ;)

I believe all great UI's feel good. Anything that can make the library feel better is a worthwhile investment for everyone in the community. You're totally right, that developers should be able to choose which animation to use. According to the Material spec, developers / designers should be using animations that are simple, average, and complex, which supports your insight.

Below is a screenshot / video from the spec, found here.

MUI currently supports simple. This feature request is to support average, just like Google shows off in their MUI web components. I totally agree, developers / designers need to have final say on where to utilize each.

🖖

Video link:

[benatkin]

As for effort, I was specifically talking about the effort to have different defaults for
table row checkboxes, for which animations could get in the way, and form
checkboxes, which would be welcome, especially in sign up forms! And I realize it could be easy to have a partial solution for differing defaults, but it would need to be built to the standards of Material UI, and it may be better just to default to animated or to not animated.

[benatkin]

"developers / designers need to have final say of which to utilize, and where."

Well said!