[ButtonBase] Inconsistent ripple style with the material specs

[arsen]

If you compare the ripple effect from material specs, it feels like the one here is a bit slower than the one at Google, animation duration should be a little shorter.

You can see it yourself.

• Google version: https://material.io/components/buttons
  

• MUI version: https://material-ui.com/components/buttons/
  

[mbrookes]

MCW isn't the spec, it's another Google team's interpretation of it, although ironically material.io now uses MCW for their "Interactive demo" giving the sense that it is definitive, when often it deviates from the spec.

Could you reference the spec at material.io (but not an "interactive demo" 🙂)?

[Studio384]

The List specs show the ripple effect in various demos that are part of the specs and not another interpretation by a Google team. They do seem faster than the ripple effect that MUI uses today.

[mbrookes]

It's a shame the ripple doesn't have specific guidelines, as it seems to vary from one component to another, depending on the designer who created the video.

I can't work out why from the code, but comparing the ripple on the Card component with that on the List, it appears that the Card ripple is much faster, despite the two components being the same width.

I wondered if the speed was in some way proportional to the area, but DURATION is a fixed value. 🤷‍♂

[arsen]

I think that it should at least be configurable, the speed of the ripple effect.
Looks like the duration is a fixed const.

https://github.com/mui-org/material-ui/blob/c06a88d24235685dd769c1a3df82152ded17a6ca/packages/material-ui/src/ButtonBase/TouchRipple.js#L8

[eps1lon]

I think making the speed configurable as suggest by @arsen in #19664 (comment) is justified.

[oliviertassinari]

@arsen Why do you need to configure the duration?

[arsen]

@oliviertassinari
It may sound weird but having the DURATION 550ms (plus DELAY_RIPPLE 80ms) on mobile devices feels that the app is running slow.

[oliviertassinari]

@arsen What would be a better value? Would it make sense to apply such value by default?

[oliviertassinari]

The current implementation of the ripple doesn't seem aligned anymore with how Google implements it on its product, or on the Material Design spec. Nowadays, the ripple seems to start with a wider surface and to move faster. I have added a screen recorder on the issue's description to better compare the "feeling".