[T-4870] Tooltip component (#96)

* fix: button forwardRef * feat: tooltip component
2024-02-22 18:25:04 +08:00
parent 496404195c
commit 30bbe4d766
14 changed files with 344 additions and 10 deletions
@@ -8,6 +8,7 @@
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
@@ -98,19 +98,29 @@ const Button = forwardRef<
              href,
              ...baseLinkProps,
            };
-            return <a {...externalLinkProps}>{_children}</a>;
+            return (
+              // @ts-expect-error - ref
+              <a ref={ref} {...externalLinkProps}>
+                {_children}
+              </a>
+            );
          }

          // Internal link
          return (
-            <Link {...baseLinkProps} to={href}>
+            // @ts-expect-error - ref
+            <Link ref={ref} {...baseLinkProps} to={href}>
              {_children}
            </Link>
          );
        } else {
          const { ...buttonProps } = _props;
-          // @ts-expect-error - as prop is not a valid prop for button elements
-          return <button {...buttonProps}>{_children}</button>;
+          return (
+            // @ts-expect-error - as prop is not a valid prop for button elements
+            <button ref={ref} {...buttonProps}>
+              {_children}
+            </button>
+          );
        }
      },
      [],
@@ -161,8 +171,6 @@ const Button = forwardRef<
    return (
      <Component
        {...props}
-        // @ts-expect-error - ref is not a valid prop for button elements
-        ref={ref}
        className={buttonTheme({ ...styleProps, class: className })}
      >
        {cloneIcon(leftIcon, { ...iconSize })}
@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const tooltipTheme = tv({
+  slots: {
+    content: [
+      'z-tooltip',
+      'rounded-md',
+      'bg-surface-high-contrast',
+      'p-2',
+      'text-elements-on-high-contrast',
+    ],
+    arrow: ['fill-surface-high-contrast'],
+  },
+});
@@ -0,0 +1,47 @@
+import React from 'react';
+import type {
+  TooltipContentProps,
+  TooltipTriggerProps,
+} from '@radix-ui/react-tooltip';
+import { ReactNode, useState } from 'react';
+
+import { TooltipBase, type TooltipBaseProps } from './TooltipBase';
+
+export interface TooltipProps extends TooltipBaseProps {
+  triggerProps?: TooltipTriggerProps;
+  contentProps?: TooltipContentProps;
+  content?: ReactNode;
+}
+
+// https://github.com/radix-ui/primitives/issues/955#issuecomment-1798201143
+// Wrap on top of Tooltip base to make tooltip open on mobile via click
+export const Tooltip = ({
+  children,
+  triggerProps,
+  contentProps,
+  content,
+  ...props
+}: TooltipProps) => {
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+  return (
+    <TooltipBase
+      open={isTooltipVisible}
+      onOpenChange={setIsTooltipVisible}
+      {...props}
+    >
+      <TooltipBase.Trigger
+        asChild
+        onBlur={() => setIsTooltipVisible(false)}
+        onClick={() => setIsTooltipVisible((prevOpen) => !prevOpen)}
+        onFocus={() => setTimeout(() => setIsTooltipVisible(true), 0)}
+        {...triggerProps}
+      >
+        {triggerProps?.children ?? children}
+      </TooltipBase.Trigger>
+      <TooltipBase.Content {...contentProps}>
+        {content ?? contentProps?.children ?? 'Coming soon'}
+      </TooltipBase.Content>
+    </TooltipBase>
+  );
+};
@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  Provider,
+  TooltipProps as RadixTooltipProps,
+  Root,
+  type TooltipProviderProps,
+} from '@radix-ui/react-tooltip';
+import { useState, type PropsWithChildren } from 'react';
+
+import { TooltipContent } from './TooltipContent';
+import { TooltipTrigger } from './TooltipTrigger';
+
+export interface TooltipBaseProps extends RadixTooltipProps {
+  providerProps?: TooltipProviderProps;
+}
+
+export const TooltipBase = ({
+  children,
+  providerProps,
+  ...props
+}: PropsWithChildren<TooltipBaseProps>) => {
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+  return (
+    <Provider {...providerProps}>
+      <Root
+        open={isTooltipVisible}
+        onOpenChange={setIsTooltipVisible}
+        {...props}
+      >
+        {children}
+      </Root>
+    </Provider>
+  );
+};
+
+TooltipBase.Trigger = TooltipTrigger;
+TooltipBase.Content = TooltipContent;
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Arrow,
+  Content,
+  Portal,
+  type TooltipArrowProps,
+  type TooltipContentProps,
+} from '@radix-ui/react-tooltip';
+
+import { tooltipTheme } from '../Tooltip.theme';
+
+export interface ContentProps extends TooltipContentProps {
+  hasArrow?: boolean;
+  arrowProps?: TooltipArrowProps;
+}
+
+export const TooltipContent = ({
+  children,
+  arrowProps,
+  className,
+  hasArrow = true,
+  ...props
+}: ContentProps) => {
+  const { content, arrow } = tooltipTheme();
+  return (
+    <Portal>
+      <Content
+        className={content({
+          className,
+        })}
+        sideOffset={5}
+        {...props}
+      >
+        {hasArrow && (
+          <Arrow
+            className={arrow({
+              className: arrowProps?.className,
+            })}
+            {...arrowProps}
+          />
+        )}
+        {children}
+      </Content>
+    </Portal>
+  );
+};
@@ -0,0 +1 @@
+export * from './TooltipContent';
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Trigger, type TooltipTriggerProps } from '@radix-ui/react-tooltip';
+
+export type TriggerProps = TooltipTriggerProps;
+
+export const TooltipTrigger = ({ children, ...props }: TriggerProps) => {
+  return (
+    <Trigger asChild {...props}>
+      {children}
+    </Trigger>
+  );
+};
@@ -0,0 +1 @@
+export * from './TooltipTrigger';
@@ -0,0 +1,2 @@
+export * from './Tooltip';
+export * from './TooltipBase';
@@ -23,6 +23,7 @@ import {
  renderInlineNotifications,
 } from './renders/inlineNotifications';
 import { renderInputs } from './renders/input';
+import { renderTooltips } from './renders/tooltip';

 const Page = () => {
  const [singleDate, setSingleDate] = useState<Value>();
@@ -41,13 +42,21 @@ const Page = () => {

        <div className="w-full h border border-gray-200 px-20 my-10" />

-        {/* Button */}
        <div className="flex flex-col gap-10 items-center justify-between">
+          <h1 className="text-2xl font-bold">Tooltip</h1>
+          <div className="flex w-full flex-wrap max-w-[680px] justify-center gap-10">
+            {renderTooltips()}
+          </div>
+
+          <div className="w-full h border border-gray-200 px-20 my-10" />
+
+          {/* Input */}
          <h1 className="text-2xl font-bold">Input</h1>
          <div className="flex w-full flex-col gap-10">{renderInputs()}</div>

          <div className="w-full h border border-gray-200 px-20 my-10" />

+          {/* Button */}
          <h1 className="text-2xl font-bold">Button</h1>
          <div className="flex flex-col gap-10">
            {renderButtons()}
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from 'components/shared/Button';
+import { Tooltip } from 'components/shared/Tooltip';
+import { ContentProps } from 'components/shared/Tooltip/TooltipContent';
+
+const alignments: ContentProps['align'][] = ['start', 'center', 'end'];
+const sides: ContentProps['side'][] = ['left', 'top', 'bottom', 'right'];
+
+export const renderTooltips = () => {
+  const tooltips = sides.map((side) => {
+    return alignments.map((align) => {
+      return (
+        <Tooltip
+          key={`${side}-${align}`}
+          content="tooltip content"
+          contentProps={{ align, side }}
+        >
+          <Button
+            variant="ghost"
+            key={`${side}-${align}`}
+            className="h-16 self-center"
+          >
+            Tooltip ({side} - {align})
+          </Button>
+        </Tooltip>
+      );
+    });
+  });
+  return tooltips;
+};
@@ -8,10 +8,13 @@ export default withMT({
    '../../node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
-    fontFamily: {
-      sans: ['Inter', 'sans-serif'],
-    },
    extend: {
+      zIndex: {
+        tooltip: '52',
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
      fontSize: {
        '2xs': '0.625rem',
        '3xs': '0.5rem',