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

Style MuiCard system #2890

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Style MuiCard system #2890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
15014da
style MuiCard system
Dec 5, 2024
40e76e2
add story
Dec 5, 2024
fadfcea
add changeset
Dec 5, 2024
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
5 changes: 5 additions & 0 deletions .changeset/large-apples-learn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@comet/admin-theme": minor
---

Add styling of `Card` and `CardHeader` to align with Comet DXP design
11 changes: 11 additions & 0 deletions packages/admin/admin-theme/src/componentsTheme/MuiCard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
import { GetMuiComponentTheme } from "./getComponentsTheme";

export const getMuiCard: GetMuiComponentTheme<"MuiCard"> = (component, { spacing }) => ({
...component,
styleOverrides: mergeOverrideStyles<"MuiCard">(component?.styleOverrides, {
root: {
borderRadius: "4px",
},
}),
});
20 changes: 20 additions & 0 deletions packages/admin/admin-theme/src/componentsTheme/MuiCardHeader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
import { GetMuiComponentTheme } from "./getComponentsTheme";

export const getMuiCardHeader: GetMuiComponentTheme<"MuiCardHeader"> = (component, { spacing, palette }) => ({
...component,
styleOverrides: mergeOverrideStyles<"MuiCardHeader">(component?.styleOverrides, {
root: {
backgroundColor: palette.grey["A200"],
color: "#fff",

"& .MuiButtonBase-root": {
paddingTop: 0,
paddingBottom: 0,
},
Comment on lines +11 to +14
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simply removing the padding makes the button look weird during click/focus...

In the design it seems this is a custom button anyway, as the hover is different than in other buttons.
I will check with UX to see if this is on purpose or if we can use an existing button variant here.

Implementation Design
Screen.Recording.2024-12-05.at.17.38.20.mov
Screen.Recording.2024-12-05.at.17.33.45.mov

},
action: {
alignSelf: "center",
},
}),
});
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 @@ -13,7 +13,9 @@ import { getMuiAutocomplete } from "./MuiAutocomplete";
import { getMuiBadge } from "./MuiBadge";
import { getMuiButton } from "./MuiButton";
import { getMuiButtonGroup } from "./MuiButtonGroup";
import { getMuiCard } from "./MuiCard";
import { getMuiCardContent } from "./MuiCardContent";
import { getMuiCardHeader } from "./MuiCardHeader";
import { getMuiCheckbox } from "./MuiCheckbox";
import { getMuiChip } from "./MuiChip";
import { getMuiDataGrid } from "./MuiDataGrid";
Expand Down Expand Up @@ -74,7 +76,9 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData)
MuiBadge: getMuiBadge(components.MuiBadge, themeData),
MuiButton: getMuiButton(components.MuiButton, themeData),
MuiButtonGroup: getMuiButtonGroup(components.MuiButtonGroup, themeData),
MuiCard: getMuiCard(components.MuiCard, themeData),
MuiCardContent: getMuiCardContent(components.MuiCardContent, themeData),
MuiCardHeader: getMuiCardHeader(components.MuiCardHeader, themeData),
MuiCheckbox: getMuiCheckbox(components.MuiCheckbox, themeData),
MuiChip: getMuiChip(components.MuiChip, themeData),
MuiDataGrid: getMuiDataGrid(components.MuiDataGrid, themeData),
Expand Down
77 changes: 77 additions & 0 deletions storybook/src/admin/mui/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { ArrowRight, Reload } from "@comet/admin-icons";
import { Button, Card, CardContent, CardHeader, Grid, Typography } from "@mui/material";
import * as React from "react";

export default {
title: "@comet/admin/mui",
};

export const _Card = () => {
return (
<Grid container spacing={10}>
<Grid item xs={5}>
<Card>
<CardHeader title={<Typography>Card Header</Typography>} />
<CardContent>
CardContent: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</CardContent>
</Card>
</Grid>
<Grid item xs={5}>
<Card>
<CardHeader title={<Typography>Card Header with Avatar (Icon)</Typography>} avatar={<Reload />} />
<CardContent>
CardContent: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</CardContent>
</Card>
</Grid>
<Grid item xs={5}>
<Card>
<CardHeader
title={<Typography>Card Header with Action (Button)</Typography>}
action={
<Button variant="text" color="inherit" endIcon={<ArrowRight />}>
Show All
</Button>
}
/>
<CardContent>
CardContent: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</CardContent>
</Card>
</Grid>
<Grid item xs={5}>
<Card>
<CardHeader
title={<Typography>Card Header with Avatar (Icon) and Action (Button)</Typography>}
avatar={<Reload />}
action={
<Button variant="text" color="inherit" endIcon={<ArrowRight />}>
Show All
</Button>
}
/>
<CardContent>
CardContent: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.{" "}
</CardContent>
</Card>
</Grid>
</Grid>
);
};
Loading