feat: arrow color

Author: gabrieljablonski

src/components/Tooltip/Tooltip.tsx

@@ -47,6 +47,7 @@ const Tooltip = ({
   setActiveAnchor,
   border,
   opacity,
+  arrowColor,
 }: ITooltip) => {
   const tooltipRef = useRef<HTMLElement>(null)
   const tooltipArrowRef = useRef<HTMLElement>(null)
@@ -654,7 +655,12 @@ const Tooltip = ({
             [coreStyles['noArrow']]: noArrow,
           },
         )}
-        style={inlineArrowStyles}
+        style={{
+          ...inlineArrowStyles,
+          background: arrowColor
+            ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
+            : undefined,
+        }}
         ref={tooltipArrowRef}
       />
     </WrapperElement>

src/components/Tooltip/TooltipTypes.d.ts

@@ -91,4 +91,5 @@ export interface ITooltip {
   setActiveAnchor: (anchor: HTMLElement | null) => void
   border?: CSSProperties['border']
   opacity?: CSSProperties['opacity']
+  arrowColor?: CSSProperties['backgroundColor']
 }

src/components/TooltipController/TooltipController.tsx

@@ -47,6 +47,7 @@ const TooltipController = ({
   disableStyleInjection = false,
   border,
   opacity,
+  arrowColor,
   setIsOpen,
   afterShow,
   afterHide,
@@ -334,6 +335,7 @@ const TooltipController = ({
     isOpen,
     border,
     opacity,
+    arrowColor,
     setIsOpen,
     afterShow,
     afterHide,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -69,6 +69,7 @@ export interface ITooltipController {
    */
   border?: CSSProperties['border']
   opacity?: CSSProperties['opacity']
+  arrowColor?: CSSProperties['backgroundColor']
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
   afterHide?: () => void