From 95eb01031965aedfaa049c71480972e4552bb8b3 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 20 Jul 2022 07:24:59 +0100
Subject: [PATCH] [Stack] Fix default `flexDirection` value with responsive
 prop (#33549)

---
 packages/mui-material/src/Stack/Stack.js      |  1 +
 packages/mui-material/src/Stack/Stack.test.js | 40 +++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/packages/mui-material/src/Stack/Stack.js b/packages/mui-material/src/Stack/Stack.js
index ba8a53171e6d64..160cce9fd5041f 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({
diff --git a/packages/mui-material/src/Stack/Stack.test.js b/packages/mui-material/src/Stack/Stack.test.js
index a47913b5f2b0d6..affeadb68f2f02 100644
--- 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',
       });
     });