From 49606e071dbc177d5b827129c7d45751f69709b4 Mon Sep 17 00:00:00 2001
From: Ivan Kohut <ivan.kohut@lamin.ar>
Date: Sun, 2 Oct 2022 17:10:50 +0200
Subject: [PATCH] fix(grid): handle direction object prop for responsive design

---
 .../mui-system/src/Unstable_Grid/createGrid.tsx  |  4 ++--
 .../src/Unstable_Grid/gridGenerator.test.js      | 16 ++++++++++++++++
 .../src/Unstable_Grid/gridGenerator.ts           | 16 +++++++++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/mui-system/src/Unstable_Grid/createGrid.tsx b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
index cc0b94141c9e2a..6dc66f30b49234 100644
--- a/packages/mui-system/src/Unstable_Grid/createGrid.tsx
+++ b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
@@ -21,6 +21,7 @@ import {
   generateGridOffsetStyles,
   generateSizeClassNames,
   generateSpacingClassNames,
+  generateDirectionClasses,
 } from './gridGenerator';
 import { CreateMUIStyled } from '../createStyled';
 import { GridTypeMap, GridOwnerState } from './GridProps';
@@ -62,13 +63,12 @@ export default function createGrid(
 
   const useUtilityClasses = (ownerState: GridOwnerState, theme: typeof defaultTheme) => {
     const { container, direction, spacing, wrap, gridSize } = ownerState;
-
     const slots = {
       root: [
         'root',
         container && 'container',
-        direction !== 'row' && `direction-xs-${String(direction)}`,
         wrap !== 'wrap' && `wrap-xs-${String(wrap)}`,
+        ...generateDirectionClasses(direction),
         ...generateSizeClassNames(gridSize),
         ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : []),
       ],
diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js b/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js
index 0319dcb738820a..b3f7e523ed309b 100644
--- a/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js
+++ b/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js
@@ -12,6 +12,7 @@ import {
   generateGridOffsetStyles,
   generateSizeClassNames,
   generateSpacingClassNames,
+  generateDirectionClasses,
 } from './gridGenerator';
 
 const spacing = createSpacing();
@@ -569,4 +570,19 @@ describe('grid generator', () => {
       ).to.deep.equal(['spacing-mobile-3', 'spacing-tablet-4']);
     });
   });
+
+  describe('generateDirectionClasses', () => {
+    it('should generate correct direction class names', () => {
+      expect(generateDirectionClasses()).to.deep.equal([]);
+      expect(generateDirectionClasses('row')).to.deep.equal(['direction-xs-row']);
+      expect(generateDirectionClasses('column')).to.deep.equal(['direction-xs-column']);
+      expect(
+        generateDirectionClasses({
+          xs: 'row',
+          sm: 'column',
+          md: 'row',
+        }),
+      ).to.deep.equal(['direction-xs-row', 'direction-sm-column', 'direction-md-row']);
+    });
+  });
 });
diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts
index 2618b42638b5b4..d609047c0d59b2 100644
--- a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts
+++ b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts
@@ -1,6 +1,7 @@
 import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
 import { Spacing } from '../createTheme/createSpacing';
-import { GridOwnerState } from './GridProps';
+import { ResponsiveStyleValue } from '../styleFunctionSx';
+import { GridDirection, GridOwnerState } from './GridProps';
 
 interface Props {
   theme: { breakpoints: Breakpoints; spacing?: Spacing };
@@ -255,3 +256,16 @@ export const generateSpacingClassNames = (
   }
   return [];
 };
+
+export const generateDirectionClasses = (
+  direction: ResponsiveStyleValue<GridDirection> | undefined,
+): string[] => {
+  if (direction === undefined) {
+    return [];
+  }
+  if (typeof direction === 'object') {
+    return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
+  }
+
+  return [`direction-xs-${String(direction)}`];
+};