chore(tooltip): ✨ wrap tailwind classnames with cx, move arrow style into tooltip theme

Author: Karthik-B-06

src/components/tooltip/Tooltip.tsx

@@ -4,7 +4,7 @@ import { Popover } from "react-native-popper";
 
 import { Box, Text } from "../../primitives";
 import { useTheme } from "../../theme";
-import { createComponent, RenderPropType } from "../../utils";
+import { createComponent, cx, RenderPropType } from "../../utils";
 
 import TooltipArrow from "./TooltipArrow";
 
@@ -101,9 +101,11 @@ export const RNTooltip: React.FC<Partial<TooltipProps>> = props => {
       {Platform.OS !== "web" && <Popover.Backdrop />}
       <Popover.Content>
         {hasArrow && <TooltipArrow />}
-        <Box style={tailwind.style(tooltipTheme.contentWrapper)}>
+        <Box style={tailwind.style(cx(tooltipTheme.contentWrapper))}>
           {typeof content === "string" ? (
-            <Text style={tailwind.style(tooltipTheme.content)}>{content}</Text>
+            <Text style={tailwind.style(cx(tooltipTheme.content))}>
+              {content}
+            </Text>
           ) : (
             content
           )}

src/components/tooltip/TooltipArrow.tsx

@@ -3,7 +3,7 @@ import { ViewStyle } from "react-native";
 import Svg, { Path } from "react-native-svg";
 
 import { useTheme } from "../../theme";
-import { IconProps } from "../../utils";
+import { cx, IconProps } from "../../utils";
 import { Icon } from "../icon";
 
 import { TooltipPlacement } from "./Tooltip";
@@ -118,22 +118,22 @@ const TooltipArrow: React.FC<TooltipArrowProps> = ({
   arrowProps,
 }) => {
   const tailwind = useTheme();
+  const tooltipTheme = useTheme("tooltip");
+
   const additonalArrowStyles = getArrowStyles({
     placement: actualPlacement,
     height: 12,
     width: 12,
   });
   const arrowStyles: ViewStyle = {
-    position: "absolute",
-    height: 12,
-    width: 12,
+    ...tailwind.style(cx(tooltipTheme.arrow.container)),
     ...additonalArrowStyles,
     ...arrowProps?.style,
   };
   if (actualPlacement?.split(" ")[0] === "top") {
     return (
       <Icon
-        color={tailwind.getColor("text-gray-900")}
+        color={tailwind.getColor(cx(tooltipTheme.arrow.iconColor))}
         style={arrowStyles}
         icon={<DownArrow />}
         size={12}
@@ -142,7 +142,7 @@ const TooltipArrow: React.FC<TooltipArrowProps> = ({
   } else if (actualPlacement?.split(" ")[0] === "left") {
     return (
       <Icon
-        color={tailwind.getColor("text-gray-900")}
+        color={tailwind.getColor(cx(tooltipTheme.arrow.iconColor))}
         style={arrowStyles}
         icon={<RightArrow />}
         size={12}
@@ -151,7 +151,7 @@ const TooltipArrow: React.FC<TooltipArrowProps> = ({
   } else if (actualPlacement?.split(" ")[0] === "right") {
     return (
       <Icon
-        color={tailwind.getColor("text-gray-900")}
+        color={tailwind.getColor(cx(tooltipTheme.arrow.iconColor))}
         style={arrowStyles}
         icon={<LeftArrow />}
         size={12}
@@ -160,7 +160,7 @@ const TooltipArrow: React.FC<TooltipArrowProps> = ({
   } else if (actualPlacement?.split(" ")[0] === "bottom") {
     return (
       <Icon
-        color={tailwind.getColor("text-gray-900")}
+        color={tailwind.getColor(cx(tooltipTheme.arrow.iconColor))}
         style={arrowStyles}
         icon={<UpArrow />}
         size={12}

src/theme/defaultTheme/tooltip.ts

@@ -2,4 +2,8 @@ export const tooltip = {
   contentWrapper:
     "relative items-center justify-center px-2 py-[5.5px] bg-gray-900 rounded-lg shadow-lg max-w-[160px]",
   content: "text-cxs text-white-900 font-normal leading-4 text-center",
+  arrow: {
+    container: "absolute w-3 h-3",
+    iconColor: "text-gray-900",
+  },
 };