From 5d0eb7d5ec9777fe1cdb4fe73203eb7130ac3b1c Mon Sep 17 00:00:00 2001
From: Sean Wood <sean.wood@rightmove.co.uk>
Date: Fri, 6 Jun 2025 15:18:39 +0100
Subject: [PATCH] feat: add arrow size property

---
 src/components/Tooltip/Tooltip.tsx               |  5 +++++
 src/components/Tooltip/TooltipTypes.d.ts         |  1 +
 src/components/Tooltip/core-styles.module.css    |  1 +
 src/components/Tooltip/styles.module.css         |  4 ++--
 .../TooltipController/TooltipController.tsx      |  2 ++
 .../TooltipControllerTypes.d.ts                  |  1 +
 .../tooltip-attributes.spec.js.snap              |  6 +++---
 .../__snapshots__/tooltip-props.spec.js.snap     | 16 ++++++++--------
 src/utils/compute-tooltip-position-types.d.ts    |  1 +
 src/utils/compute-tooltip-position.ts            |  3 ++-
 10 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 336faa99..63310afb 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -68,6 +68,7 @@ const Tooltip = ({
   border,
   opacity,
   arrowColor,
+  arrowSize = 8,
   role = 'tooltip',
 }: ITooltip) => {
   const tooltipRef = useRef<HTMLElement>(null)
@@ -345,6 +346,7 @@ const Tooltip = ({
       strategy: positionStrategy,
       middlewares,
       border,
+      arrowSize,
     }).then((computedStylesData) => {
       handleComputedPosition(computedStylesData)
     })
@@ -437,6 +439,7 @@ const Tooltip = ({
       strategy: positionStrategy,
       middlewares,
       border,
+      arrowSize,
     }).then((computedStylesData) => {
       if (!mounted.current) {
         // invalidate computed positions after remount
@@ -456,6 +459,7 @@ const Tooltip = ({
     position,
     imperativeOptions?.position,
     float,
+    arrowSize,
   ])
 
   useEffect(() => {
@@ -899,6 +903,7 @@ const Tooltip = ({
           background: arrowColor
             ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
             : undefined,
+          '--rt-arrow-size': `${arrowSize}px`,
         }}
         ref={tooltipArrowRef}
       />
diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts
index ee7fc42c..ebb75b90 100644
--- a/src/components/Tooltip/TooltipTypes.d.ts
+++ b/src/components/Tooltip/TooltipTypes.d.ts
@@ -158,5 +158,6 @@ export interface ITooltip {
   border?: CSSProperties['border']
   opacity?: CSSProperties['opacity']
   arrowColor?: CSSProperties['backgroundColor']
+  arrowSize?: number
   role?: React.AriaRole
 }
diff --git a/src/components/Tooltip/core-styles.module.css b/src/components/Tooltip/core-styles.module.css
index cbb99823..0b1d4349 100644
--- a/src/components/Tooltip/core-styles.module.css
+++ b/src/components/Tooltip/core-styles.module.css
@@ -14,6 +14,7 @@
 .arrow {
   position: absolute;
   background: inherit;
+  z-index: -1;
 }
 
 .noArrow {
diff --git a/src/components/Tooltip/styles.module.css b/src/components/Tooltip/styles.module.css
index f14041e3..f9afec59 100644
--- a/src/components/Tooltip/styles.module.css
+++ b/src/components/Tooltip/styles.module.css
@@ -6,8 +6,8 @@
 }
 
 .arrow {
-  width: 8px;
-  height: 8px;
+  width: var(--rt-arrow-size);
+  height: var(--rt-arrow-size);
 }
 
 [class*='react-tooltip__place-top'] > .arrow {
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
index 289f1d1d..fd70a431 100644
--- a/src/components/TooltipController/TooltipController.tsx
+++ b/src/components/TooltipController/TooltipController.tsx
@@ -58,6 +58,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
       border,
       opacity,
       arrowColor,
+      arrowSize,
       setIsOpen,
       afterShow,
       afterHide,
@@ -368,6 +369,7 @@ const TooltipController = React.forwardRef<TooltipRefProps, ITooltipController>(
       border,
       opacity,
       arrowColor,
+      arrowSize,
       setIsOpen,
       afterShow,
       afterHide,
diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts
index a201ba1d..4aac979c 100644
--- a/src/components/TooltipController/TooltipControllerTypes.d.ts
+++ b/src/components/TooltipController/TooltipControllerTypes.d.ts
@@ -91,6 +91,7 @@ export interface ITooltipController {
   border?: CSSProperties['border']
   opacity?: CSSProperties['opacity']
   arrowColor?: CSSProperties['backgroundColor']
+  arrowSize?: number
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
   afterHide?: () => void
diff --git a/src/test/__snapshots__/tooltip-attributes.spec.js.snap b/src/test/__snapshots__/tooltip-attributes.spec.js.snap
index 9f36495b..c4b2b54a 100644
--- a/src/test/__snapshots__/tooltip-attributes.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-attributes.spec.js.snap
@@ -17,7 +17,7 @@ exports[`tooltip attributes basic tooltip 1`] = `
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: -1px; bottom: -4px;"
+      style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
     />
   </div>
 </div>
@@ -41,7 +41,7 @@ exports[`tooltip attributes tooltip with class name 1`] = `
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: -1px; bottom: -4px;"
+      style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
     />
   </div>
 </div>
@@ -65,7 +65,7 @@ exports[`tooltip attributes tooltip with place 1`] = `
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: -4px; top: -1px;"
+      style="--rt-arrow-size: 8px; left: -4px; top: -1px;"
     />
   </div>
 </div>
diff --git a/src/test/__snapshots__/tooltip-props.spec.js.snap b/src/test/__snapshots__/tooltip-props.spec.js.snap
index 9dc8d750..9a4a0ab4 100644
--- a/src/test/__snapshots__/tooltip-props.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-props.spec.js.snap
@@ -16,7 +16,7 @@ exports[`tooltip props basic tooltip 1`] = `
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: -1px; bottom: -4px;"
+      style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
     />
   </div>
 </div>
@@ -40,7 +40,7 @@ exports[`tooltip props clickable tooltip 1`] = `
     </button>
     <div
       class="react-tooltip-arrow"
-      style="left: -1px; bottom: -4px;"
+      style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
     />
   </div>
 </div>
@@ -62,7 +62,7 @@ exports[`tooltip props tooltip with custom position 1`] = `
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: -1px; bottom: -4px;"
+      style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
     />
   </div>
 </div>
@@ -94,7 +94,7 @@ exports[`tooltip props tooltip with delay show 1`] = `
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: -1px; bottom: -4px;"
+      style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
     />
   </div>
 </div>
@@ -116,7 +116,7 @@ exports[`tooltip props tooltip with disableTooltip return false 1`] = `
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: -1px; bottom: -4px;"
+      style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
     />
   </div>
 </div>
@@ -138,7 +138,7 @@ exports[`tooltip props tooltip with float 1`] = `
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: -1px; bottom: -4px;"
+      style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
     />
   </div>
 </div>
@@ -165,7 +165,7 @@ exports[`tooltip props tooltip with html 1`] = `
     </span>
     <div
       class="react-tooltip-arrow"
-      style="left: -1px; bottom: -4px;"
+      style="--rt-arrow-size: 8px; left: -1px; bottom: -4px;"
     />
   </div>
 </div>
@@ -187,7 +187,7 @@ exports[`tooltip props tooltip with place 1`] = `
     Hello World!
     <div
       class="react-tooltip-arrow"
-      style="left: -4px; top: -1px;"
+      style="--rt-arrow-size: 8px; left: -4px; top: -1px;"
     />
   </div>
 </div>
diff --git a/src/utils/compute-tooltip-position-types.d.ts b/src/utils/compute-tooltip-position-types.d.ts
index 984db78e..5fdd79c5 100644
--- a/src/utils/compute-tooltip-position-types.d.ts
+++ b/src/utils/compute-tooltip-position-types.d.ts
@@ -10,6 +10,7 @@ export interface IComputePositionArgs {
   strategy?: 'absolute' | 'fixed'
   middlewares?: Middleware[]
   border?: CSSProperties['border']
+  arrowSize?: number
 }
 
 export interface IComputedPosition {
diff --git a/src/utils/compute-tooltip-position.ts b/src/utils/compute-tooltip-position.ts
index 1af535b9..2d6ddd4a 100644
--- a/src/utils/compute-tooltip-position.ts
+++ b/src/utils/compute-tooltip-position.ts
@@ -16,6 +16,7 @@ const computeTooltipPosition = async ({
     shift({ padding: 5 }),
   ],
   border,
+  arrowSize = 8,
 }: IComputePositionArgs) => {
   if (!elementReference) {
     // elementReference can be null or undefined and we will not compute the position
@@ -78,7 +79,7 @@ const computeTooltipPosition = async ({
         right: '',
         bottom: '',
         ...borderSide,
-        [staticSide]: `-${4 + borderWidth}px`,
+        [staticSide]: `-${arrowSize / 2 + borderWidth}px`,
       }
       /* c8 ignore end */