Adapt chip styling (#2879)

Hover styling is not consistent with the design in every variant; please implement it as per the design. - Fix hover styling of all variants - Add new variant with white background and no border (variant="filled" and color="info") and add it to story Co-authored-by: Julia Wegmayr <[email protected]> Co-authored-by: Johannes Obermair <[email protected]>
vivid-planet · Dec 5, 2024 · 22f3d40 · 22f3d40
1 parent 6eba5ab
commit 22f3d40
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 9 deletions.
diff --git a/.changeset/clever-jobs-invite.md b/.changeset/clever-jobs-invite.md
@@ -0,0 +1,8 @@
+---
+"@comet/admin-theme": minor
+---
+
+Adapt `Chip` styling to align with Comet DXP design
+
+-   Fix hover styling
+-   Add new styling for `<Chip variant="filled" color="info">`
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiChip.tsx b/packages/admin/admin-theme/src/componentsTheme/MuiChip.tsx
@@ -1,5 +1,4 @@
 import { Clear } from "@comet/admin-icons";
-import { chipClasses } from "@mui/material";
 
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
@@ -98,18 +97,23 @@ export const getMuiChip: GetMuiComponentTheme<"MuiChip"> = (component, { palette
         },
         filledDefault: {
             backgroundColor: palette.grey["100"],
+            "&.MuiChip-clickable": {
+                "&:hover": {
+                    backgroundColor: palette.grey["200"],
+                },
+            },
+        },
+        filledInfo: {
+            backgroundColor: "#fff",
+            "&.MuiChip-clickable": {
+                "&:hover": {
+                    backgroundColor: palette.grey["50"],
+                },
+            },
         },
         outlinedDefault: {
             borderColor: palette.grey["100"],
         },
-        clickableColorDefault: {
-            [`&.${chipClasses.filled}:hover`]: {
-                backgroundColor: palette.grey["200"],
-            },
-            [`&.${chipClasses.outlined}:hover`]: {
-                backgroundColor: palette.grey["50"],
-            },
-        },
     }),
     defaultProps: {
         deleteIcon: <Clear />,

diff --git a/storybook/src/admin/mui/Chip.stories.tsx b/storybook/src/admin/mui/Chip.stories.tsx
@@ -226,6 +226,30 @@ export const _Chip = {
                                     />
                                 </Grid>
                             </Grid>
+                            <Grid container spacing={2} mb={5}>
+                                <Grid item>
+                                    <Chip variant="filled" color="info" label="Normal" />
+                                </Grid>
+                                <Grid item>
+                                    <Chip variant="filled" color="info" clickable label="Clickable" />
+                                </Grid>
+                                <Grid item>
+                                    <Chip variant="filled" color="info" icon={<ChevronDown />} clickable label="With Icon" />
+                                </Grid>
+                                <Grid item>
+                                    <Chip variant="filled" color="info" label="Disabled" disabled />
+                                </Grid>
+                                <Grid item>
+                                    <Chip
+                                        variant="filled"
+                                        color="info"
+                                        label="Deletable"
+                                        onDelete={() => {
+                                            console.log("Delete");
+                                        }}
+                                    />
+                                </Grid>
+                            </Grid>
                         </Box>
                         <Typography variant="h4" gutterBottom>
                             Small size Chips
@@ -374,6 +398,31 @@ export const _Chip = {
                                     />
                                 </Grid>
                             </Grid>
+                            <Grid container spacing={2} mb={5}>
+                                <Grid item>
+                                    <Chip size="small" variant="filled" color="info" label="Normal" />
+                                </Grid>
+                                <Grid item>
+                                    <Chip size="small" variant="filled" color="info" clickable label="Clickable" />
+                                </Grid>
+                                <Grid item>
+                                    <Chip size="small" variant="filled" color="info" icon={<ChevronDown />} clickable label="With Icon" />
+                                </Grid>
+                                <Grid item>
+                                    <Chip size="small" variant="filled" color="info" label="Disabled" disabled />
+                                </Grid>
+                                <Grid item>
+                                    <Chip
+                                        size="small"
+                                        variant="filled"
+                                        color="info"
+                                        label="Deletable"
+                                        onDelete={() => {
+                                            console.log("Delete");
+                                        }}
+                                    />
+                                </Grid>
+                            </Grid>
                         </Box>
                     </CardContent>
                 </Card>