[Checkbox][Radio] Respect global disableRipple from MuiButtonBase defaultProps (#48795)

Author: siriwatknp

packages/mui-material/src/Checkbox/Checkbox.js

@@ -162,7 +162,9 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
       checkedIcon: React.cloneElement(indeterminateIcon, {
         fontSize: indeterminateIcon.props.fontSize ?? size,
       }),
-      disableRipple,
+      // Forward the raw prop so an unset value stays `undefined` and ButtonBase resolves its
+      // own default — letting a global `MuiButtonBase.defaultProps.disableRipple` apply here.
+      disableRipple: props.disableRipple,
       slots,
       slotProps: {
         input: mergeSlotProps(

packages/mui-material/src/Checkbox/Checkbox.test.js

@@ -254,4 +254,34 @@ describe('<Checkbox />', () => {
     await ripple.startTouch(checkbox);
     expect(checkbox.querySelector('.touch-ripple')).to.equal(null);
   });
+
+  it('should respect a global disableRipple from MuiButtonBase defaultProps', async () => {
+    const theme = createTheme({
+      components: { MuiButtonBase: { defaultProps: { disableRipple: true } } },
+    });
+    render(
+      <ThemeProvider theme={theme}>
+        <Checkbox TouchRippleProps={{ className: 'touch-ripple' }} />
+      </ThemeProvider>,
+    );
+
+    const checkbox = screen.getByRole('checkbox').parentElement;
+    await ripple.startTouch(checkbox);
+    expect(checkbox.querySelector('.touch-ripple')).to.equal(null);
+  });
+
+  it('should let an explicit disableRipple={false} override a global disableRipple', async () => {
+    const theme = createTheme({
+      components: { MuiButtonBase: { defaultProps: { disableRipple: true } } },
+    });
+    render(
+      <ThemeProvider theme={theme}>
+        <Checkbox disableRipple={false} TouchRippleProps={{ className: 'touch-ripple' }} />
+      </ThemeProvider>,
+    );
+
+    const checkbox = screen.getByRole('checkbox').parentElement;
+    await ripple.startTouch(checkbox);
+    expect(checkbox.querySelector('.touch-ripple')).not.to.equal(null);
+  });
 });

packages/mui-material/src/Radio/Radio.js

@@ -195,6 +195,9 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
       disabled,
       name,
       checked,
+      // Forward the raw prop so an unset value stays `undefined` and ButtonBase resolves its
+      // own default — letting a global `MuiButtonBase.defaultProps.disableRipple` apply here.
+      disableRipple: props.disableRipple,
       slots,
       slotProps: {
         // Do not forward `slotProps.root` again because it's already handled by the `RootSlot` in this file.

packages/mui-material/src/Radio/Radio.test.js

@@ -6,6 +6,7 @@ import ButtonBase from '@mui/material/ButtonBase';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import switchBaseClasses from '../internal/switchBaseClasses';
 import describeConformance from '../../test/describeConformance';
+import * as ripple from '../../test/ripple';
 
 describe('<Radio />', () => {
   const { render } = createRenderer();
@@ -146,4 +147,52 @@ describe('<Radio />', () => {
 
     expect(screen.queryByRole('radio', { name: 'A' })).not.to.equal(null);
   });
+
+  describe('prop: disableRipple', () => {
+    it('should have a ripple by default', async () => {
+      render(<Radio TouchRippleProps={{ className: 'touch-ripple' }} />);
+
+      const radio = screen.getByRole('radio').parentElement;
+      await ripple.startTouch(radio);
+      expect(radio.querySelector('.touch-ripple')).not.to.equal(null);
+    });
+
+    it('should not have a ripple when disableRipple is set', async () => {
+      render(<Radio disableRipple TouchRippleProps={{ className: 'touch-ripple' }} />);
+
+      const radio = screen.getByRole('radio').parentElement;
+      await ripple.startTouch(radio);
+      expect(radio.querySelector('.touch-ripple')).to.equal(null);
+    });
+
+    it('should respect a global disableRipple from MuiButtonBase defaultProps', async () => {
+      const theme = createTheme({
+        components: { MuiButtonBase: { defaultProps: { disableRipple: true } } },
+      });
+      render(
+        <ThemeProvider theme={theme}>
+          <Radio TouchRippleProps={{ className: 'touch-ripple' }} />
+        </ThemeProvider>,
+      );
+
+      const radio = screen.getByRole('radio').parentElement;
+      await ripple.startTouch(radio);
+      expect(radio.querySelector('.touch-ripple')).to.equal(null);
+    });
+
+    it('should let an explicit disableRipple={false} override a global disableRipple', async () => {
+      const theme = createTheme({
+        components: { MuiButtonBase: { defaultProps: { disableRipple: true } } },
+      });
+      render(
+        <ThemeProvider theme={theme}>
+          <Radio disableRipple={false} TouchRippleProps={{ className: 'touch-ripple' }} />
+        </ThemeProvider>,
+      );
+
+      const radio = screen.getByRole('radio').parentElement;
+      await ripple.startTouch(radio);
+      expect(radio.querySelector('.touch-ripple')).not.to.equal(null);
+    });
+  });
 });