Style spacings in Data Grid depending on density (#3171)

vivid-planet · Jan 21, 2025 · 400dd1e · 400dd1e
1 parent e4bdeb9
commit 400dd1e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git a/.changeset/popular-seals-promise.md b/.changeset/popular-seals-promise.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin-theme": patch
+---
+
+Adapt `height` of elements in `DataGrid` depending on the `density`-prop to match the Comet DXP design
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx b/packages/admin/admin-theme/src/componentsTheme/MuiDataGrid.tsx
@@ -13,12 +13,24 @@ import {
     TextField,
     TextFieldProps,
 } from "@mui/material";
+import { Spacing } from "@mui/system";
 import { getDataGridUtilityClass, GRID_DEFAULT_LOCALE_TEXT, gridClasses } from "@mui/x-data-grid";
 import type {} from "@mui/x-data-grid/themeAugmentation";
 
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
+const getDensityHeightValue = (density: string | unknown, spacing: Spacing) => {
+    switch (density) {
+        case "compact":
+            return spacing(8);
+        case "comfortable":
+            return spacing(16);
+        default:
+            return spacing(12);
+    }
+};
+
 export const getMuiDataGrid: GetMuiComponentTheme<"MuiDataGrid"> = (component, { palette, shadows, spacing }) => ({
     ...component,
     defaultProps: {
@@ -46,21 +58,31 @@ export const getMuiDataGrid: GetMuiComponentTheme<"MuiDataGrid"> = (component, {
         root: {
             backgroundColor: "white",
         },
-        columnHeader: {
+        columnHeader: ({ ownerState }) => ({
+            /* !important is required to override inline styles */
+            height: `${getDensityHeightValue(ownerState?.density, spacing)} !important`,
             "&:focus": {
                 outline: "none",
             },
             "&:focus-within": {
                 outline: "none",
             },
-        },
+        }),
+        columnHeaderTitleContainer: ({ ownerState }) => ({
+            height: `${getDensityHeightValue(ownerState?.density, spacing)}`,
+        }),
         pinnedColumns: {
             backgroundColor: "white",
             boxShadow: shadows[2],
         },
-        cell: {
+        row: ({ ownerState }) => ({
+            height: `${getDensityHeightValue(ownerState?.density, spacing)}`,
+            /* !important is required to override inline styles */
+            minHeight: `${getDensityHeightValue(ownerState?.density, spacing)} !important`,
+            maxHeight: `${getDensityHeightValue(ownerState?.density, spacing)} !important`,
+        }),
+        cell: ({ ownerState }) => ({
             borderTop: `1px solid ${palette.grey[100]}`,
-
             "&:focus": {
                 outline: "none",
             },
@@ -70,10 +92,21 @@ export const getMuiDataGrid: GetMuiComponentTheme<"MuiDataGrid"> = (component, {
             [`& .${getDataGridUtilityClass("booleanCell")}`]: {
                 color: palette.grey[900],
             },
-        },
-        footerContainer: {
+            height: `${getDensityHeightValue(ownerState?.density, spacing)}`,
+            alignContent: "center",
+        }),
+        footerContainer: ({ ownerState }) => ({
             borderTop: `1px solid ${palette.grey[100]}`,
-        },
+            boxSizing: "border-box",
+            minHeight: getDensityHeightValue(ownerState?.density, spacing),
+            maxHeight: getDensityHeightValue(ownerState?.density, spacing),
+
+            "& .MuiTablePagination-root > .MuiToolbar-root": {
+                height: getDensityHeightValue(ownerState?.density, spacing),
+                minHeight: getDensityHeightValue(ownerState?.density, spacing),
+            },
+        }),
+
         iconSeparator: {
             backgroundColor: palette.grey[100],
             width: "2px",