material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

[ButtonBase] Fix focus ripple

Open alisasanib opened this issue 3 years ago • 1 comments

Fixes #33303

Problem: The focus ripple doesn't fit the whole width and height of the button

Solution: Based on the explanations this comment, the solution is the removal of this behavior as it's not in accordance with the latest Material Design. Pulsate in the ButtonBase component mainly controlled this effect, so I updated the code and tests based on this removal. Also, the way the width and height of the ripple were calculated caused additional paddings. I proposed to set it equal to the max of width and height.

The pulsate was shared with different components such as tabs, button, and fab.

Button demo in the doc: https://deploy-preview-34258--material-ui.netlify.app/material-ui/react-button/ Fab demo in the doc: https://deploy-preview-34258--material-ui.netlify.app/material-ui/react-floating-action-button/ Tabs demo in the doc: https://deploy-preview-34258--material-ui.netlify.app/material-ui/react-tabs/

alisasanib avatar Sep 10 '22 17:09 alisasanib

Details of bundle changes

@material-ui/core: parsed: -0.15% :heart_eyes:, gzip: -0.16% :heart_eyes: @material-ui/lab: parsed: -0.33% :heart_eyes:, gzip: -0.27% :heart_eyes: @mui/material-next: parsed: -0.34% :heart_eyes:, gzip: +0.21%

Generated by :no_entry_sign: dangerJS against 0911becc37dcecba62e4244b790d86f7f92f977a

mui-bot avatar Sep 10 '22 17:09 mui-bot