Feat : Introduced Delay Options for Tooltip (#5766)

Fixes https://github.com/twentyhq/twenty/issues/5727 --------- Co-authored-by: Rushikesh Tarapure <rushikeshtarapure@gofynd.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-09-11 15:35:36 +03:00 · 2024-06-19 20:07:44 +05:30 · 2024-06-19 20:07:44 +05:30 · bc8c895b0e
commit bc8c895b0e
parent 86f95c0870
8 changed files with 98 additions and 88 deletions
--- a/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx
+++ b/packages/twenty-front/src/modules/activities/comment/CommentHeader.tsx
@ -1,6 +1,5 @@
-import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
-import { Avatar } from 'twenty-ui';
+import { AppTooltip, Avatar } from 'twenty-ui';

 import { Comment } from '@/activities/types/Comment';
 import {
@ -42,21 +41,6 @@ const StyledDate = styled.div`
  margin-left: ${({ theme }) => theme.spacing(1)};
 `;

-const StyledTooltip = styled(Tooltip)`
-  background-color: ${({ theme }) => theme.background.primary};
-
-  box-shadow: 0px 2px 4px 3px
-    ${({ theme }) => theme.background.transparent.light};
-
-  box-shadow: 2px 4px 16px 6px
-    ${({ theme }) => theme.background.transparent.light};
-
-  color: ${({ theme }) => theme.font.color.primary};
-
-  opacity: 1;
-  padding: 8px;
-`;
-
 type CommentHeaderProps = {
  comment: Pick<Comment, 'id' | 'author' | 'createdAt'>;
  actionBar?: React.ReactNode;
@ -87,7 +71,7 @@ export const CommentHeader = ({ comment, actionBar }: CommentHeaderProps) => {
            <StyledDate id={`id-${commentId}`}>
              {beautifiedCreatedAt}
            </StyledDate>
-            <StyledTooltip
+            <AppTooltip
              anchorSelect={`#id-${commentId}`}
              content={exactCreatedAt}
              clickable
--- a/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
@ -1,8 +1,7 @@
-import { Tooltip } from 'react-tooltip';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { Avatar, IconCheckbox, IconNotes } from 'twenty-ui';
+import { AppTooltip, Avatar, IconCheckbox, IconNotes } from 'twenty-ui';

 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { timelineActivityWithoutTargetsFamilyState } from '@/activities/timeline/states/timelineActivityWithoutTargetsFamilyState';
@ -109,21 +108,6 @@ const StyledVerticalLine = styled.div`
  width: 2px;
 `;

-const StyledTooltip = styled(Tooltip)`
-  background-color: ${({ theme }) => theme.background.primary};
-
-  box-shadow: 0px 2px 4px 3px
-    ${({ theme }) => theme.background.transparent.light};
-
-  box-shadow: 2px 4px 16px 6px
-    ${({ theme }) => theme.background.transparent.light};
-
-  color: ${({ theme }) => theme.font.color.primary};
-
-  opacity: 1;
-  padding: ${({ theme }) => theme.spacing(2)};
-`;
-
 const StyledTimelineItemContainer = styled.div<{ isGap?: boolean }>`
  align-items: center;
  align-self: stretch;
@ -217,7 +201,7 @@ export const TimelineActivity = ({
          <StyledItemTitleDate id={`id-${activityForTimeline.id}`}>
            {beautifiedCreatedAt}
          </StyledItemTitleDate>
-          <StyledTooltip
+          <AppTooltip
            anchorSelect={`#id-${activityForTimeline.id}`}
            content={exactCreatedAt}
            clickable
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@ -1,8 +1,7 @@
 import React, { ReactElement, useContext } from 'react';
-import { Tooltip } from 'react-tooltip';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { AppTooltip, IconComponent } from 'twenty-ui';

 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
@ -55,17 +54,6 @@ const StyledInlineCellBaseContainer = styled.div`
  user-select: none;
 `;

-const StyledTooltip = styled(Tooltip)`
-  background-color: ${({ theme }) => theme.background.primary};
-  box-shadow: ${({ theme }) => theme.boxShadow.light};
-
-  color: ${({ theme }) => theme.font.color.primary};
-
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  padding: ${({ theme }) => theme.spacing(2)};
-`;
-
 export const StyledSkeletonDiv = styled.div`
  height: 24px;
 `;
@ -141,7 +129,7 @@ export const RecordInlineCellContainer = ({
          )}
          {/* TODO: Displaying Tooltips on the board is causing performance issues https://react-tooltip.com/docs/examples/render */}
          {!showLabel && !fieldDefinition?.disableTooltip && (
-            <StyledTooltip
+            <AppTooltip
              anchorSelect={`#${labelId}`}
              content={label}
              clickable
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
@ -1,9 +1,8 @@
 import { ChangeEvent, ReactNode, useRef } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { Tooltip } from 'react-tooltip';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Avatar, AvatarType } from 'twenty-ui';
+import { AppTooltip, Avatar, AvatarType } from 'twenty-ui';
 import { v4 as uuidV4 } from 'uuid';

 import {
@ -55,17 +54,6 @@ const StyledTitle = styled.div`
  justify-content: center;
 `;

-const StyledTooltip = styled(Tooltip)`
-  background-color: ${({ theme }) => theme.background.primary};
-  box-shadow: ${({ theme }) => theme.boxShadow.light};
-
-  color: ${({ theme }) => theme.font.color.primary};
-
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  padding: ${({ theme }) => theme.spacing(2)};
-`;
-
 const StyledAvatarWrapper = styled.div`
  cursor: pointer;
 `;
@ -153,7 +141,7 @@ export const ShowPageSummaryCard = ({
            Added {beautifiedCreatedAt}
          </StyledDate>
        )}
-        <StyledTooltip
+        <AppTooltip
          anchorSelect={`#${dateElementId}`}
          content={exactCreatedAt}
          clickable
--- a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
+++ b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
@ -10,6 +10,12 @@ export enum TooltipPosition {
  Bottom = 'bottom',
 }

+export enum TooltipDelay {
+  noDelay = '0ms',
+  shortDelay = '300ms',
+  mediumDelay = '500ms',
+}
+
 const StyledAppTooltip = styled(Tooltip)`
  backdrop-filter: ${({ theme }) => theme.blur.strong};
  background-color: ${({ theme }) => RGBA(theme.color.gray80, 0.8)};
@ -36,38 +42,51 @@ export type AppTooltipProps = {
  anchorSelect?: string;
  content?: string;
  children?: React.ReactNode;
-  delayHide?: number;
  offset?: number;
  noArrow?: boolean;
  isOpen?: boolean;
  place?: PlacesType;
+  delay?: TooltipDelay;
  positionStrategy?: PositionStrategy;
+  clickable?: boolean;
 };

 export const AppTooltip = ({
  anchorSelect,
  className,
  content,
-  delayHide,
  isOpen,
  noArrow,
  offset,
+  delay = TooltipDelay.mediumDelay,
  place,
  positionStrategy,
  children,
-}: AppTooltipProps) => (
-  <StyledAppTooltip
-    {...{
-      anchorSelect,
-      className,
-      content,
-      delayHide,
-      isOpen,
-      noArrow,
-      offset,
-      place,
-      positionStrategy,
-      children,
-    }}
-  />
-);
+  clickable,
+}: AppTooltipProps) => {
+  const delayInMs =
+    delay === TooltipDelay.noDelay
+      ? 0
+      : delay === TooltipDelay.shortDelay
+        ? 300
+        : 500;
+
+  return (
+    <StyledAppTooltip
+      {...{
+        anchorSelect,
+        className,
+        content,
+        delayShow: delayInMs,
+        delayHide: delayInMs,
+        isOpen,
+        noArrow,
+        offset,
+        place,
+        positionStrategy,
+        children,
+        clickable,
+      }}
+    />
+  );
+};
--- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
+++ b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
@ -4,7 +4,7 @@ import { styled } from '@linaria/react';

 import { THEME_COMMON } from '@ui/theme';

-import { AppTooltip } from './AppTooltip';
+import { AppTooltip, TooltipDelay } from './AppTooltip';

 const spacing4 = THEME_COMMON.spacing(4);

@ -87,12 +87,12 @@ export const OverflowingTextWithTooltip = ({
            <AppTooltip
              anchorSelect={`#${textElementId}`}
              content={mutliline ? undefined : text ?? ''}
-              delayHide={1}
              offset={5}
              isOpen
              noArrow
              place="bottom"
              positionStrategy="absolute"
+              delay={TooltipDelay.mediumDelay}
            >
              {mutliline ? <pre>{text}</pre> : ''}
            </AppTooltip>
--- a/packages/twenty-ui/src/display/tooltip/stories/Tooltip.stories.tsx
+++ b/packages/twenty-ui/src/display/tooltip/stories/Tooltip.stories.tsx
@ -6,7 +6,11 @@ import {
  ComponentDecorator,
 } from '@ui/testing';

-import { AppTooltip as Tooltip, TooltipPosition } from '../AppTooltip';
+import {
+  AppTooltip as Tooltip,
+  TooltipDelay,
+  TooltipPosition,
+} from '../AppTooltip';

 const meta: Meta<typeof Tooltip> = {
  title: 'UI/Display/Tooltip',
@ -19,6 +23,7 @@ type Story = StoryObj<typeof Tooltip>;
 export const Default: Story = {
  args: {
    place: TooltipPosition.Bottom,
+    delay: TooltipDelay.mediumDelay,
    content: 'Tooltip Test',
    isOpen: true,
    anchorSelect: '#hover-text',
@ -28,12 +33,54 @@ export const Default: Story = {
    anchorSelect,
    className,
    content,
-    delayHide,
+    delay,
    isOpen,
    noArrow,
    offset,
    place,
    positionStrategy,
+    clickable,
+  }) => (
+    <>
+      <p id="hover-text" data-testid="tooltip">
+        Hover me!
+      </p>
+      <Tooltip
+        {...{
+          anchorSelect,
+          className,
+          content,
+          delay,
+          isOpen,
+          noArrow,
+          offset,
+          place,
+          positionStrategy,
+          clickable,
+        }}
+      />
+    </>
+  ),
+};
+
+export const Hoverable: Story = {
+  args: {
+    place: TooltipPosition.Bottom,
+    delay: TooltipDelay.mediumDelay,
+    content: 'Tooltip Test',
+    isOpen: true,
+    anchorSelect: '#hover-text',
+  },
+  decorators: [ComponentDecorator],
+  render: ({
+    anchorSelect,
+    className,
+    content,
+    delay,
+    noArrow,
+    offset,
+    place,
+    positionStrategy,
  }) => (
    <>
      <p id="hover-text" data-testid="tooltip">
@ -44,8 +91,7 @@ export const Default: Story = {
          anchorSelect,
          className,
          content,
-          delayHide,
-          isOpen,
+          delay,
          noArrow,
          offset,
          place,
--- a/packages/twenty-website/src/app/_components/contributors/PullRequestItem.tsx
+++ b/packages/twenty-website/src/app/_components/contributors/PullRequestItem.tsx
@ -6,6 +6,7 @@ import { PullRequestIcon } from '@/app/_components/ui/icons/SvgIcons';
 import { Theme } from '@/app/_components/ui/theme/theme';
 import { formatIntoRelativeDate } from '@/shared-utils/formatIntoRelativeDate';

+// TODO: use twenty-ui Tooltip
 const StyledTooltip = styled(Tooltip)``;

 const Item = styled.div`