From 57a5e79b93e283ae1cfa02cdacdfca06f32de01c Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Thu, 24 Aug 2023 22:58:28 +0800 Subject: [PATCH 1/4] Add tests --- packages/mui-system/src/Box/Box.test.js | 25 ++++++++++++++++++++++++- packages/mui-system/src/sizing.test.js | 23 +++++++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/packages/mui-system/src/Box/Box.test.js b/packages/mui-system/src/Box/Box.test.js index 0e0ada802a59b0..d356c558663286 100644 --- a/packages/mui-system/src/Box/Box.test.js +++ b/packages/mui-system/src/Box/Box.test.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { createRenderer, describeConformance } from 'test/utils'; -import { Box } from '@mui/system'; +import { Box, createTheme, ThemeProvider } from '@mui/system'; describe('', () => { const { render } = createRenderer(); @@ -279,4 +279,27 @@ describe('', () => { expect(getByTestId('regular-box')).to.have.class('MuiBox-root'); }); + + describe('prop: maxWidth', () => { + it('should resolve breakpoints with custom units', () => { + const theme = createTheme({ + breakpoints: { + unit: 'rem', + values: { + xs: 10, + }, + }, + }); + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + maxWidth: '10rem', + }); + }); + }); }); diff --git a/packages/mui-system/src/sizing.test.js b/packages/mui-system/src/sizing.test.js index 0b5d322043d2ad..fbab61d41fde36 100644 --- a/packages/mui-system/src/sizing.test.js +++ b/packages/mui-system/src/sizing.test.js @@ -1,4 +1,5 @@ import { expect } from 'chai'; +import { createTheme } from '@mui/system'; import sizing from './sizing'; describe('sizing', () => { @@ -19,4 +20,26 @@ describe('sizing', () => { maxWidth: 0, }); }); + + describe('maxWidth', () => { + it('should work with custom units', () => { + const theme = createTheme({ + breakpoints: { + unit: 'rem', + values: { + xs: 10, + }, + }, + }); + + const output = sizing({ + maxWidth: 'xs', + theme, + }); + + expect(output).to.deep.equal({ + maxWidth: '10rem', + }); + }); + }); }); From 8a4c1eeafae3737eb06a9caaeb02a97fb5cc3693 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Thu, 24 Aug 2023 23:15:31 +0800 Subject: [PATCH 2/4] maxWidth util should check breakpoint unit --- packages/mui-system/src/sizing.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing.js index 0454dfb1702845..da7fe67601e517 100644 --- a/packages/mui-system/src/sizing.js +++ b/packages/mui-system/src/sizing.js @@ -16,8 +16,12 @@ export const maxWidth = (props) => { const styleFromPropValue = (propValue) => { const breakpoint = props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue]; + return { - maxWidth: breakpoint || sizingTransform(propValue), + maxWidth: + (props.theme?.breakpoints?.unit === 'px' + ? breakpoint + : `${breakpoint}${props.theme.breakpoints.unit}`) || sizingTransform(propValue), }; }; return handleBreakpoints(props, props.maxWidth, styleFromPropValue); From 35b194640f4633087964026a18d053204e909df5 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Fri, 25 Aug 2023 00:21:31 +0800 Subject: [PATCH 3/4] Improve readability --- packages/mui-system/src/sizing.js | 17 +++++++++++++---- .../src/styleFunctionSx/styleFunctionSx.test.js | 2 +- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing.js index da7fe67601e517..096a5bf9f85256 100644 --- a/packages/mui-system/src/sizing.js +++ b/packages/mui-system/src/sizing.js @@ -17,11 +17,20 @@ export const maxWidth = (props) => { const breakpoint = props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue]; + if (!breakpoint) { + return { + maxWidth: sizingTransform(propValue), + }; + } + + if (props.theme?.breakpoints?.unit !== 'px') { + return { + maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`, + }; + } + return { - maxWidth: - (props.theme?.breakpoints?.unit === 'px' - ? breakpoint - : `${breakpoint}${props.theme.breakpoints.unit}`) || sizingTransform(propValue), + maxWidth: breakpoint, }; }; return handleBreakpoints(props, props.maxWidth, styleFromPropValue); diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js index 376cc2de5689b1..ba0d89c8fdb8f6 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js @@ -20,11 +20,11 @@ describe('styleFunctionSx', () => { breakpoints: { keys: ['xs', 'sm', 'md', 'lg', 'xl'], values: breakpointsValues, + unit: 'px', up: (key) => { return `@media (min-width:${breakpointsValues[key]}px)`; }, }, - unit: 'px', palette: { primary: { main: 'rgb(0, 0, 255)', From efd64ba1f064033ca8396cc91826eee26bf79e22 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Fri, 25 Aug 2023 00:34:16 +0800 Subject: [PATCH 4/4] Skip Box test in JSDom --- packages/mui-system/src/Box/Box.test.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/mui-system/src/Box/Box.test.js b/packages/mui-system/src/Box/Box.test.js index d356c558663286..0b1808815bd89e 100644 --- a/packages/mui-system/src/Box/Box.test.js +++ b/packages/mui-system/src/Box/Box.test.js @@ -281,7 +281,13 @@ describe('', () => { }); describe('prop: maxWidth', () => { - it('should resolve breakpoints with custom units', () => { + it('should resolve breakpoints with custom units', function test() { + const isJSDOM = /jsdom/.test(window.navigator.userAgent); + + if (isJSDOM) { + this.skip(); + } + const theme = createTheme({ breakpoints: { unit: 'rem', @@ -293,12 +299,13 @@ describe('', () => { const { container } = render( - + , , ); expect(container.firstChild).toHaveComputedStyle({ - maxWidth: '10rem', + // 10rem x 16px = 160px + maxWidth: '160px', }); }); });