From 8bae182e07c1ab591c0382c6abb51176f89e5e40 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Fri, 20 Oct 2023 15:21:51 +0100
Subject: [PATCH] [material-ui][Checkbox][Radio] Fix theme style overrides not
 working for different sizes (#39377)

Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
---
 .../mui-material/src/Checkbox/Checkbox.js     |  1 +
 .../src/Checkbox/Checkbox.test.js             | 43 +++++++++++++++++++
 packages/mui-material/src/Radio/Radio.js      |  6 ++-
 packages/mui-material/src/Radio/Radio.test.js | 33 ++++++++++++++
 4 files changed, 82 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
index 3b0e0bf5265c06..e4fee8b2b82a37 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -44,6 +44,7 @@ const CheckboxRoot = styled(SwitchBase, {
     return [
       styles.root,
       ownerState.indeterminate && styles.indeterminate,
+      styles[`size${capitalize(ownerState.size)}`],
       ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`],
     ];
   },
diff --git a/packages/mui-material/src/Checkbox/Checkbox.test.js b/packages/mui-material/src/Checkbox/Checkbox.test.js
index 900c02f5879e62..3a8c9764e09af3 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.test.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.test.js
@@ -5,6 +5,7 @@ import { describeConformance, act, createRenderer } from '@mui-internal/test-uti
 import Checkbox, { checkboxClasses as classes } from '@mui/material/Checkbox';
 import FormControl from '@mui/material/FormControl';
 import ButtonBase from '@mui/material/ButtonBase';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 describe('<Checkbox />', () => {
   const { render } = createRenderer();
@@ -92,6 +93,48 @@ describe('<Checkbox />', () => {
     });
   });
 
+  describe('theme: customization', () => {
+    it('should be customizable in the theme using the size prop.', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const theme = createTheme({
+        components: {
+          MuiCheckbox: {
+            styleOverrides: {
+              sizeMedium: {
+                marginTop: 40,
+                paddingLeft: 20,
+              },
+              sizeSmall: {
+                marginLeft: -40,
+                paddingRight: 2,
+              },
+            },
+          },
+        },
+      });
+
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Checkbox />
+          <Checkbox size="small" />
+        </ThemeProvider>,
+      );
+
+      expect(container.querySelector(`.${classes.sizeMedium}`)).toHaveComputedStyle({
+        marginTop: '40px',
+        paddingLeft: '20px',
+      });
+
+      expect(container.querySelector(`.${classes.sizeSmall}`)).toHaveComputedStyle({
+        marginLeft: '-40px',
+        paddingRight: '2px',
+      });
+    });
+  });
+
   describe('with FormControl', () => {
     describe('enabled', () => {
       it('should not have the disabled class', () => {
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
index 733f88cd8e92a5..cc55b42392b224 100644
--- a/packages/mui-material/src/Radio/Radio.js
+++ b/packages/mui-material/src/Radio/Radio.js
@@ -34,7 +34,11 @@ const RadioRoot = styled(SwitchBase, {
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
 
-    return [styles.root, styles[`color${capitalize(ownerState.color)}`]];
+    return [
+      styles.root,
+      ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`],
+      styles[`color${capitalize(ownerState.color)}`],
+    ];
   },
 })(({ theme, ownerState }) => ({
   color: (theme.vars || theme).palette.text.secondary,
diff --git a/packages/mui-material/src/Radio/Radio.test.js b/packages/mui-material/src/Radio/Radio.test.js
index c10574bf33bf53..36ddc5c2e6810d 100644
--- a/packages/mui-material/src/Radio/Radio.test.js
+++ b/packages/mui-material/src/Radio/Radio.test.js
@@ -4,6 +4,7 @@ import { describeConformance, createRenderer } from '@mui-internal/test-utils';
 import Radio, { radioClasses as classes } from '@mui/material/Radio';
 import FormControl from '@mui/material/FormControl';
 import ButtonBase from '@mui/material/ButtonBase';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 describe('<Radio />', () => {
   const { render } = createRenderer();
@@ -94,4 +95,36 @@ describe('<Radio />', () => {
       });
     });
   });
+
+  describe('theme: customization', () => {
+    it('should be customizable in the theme using the size prop.', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const theme = createTheme({
+        components: {
+          MuiRadio: {
+            styleOverrides: {
+              sizeSmall: {
+                marginLeft: -40,
+                paddingRight: 2,
+              },
+            },
+          },
+        },
+      });
+
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Radio size="small" />
+        </ThemeProvider>,
+      );
+
+      expect(container.querySelector(`.${classes.sizeSmall}`)).toHaveComputedStyle({
+        marginLeft: '-40px',
+        paddingRight: '2px',
+      });
+    });
+  });
 });