feat: add border options (with arrow)

Author: MoveRoad

src/components/Tooltip/Tooltip.tsx

@@ -43,6 +43,7 @@ const Tooltip = ({
   setIsOpen,
   activeAnchor,
   setActiveAnchor,
+  border,
 }: ITooltip) => {
   const tooltipRef = useRef<HTMLElement>(null)
   const tooltipArrowRef = useRef<HTMLElement>(null)
@@ -236,6 +237,7 @@ const Tooltip = ({
       tooltipArrowReference: tooltipArrowRef.current,
       strategy: positionStrategy,
       middlewares,
+      border,
     }).then((computedStylesData) => {
       if (Object.keys(computedStylesData.tooltipStyles).length) {
         setInlineStyles(computedStylesData.tooltipStyles)
@@ -502,6 +504,7 @@ const Tooltip = ({
       tooltipArrowReference: tooltipArrowRef.current,
       strategy: positionStrategy,
       middlewares,
+      border,
     }).then((computedStylesData) => {
       if (!mounted.current) {
         // invalidate computed positions after remount

src/components/Tooltip/TooltipTypes.d.ts

@@ -77,4 +77,5 @@ export interface ITooltip {
   afterHide?: () => void
   activeAnchor: HTMLElement | null
   setActiveAnchor: (anchor: HTMLElement | null) => void
+  border?: string | null
 }

src/components/TooltipController/TooltipController.tsx

@@ -44,6 +44,7 @@ const TooltipController = ({
   style,
   position,
   isOpen,
+  border,
   setIsOpen,
   afterShow,
   afterHide,
@@ -283,6 +284,7 @@ const TooltipController = ({
     style,
     position,
     isOpen,
+    border,
     setIsOpen,
     afterShow,
     afterHide,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -60,6 +60,7 @@ export interface ITooltipController {
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean
+  border?: string | null
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
   afterHide?: () => void

src/test/utils.spec.js

@@ -63,6 +63,7 @@ describe('compute positions', () => {
         top: '',
       },
       tooltipStyles: {
+        border: null,
         left: '5px',
         top: '-10px',
       },

src/utils/compute-positions-types.d.ts

@@ -8,4 +8,5 @@ export interface IComputePositions {
   offset?: number
   strategy?: 'absolute' | 'fixed'
   middlewares?: Middleware[]
+  border?: string | null
 }

src/utils/compute-positions.ts

@@ -9,6 +9,7 @@ export const computeTooltipPosition = async ({
   offset: offsetValue = 10,
   strategy = 'absolute',
   middlewares = [offset(Number(offsetValue)), flip(), shift({ padding: 5 })],
+  border = null,
 }: IComputePositions) => {
   if (!elementReference) {
     // elementReference can be null or undefined and we will not compute the position
@@ -31,7 +32,7 @@ export const computeTooltipPosition = async ({
       strategy,
       middleware,
     }).then(({ x, y, placement, middlewareData }) => {
-      const styles = { left: `${x}px`, top: `${y}px` }
+      const styles = { left: `${x}px`, top: `${y}px`, border }
 
       const { x: arrowX, y: arrowY } = middlewareData.arrow ?? { x: 0, y: 0 }
 
@@ -43,12 +44,22 @@ export const computeTooltipPosition = async ({
           left: 'right',
         }[placement.split('-')[0]] ?? 'bottom'
 
+      const borderSide =
+        border &&
+        {
+          top: { borderBottom: border, borderRight: border },
+          right: { borderBottom: border, borderLeft: border },
+          bottom: { borderTop: border, borderLeft: border },
+          left: { borderTop: border, borderRight: border },
+        }[placement.split('-')[0]]
+
       const arrowStyle = {
         left: arrowX != null ? `${arrowX}px` : '',
         top: arrowY != null ? `${arrowY}px` : '',
         right: '',
         bottom: '',
-        [staticSide]: '-4px',
+        ...{ ...borderSide },
+        [staticSide]: '-5px',
       }
 
       return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement }