Add Tooltip bgColor prop for content and arrow slots (#120)

* feat: add color prop for content and arrow * chore: add changeset * chore: remove duplicate style props * chore: modify changeset summary and update prop types
animareflection · Sep 21, 2023 · a5a9d0a · a5a9d0a
1 parent bcccf60
commit a5a9d0a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/polite-colts-obey.md b/.changeset/polite-colts-obey.md
@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": patch
+---
+
+Added `Tooltip` bgColor prop for content and arrow slots
diff --git a/src/components/client/core/Tooltip/Tooltip.recipe.ts b/src/components/client/core/Tooltip/Tooltip.recipe.ts
@@ -22,12 +22,13 @@ export const tooltipRecipe = defineSlotRecipe({
     },
     arrow: {
       "--arrow-size": "var(--sizes-3)",
-      "--arrow-background": "var(--colors-bg-default)",
+      rotate: "45deg",
     },
     arrowTip: {
       borderTopWidth: "1px",
       borderColor: "border.default",
       borderLeftWidth: "1px",
+      rotate: "-45deg",
     },
   },
 });
diff --git a/src/components/client/core/Tooltip/Tooltip.tsx b/src/components/client/core/Tooltip/Tooltip.tsx
@@ -12,11 +12,13 @@ import { tooltip } from "generated/panda/recipes";
 import { useIsMounted } from "lib/hooks";
 
 import type { TooltipProps } from "components/primitives";
+import type { JsxStyleProps } from "generated/panda/types";
 import type { ReactNode } from "react";
 
 export interface Props extends TooltipProps {
   trigger: ReactNode;
   content: ReactNode;
+  bgColor?: JsxStyleProps["bgColor"];
 }
 
 /**
@@ -27,6 +29,7 @@ const Tooltip = ({
   content,
   openDelay = 0,
   closeDelay = 0,
+  bgColor = "bg.default",
   ...rest
 }: Props) => {
   const classNames = tooltip();
@@ -43,11 +46,11 @@ const Tooltip = ({
           <Portal>
             <TooltipPositioner className={classNames.positioner}>
               {isOpen && (
-                <TooltipArrow className={classNames.arrow}>
+                <TooltipArrow bgColor={bgColor} className={classNames.arrow}>
                   <TooltipArrowTip className={classNames.arrowTip} />
                 </TooltipArrow>
               )}
-              <TooltipContent className={classNames.content}>
+              <TooltipContent bgColor={bgColor} className={classNames.content}>
                 {content}
               </TooltipContent>
             </TooltipPositioner>