Fix spacing for ListItemIcon and ListItemAvatar

.changeset/little-comics-look.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin-theme": patch
+---
+
+Fix spacing for `ListItemIcon` and `ListItemAvatar` to align with Comet DXP design

packages/admin/admin-theme/src/componentsTheme/MuiListItem.ts

@@ -1,9 +1,15 @@
+import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
-export const getMuiListItem: GetMuiComponentTheme<"MuiListItem"> = (component) => ({
+export const getMuiListItem: GetMuiComponentTheme<"MuiListItem"> = (component, { spacing }) => ({
     ...component,
     defaultProps: {
         dense: true,
         ...component?.defaultProps,
     },
+    styleOverrides: mergeOverrideStyles<"MuiListItem">(component?.styleOverrides, {
+        root: {
+            gap: spacing(2),
+        },
+    }),
 });

packages/admin/admin-theme/src/componentsTheme/MuiListItemAvatar.tsx

@@ -0,0 +1,11 @@
+import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
+import { GetMuiComponentTheme } from "./getComponentsTheme";
+
+export const getMuiListItemAvatar: GetMuiComponentTheme<"MuiListItemAvatar"> = (component, { spacing }) => ({
+    ...component,
+    styleOverrides: mergeOverrideStyles<"MuiListItemAvatar">(component?.styleOverrides, {
+        root: {
+            minWidth: 0,
+        },
+    }),
+});

packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts

@@ -35,6 +35,7 @@ import { getMuiInputBase } from "./MuiInputBase";
 import { getMuiLinearProgress } from "./MuiLinearProgress";
 import { getMuiLink } from "./MuiLink";
 import { getMuiListItem } from "./MuiListItem";
+import { getMuiListItemAvatar } from "./MuiListItemAvatar";
 import { getMuiListItemIcon } from "./MuiListItemIcon";
 import { getMuiMenu } from "./MuiMenu";
 import { getMuiNativeSelect } from "./MuiNativeSelect";
@@ -101,6 +102,7 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData)
     MuiLink: getMuiLink(components.MuiLink, themeData),
     MuiListItem: getMuiListItem(components.MuiListItem, themeData),
     MuiListItemIcon: getMuiListItemIcon(components.MuiListItemIcon, themeData),
+    MuiListItemAvatar: getMuiListItemAvatar(components.MuiListItemAvatar, themeData),
     MuiMenu: getMuiMenu(components.MuiMenu, themeData),
     MuiNativeSelect: getMuiNativeSelect(components.MuiNativeSelect, themeData),
     MuiPaper: getMuiPaper(components.MuiPaper, themeData),

packages/admin/cms-admin/src/contentScope/ContentScopeSelect.tsx

@@ -101,7 +101,7 @@ export function ContentScopeSelect<Value extends ContentScopeInterface = Content
 
             return (
                 <>
-                    <ListItemIcon sx={{ minWidth: "none" }}>
+                    <ListItemIcon>
                         <Domain />
                     </ListItemIcon>
                     <ListItemText