feat(tooltip): add more props

components/tooltip/styles.ts

@@ -0,0 +1,28 @@
+import { SnippetTypes } from '../utils/prop-types'
+import { ZeitUIThemesPalette } from '../styles/themes'
+
+export type TooltipColors = {
+  bgColor: string
+  color: string
+}
+
+export const getColors = (
+  type: SnippetTypes,
+  palette: ZeitUIThemesPalette,
+): TooltipColors => {
+  const colors: { [key in SnippetTypes ]: string } = {
+    default: palette.background,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    secondary: palette.secondary,
+    dark: palette.foreground,
+    lite: palette.background
+  }
+  const color = type === 'lite' || type === 'default' ? palette.foreground : palette.background
+  
+  return {
+    color,
+    bgColor: colors[type]
+  }
+}

components/tooltip/tooltip-content.tsx

@@ -1,20 +1,23 @@
-import React, { MutableRefObject, useRef, useState } from 'react'
+import React, { MutableRefObject, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import useTheme from '../styles/use-theme'
 import usePortal from '../utils/use-portal'
 import useResize from '../utils/use-resize'
 import CSSTransition from '../shared/css-transition'
 import useClickAnyWhere from '../utils/use-click-anywhere'
+import { getColors } from './styles'
 import { getPosition, TooltipPosition, defaultTooltipPosition } from './placement'
 import TooltipIcon from './tooltip-icon'
-import { Placement } from '../utils/prop-types'
+import { Placement, SnippetTypes } from '../utils/prop-types'
 
 interface Props {
   parent?: MutableRefObject<HTMLElement | null> | undefined
   placement: Placement
+  type: SnippetTypes
   visible: boolean
+  hideArrow: boolean
   offset: number
-  bgColor: string
+  className?: string
 }
 
 interface ReactiveDomReact {
@@ -50,12 +53,14 @@ const getRect = (ref: MutableRefObject<HTMLElement | null>): ReactiveDomReact =>
 }
 
 const TooltipContent: React.FC<React.PropsWithChildren<Props>> = React.memo(({
-  children, parent, visible, offset, placement, bgColor,
+  children, parent, visible, offset, placement, type, className, hideArrow,
 }) => {
   const theme = useTheme()
   const el = usePortal('tooltip')
   const selfRef = useRef<HTMLDivElement>(null)
   const [rect, setRect] = useState<TooltipPosition>(defaultTooltipPosition)
+  const colors = useMemo(() => getColors(type, theme.palette), [type, theme.palette])
+  const hasShadow = type === 'default'
   if (!parent) return null
 
   const updateRect = () => {
@@ -75,12 +80,10 @@ const TooltipContent: React.FC<React.PropsWithChildren<Props>> = React.memo(({
   if (!el) return null
   return createPortal((
     <CSSTransition visible={visible}>
-      <div className="tooltip-content" ref={selfRef}
-        onClick={preventHandler}
-        onMouseEnter={preventHandler}
-        onMouseLeave={preventHandler}>
+      <div className={`tooltip-content ${className}`} ref={selfRef}
+        onClick={preventHandler}>
         <div className="inner">
-          <TooltipIcon placement={placement} bgColor={bgColor} />
+          {!hideArrow && <TooltipIcon placement={placement} bgColor={colors.bgColor} shadow={hasShadow} />}
           {children}
         </div>
         <style jsx>{`
@@ -90,11 +93,12 @@ const TooltipContent: React.FC<React.PropsWithChildren<Props>> = React.memo(({
           top: ${rect.top};
           left: ${rect.left};
           transform: ${rect.transform};
-          background-color: ${bgColor};
-          color: ${theme.palette.background};
+          background-color: ${colors.bgColor};
+          color: ${colors.color};
           border-radius: ${theme.layout.radius};
           padding: 0;
           z-index: 1000;
+          box-shadow: ${hasShadow ? theme.expressiveness.shadowMedium : 'none'};
         }
         
         .inner {

components/tooltip/tooltip-icon.tsx

@@ -1,18 +1,25 @@
 import React, { useMemo } from 'react'
 import { getIconPosition } from './placement'
 import { Placement } from '../utils/prop-types'
+import useTheme from '../styles/use-theme'
 
 interface Props {
   placement: Placement
   bgColor: string
+  shadow: boolean
 }
 
 const TooltipIcon: React.FC<Props> = ({
-  placement, bgColor,
+  placement, bgColor, shadow
 }) => {
+  const theme = useTheme()
   const {
     transform, top, left, right, bottom,
   } = useMemo(() => getIconPosition(placement, 3), [placement])
+  const bgColorWithDark = useMemo(() => {
+    if (!shadow || theme.type !== 'dark') return bgColor
+    return theme.palette.accents_2
+  }, [theme.type, bgColor, shadow])
   
   return (
     <span>
@@ -22,7 +29,7 @@ const TooltipIcon: React.FC<Props> = ({
           height: 0;
           border-style: solid;
           border-width: 6px 7px 6px 0;
-          border-color: transparent ${bgColor} transparent transparent;
+          border-color: transparent ${bgColorWithDark} transparent transparent;
           position: absolute;
           left: ${left};
           top: ${top};

components/tooltip/tooltip.tsx

@@ -1,105 +1,92 @@
-import React, { useMemo, useRef, useState } from 'react'
-import useTheme from '../styles/use-theme'
+import React, { useRef, useState } from 'react'
 import withDefaults from '../utils/with-defaults'
 import TooltipContent from './tooltip-content'
 import useClickAway from '../utils/use-click-away'
-import { ZeitUIThemesPalette } from 'components/styles/themes'
-import { TriggerTypes, Placement, NormalTypes } from '../utils/prop-types'
+import { TriggerTypes, Placement, SnippetTypes } from '../utils/prop-types'
 
 interface Props {
   text: string | React.ReactNode
-  type?: NormalTypes
+  type?: SnippetTypes
   placement?: Placement
   initialVisible?: boolean
+  hideArrow?: boolean
   trigger?: TriggerTypes
   enterDelay?: number
   leaveDelay?: number
   offset?: number
+  className?: string
+  portalClassName?: string
+  onVisibleChange?: (visible: boolean) => void
 }
 
 const defaultProps = {
   initialVisible: false,
-  type: 'default' as NormalTypes,
+  hideArrow: false,
+  type: 'default' as SnippetTypes,
   trigger: 'hover' as TriggerTypes,
   placement: 'top',
   enterDelay: 100,
-  leaveDelay: 300,
+  leaveDelay: 0,
   offset: 12,
+  className: '',
+  portalClassName: '',
+  onVisibleChange: () => {},
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type TooltipProps = Props & typeof defaultProps & NativeAttrs
 
-const getBgColor = (
-  type: NormalTypes,
-  palette: ZeitUIThemesPalette,
-) => {
-  const colors: { [key in NormalTypes ]: string } = {
-    default: palette.foreground,
-    success: palette.success,
-    warning: palette.warning,
-    error: palette.error,
-    secondary: palette.secondary,
-  }
-  return colors[type]
-}
-
 const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
-  children, initialVisible, text, offset, placement,
-  enterDelay, leaveDelay, trigger, type,
+  children, initialVisible, text, offset, placement, portalClassName,
+  enterDelay, leaveDelay, trigger, type, className, onVisibleChange,
+  hideArrow, ...props
 }) => {
-  const theme = useTheme()
   const timer = useRef<number>()
   const ref = useRef<HTMLDivElement>(null)
   const [visible, setVisible] = useState<boolean>(initialVisible)
-  const bgColor = useMemo(() => getBgColor(type, theme.palette), [type, theme.palette])
+  const contentProps = {
+    type,
+    visible,
+    offset,
+    placement,
+    hideArrow,
+    parent: ref,
+    className: portalClassName,
+  }
   
   const changeVisible = (nextState: boolean) => {
     const clear = () => {
       clearTimeout(timer.current)
       timer.current = undefined
     }
-    if (nextState) {
-      timer.current = window.setTimeout(() => {
-        setVisible(true)
-        clear()
-      }, enterDelay)
-    } else {
+    const handler = (nextState: boolean) => {
+      setVisible(nextState)
+      onVisibleChange(nextState)
       clear()
-      timer.current = window.setTimeout(() => {
-        setVisible(false)
-        clear()
-      }, leaveDelay)
     }
-  }
-  const mouseEventHandler = (nextState: boolean) => {
-    if (trigger !== 'hover') return
-    changeVisible(nextState)
-  }
-  const clickEventHandler = () => {
-    if (trigger !== 'click') return
-    changeVisible(!visible)
+    clear()
+    if (nextState) {
+      timer.current = window.setTimeout(() => handler(true), enterDelay)
+      return
+    }
+    timer.current = window.setTimeout(() => handler(false), leaveDelay)
   }
   
-  useClickAway(ref, () => {
-    if (trigger !== 'click') return
-    changeVisible(false)
-  })
+  const mouseEventHandler = (next: boolean) => trigger === 'hover' && changeVisible(next)
+  const clickEventHandler = () => trigger === 'click' && changeVisible(!visible)
+  useClickAway(ref, () => trigger === 'click' && changeVisible(false))
   
   return (
-    <div ref={ref} className="tooltip" onClick={clickEventHandler}
+    <div ref={ref} className={`tooltip ${className}`}
+      onClick={clickEventHandler}
       onMouseEnter={() => mouseEventHandler(true)}
-      onMouseLeave={() => mouseEventHandler(false)}>
+      onMouseLeave={() => mouseEventHandler(false)}
+      {...props}>
       {children}
-      <TooltipContent parent={ref} visible={visible}
-        offset={offset}
-        bgColor={bgColor}
-        placement={placement}>
-        {text}
-      </TooltipContent>
+      <TooltipContent {...contentProps}>{text}</TooltipContent>
       <style jsx>{`
         .tooltip {
-          width: min-content;
+          width: max-content;
         }
       `}</style>
     </div>