Open sirkrisp opened 1 year ago
sirkrisp
commented
1 year ago Assuming the same ripple effect component is used everywhere in the library, it seems it is not too much effort to solve the problem and I would also be willing to contribute with a little bit of guidance
mj12albert
commented
1 year ago Personally I find the ionic ripple effect is too fast when it's on a button that is not full-width.
I think material-web ones have the right speed and feel: https://material-web.dev/components/button/
But maybe we could also expose the animation duration/delay as props: https://github.com/mui/material-ui/blob/master/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx#L13-L14 🤔
mnajdova
commented
1 year ago But maybe we could also expose the animation duration/delay as props: https://github.com/mui/material-ui/blob/master/packages/mui-material-next/src/ButtonBase/TouchRipple.tsx#L13-L14 🤔
Making this configurable would be a good feature 👍 . I would even say they should be theme-level configs so that it is configured and work for all components consistently.
Duplicates
Latest version
Steps to reproduce 🕹
The ripple effect feels quite unresponsive, especially on mobile touch devices.
Ionic has a great implementation of the ripple effect. Try to click on the button of Ionic and see the difference - it feels like native:
https://ionicframework.com/docs/ja/v6/api/button
Then compare that ripple effect with MUI:
https://mui.com/material-ui/react-button/
Notice how short clicks barely show any ripple effect in MUI. This effect is even worse when using touch.
Current behavior 😯
Ripple effect is too slow, feels unresponsive
Expected behavior 🤔
Should behave like in Ionic:
https://ionicframework.com/docs/ja/v6/api/button
Context 🔦
Planning to use MUI for a mobile optimised webpage, but due to the poor ripple effect implementation the UI feels unresponsive
Your environment 🌎
``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ``` System: OS: macOS 13.0 Binaries: Node: 18.18.2 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.8.1 - /usr/local/bin/npm Browsers: Chrome: 118.0.5993.88 Edge: Not Found Safari: 16.1 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.20 @mui/core-downloads-tracker: 5.14.14 @mui/icons-material: ^5.14.14 => 5.14.14 @mui/material: ^5.14.14 => 5.14.14 @mui/private-theming: 5.14.14 @mui/styled-engine: 5.14.14 @mui/styles: ^5.14.14 => 5.14.14 @mui/system: 5.14.14 @mui/types: 7.2.6 @mui/utils: 5.14.14 @types/react: 18.2.0 => 18.2.0 react: 18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.2.2npx @mui/envinfo