[Grid2] Add container class to Grid2Classes (#44562)

mui · Nov 26, 2024 · 6b96951 · 6b96951
1 parent dfe7067
commit 6b96951
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 9 deletions.
diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json
@@ -53,7 +53,20 @@
   },
   "name": "Grid2",
   "imports": ["import Grid2 from '@mui/material/Grid2';", "import { Grid2 } from '@mui/material';"],
-  "classes": [],
+  "classes": [
+    {
+      "key": "container",
+      "className": "MuiGrid2-container",
+      "description": "Styles applied to the root element if `container={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "root",
+      "className": "MuiGrid2-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    }
+  ],
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "MuiGrid2",

diff --git a/docs/translations/api-docs/grid-2/grid-2.json b/docs/translations/api-docs/grid-2/grid-2.json
@@ -26,5 +26,12 @@
       "description": "Defines the <code>flex-wrap</code> style property. It&#39;s applied for all screen sizes."
     }
   },
-  "classDescriptions": {}
+  "classDescriptions": {
+    "container": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>container={true}</code>"
+    },
+    "root": { "description": "Styles applied to the root element." }
+  }
 }
diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx
@@ -7,8 +7,6 @@ import requirePropFactory from '../utils/requirePropFactory';
 import { Theme, styled, Breakpoint } from '../styles';
 import { useDefaultProps } from '../DefaultPropsProvider';
 
-export type Grid2Slot = 'root';
-
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 
 export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';

diff --git a/packages/mui-material/src/Grid2/grid2Classes.ts b/packages/mui-material/src/Grid2/grid2Classes.ts
@@ -1,8 +1,14 @@
-import { GridClasses } from '@mui/system/Grid';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 
-export type Grid2ClassKey = keyof GridClasses;
+export interface Grid2Classes {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `container={true}`. */
+  container: string;
+}
+
+export type Grid2ClassKey = keyof Grid2Classes;
 
 export function getGrid2UtilityClass(slot: string): string {
   return generateUtilityClass('MuiGrid2', slot);
@@ -13,7 +19,7 @@ const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'] as const;
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'] as const;
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
 
-const grid2Classes: GridClasses = generateUtilityClasses('MuiGrid2', [
+const grid2Classes: Grid2Classes = generateUtilityClasses('MuiGrid2', [
   'root',
   'container',
 

diff --git a/packages/mui-material/src/styles/createTheme.spec.ts b/packages/mui-material/src/styles/createTheme.spec.ts
@@ -155,6 +155,16 @@ const theme = createTheme();
           },
         },
       },
+      MuiGrid2: {
+        styleOverrides: {
+          root: {
+            justifyContent: 'space-between',
+          },
+          container: {
+            justifyContent: 'space-between',
+          },
+        },
+      },
     },
   });
 }

diff --git a/packages/mui-material/src/styles/overrides.d.ts b/packages/mui-material/src/styles/overrides.d.ts
@@ -45,7 +45,7 @@ import { FormGroupClassKey } from '../FormGroup';
 import { FormHelperTextClassKey } from '../FormHelperText';
 import { FormLabelClassKey } from '../FormLabel';
 import { GridClassKey } from '../Grid';
-import { Grid2Slot } from '../Grid2';
+import { Grid2ClassKey } from '../Grid2';
 import { IconButtonClassKey } from '../IconButton';
 import { IconClassKey } from '../Icon';
 import { ImageListClassKey } from '../ImageList';
@@ -190,7 +190,7 @@ export interface ComponentNameToClassKey {
   MuiFormHelperText: FormHelperTextClassKey;
   MuiFormLabel: FormLabelClassKey;
   MuiGrid: GridClassKey;
-  MuiGrid2: Grid2Slot;
+  MuiGrid2: Grid2ClassKey;
   MuiIcon: IconClassKey;
   MuiIconButton: IconButtonClassKey;
   MuiImageList: ImageListClassKey;