fix: arrow styles when bigger border and bigger size

Author: danielbarion

src/components/Tooltip/Tooltip.tsx

@@ -9,6 +9,8 @@ import {
   computeTooltipPosition,
   cssTimeToMs,
   clearTimeoutRef,
+  getBorderWidth,
+  getBorderColor,
 } from 'utils'
 import type { IComputedPosition } from 'utils'
 import { useTooltip } from 'components/TooltipProvider'
@@ -96,6 +98,10 @@ const Tooltip = ({
   const hoveringTooltip = useRef(false)
   const [anchorsBySelect, setAnchorsBySelect] = useState<HTMLElement[]>([])
   const mounted = useRef(false)
+  const arrowBorderWidth = getBorderWidth(border)
+  const arrowBorderColor = getBorderColor(border)
+  const arrowBackground =
+    border && arrowBorderColor ? arrowBorderColor : (arrowColor ?? 'var(--rt-tooltip-background)')
 
   /**
    * @todo Update when deprecated stuff gets removed.
@@ -937,13 +943,15 @@ const Tooltip = ({
         )}
         style={{
           ...computedPosition.tooltipArrowStyles,
-          background: arrowColor
-            ? `linear-gradient(to right bottom, transparent 50%, ${arrowColor} 50%)`
-            : undefined,
           '--rt-arrow-size': `${arrowSize}px`,
+          '--rt-arrow-background': arrowBackground,
+          '--rt-arrow-border-width': arrowBorderColor ? arrowBorderWidth : '0px',
+          '--rt-arrow-border-color': arrowBorderColor,
         }}
         ref={tooltipArrowRef}
-      />
+      >
+        <WrapperElement className={coreStyles['arrowInner']} />
+      </WrapperElement>
     </WrapperElement>
   ) : null
 }

src/components/Tooltip/core-styles.module.css

@@ -13,9 +13,16 @@
 
 .arrow {
   position: absolute;
-  background: inherit;
   z-index: -1;
   clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
+  background: var(--rt-arrow-border-color, var(--rt-arrow-background));
+  overflow: hidden;
+}
+
+.arrowInner {
+  position: absolute;
+  inset: var(--rt-arrow-border-width, 0px);
+  background: var(--rt-arrow-background);
 }
 
 .noArrow {

src/components/Tooltip/styles.module.css

@@ -28,31 +28,37 @@
 
 /** Types variant **/
 .dark {
-  background: var(--rt-color-dark);
+  --rt-tooltip-background: var(--rt-color-dark);
+  background: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }
 
 .light {
-  background-color: var(--rt-color-white);
+  --rt-tooltip-background: var(--rt-color-white);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-dark);
 }
 
 .success {
-  background-color: var(--rt-color-success);
+  --rt-tooltip-background: var(--rt-color-success);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }
 
 .warning {
-  background-color: var(--rt-color-warning);
+  --rt-tooltip-background: var(--rt-color-warning);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }
 
 .error {
-  background-color: var(--rt-color-error);
+  --rt-tooltip-background: var(--rt-color-error);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }
 
 .info {
-  background-color: var(--rt-color-info);
+  --rt-tooltip-background: var(--rt-color-info);
+  background-color: var(--rt-tooltip-background);
   color: var(--rt-color-white);
 }

src/utils/border-style.ts

@@ -0,0 +1,35 @@
+import type { CSSProperties } from 'react'
+
+/**
+ * Extract the width token from a CSS border shorthand so arrow styles can
+ * reuse the same thickness as the tooltip border.
+ */
+const getBorderWidth = (border?: CSSProperties['border']) => {
+  if (!border) {
+    return '0px'
+  }
+
+  const match = `${border}`.match(/(\d+px)/)
+  return match?.[1] ?? '1px'
+}
+
+/**
+ * Extract the color token from a CSS border shorthand so the arrow border/fill
+ * can stay visually aligned with the tooltip border.
+ */
+const getBorderColor = (border?: CSSProperties['border']) => {
+  if (!border) {
+    return undefined
+  }
+
+  const parts = `${border}`.trim().split(/\s+/)
+  if (parts.length >= 3) {
+    return parts.slice(2).join(' ')
+  }
+  if (parts.length === 2) {
+    return parts[1]
+  }
+  return parts[0]
+}
+
+export { getBorderWidth, getBorderColor }

src/utils/compute-tooltip-position.ts

@@ -53,11 +53,6 @@ const computeTooltipPosition = async ({
         }[placement.split('-')[0]] ?? 'bottom'
       /* c8 ignore end */
 
-      const borderSide = border && {
-        borderBottom: border,
-        borderRight: border,
-      }
-
       let borderWidth = 0
       if (border) {
         const match = `${border}`.match(/(\d+)px/)
@@ -78,8 +73,10 @@ const computeTooltipPosition = async ({
         top: arrowY != null ? `${arrowY}px` : '',
         right: '',
         bottom: '',
-        ...borderSide,
-        [staticSide]: `-${arrowSize / 2 + borderWidth}px`,
+        // Keep the arrow tucked under the tooltip body. When the tooltip has a
+        // border, offset by that width, but do not draw a separate arrow border:
+        // the rotated/clipped element cannot render that seam cleanly.
+        [staticSide]: `-${arrowSize * 0.5 + borderWidth}px`,
       }
       /* c8 ignore end */
 

src/utils/index.ts

@@ -7,6 +7,7 @@ import deepEqual from './deep-equal'
 import getScrollParent from './get-scroll-parent'
 import useIsomorphicLayoutEffect from './use-isomorphic-layout-effect'
 import clearTimeoutRef from './clear-timeout-ref'
+import { getBorderWidth, getBorderColor } from './border-style'
 
 export type { IComputedPosition }
 export {
@@ -18,4 +19,6 @@ export {
   getScrollParent,
   useIsomorphicLayoutEffect,
   clearTimeoutRef,
+  getBorderWidth,
+  getBorderColor,
 }