feat: add arrow size property (#1251)

* feat: add arrow size property

* docs: add new option to documentation

* feat: add arrow size custom property to the root tokens

Author: WoodyWoodsta

docs/docs/options.mdx

@@ -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}
       />

src/components/Tooltip/Tooltip.tsx

@@ -158,5 +158,6 @@ export interface ITooltip {
   border?: CSSProperties['border']
   opacity?: CSSProperties['opacity']
   arrowColor?: CSSProperties['backgroundColor']
+  arrowSize?: number
   role?: React.AriaRole
 }

src/components/Tooltip/TooltipTypes.d.ts

@@ -14,6 +14,7 @@
 .arrow {
   position: absolute;
   background: inherit;
+  z-index: -1;
 }
 
 .noArrow {

src/components/Tooltip/core-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 {

src/components/Tooltip/styles.module.css

@@ -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,

src/components/TooltipController/TooltipController.tsx

@@ -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

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -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>

src/test/__snapshots__/tooltip-attributes.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>

src/test/__snapshots__/tooltip-props.spec.js.snap

@@ -8,4 +8,5 @@
   --rt-opacity: 0.9;
   --rt-transition-show-delay: 0.15s;
   --rt-transition-closing-delay: 0.15s;
+  --rt-arrow-size: 8px;
 }