[material-ui][IconButton] Fix disableRipple behaviour when disableRipple is set in MuiButtonBase theme

[sai6855]

This PR does following things

1. revert logic in https://github.com/mui/material-ui/pull/43271
2. retain tests from https://github.com/mui/material-ui/pull/43271
3. Add tests and logic for https://github.com/mui/material-ui/issues/43617

closes https://github.com/mui/material-ui/issues/43617

check https://github.com/mui/material-ui/issues/43617#issuecomment-2342590811 for more context

before: https://codesandbox.io/embed/p2smlj?module=/src/Demo.tsx

after: https://codesandbox.io/embed/g7kd38?module=/src/Demo.tsx

• [ ] I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-43714--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad) Details of bundle changes

Generated by :no_entry_sign: dangerJS against fcb49fa4950f530a28b46f6a43a576630bd727ae

[sai6855]

(I have reverted old PR logic and updated new logic in same PR, let me know if this has to be split in seperate PR's)

[DiegoAndai]

Hey @sai6855, thanks for working on this. In the "Before" demo, the hover style is broken:

https://github.com/user-attachments/assets/df494061-15bf-4cd1-a8f6-03f9e2f10fe2

I don't know why https://github.com/mui/material-ui/pull/43271 tests are passing 🤔

[sai6855]

@DiegoAndai I'm not sure why before and after sandboxes isn't getting updated code, meanwhile can you paste below code in these following demos to test the fix

before: https://mui.com/material-ui/react-button/#icon-button after: https://deploy-preview-43714--material-ui.netlify.app/material-ui/react-button/#icon-button

import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import DeleteIcon from '@mui/icons-material/Delete';
import AlarmIcon from '@mui/icons-material/Alarm';
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
import { ThemeProvider, createTheme } from '@mui/material/styles';

export default function IconButtons() {
  return (
    <Stack direction="row" spacing={1}>

      <ThemeProvider
        theme={createTheme({
          components: {
            MuiButtonBase: {
              defaultProps: {
                disableRipple: true,
              },
            },
          },
        })}
      >
      <IconButton aria-label="delete">
        <DeleteIcon />
      </IconButton>

      </ThemeProvider>
     
    </Stack>
  );
}

[sai6855]

the hover style is broken

Hmm, what do you mean by this 🤔 ? i tried clicking on icons in this demo, everything seems to be fine

https://github.com/user-attachments/assets/c15443f8-7bcc-4f7c-bb5a-61a1cd874882

[DiegoAndai]

@sai6855 I found the issue and committed it: https://github.com/mui/material-ui/pull/43714/commits/34eeaec026659d40d3bfcd6bb968a4b028177a91. I think this covers it.

Let's wait for @siriwatknp's review to merge this.

[siriwatknp]

Thanks for working on this @sai6855