From f0835e1dfed48494a5211b7c48ec73c793802373 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 12:46:37 +0100 Subject: [PATCH 1/7] [Stack] Ensure that 'marginundefined' doesn't occur --- packages/mui-material/src/Stack/Stack.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js index bbb0122f36ebf2..bc319556a46dc0 100644 --- a/packages/mui-material/src/Stack/Stack.js +++ b/packages/mui-material/src/Stack/Stack.js @@ -79,6 +79,17 @@ export const style = ({ ownerState, theme }) => { base, }); + if (typeof directionValues === 'object') { + Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => { + const directionValue = directionValues[breakpoint]; + if (!directionValue) { + const previousDirectionValue = + index > 0 ? directionValues[breakpoints[index - 1]] : 'column'; + directionValues[breakpoint] = previousDirectionValue; + } + }); + } + const styleFromPropValue = (propValue, breakpoint) => { return { '& > :not(style) + :not(style)': { @@ -91,6 +102,7 @@ export const style = ({ ownerState, theme }) => { }; styles = deepmerge(styles, handleBreakpoints({ theme }, spacingValues, styleFromPropValue)); } + console.log(styles); return styles; }; From 3baf96f7c004624696f4ebb7c40e46cc94ccbaa5 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 12:46:42 +0100 Subject: [PATCH 2/7] Add test --- packages/mui-material/src/Stack/Stack.test.js | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js index ae8c11db7b1b2e..428cb65fecb43c 100644 --- a/packages/mui-material/src/Stack/Stack.test.js +++ b/packages/mui-material/src/Stack/Stack.test.js @@ -320,5 +320,44 @@ describe('', () => { flexDirection: 'column', }); }); + + it('handles responsive `direction` prop when it does not start with the smallest breakpoint', () => { + expect( + style({ + ownerState: { + direction: { lg: 'row' }, + spacing: { xs: 0, md: 2, xl: 4 }, + }, + theme, + }), + ).to.deep.equal({ + [`@media (min-width:${defaultTheme.breakpoints.values.xs}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginTop: '0px', + }, + }, + [`@media (min-width:${defaultTheme.breakpoints.values.md}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginTop: '16px', + }, + }, + [`@media (min-width:${defaultTheme.breakpoints.values.lg}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginLeft: '16px', + }, + flexDirection: 'row', + }, + [`@media (min-width:${defaultTheme.breakpoints.values.xl}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginLeft: '32px', + }, + }, + display: 'flex', + }); + }); }); }); From 48082068eded5f2b178801854bc4172d22f95ed2 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 13:00:02 +0100 Subject: [PATCH 3/7] Remove log --- packages/mui-material/src/Stack/Stack.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js index bc319556a46dc0..ba8a53171e6d64 100644 --- a/packages/mui-material/src/Stack/Stack.js +++ b/packages/mui-material/src/Stack/Stack.js @@ -102,7 +102,6 @@ export const style = ({ ownerState, theme }) => { }; styles = deepmerge(styles, handleBreakpoints({ theme }, spacingValues, styleFromPropValue)); } - console.log(styles); return styles; }; From 6d0edfb0cad1f85fb848fdf2f5c2ef6501b27d15 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 13:28:28 +0100 Subject: [PATCH 4/7] Place test under correction 'describe' --- packages/mui-material/src/Stack/Stack.test.js | 78 +++++++++---------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js index 428cb65fecb43c..e91be6a6ea59af 100644 --- a/packages/mui-material/src/Stack/Stack.test.js +++ b/packages/mui-material/src/Stack/Stack.test.js @@ -221,6 +221,45 @@ describe('', () => { display: 'flex', }); }); + + it('handles responsive `direction` prop when it does not start with the smallest breakpoint', () => { + expect( + style({ + ownerState: { + direction: { lg: 'row' }, + spacing: { xs: 0, md: 2, xl: 4 }, + }, + theme, + }), + ).to.deep.equal({ + [`@media (min-width:${defaultTheme.breakpoints.values.xs}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginTop: '0px', + }, + }, + [`@media (min-width:${defaultTheme.breakpoints.values.md}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginTop: '16px', + }, + }, + [`@media (min-width:${defaultTheme.breakpoints.values.lg}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginLeft: '16px', + }, + flexDirection: 'row', + }, + [`@media (min-width:${defaultTheme.breakpoints.values.xl}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginLeft: '32px', + }, + }, + display: 'flex', + }); + }); }); describe('prop: spacing', () => { @@ -320,44 +359,5 @@ describe('', () => { flexDirection: 'column', }); }); - - it('handles responsive `direction` prop when it does not start with the smallest breakpoint', () => { - expect( - style({ - ownerState: { - direction: { lg: 'row' }, - spacing: { xs: 0, md: 2, xl: 4 }, - }, - theme, - }), - ).to.deep.equal({ - [`@media (min-width:${defaultTheme.breakpoints.values.xs}px)`]: { - '& > :not(style) + :not(style)': { - margin: 0, - marginTop: '0px', - }, - }, - [`@media (min-width:${defaultTheme.breakpoints.values.md}px)`]: { - '& > :not(style) + :not(style)': { - margin: 0, - marginTop: '16px', - }, - }, - [`@media (min-width:${defaultTheme.breakpoints.values.lg}px)`]: { - '& > :not(style) + :not(style)': { - margin: 0, - marginLeft: '16px', - }, - flexDirection: 'row', - }, - [`@media (min-width:${defaultTheme.breakpoints.values.xl}px)`]: { - '& > :not(style) + :not(style)': { - margin: 0, - marginLeft: '32px', - }, - }, - display: 'flex', - }); - }); }); }); From 1da1ffbb091898a7df1123e54f549f3309789d07 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 13:53:40 +0100 Subject: [PATCH 5/7] Better test name --- packages/mui-material/src/Stack/Stack.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js index e91be6a6ea59af..f7e97dc702e848 100644 --- a/packages/mui-material/src/Stack/Stack.test.js +++ b/packages/mui-material/src/Stack/Stack.test.js @@ -222,7 +222,7 @@ describe('', () => { }); }); - it('handles responsive `direction` prop when it does not start with the smallest breakpoint', () => { + it('should place correct margin direction even though breakpoints are not fully provided', () => { expect( style({ ownerState: { From f4d3d6f268dc2d077565504fc88958a08439daef Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 19 Jul 2022 11:11:00 +0100 Subject: [PATCH 6/7] Add one more test with multiple breakpoint values passed to direction prop --- packages/mui-material/src/Stack/Stack.test.js | 46 ++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js index f7e97dc702e848..4aff95e028b591 100644 --- a/packages/mui-material/src/Stack/Stack.test.js +++ b/packages/mui-material/src/Stack/Stack.test.js @@ -222,7 +222,7 @@ describe('', () => { }); }); - it('should place correct margin direction even though breakpoints are not fully provided', () => { + it.only('should place correct margin direction even though breakpoints are not fully provided', () => { expect( style({ ownerState: { @@ -259,6 +259,50 @@ describe('', () => { }, display: 'flex', }); + + expect( + style({ + ownerState: { + direction: { lg: 'column', sm: 'row' }, + spacing: { md: 2, xl: 4, xs: 0 }, + }, + theme, + }), + ).to.deep.equal({ + [`@media (min-width:${defaultTheme.breakpoints.values.xs}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginTop: '0px', + }, + }, + [`@media (min-width:${defaultTheme.breakpoints.values.sm}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginLeft: '0px', + }, + flexDirection: 'row', + }, + [`@media (min-width:${defaultTheme.breakpoints.values.md}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginLeft: '16px', + }, + }, + [`@media (min-width:${defaultTheme.breakpoints.values.lg}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginTop: '16px', + }, + flexDirection: 'column', + }, + [`@media (min-width:${defaultTheme.breakpoints.values.xl}px)`]: { + '& > :not(style) + :not(style)': { + margin: 0, + marginTop: '32px', + }, + }, + display: 'flex', + }); }); }); From 73cc0a64233c4be0a92831fd09c0a709d03889ff Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 19 Jul 2022 18:03:01 +0100 Subject: [PATCH 7/7] Remove lint error --- packages/mui-material/src/Stack/Stack.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js index 4aff95e028b591..a47913b5f2b0d6 100644 --- a/packages/mui-material/src/Stack/Stack.test.js +++ b/packages/mui-material/src/Stack/Stack.test.js @@ -222,7 +222,7 @@ describe('', () => { }); }); - it.only('should place correct margin direction even though breakpoints are not fully provided', () => { + it('should place correct margin direction even though breakpoints are not fully provided', () => { expect( style({ ownerState: {