refactor(console): tooltip (#2318)

packages/console/src/components/IconButton/index.tsx

@@ -39,8 +39,8 @@ const IconButton = (
         <Tooltip
           anchorRef={innerReference}
           content={t(tooltip)}
+          position="top"
           horizontalAlign="center"
-          verticalAlign="top"
         />
       )}
     </>

packages/console/src/components/TipBubble/index.module.scss

@@ -0,0 +1,54 @@
+@use '@/scss/underscore' as _;
+
+.tipBubble {
+  position: relative;
+  border-radius: 8px;
+  background: var(--color-tooltip-background);
+  color: var(--color-tooltip-text);
+  box-shadow: var(--shadow-1);
+  padding: _.unit(2) _.unit(3);
+  font: var(--font-body-medium);
+  max-width: 300px;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: inherit;
+    border-radius: _.unit(0.5) 0 _.unit(0.5);
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  &.top::after {
+    top: 100%;
+  }
+
+  &.right::after {
+    top: 50%;
+    left: 0%;
+  }
+
+  &.bottom::after {
+    top: 0%;
+  }
+
+  &.left::after {
+    top: 50%;
+    left: 100%;
+  }
+
+  &.start::after {
+    left: _.unit(10);
+  }
+
+
+  &.center::after {
+    left: 50%;
+  }
+
+  &.end::after {
+    right: _.unit(7.5);
+  }
+}

packages/console/src/components/TipBubble/index.tsx

@@ -0,0 +1,43 @@
+import { conditional } from '@silverhand/essentials';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import type { ForwardedRef, ReactNode, HTMLProps } from 'react';
+
+import type { HorizontalAlignment } from '@/hooks/use-position';
+
+import * as styles from './index.module.scss';
+
+export type TipBubblePosition = 'top' | 'right' | 'bottom' | 'left';
+
+type Props = HTMLProps<HTMLDivElement> & {
+  children: ReactNode;
+  position?: TipBubblePosition;
+  horizontalAlignment?: HorizontalAlignment;
+  className?: string;
+};
+
+const supportHorizontalAlignmentPositions = new Set<TipBubblePosition>(['top', 'bottom']);
+
+const TipBubble = (
+  { children, position = 'bottom', horizontalAlignment = 'center', className, ...rest }: Props,
+  reference: ForwardedRef<HTMLDivElement>
+) => {
+  return (
+    <div
+      {...rest}
+      ref={reference}
+      className={classNames(
+        styles.tipBubble,
+        styles[position],
+        conditional(
+          supportHorizontalAlignmentPositions.has(position) && styles[horizontalAlignment]
+        ),
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default forwardRef(TipBubble);

packages/console/src/components/TipBubble/utils.ts

@@ -0,0 +1,57 @@
+import type { HorizontalAlignment, VerticalAlignment } from '@/hooks/use-position';
+
+import type { TipBubblePosition } from '.';
+
+export const getVerticalOffset = (position: TipBubblePosition) => {
+  switch (position) {
+    case 'top':
+      return -16;
+    case 'bottom':
+      return 16;
+    default:
+      return 0;
+  }
+};
+
+export const getHorizontalOffset = (
+  tooltipPosition: TipBubblePosition,
+  horizontalAlignment: HorizontalAlignment
+): number => {
+  if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
+    switch (horizontalAlignment) {
+      case 'start':
+        return -32;
+      case 'end':
+        return 32;
+      default:
+        return 0;
+    }
+  } else {
+    return tooltipPosition === 'left' ? -32 : 32;
+  }
+};
+
+export const getVerticalAlignment = (position: TipBubblePosition): VerticalAlignment => {
+  switch (position) {
+    case 'top':
+      return 'top';
+    case 'bottom':
+      return 'bottom';
+    default:
+      return 'middle';
+  }
+};
+
+export const getHorizontalAlignment = (
+  position: TipBubblePosition,
+  fallback: HorizontalAlignment
+): HorizontalAlignment => {
+  switch (position) {
+    case 'right':
+      return 'start';
+    case 'left':
+      return 'end';
+    default:
+      return fallback;
+  }
+};

packages/console/src/components/Tooltip/index.module.scss

@@ -2,48 +2,6 @@
 
 .tooltip {
   position: absolute;
-  border-radius: 8px;
-  background: var(--color-tooltip-background);
-  color: var(--color-tooltip-text);
-  box-shadow: var(--shadow-1);
-  padding: _.unit(2) _.unit(3);
-  font: var(--font-body-medium);
-  max-width: 300px;
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    top: 100%;
-    left: 50%;
-    background-color: inherit;
-    border-radius: _.unit(0.5) 0 _.unit(0.5);
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-
-  &.arrowUp::after {
-    top: 0%;
-  }
-
-  &.arrowRight::after {
-    top: 50%;
-    left: 100%;
-  }
-
-  &.arrowLeft::after {
-    top: 50%;
-    left: 0%;
-  }
-
-  &.start::after {
-    left: _.unit(10);
-  }
-
-  &.end::after {
-    right: _.unit(10);
-  }
 
   .content {
     @include _.multi-line-ellipsis(6);

packages/console/src/components/Tooltip/index.tsx

@@ -1,11 +1,18 @@
-import classNames from 'classnames';
 import type { ReactNode, RefObject } from 'react';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import type { VerticalAlignment, HorizontalAlignment } from '@/hooks/use-position';
+import type { HorizontalAlignment } from '@/hooks/use-position';
 import usePosition from '@/hooks/use-position';
 
+import TipBubble from '../TipBubble';
+import type { TipBubblePosition } from '../TipBubble';
+import {
+  getVerticalAlignment,
+  getHorizontalAlignment,
+  getVerticalOffset,
+  getHorizontalOffset,
+} from '../TipBubble/utils';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -13,20 +20,8 @@ type Props = {
   anchorRef: RefObject<Element>;
   className?: string;
   isKeepOpen?: boolean;
-  verticalAlign?: VerticalAlignment;
+  position?: TipBubblePosition;
   horizontalAlign?: HorizontalAlignment;
-  flip?: 'right' | 'left';
-};
-
-const getHorizontalOffset = (alignment: HorizontalAlignment, flipped: string): number => {
-  switch (alignment) {
-    case 'start':
-      return flipped === 'right' ? 32 : -32;
-    case 'end':
-      return flipped === 'left' ? -32 : 32;
-    default:
-      return 0;
-  }
 };
 
 const Tooltip = ({
@@ -34,17 +29,23 @@ const Tooltip = ({
   anchorRef,
   className,
   isKeepOpen = false,
-  verticalAlign = 'top',
+  position = 'top',
   horizontalAlign = 'start',
-  flip,
 }: Props) => {
   const [tooltipDom, setTooltipDom] = useState<HTMLDivElement>();
   const tooltipRef = useRef<HTMLDivElement>(null);
 
-  const { position, positionState, mutate } = usePosition({
-    verticalAlign,
-    horizontalAlign,
-    offset: { vertical: 16, horizontal: getHorizontalOffset(horizontalAlign, flip ?? '') },
+  const {
+    position: layoutPosition,
+    positionState,
+    mutate,
+  } = usePosition({
+    verticalAlign: getVerticalAlignment(position),
+    horizontalAlign: getHorizontalAlignment(position, horizontalAlign),
+    offset: {
+      vertical: getVerticalOffset(position),
+      horizontal: getHorizontalOffset(position, horizontalAlign),
+    },
     anchorRef,
     overlayRef: tooltipRef,
   });
@@ -124,24 +125,17 @@ const Tooltip = ({
     return null;
   }
 
-  const isArrowUp = positionState.verticalAlign === 'bottom';
-  const isArrowRight = flip === 'left' && positionState.horizontalAlign === 'end';
-  const isArrowLeft = flip === 'right' && positionState.horizontalAlign === 'start';
-
   return createPortal(
-    <div
-      ref={tooltipRef}
-      className={classNames(
-        styles.tooltip,
-        isArrowUp && styles.arrowUp,
-        isArrowRight && styles.arrowRight,
-        isArrowLeft && styles.arrowLeft,
-        !flip && styles[horizontalAlign],
-        className
-      )}
-      style={{ ...position }}
-    >
-      <div className={styles.content}>{content}</div>
+    <div className={styles.tooltip}>
+      <TipBubble
+        ref={tooltipRef}
+        className={className}
+        style={{ ...layoutPosition }}
+        position={position}
+        horizontalAlignment={positionState.horizontalAlign}
+      >
+        <div className={styles.content}>{content}</div>
+      </TipBubble>
     </div>,
     tooltipDom
   );

packages/console/src/hooks/use-position.ts

@@ -1,7 +1,7 @@
 import type { RefObject } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 
-export type VerticalAlignment = 'top' | 'center' | 'bottom';
+export type VerticalAlignment = 'top' | 'middle' | 'bottom';
 
 export type HorizontalAlignment = 'start' | 'center' | 'end';
 
@@ -29,22 +29,22 @@ const windowSafePadding = 12;
 const selectVerticalAlignment = ({
   verticalAlign,
   verticalTop,
-  verticalCenter,
+  verticalMiddle,
   verticalBottom,
   overlayHeight,
 }: {
   verticalAlign: VerticalAlignment;
   verticalTop: number;
-  verticalCenter: number;
+  verticalMiddle: number;
   verticalBottom: number;
   overlayHeight: number;
-}) => {
+}): VerticalAlignment => {
   const minY = windowSafePadding;
   const maxY = window.innerHeight - windowSafePadding;
 
   const isTopAllowed = verticalTop >= minY;
   const isCenterAllowed =
-    verticalCenter - overlayHeight / 2 >= minY && verticalCenter + overlayHeight / 2 <= maxY;
+    verticalMiddle - overlayHeight / 2 >= minY && verticalMiddle + overlayHeight / 2 <= maxY;
   const isBottomAllowed = verticalBottom + overlayHeight <= maxY;
 
   switch (verticalAlign) {
@@ -58,15 +58,15 @@ const selectVerticalAlignment = ({
       }
 
       if (isCenterAllowed) {
-        return 'center';
+        return 'middle';
       }
 
       return verticalAlign;
     }
 
-    case 'center': {
+    case 'middle': {
       if (isCenterAllowed) {
-        return 'center';
+        return 'middle';
       }
 
       if (isTopAllowed) {
@@ -90,7 +90,7 @@ const selectVerticalAlignment = ({
       }
 
       if (isCenterAllowed) {
-        return 'center';
+        return 'middle';
       }
 
       return verticalAlign;
@@ -197,14 +197,14 @@ export default function usePosition({
     const anchorRect = anchorRef.current.getBoundingClientRect();
     const overlayRect = overlayRef.current.getBoundingClientRect();
 
-    const verticalTop = anchorRect.y - overlayRect.height - offset.vertical;
-    const verticalCenter =
-      anchorRect.y - anchorRect.height / 2 - overlayRect.height / 2 + offset.vertical;
+    const verticalTop = anchorRect.y - overlayRect.height + offset.vertical;
+    const verticalMiddle =
+      anchorRect.y + anchorRect.height / 2 - overlayRect.height / 2 + offset.vertical;
     const verticalBottom = anchorRect.y + anchorRect.height + offset.vertical;
 
     const verticalPositionMap = {
       top: verticalTop,
-      center: verticalCenter,
+      middle: verticalMiddle,
       bottom: verticalBottom,
     };
 
@@ -222,7 +222,7 @@ export default function usePosition({
     const selectedVerticalAlign = selectVerticalAlignment({
       verticalAlign,
       verticalTop,
-      verticalCenter,
+      verticalMiddle,
       verticalBottom,
       overlayHeight: overlayRect.height,
     });