[Grid v2][system] handle direction object prop for responsive design (mui#34574)

Author: vanyaxk

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]) : []),
       ],

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']);
+    });
+  });
 });

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)}`];
+};