From 75ab9056b3ee34b9e81135f3fe9b8d11eeb86225 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Aug 2024 15:26:01 +0700 Subject: [PATCH 1/5] use the custom spacing function --- .../src/styles/createThemeWithVars.js | 2 +- .../src/styles/extendTheme.test.js | 24 +++++++++++++++++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js index b8adb2deefb75e..cd72c464595b1c 100644 --- a/packages/mui-material/src/styles/createThemeWithVars.js +++ b/packages/mui-material/src/styles/createThemeWithVars.js @@ -68,7 +68,7 @@ function getSpacingVal(spacingInput) { return spacingInput; } if (typeof spacingInput === 'function') { - return getSpacingVal(spacingInput(1)); + return spacingInput; } if (Array.isArray(spacingInput)) { return spacingInput; diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js index 00bd6111455fce..8ddd3be708cc38 100644 --- a/packages/mui-material/src/styles/extendTheme.test.js +++ b/packages/mui-material/src/styles/extendTheme.test.js @@ -495,8 +495,28 @@ describe('extendTheme', () => { it('can be customized as a function', () => { const theme = extendTheme({ spacing: (factor) => `${0.25 * factor}rem` }); - expect(theme.vars.spacing).to.deep.equal('var(--mui-spacing, 0.25rem)'); - expect(theme.spacing(2)).to.equal('calc(2 * var(--mui-spacing, 0.25rem))'); + expect('spacing' in theme.vars).to.equal(false); + expect(theme.spacing(2)).to.equal('0.5rem'); + }); + + it('can be customized as a function2', () => { + const theme = extendTheme({ + spacing: (val) => { + const base = 8; + + if (val === 'xs') { + return `100px`; + } + + if (typeof val === 'string') { + return val; + } + + return `${Number(val) * base}px`; + }, + }); + expect('spacing' in theme.vars).to.equal(false); + expect(theme.spacing('xs')).to.equal('100px'); }); }); From 14827c485fd5c2f1b464e2cca826458108bb2da6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Aug 2024 15:35:58 +0700 Subject: [PATCH 2/5] fix test name --- packages/mui-material/src/styles/extendTheme.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js index 8ddd3be708cc38..71365d0447cb33 100644 --- a/packages/mui-material/src/styles/extendTheme.test.js +++ b/packages/mui-material/src/styles/extendTheme.test.js @@ -499,7 +499,7 @@ describe('extendTheme', () => { expect(theme.spacing(2)).to.equal('0.5rem'); }); - it('can be customized as a function2', () => { + it('a custom function should not be altered', () => { const theme = extendTheme({ spacing: (val) => { const base = 8; From 613b1a80f0e8306632384637abffadeae3ae595a Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 21 Aug 2024 21:52:51 +0700 Subject: [PATCH 3/5] Update packages/mui-material/src/styles/extendTheme.test.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Aarón García Hervás Signed-off-by: Siriwat K --- .../mui-material/src/styles/extendTheme.test.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js index 71365d0447cb33..bc49fe4a6bf626 100644 --- a/packages/mui-material/src/styles/extendTheme.test.js +++ b/packages/mui-material/src/styles/extendTheme.test.js @@ -501,19 +501,7 @@ describe('extendTheme', () => { it('a custom function should not be altered', () => { const theme = extendTheme({ - spacing: (val) => { - const base = 8; - - if (val === 'xs') { - return `100px`; - } - - if (typeof val === 'string') { - return val; - } - - return `${Number(val) * base}px`; - }, + spacing: (val) => val === 'xs' ? '100px' : val, }); expect('spacing' in theme.vars).to.equal(false); expect(theme.spacing('xs')).to.equal('100px'); From 5653111fe9d533f2633f759453500e9b3b651d21 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 22 Aug 2024 08:09:07 +0700 Subject: [PATCH 4/5] prettier --- packages/mui-material/src/styles/extendTheme.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js index bc49fe4a6bf626..94ca22576a7cb0 100644 --- a/packages/mui-material/src/styles/extendTheme.test.js +++ b/packages/mui-material/src/styles/extendTheme.test.js @@ -501,7 +501,7 @@ describe('extendTheme', () => { it('a custom function should not be altered', () => { const theme = extendTheme({ - spacing: (val) => val === 'xs' ? '100px' : val, + spacing: (val) => (val === 'xs' ? '100px' : val), }); expect('spacing' in theme.vars).to.equal(false); expect(theme.spacing('xs')).to.equal('100px'); From 17784e93761be6fe2754198436e086d8c574ead0 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 22 Aug 2024 08:15:51 +0700 Subject: [PATCH 5/5] refactor --- .../mui-material/src/styles/createThemeWithVars.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js index cd72c464595b1c..026f1b9e6ede5d 100644 --- a/packages/mui-material/src/styles/createThemeWithVars.js +++ b/packages/mui-material/src/styles/createThemeWithVars.js @@ -64,13 +64,11 @@ function getSpacingVal(spacingInput) { if (typeof spacingInput === 'number') { return `${spacingInput}px`; } - if (typeof spacingInput === 'string') { - return spacingInput; - } - if (typeof spacingInput === 'function') { - return spacingInput; - } - if (Array.isArray(spacingInput)) { + if ( + typeof spacingInput === 'string' || + typeof spacingInput === 'function' || + Array.isArray(spacingInput) + ) { return spacingInput; } return '8px';