mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 15:35:36 +03:00
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>
This commit is contained in:
parent
86f95c0870
commit
bc8c895b0e
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
|
@ -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,
|
||||
|
@ -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`
|
||||
|
Loading…
Reference in New Issue
Block a user