Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor menu styling #2919

Merged
merged 18 commits into from
Jan 21, 2025
Merged

Refactor menu styling #2919

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
888b7d9
style MuiListItemIcon in theme
juliawegmayr Dec 11, 2024
ea5df19
style MuiMenu in theme
juliawegmayr Dec 11, 2024
5047339
style MenuItem in theme
juliawegmayr Dec 11, 2024
c6019bd
style divider in MuiMenu
juliawegmayr Dec 11, 2024
ebb5b53
remove defaultProps from MuiListItemIcon
juliawegmayr Jan 2, 2025
9d81e32
remove defaultProps from MuiMenu
juliawegmayr Jan 2, 2025
70ff5ea
re-add slots in CrudMoreActionsMenu
juliawegmayr Jan 2, 2025
263ea0a
remove important from MuiMenuItem-root styles
juliawegmayr Jan 2, 2025
2e74266
set minWidth on MuiListItemIcon-root instead of using unset
juliawegmayr Jan 2, 2025
dfb0789
set margin on MuiDivider-root
juliawegmayr Jan 2, 2025
64a88df
correct minWidth of MuiListItemIcon-root
juliawegmayr Jan 13, 2025
ea483fd
re-add slots
juliawegmayr Jan 13, 2025
230007d
use dividerProps as before
juliawegmayr Jan 16, 2025
3fe98f8
add styling of MuiListItemIcon
juliawegmayr Jan 16, 2025
0d43142
add styles
juliawegmayr Jan 20, 2025
1b84d3d
remove MuiMenuItem styling from theme
juliawegmayr Jan 20, 2025
f5ee69f
remove MuiMenuItem from getComponentsTheme
juliawegmayr Jan 20, 2025
cf40074
Merge branch 'next' into refactor-menu-styling
juliawegmayr Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions packages/admin/admin-theme/src/componentsTheme/MuiMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
import { GetMuiComponentTheme } from "./getComponentsTheme";

export const getMuiMenu: GetMuiComponentTheme<"MuiMenu"> = (component, theme) => ({
...component,
styleOverrides: mergeOverrideStyles<"MuiMenu">(component?.styleOverrides, {
paper: { minWidth: 220, borderRadius: "4px" },
root: {
"& .MuiMenuItem-root": {
padding: "8px 15px 8px 30px",
columnGap: "10px",
},

"& .MuiDivider-root": {
borderColor: theme.palette.grey[50],
},

"& .MuiDivider-root, &.MuiMenuItem-root+.MuiDivider-root": {
margin: "8px 10px",
},
},
}),
});
13 changes: 13 additions & 0 deletions packages/admin/admin-theme/src/componentsTheme/MuiMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
import { GetMuiComponentTheme } from "./getComponentsTheme";

export const getMuiMenuItem: GetMuiComponentTheme<"MuiMenuItem"> = (component, theme) => ({
...component,
styleOverrides: mergeOverrideStyles<"MuiMenuItem">(component?.styleOverrides, {
root: {
"& .MuiListItemIcon-root": {
minWidth: "16px",
},
},
}),
});
4 changes: 4 additions & 0 deletions packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import { getMuiInputBase } from "./MuiInputBase";
import { getMuiLinearProgress } from "./MuiLinearProgress";
import { getMuiLink } from "./MuiLink";
import { getMuiListItem } from "./MuiListItem";
import { getMuiMenu } from "./MuiMenu";
import { getMuiMenuItem } from "./MuiMenuItem";
import { getMuiNativeSelect } from "./MuiNativeSelect";
import { getMuiPaper } from "./MuiPaper";
import { getMuiPopover } from "./MuiPopover";
Expand Down Expand Up @@ -94,6 +96,8 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData)
MuiLinearProgress: getMuiLinearProgress(components.MuiLinearProgress, themeData),
MuiLink: getMuiLink(components.MuiLink, themeData),
MuiListItem: getMuiListItem(components.MuiListItem, themeData),
MuiMenu: getMuiMenu(components.MuiMenu, themeData),
MuiMenuItem: getMuiMenuItem(components.MuiMenuItem, themeData),
MuiNativeSelect: getMuiNativeSelect(components.MuiNativeSelect, themeData),
MuiPaper: getMuiPaper(components.MuiPaper, themeData),
MuiPopover: getMuiPopover(components.MuiPopover, themeData),
Expand Down
43 changes: 10 additions & 33 deletions packages/admin/admin/src/dataGrid/CrudMoreActionsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export type CrudMoreActionsMenuClassKey = "root" | "group" | "divider" | "button
export interface ActionItem extends ComponentProps<typeof MenuItem> {
label: ReactNode;
icon?: ReactNode;
divider?: boolean;
}

export interface CrudMoreActionsMenuProps
Expand All @@ -36,7 +35,7 @@ export interface CrudMoreActionsMenuProps
menuItem: typeof MenuItem;
button: typeof Button;
group: typeof CrudMoreActionsGroup;
divider: typeof CrudMoreActionsDivider;
divider: typeof Divider;
chip: typeof Chip;
}> {
selectionSize?: number;
Expand All @@ -62,16 +61,6 @@ function CrudMoreActionsGroup({ groupTitle, children, menuListProps, typographyP
);
}

const CrudMoreActionsDivider = createComponentSlot(Divider)<CrudMoreActionsMenuClassKey>({
componentName: "CrudMoreActions",
slotName: "divider",
})(
({ theme }) => css`
margin: 8px 10px;
border-color: ${theme.palette.grey[50]};
`,
);

const MoreActionsSelectedItemsChip = createComponentSlot(Chip)<CrudMoreActionsMenuClassKey>({
componentName: "CrudMoreActions",
slotName: "chip",
Expand All @@ -94,22 +83,11 @@ const MoreActionsButton = createComponentSlot(Button)<CrudMoreActionsMenuClassKe
`,
);

const MoreActionsMenuItem = createComponentSlot(MenuItem)<CrudMoreActionsMenuClassKey>({
componentName: "CrudMoreActions",
slotName: "menuItem",
})(
css`
padding: 8px 15px 8px 30px !important;
column-gap: 10px;
`,
);

export function CrudMoreActionsMenu({ slotProps, overallActions, selectiveActions, selectionSize }: CrudMoreActionsMenuProps) {
const {
menu: menuProps,
button: buttonProps,
group: groupProps,
divider: dividerProps,
chip: chipProps,
} = slotProps ?? { menu: {}, button: {}, group: {}, divider: {}, chip: {} };

Expand All @@ -127,7 +105,6 @@ export function CrudMoreActionsMenu({ slotProps, overallActions, selectiveAction
</MoreActionsButton>
<Menu
keepMounted={false}
PaperProps={{ sx: { minWidth: 220, borderRadius: "4px" } }}
open={Boolean(anchorEl)}
anchorEl={anchorEl}
{...menuProps}
Expand All @@ -148,7 +125,7 @@ export function CrudMoreActionsMenu({ slotProps, overallActions, selectiveAction

return (
<div key={index}>
<MoreActionsMenuItem
<MenuItem
key={index}
disabled={!!selectionSize}
{...rest}
Expand All @@ -157,17 +134,17 @@ export function CrudMoreActionsMenu({ slotProps, overallActions, selectiveAction
handleClose();
}}
>
{!!icon && <ListItemIcon sx={{ minWidth: "unset !important" }}>{icon}</ListItemIcon>}
{!!icon && <ListItemIcon>{icon}</ListItemIcon>}
<ListItemText primary={label} />
</MoreActionsMenuItem>
{!!divider && <CrudMoreActionsDivider {...dividerProps} />}
</MenuItem>
{!!divider && <Divider />}
</div>
);
})}
</CrudMoreActionsGroup>
)}

{!!overallActions?.length && !!selectiveActions?.length && <CrudMoreActionsDivider {...dividerProps} />}
{!!overallActions?.length && !!selectiveActions?.length && <Divider />}

{!!selectiveActions?.length && (
<CrudMoreActionsGroup
Expand All @@ -181,7 +158,7 @@ export function CrudMoreActionsMenu({ slotProps, overallActions, selectiveAction

return (
<div key={index}>
<MoreActionsMenuItem
<MenuItem
key={index}
disabled={!selectionSize}
{...rest}
Expand All @@ -190,13 +167,13 @@ export function CrudMoreActionsMenu({ slotProps, overallActions, selectiveAction
handleClose();
}}
>
{!!icon && <ListItemIcon sx={{ minWidth: "unset !important" }}>{icon}</ListItemIcon>}
{!!icon && <ListItemIcon>{icon}</ListItemIcon>}
<ListItemText primary={label} />
{!!selectionSize && (
<MoreActionsSelectedItemsChip size="small" color="primary" {...chipProps} label={selectionSize} />
)}
</MoreActionsMenuItem>
{!!divider && <CrudMoreActionsDivider {...dividerProps} />}
</MenuItem>
{!!divider && <Divider />}
</div>
);
})}
Expand Down
Loading