[Stack] Fix default flexDirection value with responsive prop (#33549)

mui · Jul 20, 2022 · c384078 · c384078
1 parent 21dbf22
commit c384078
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git 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({

diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js
@@ -50,6 +50,7 @@ describe('<Stack />', () => {
         },
       },
       display: 'flex',
+      flexDirection: 'column',
     });
   });
 
@@ -78,6 +79,7 @@ describe('<Stack />', () => {
         flexDirection: 'row',
       },
       display: 'flex',
+      flexDirection: 'column',
     });
   });
 
@@ -184,10 +186,30 @@ describe('<Stack />', () => {
         },
       },
       display: 'flex',
+      flexDirection: 'column',
     });
   });
 
   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({
@@ -219,6 +241,24 @@ describe('<Stack />', () => {
           },
         },
         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',
       });
     });