From 1f2c5f2bb5861fa44fc8551e960a97f49cf0d354 Mon Sep 17 00:00:00 2001 From: gitstart Date: Tue, 10 Oct 2023 16:33:39 +0000 Subject: [PATCH 1/4] fix: add missing override styles to checkbox and radio Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com> --- packages/mui-material/src/Checkbox/Checkbox.js | 1 + packages/mui-material/src/Radio/Radio.js | 6 +++++- 2 files changed, 6 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/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js index 733f88cd8e92a5..7e72457dde6115 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, + styles[`size${capitalize(ownerState.size)}`], + styles[`color${capitalize(ownerState.color)}`], + ]; }, })(({ theme, ownerState }) => ({ color: (theme.vars || theme).palette.text.secondary, From 132d7fb42dbaecb9019458361f994b63e1ae9d31 Mon Sep 17 00:00:00 2001 From: gitstart Date: Thu, 12 Oct 2023 14:10:40 +0000 Subject: [PATCH 2/4] test: update tests for checkbox and radio components Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com> --- .../src/Checkbox/Checkbox.test.js | 43 +++++++++++++++++++ packages/mui-material/src/Radio/Radio.test.js | 43 +++++++++++++++++++ 2 files changed, 86 insertions(+) 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('', () => { const { render } = createRenderer(); @@ -92,6 +93,48 @@ describe('', () => { }); }); + 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( + + + + , + ); + + 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.test.js b/packages/mui-material/src/Radio/Radio.test.js index c10574bf33bf53..d601e392a82cc4 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('', () => { const { render } = createRenderer(); @@ -94,4 +95,46 @@ describe('', () => { }); }); }); + + 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: { + sizeMedium: { + marginTop: 40, + paddingLeft: 20, + }, + sizeSmall: { + marginLeft: -40, + paddingRight: 2, + }, + }, + }, + }, + }); + + const { container } = render( + + + + , + ); + + expect(container.querySelector(`.${classes.root}.mediumRadio`)).toHaveComputedStyle({ + marginTop: '40px', + paddingLeft: '20px', + }); + + expect(container.querySelector(`.${classes.sizeSmall}`)).toHaveComputedStyle({ + marginLeft: '-40px', + paddingRight: '2px', + }); + }); + }); }); From 2c6868a3fb0e0772c7ed169095909f55cab5b2c0 Mon Sep 17 00:00:00 2001 From: gitstart Date: Fri, 20 Oct 2023 09:00:06 +0000 Subject: [PATCH 3/4] address review comments Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com> --- packages/mui-material/src/Radio/Radio.js | 2 +- packages/mui-material/src/Radio/Radio.test.js | 10 ---------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js index 7e72457dde6115..6b3549d1fbc7df 100644 --- a/packages/mui-material/src/Radio/Radio.js +++ b/packages/mui-material/src/Radio/Radio.js @@ -36,7 +36,7 @@ const RadioRoot = styled(SwitchBase, { return [ styles.root, - styles[`size${capitalize(ownerState.size)}`], + styles[ownerState.size !== 'medium' && `size${capitalize(ownerState.size)}`], styles[`color${capitalize(ownerState.color)}`], ]; }, diff --git a/packages/mui-material/src/Radio/Radio.test.js b/packages/mui-material/src/Radio/Radio.test.js index d601e392a82cc4..36ddc5c2e6810d 100644 --- a/packages/mui-material/src/Radio/Radio.test.js +++ b/packages/mui-material/src/Radio/Radio.test.js @@ -106,10 +106,6 @@ describe('', () => { components: { MuiRadio: { styleOverrides: { - sizeMedium: { - marginTop: 40, - paddingLeft: 20, - }, sizeSmall: { marginLeft: -40, paddingRight: 2, @@ -121,16 +117,10 @@ describe('', () => { const { container } = render( - , ); - expect(container.querySelector(`.${classes.root}.mediumRadio`)).toHaveComputedStyle({ - marginTop: '40px', - paddingLeft: '20px', - }); - expect(container.querySelector(`.${classes.sizeSmall}`)).toHaveComputedStyle({ marginLeft: '-40px', paddingRight: '2px', From 9c22d549bb9d94be5e78e706b1344aa052ffde03 Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Fri, 20 Oct 2023 19:20:50 +0530 Subject: [PATCH 4/4] Update packages/mui-material/src/Radio/Radio.js Signed-off-by: Zeeshan Tamboli --- packages/mui-material/src/Radio/Radio.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js index 6b3549d1fbc7df..cc55b42392b224 100644 --- a/packages/mui-material/src/Radio/Radio.js +++ b/packages/mui-material/src/Radio/Radio.js @@ -36,7 +36,7 @@ const RadioRoot = styled(SwitchBase, { return [ styles.root, - styles[ownerState.size !== 'medium' && `size${capitalize(ownerState.size)}`], + ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], styles[`color${capitalize(ownerState.color)}`], ]; },