[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 · Oct 20, 2023 · 8bae182 · 8bae182
1 parent 9b74132
commit 8bae182
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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',
+      });
+    });
+  });
 });