Skip to content

Commit e6716bc

Browse files
jaaydenhjaaydenh
committed
refactor: create a global tooltip provider with a consistent delay duration
1 parent 3c90fd2 commit e6716bc

File tree

45 files changed

+927
-1083
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+927
-1083
lines changed

‎site/.storybook/preview.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import isChromatic from "chromatic/isChromatic";
1111
import { StrictMode } from "react";
1212
import { QueryClient, QueryClientProvider } from "react-query";
1313
import { withRouter } from "storybook-addon-remix-react-router";
14+
import { TooltipProvider } from "../src/components/Tooltip/Tooltip";
1415
import "theme/globalFonts";
1516
import type { Decorator, Loader, Parameters } from "@storybook/react-vite";
1617
import themes from "../src/theme";
@@ -100,8 +101,10 @@ const withTheme: Decorator = (Story, context) => {
100101
<StyledEngineProvider injectFirst>
101102
<MuiThemeProvider theme={themes[selected]}>
102103
<EmotionThemeProvider theme={themes[selected]}>
103-
<CssBaseline />
104-
<Story />
104+
<TooltipProvider delayDuration={100}>
105+
<CssBaseline />
106+
<Story />
107+
</TooltipProvider>
105108
</EmotionThemeProvider>
106109
</MuiThemeProvider>
107110
</StyledEngineProvider>

‎site/src/App.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import "./theme/globalFonts";
22
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
3+
import { TooltipProvider } from "components/Tooltip/Tooltip";
34
import {
45
type FC,
56
type ReactNode,
@@ -53,8 +54,10 @@ export const AppProviders: FC<AppProvidersProps> = ({
5354
<QueryClientProvider client={queryClient}>
5455
<AuthProvider>
5556
<ThemeProvider>
56-
{children}
57-
<GlobalSnackbar />
57+
<TooltipProvider delayDuration={100}>
58+
{children}
59+
<GlobalSnackbar />
60+
</TooltipProvider>
5861
</ThemeProvider>
5962
</AuthProvider>
6063
{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}

‎site/src/components/CodeExample/CodeExample.tsx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Button } from "components/Button/Button";
33
import {
44
Tooltip,
55
TooltipContent,
6-
TooltipProvider,
76
TooltipTrigger,
87
} from "components/Tooltip/Tooltip";
98
import { EyeIcon, EyeOffIcon } from "lucide-react";
@@ -77,21 +76,19 @@ export const CodeExample: FC<CodeExampleProps> = ({
7776

7877
<div className="flex items-center gap-1">
7978
{showRevealButton && redactPattern && !secret && (
80-
<TooltipProvider>
81-
<Tooltip>
82-
<TooltipTrigger asChild>
83-
<Button
84-
size="icon"
85-
variant="subtle"
86-
onClick={() => setShowFullValue(!showFullValue)}
87-
>
88-
{icon}
89-
<span className="sr-only">{showButtonLabel}</span>
90-
</Button>
91-
</TooltipTrigger>
92-
<TooltipContent>{showButtonLabel}</TooltipContent>
93-
</Tooltip>
94-
</TooltipProvider>
79+
<Tooltip>
80+
<TooltipTrigger asChild>
81+
<Button
82+
size="icon"
83+
variant="subtle"
84+
onClick={() => setShowFullValue(!showFullValue)}
85+
>
86+
{icon}
87+
<span className="sr-only">{showButtonLabel}</span>
88+
</Button>
89+
</TooltipTrigger>
90+
<TooltipContent>{showButtonLabel}</TooltipContent>
91+
</Tooltip>
9592
)}
9693
<CopyButton text={code} label="Copy code" />
9794
</div>

‎site/src/components/Combobox/Combobox.tsx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
import {
1616
Tooltip,
1717
TooltipContent,
18-
TooltipProvider,
1918
TooltipTrigger,
2019
} from "components/Tooltip/Tooltip";
2120
import { Check, ChevronDown, CornerDownLeft, Info } from "lucide-react";
@@ -138,21 +137,19 @@ export const Combobox: FC<ComboboxProps> = ({
138137
<Check className="size-icon-sm" />
139138
)}
140139
{option.description && (
141-
<TooltipProvider delayDuration={100}>
142-
<Tooltip>
143-
<TooltipTrigger asChild>
144-
<span
145-
className="flex"
146-
onMouseEnter={(e) => e.stopPropagation()}
147-
>
148-
<Info className="w-3.5 h-3.5 text-content-secondary" />
149-
</span>
150-
</TooltipTrigger>
151-
<TooltipContent side="right" sideOffset={10}>
152-
{option.description}
153-
</TooltipContent>
154-
</Tooltip>
155-
</TooltipProvider>
140+
<Tooltip>
141+
<TooltipTrigger asChild>
142+
<span
143+
className="flex"
144+
onMouseEnter={(e) => e.stopPropagation()}
145+
>
146+
<Info className="w-3.5 h-3.5 text-content-secondary" />
147+
</span>
148+
</TooltipTrigger>
149+
<TooltipContent side="right" sideOffset={10}>
150+
{option.description}
151+
</TooltipContent>
152+
</Tooltip>
156153
)}
157154
</div>
158155
</CommandItem>

‎site/src/components/CopyButton/CopyButton.tsx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Button, type ButtonProps } from "components/Button/Button";
22
import {
33
Tooltip,
44
TooltipContent,
5-
TooltipProvider,
65
TooltipTrigger,
76
} from "components/Tooltip/Tooltip";
87
import { useClipboard } from "hooks/useClipboard";
@@ -22,21 +21,19 @@ export const CopyButton: FC<CopyButtonProps> = ({
2221
const { showCopiedSuccess, copyToClipboard } = useClipboard();
2322

2423
return (
25-
<TooltipProvider>
26-
<Tooltip>
27-
<TooltipTrigger asChild>
28-
<Button
29-
size="icon"
30-
variant="subtle"
31-
onClick={() => copyToClipboard(text)}
32-
{...buttonProps}
33-
>
34-
{showCopiedSuccess ? <CheckIcon /> : <CopyIcon />}
35-
<span className="sr-only">{label}</span>
36-
</Button>
37-
</TooltipTrigger>
38-
<TooltipContent>{label}</TooltipContent>
39-
</Tooltip>
40-
</TooltipProvider>
24+
<Tooltip>
25+
<TooltipTrigger asChild>
26+
<Button
27+
size="icon"
28+
variant="subtle"
29+
onClick={() => copyToClipboard(text)}
30+
{...buttonProps}
31+
>
32+
{showCopiedSuccess ? <CheckIcon /> : <CopyIcon />}
33+
<span className="sr-only">{label}</span>
34+
</Button>
35+
</TooltipTrigger>
36+
<TooltipContent>{label}</TooltipContent>
37+
</Tooltip>
4138
);
4239
};

‎site/src/components/CopyableValue/CopyableValue.tsx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
Tooltip,
33
TooltipContent,
4-
TooltipProvider,
54
TooltipTrigger,
65
} from "components/Tooltip/Tooltip";
76
import { useClickable } from "hooks/useClickable";
@@ -51,21 +50,19 @@ export const CopyableValue: FC<CopyableValueProps> = ({
5150
}
5251

5352
return (
54-
<TooltipProvider delayDuration={100}>
55-
<Tooltip open={tooltipOpen} onOpenChange={setTooltipOpen}>
56-
<TooltipTrigger asChild>
57-
<span
58-
{...attrs}
59-
{...clickableProps}
60-
className={cn("cursor-pointer", className)}
61-
>
62-
{children}
63-
</span>
64-
</TooltipTrigger>
65-
<TooltipContent side={side}>
66-
{showCopiedText ? "Copied!" : "Click to copy"}
67-
</TooltipContent>
68-
</Tooltip>
69-
</TooltipProvider>
53+
<Tooltip open={tooltipOpen} onOpenChange={setTooltipOpen}>
54+
<TooltipTrigger asChild>
55+
<span
56+
{...attrs}
57+
{...clickableProps}
58+
className={cn("cursor-pointer", className)}
59+
>
60+
{children}
61+
</span>
62+
</TooltipTrigger>
63+
<TooltipContent side={side}>
64+
{showCopiedText ? "Copied!" : "Click to copy"}
65+
</TooltipContent>
66+
</Tooltip>
7067
);
7168
};

‎site/src/components/FeatureStageBadge/FeatureStageBadge.tsx‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Link } from "components/Link/Link";
22
import {
33
Tooltip,
44
TooltipContent,
5-
TooltipProvider,
65
TooltipTrigger,
76
} from "components/Tooltip/Tooltip";
87
import type { FC, HTMLAttributes, ReactNode } from "react";
@@ -47,40 +46,38 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
4746
const sizeClasses = badgeSizeClasses[size];
4847

4948
return (
50-
<TooltipProvider delayDuration={100}>
51-
<Tooltip>
52-
<TooltipTrigger asChild>
53-
<span
54-
className={cn(
55-
"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent border-solid border-transparent",
56-
sizeClasses,
57-
colorClasses,
58-
className,
59-
)}
60-
{...delegatedProps}
61-
>
62-
<span className="sr-only"> (This is a</span>
63-
<span className="first-letter:uppercase">
64-
{labelText && `${labelText} `}
65-
{featureStageBadgeTypes[contentType]}
66-
</span>
67-
<span className="sr-only"> feature)</span>
49+
<Tooltip>
50+
<TooltipTrigger asChild>
51+
<span
52+
className={cn(
53+
"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent border-solid border-transparent",
54+
sizeClasses,
55+
colorClasses,
56+
className,
57+
)}
58+
{...delegatedProps}
59+
>
60+
<span className="sr-only"> (This is a</span>
61+
<span className="first-letter:uppercase">
62+
{labelText && `${labelText} `}
63+
{featureStageBadgeTypes[contentType]}
6864
</span>
69-
</TooltipTrigger>
70-
<TooltipContent align="start" className="max-w-xs text-sm">
71-
<p className="m-0">
72-
This feature has not yet reached general availability (GA).
73-
</p>
65+
<span className="sr-only"> feature)</span>
66+
</span>
67+
</TooltipTrigger>
68+
<TooltipContent align="start" className="max-w-xs text-sm">
69+
<p className="m-0">
70+
This feature has not yet reached general availability (GA).
71+
</p>
7472

75-
<Link
76-
href={docs("/install/releases/feature-stages")}
77-
className="font-semibold"
78-
>
79-
Learn about feature stages
80-
<span className="sr-only"> (link opens in new tab)</span>
81-
</Link>
82-
</TooltipContent>
83-
</Tooltip>
84-
</TooltipProvider>
73+
<Link
74+
href={docs("/install/releases/feature-stages")}
75+
className="font-semibold"
76+
>
77+
Learn about feature stages
78+
<span className="sr-only"> (link opens in new tab)</span>
79+
</Link>
80+
</TooltipContent>
81+
</Tooltip>
8582
);
8683
};

‎site/src/components/HelpTooltip/HelpTooltip.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
TooltipContent,
1212
type TooltipContentProps,
1313
type TooltipProps,
14-
TooltipProvider,
1514
TooltipTrigger,
1615
} from "components/Tooltip/Tooltip";
1716
import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
@@ -33,11 +32,7 @@ export const HelpTooltipTrigger = TooltipTrigger;
3332
export const HelpTooltipIcon = CircleHelpIcon;
3433

3534
export const HelpTooltip: FC<TooltipProps> = (props) => {
36-
return (
37-
<TooltipProvider>
38-
<Tooltip delayDuration={0} {...props} />
39-
</TooltipProvider>
40-
);
35+
return <Tooltip {...props} />;
4136
};
4237

4338
export const HelpTooltipContent: FC<TooltipContentProps> = ({

‎site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
import {
1515
Tooltip,
1616
TooltipContent,
17-
TooltipProvider,
1817
TooltipTrigger,
1918
} from "components/Tooltip/Tooltip";
2019
import { useDebouncedValue } from "hooks/debounce";
@@ -684,21 +683,19 @@ export const MultiSelectCombobox = forwardRef<
684683
)}
685684
{option.label}
686685
{option.description && (
687-
<TooltipProvider delayDuration={100}>
688-
<Tooltip>
689-
<TooltipTrigger asChild>
690-
<span className="flex items-center pointer-events-auto">
691-
<Info className="!w-3.5 !h-3.5 text-content-secondary" />
692-
</span>
693-
</TooltipTrigger>
694-
<TooltipContent
695-
side="right"
696-
sideOffset={10}
697-
>
698-
{option.description}
699-
</TooltipContent>
700-
</Tooltip>
701-
</TooltipProvider>
686+
<Tooltip>
687+
<TooltipTrigger asChild>
688+
<span className="flex items-center pointer-events-auto">
689+
<Info className="!w-3.5 !h-3.5 text-content-secondary" />
690+
</span>
691+
</TooltipTrigger>
692+
<TooltipContent
693+
side="right"
694+
sideOffset={10}
695+
>
696+
{option.description}
697+
</TooltipContent>
698+
</Tooltip>
702699
)}
703700
</div>
704701
</CommandItem>

‎site/src/components/StatusPill/StatusPill.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Pill } from "components/Pill/Pill";
22
import {
33
Tooltip,
44
TooltipContent,
5-
TooltipProvider,
65
TooltipTrigger,
76
} from "components/Tooltip/Tooltip";
87
import type { FC } from "react";
@@ -33,11 +32,9 @@ export const StatusPill: FC<StatusPillProps> = ({
3332
return pill;
3433
}
3534
return (
36-
<TooltipProvider>
37-
<Tooltip delayDuration={150}>
38-
<TooltipTrigger asChild>{pill}</TooltipTrigger>
39-
<TooltipContent>{label}</TooltipContent>
40-
</Tooltip>
41-
</TooltipProvider>
35+
<Tooltip>
36+
<TooltipTrigger asChild>{pill}</TooltipTrigger>
37+
<TooltipContent>{label}</TooltipContent>
38+
</Tooltip>
4239
);
4340
};

0 commit comments

Comments
 (0)