From a5fd654c14f600f821db1bdbe222b0db67ae8b4d Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 13:50:13 +0100 Subject: [PATCH 1/7] Set default flex direction to column --- packages/mui-material/src/Stack/Stack.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js index bbb0122f36ebf2..37538666c02d0a 100644 --- a/packages/mui-material/src/Stack/Stack.js +++ b/packages/mui-material/src/Stack/Stack.js @@ -44,6 +44,7 @@ const getSideFromDirection = (direction) => { export const style = ({ ownerState, theme }) => { let styles = { display: 'flex', + flexDirection:'column', ...handleBreakpoints( { theme }, resolveBreakpointValues({ From 613a31b87ab7ac30f2b7a73a76ec3b9531f78065 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 13:50:23 +0100 Subject: [PATCH 2/7] Add / improve tests --- packages/mui-material/src/Stack/Stack.test.js | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js index ae8c11db7b1b2e..a38697b7fff0a3 100644 --- a/packages/mui-material/src/Stack/Stack.test.js +++ b/packages/mui-material/src/Stack/Stack.test.js @@ -50,6 +50,7 @@ describe('', () => { }, }, display: 'flex', + flexDirection: 'column', }); }); @@ -78,6 +79,7 @@ describe('', () => { flexDirection: 'row', }, display: 'flex', + flexDirection: 'column', }); }); @@ -184,6 +186,7 @@ describe('', () => { }, }, display: 'flex', + flexDirection: 'column', }); }); @@ -219,6 +222,24 @@ describe('', () => { }, }, display: 'flex', + flexDirection: 'column', + }); + }); + + it('should generate correct direction even though breakpoints are not fully provided', () => { + expect( + style({ + ownerState: { + direction: { lg: 'row' }, + }, + theme, + }), + ).to.deep.equal({ + [`@media (min-width:${defaultTheme.breakpoints.values.lg}px)`]: { + flexDirection: 'row', + }, + display: 'flex', + flexDirection: 'column', }); }); }); From d47211e4c0b5ade3710e5b53646886193f83af9f Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 13:55:56 +0100 Subject: [PATCH 3/7] Run prettier --- packages/mui-material/src/Stack/Stack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js index 37538666c02d0a..48e926966949d9 100644 --- a/packages/mui-material/src/Stack/Stack.js +++ b/packages/mui-material/src/Stack/Stack.js @@ -44,7 +44,7 @@ const getSideFromDirection = (direction) => { export const style = ({ ownerState, theme }) => { let styles = { display: 'flex', - flexDirection:'column', + flexDirection: 'column', ...handleBreakpoints( { theme }, resolveBreakpointValues({ From d4c92ecde6a10e0724589c465534a2e809992198 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 14:03:49 +0100 Subject: [PATCH 4/7] Use given direction prop if it is row --- packages/mui-material/src/Stack/Stack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js index 48e926966949d9..b4bb38a647187a 100644 --- a/packages/mui-material/src/Stack/Stack.js +++ b/packages/mui-material/src/Stack/Stack.js @@ -44,7 +44,7 @@ const getSideFromDirection = (direction) => { export const style = ({ ownerState, theme }) => { let styles = { display: 'flex', - flexDirection: 'column', + flexDirection: ownerState.direction === 'row' ? 'row' : 'column', ...handleBreakpoints( { theme }, resolveBreakpointValues({ From a61df516982be6e5b2628d33719c800b94f96d42 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sun, 17 Jul 2022 18:58:51 +0100 Subject: [PATCH 5/7] Set flexDirection prop to given direction prop if its type is string --- packages/mui-material/src/Stack/Stack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js index b4bb38a647187a..405b50ee23692c 100644 --- a/packages/mui-material/src/Stack/Stack.js +++ b/packages/mui-material/src/Stack/Stack.js @@ -44,7 +44,7 @@ const getSideFromDirection = (direction) => { export const style = ({ ownerState, theme }) => { let styles = { display: 'flex', - flexDirection: ownerState.direction === 'row' ? 'row' : 'column', + flexDirection: typeof ownerState.direction === 'string' ? ownerState.direction : 'column', ...handleBreakpoints( { theme }, resolveBreakpointValues({ From a05a4767acf2d53c608afaa11e2a81884767928f Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 19 Jul 2022 10:17:52 +0100 Subject: [PATCH 6/7] Remove unnecessary conditional --- packages/mui-material/src/Stack/Stack.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js index 405b50ee23692c..48e926966949d9 100644 --- a/packages/mui-material/src/Stack/Stack.js +++ b/packages/mui-material/src/Stack/Stack.js @@ -44,7 +44,7 @@ const getSideFromDirection = (direction) => { export const style = ({ ownerState, theme }) => { let styles = { display: 'flex', - flexDirection: typeof ownerState.direction === 'string' ? ownerState.direction : 'column', + flexDirection: 'column', ...handleBreakpoints( { theme }, resolveBreakpointValues({ From 8b4e4717acc7adfc71e9a5ba298cbd3267856ac8 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 19 Jul 2022 10:17:58 +0100 Subject: [PATCH 7/7] Add 1 more test --- packages/mui-material/src/Stack/Stack.test.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js index a38697b7fff0a3..68aa0fc565095f 100644 --- a/packages/mui-material/src/Stack/Stack.test.js +++ b/packages/mui-material/src/Stack/Stack.test.js @@ -191,6 +191,25 @@ describe('', () => { }); describe('prop: direction', () => { + it('should generate correct direction given string values', () => { + expect( + style({ + ownerState: { + direction: 'column-reverse', + spacing: 1, + }, + theme, + }), + ).to.deep.equal({ + '& > :not(style) + :not(style)': { + margin: 0, + marginBottom: '8px', + }, + display: 'flex', + flexDirection: 'column-reverse', + }); + }); + it('should generate correct responsive styles regardless of breakpoints order', () => { expect( style({