refactor(Tag): remove MUI Chip dependency

lumada-design · Nov 27, 2024 · ed8b8f7 · ed8b8f7
1 parent 9f95be1
commit ed8b8f7
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 159 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/src/ButtonBase/ButtonBase.styles.ts b/packages/core/src/ButtonBase/ButtonBase.styles.ts
@@ -11,12 +11,13 @@ export const { staticClasses, useClasses } = createClasses("HvButtonBase", {
     padding: 0,
 
     // Background color common for almost all variants
-    "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover,
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: theme.colors.containerBackgroundHover,
+      },
     },
-    "&:focus-visible": {
+    ":focus-visible": {
       ...outlineStyles,
-      backgroundColor: theme.colors.containerBackgroundHover,
     },
 
     // Default button - no size specified

diff --git a/packages/core/src/Tag/Tag.styles.tsx b/packages/core/src/Tag/Tag.styles.tsx
@@ -1,89 +1,81 @@
-import { chipClasses } from "@mui/material/Chip";
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 
 import { outlineStyles } from "../utils/focusUtils";
 
 export const { staticClasses, useClasses } = createClasses("HvTag", {
   root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "default",
     color: theme.colors.base_dark,
     backgroundColor: "var(--bgColor)",
+    height: 16,
+    borderRadius: 0, // theme.radii.round,
+    maxWidth: 180,
+    whiteSpace: "nowrap",
 
-    [`& .${chipClasses.avatar}`]: {
-      width: 12,
-      height: 12,
-      marginLeft: 2,
-      marginRight: 0,
+    ":hover, :focus": {
+      backgroundColor: "var(--bgColor)",
     },
-
-    [`&.${chipClasses.root}`]: {
-      height: 16,
-      borderRadius: 0,
-      maxWidth: 180,
-      fontFamily: theme.fontFamily.body,
-      ":hover, :focus": {
-        backgroundColor: "var(--bgColor)",
-      },
-      ":focus-visible": {
-        ...outlineStyles,
-      },
-
-      "&$categorical": {
-        borderRadius: 8,
-        "& $label": {
-          color: theme.colors.secondary,
-        },
-      },
+  },
+  categorical: {
+    borderRadius: 8,
+    "& $label": {
+      color: theme.colors.secondary,
     },
+  },
 
-    "&$disabled": {
-      opacity: 1,
+  disabled: {
+    backgroundColor: theme.colors.atmo3,
+    ":hover, :focus": {
       backgroundColor: theme.colors.atmo3,
-      "& $label": {
-        color: theme.colors.secondary_60,
-      },
     },
-
-    [`& .${chipClasses.label}`]: {
-      paddingLeft: 4,
-      paddingRight: 4,
-      ...theme.typography.caption2,
-      color: "currentcolor",
+    "& $label": {
+      color: theme.colors.secondary_60,
     },
-
-    [`& .${chipClasses.deleteIcon}`]: {
-      margin: 0,
-      width: 16,
-      height: 16,
-      padding: 0,
-      color: "currentColor",
-      "&:hover": {
-        backgroundColor: theme.colors.containerBackgroundHover,
-        color: "unset",
-      },
-      "&:focus": {
-        ...outlineStyles,
-        borderRadius: 0,
-      },
-      "&:focus:not(:focus-visible)": {
-        outline: "0 !important",
-        boxShadow: "none !important",
-      },
+  },
+  label: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    paddingLeft: 4,
+    paddingRight: 4,
+    ...theme.typography.caption2,
+    color: "currentcolor",
+  },
+  deleteIcon: {
+    margin: 0,
+    width: 16,
+    height: 16,
+    padding: 0,
+    color: "currentColor",
+    "&:hover": {
+      backgroundColor: theme.colors.containerBackgroundHover,
+    },
+    "&:focus": {
+      ...outlineStyles,
+      borderRadius: 0,
+    },
+    "&:focus:not(:focus-visible)": {
+      outline: "0 !important",
+      boxShadow: "none !important",
     },
   },
-
-  disabled: {},
   selected: {},
   clickable: {
     cursor: "pointer",
     "&:focus-visible": {
       ...outlineStyles,
     },
   },
-
-  categorical: {},
-  label: {},
-  deleteIcon: {},
+  icon: {
+    width: 12,
+    height: 12,
+    marginLeft: 2,
+    marginRight: 0,
+  },
 
   /** @deprecated use `root` instead */
   chipRoot: {},