refactor(Tag): remove redundant styles

lumada-design · Nov 27, 2024 · 94727ea · 94727ea
1 parent b6926e2
commit 94727ea
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 25 deletions.
diff --git a/packages/core/src/Tag/Tag.styles.tsx b/packages/core/src/Tag/Tag.styles.tsx
@@ -1,8 +1,6 @@
 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",
@@ -37,44 +35,24 @@ export const { staticClasses, useClasses } = createClasses("HvTag", {
     },
   },
   label: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    paddingLeft: 4,
-    paddingRight: 4,
-    ...theme.typography.caption2,
-    color: "currentcolor",
+    padding: theme.spacing(0, "4px"),
+    color: "inherit",
   },
   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",
-    },
   },
   selected: {},
   clickable: {
     cursor: "pointer",
-    "&:focus-visible": {
-      ...outlineStyles,
-    },
   },
   icon: {
     width: 12,
     height: 12,
     marginLeft: 2,
-    marginRight: 0,
   },
 
   /** @deprecated use `root` instead */

diff --git a/packages/core/src/Tag/Tag.tsx b/packages/core/src/Tag/Tag.tsx
@@ -13,6 +13,7 @@ import { getColor, HvColorAny, theme } from "@hitachivantara/uikit-styles";
 
 import { HvButtonBase, HvButtonBaseProps } from "../ButtonBase";
 import { useControlled } from "../hooks/useControlled";
+import { HvTypography } from "../Typography";
 import { isDeleteKey } from "../utils/keyboardUtils";
 import { staticClasses, useClasses } from "./Tag.styles";
 
@@ -173,7 +174,14 @@ export const HvTag = forwardRef<
           size="XS"
         />
       )}
-      <span className={classes.label}>{label}</span>
+      <HvTypography
+        noWrap
+        variant="caption2"
+        component="span"
+        className={classes.label}
+      >
+        {label}
+      </HvTypography>
       {onDelete && deleteIcon}
     </HvButtonBase>
   );