Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit4128ed2

Browse files
committed
chore: migrate@mui/material/Tooltip tocomponents/Tooltip/Tooltip
1 parent8b6f55c commit4128ed2

File tree

33 files changed

+1317
-749
lines changed

33 files changed

+1317
-749
lines changed

‎site/src/components/Badges/Badges.tsx‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
importtype{Interpolation,Theme}from"@emotion/react";
2-
importTooltipfrom"@mui/material/Tooltip";
32
import{Stack}from"components/Stack/Stack";
3+
import{
4+
Tooltip,
5+
TooltipContent,
6+
TooltipProvider,
7+
TooltipTrigger,
8+
}from"components/Tooltip/Tooltip";
49
import{
510
typeFC,
611
forwardRef,
@@ -69,17 +74,31 @@ export const NotHealthyBadge: FC = () => {
6974

7075
exportconstNotRegisteredBadge:FC=()=>{
7176
return(
72-
<Tooltiptitle="Workspace Proxy has never come online and needs to be started.">
73-
<spancss={[styles.badge,styles.warnBadge]}>Never seen</span>
74-
</Tooltip>
77+
<TooltipProviderdelayDuration={100}>
78+
<Tooltip>
79+
<TooltipTriggerasChild>
80+
<spancss={[styles.badge,styles.warnBadge]}>Never seen</span>
81+
</TooltipTrigger>
82+
<TooltipContent>
83+
Workspace Proxy has never come online and needs to be started.
84+
</TooltipContent>
85+
</Tooltip>
86+
</TooltipProvider>
7587
);
7688
};
7789

7890
exportconstNotReachableBadge:FC=()=>{
7991
return(
80-
<Tooltiptitle="Workspace Proxy not responding to http(s) requests.">
81-
<spancss={[styles.badge,styles.warnBadge]}>Not reachable</span>
82-
</Tooltip>
92+
<TooltipProviderdelayDuration={100}>
93+
<Tooltip>
94+
<TooltipTriggerasChild>
95+
<spancss={[styles.badge,styles.warnBadge]}>Not reachable</span>
96+
</TooltipTrigger>
97+
<TooltipContent>
98+
Workspace Proxy not responding to http(s) requests.
99+
</TooltipContent>
100+
</Tooltip>
101+
</TooltipProvider>
83102
);
84103
};
85104

‎site/src/components/Latency/Latency.tsx‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import{useTheme}from"@emotion/react";
22
importCircularProgressfrom"@mui/material/CircularProgress";
3-
importTooltipfrom"@mui/material/Tooltip";
3+
import{TooltipProvider}from"@radix-ui/react-tooltip";
44
import{Abbr}from"components/Abbr/Abbr";
5+
import{
6+
Tooltip,
7+
TooltipContent,
8+
TooltipTrigger,
9+
}from"components/Tooltip/Tooltip";
510
import{CircleHelpIcon}from"lucide-react";
611
importtype{FC}from"react";
712
import{cn}from"utils/cn";
@@ -26,23 +31,35 @@ export const Latency: FC<LatencyProps> = ({
2631

2732
if(isLoading){
2833
return(
29-
<Tooltiptitle="Loading latency..."className={className}>
30-
<CircularProgress
31-
className={cn("!size-icon-xs",iconClassName)}
32-
style={{ color}}
33-
/>
34-
</Tooltip>
34+
<TooltipProviderdelayDuration={100}>
35+
<Tooltip>
36+
<TooltipTriggerasChild>
37+
<divclassName="!size-icon-xs">
38+
<CircularProgress
39+
className={cn("!size-icon-xs",iconClassName)}
40+
style={{ color}}
41+
/>
42+
</div>
43+
</TooltipTrigger>
44+
<TooltipContent>Loading latency...</TooltipContent>
45+
</Tooltip>
46+
</TooltipProvider>
3547
);
3648
}
3749

3850
if(!latency){
3951
return(
40-
<Tooltiptitle="Latency not available"className={className}>
41-
<CircleHelpIcon
42-
className={cn("!size-icon-sm",iconClassName)}
43-
style={{ color}}
44-
/>
45-
</Tooltip>
52+
<TooltipProviderdelayDuration={100}>
53+
<Tooltip>
54+
<TooltipTriggerasChild>
55+
<CircleHelpIcon
56+
className={cn("!size-icon-sm",iconClassName)}
57+
style={{ color}}
58+
/>
59+
</TooltipTrigger>
60+
<TooltipContent>Latency not available</TooltipContent>
61+
</Tooltip>
62+
</TooltipProvider>
4663
);
4764
}
4865

‎site/src/components/PaginationWidget/PaginationNavButton.tsx‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
importTooltipfrom"@mui/material/Tooltip";
21
import{Button}from"components/Button/Button";
2+
import{
3+
Tooltip,
4+
TooltipContent,
5+
TooltipProvider,
6+
TooltipTrigger,
7+
}from"components/Tooltip/Tooltip";
38
import{
49
typeButtonHTMLAttributes,
510
typeReactNode,
@@ -52,22 +57,27 @@ function PaginationNavButtonCore({
5257
},[showDisabledMessage,disabledMessageTimeout]);
5358

5459
return(
55-
<Tooltiptitle={disabledMessage}open={showDisabledMessage}>
56-
{/*
57-
* Going more out of the way to avoid attaching the disabled prop directly
58-
* to avoid unwanted side effects of using the prop:
59-
* - Not being focusable/keyboard-navigable
60-
* - Not being able to call functions in response to invalid actions
61-
* (mostly for giving direct UI feedback to those actions)
62-
*/}
63-
<Button
64-
variant="outline"
65-
size="icon"
66-
disabled={disabled}
67-
onClick={onClick}
68-
{...delegatedProps}
69-
/>
70-
</Tooltip>
60+
<TooltipProviderdelayDuration={100}>
61+
<Tooltip>
62+
<TooltipTriggerasChild>
63+
{/*
64+
* Going more out of the way to avoid attaching the disabled prop directly
65+
* to avoid unwanted side effects of using the prop:
66+
* - Not being focusable/keyboard-navigable
67+
* - Not being able to call functions in response to invalid actions
68+
* (mostly for giving direct UI feedback to those actions)
69+
*/}
70+
<Button
71+
variant="outline"
72+
size="icon"
73+
disabled={disabled}
74+
onClick={onClick}
75+
{...delegatedProps}
76+
/>
77+
</TooltipTrigger>
78+
<TooltipContent>{disabledMessage}</TooltipContent>
79+
</Tooltip>
80+
</TooltipProvider>
7181
);
7282
}
7383

‎site/src/components/RichParameterInput/RichParameterInput.tsx‎

Lines changed: 58 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,18 @@ import type { InputBaseComponentProps } from "@mui/material/InputBase";
55
importRadiofrom"@mui/material/Radio";
66
importRadioGroupfrom"@mui/material/RadioGroup";
77
importTextField,{typeTextFieldProps}from"@mui/material/TextField";
8-
importTooltipfrom"@mui/material/Tooltip";
98
importtype{TemplateVersionParameter}from"api/typesGenerated";
109
import{Button}from"components/Button/Button";
1110
import{ExternalImage}from"components/ExternalImage/ExternalImage";
1211
import{MemoizedMarkdown}from"components/Markdown/Markdown";
1312
import{Pill}from"components/Pill/Pill";
1413
import{Stack}from"components/Stack/Stack";
14+
import{
15+
Tooltip,
16+
TooltipContent,
17+
TooltipProvider,
18+
TooltipTrigger,
19+
}from"components/Tooltip/Tooltip";
1520
import{CircleAlertIcon,SettingsIcon}from"lucide-react";
1621
import{typeFC,typeReactNode,useState}from"react";
1722
importtype{
@@ -136,26 +141,50 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
136141
{displayName}
137142

138143
{!parameter.required&&(
139-
<Tooltiptitle="If no value is specified, the system will default to the value set by the administrator.">
140-
<spancss={styles.optionalLabel}>(optional)</span>
141-
</Tooltip>
144+
<TooltipProviderdelayDuration={100}>
145+
<Tooltip>
146+
<TooltipTriggerasChild>
147+
<spancss={styles.optionalLabel}>(optional)</span>
148+
</TooltipTrigger>
149+
<TooltipContent>
150+
If no value is specified, the system will default to the value set
151+
by the administrator.
152+
</TooltipContent>
153+
</Tooltip>
154+
</TooltipProvider>
142155
)}
143156
{!parameter.mutable&&(
144-
<Tooltiptitle="This value cannot be modified after the workspace has been created.">
145-
<Pill
146-
type="warning"
147-
icon={<CircleAlertIconclassName="size-icon-xs"/>}
148-
>
149-
Immutable
150-
</Pill>
151-
</Tooltip>
157+
<TooltipProviderdelayDuration={100}>
158+
<Tooltip>
159+
<TooltipTriggerasChild>
160+
<Pill
161+
type="warning"
162+
icon={<CircleAlertIconclassName="size-icon-xs"/>}
163+
>
164+
Immutable
165+
</Pill>
166+
</TooltipTrigger>
167+
<TooltipContent>
168+
This value cannot be modified after the workspace has been
169+
created.
170+
</TooltipContent>
171+
</Tooltip>
172+
</TooltipProvider>
152173
)}
153174
{isPreset&&(
154-
<Tooltiptitle="This value was set by a preset">
155-
<Pilltype="info"icon={<SettingsIconclassName="size-icon-xs"/>}>
156-
Preset
157-
</Pill>
158-
</Tooltip>
175+
<TooltipProviderdelayDuration={100}>
176+
<Tooltip>
177+
<TooltipTriggerasChild>
178+
<Pill
179+
type="info"
180+
icon={<SettingsIconclassName="size-icon-xs"/>}
181+
>
182+
Preset
183+
</Pill>
184+
</TooltipTrigger>
185+
<TooltipContent>This value was set by a preset.</TooltipContent>
186+
</Tooltip>
187+
</TooltipProvider>
159188
)}
160189
</span>
161190
);
@@ -328,15 +357,18 @@ const RichParameterField: FC<RichParameterInputProps> = ({
328357
css={{padding:small ?undefined :"4px 0"}}
329358
>
330359
{small ?(
331-
<Tooltip
332-
title={
333-
<MemoizedMarkdown>
334-
{option.description}
335-
</MemoizedMarkdown>
336-
}
337-
>
338-
<div>{option.name}</div>
339-
</Tooltip>
360+
<TooltipProviderdelayDuration={100}>
361+
<Tooltip>
362+
<TooltipTriggerasChild>
363+
<span>{option.name}</span>
364+
</TooltipTrigger>
365+
<TooltipContent>
366+
<MemoizedMarkdownclassName="max-w-xs">
367+
{option.description}
368+
</MemoizedMarkdown>
369+
</TooltipContent>
370+
</Tooltip>
371+
</TooltipProvider>
340372
) :(
341373
<>
342374
<span>{option.name}</span>

‎site/src/components/SearchField/SearchField.tsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
importIconButtonfrom"@mui/material/IconButton";
22
importInputAdornmentfrom"@mui/material/InputAdornment";
33
importTextField,{typeTextFieldProps}from"@mui/material/TextField";
4-
importTooltipfrom"@mui/material/Tooltip";
4+
import{
5+
Tooltip,
6+
TooltipContent,
7+
TooltipProvider,
8+
TooltipTrigger,
9+
}from"components/Tooltip/Tooltip";
510
import{useEffectEvent}from"hooks/hookPolyfills";
611
import{SearchIcon,XIcon}from"lucide-react";
712
import{typeFC,useLayoutEffect,useRef}from"react";
@@ -47,17 +52,22 @@ export const SearchField: FC<SearchFieldProps> = ({
4752
),
4853
endAdornment:value!==""&&(
4954
<InputAdornmentposition="end">
50-
<Tooltiptitle="Clear search">
51-
<IconButton
52-
size="small"
53-
onClick={()=>{
54-
onChange("");
55-
}}
56-
>
57-
<XIconclassName="size-icon-xs"/>
58-
<spanclassName="sr-only">Clear search</span>
59-
</IconButton>
60-
</Tooltip>
55+
<TooltipProviderdelayDuration={100}>
56+
<Tooltip>
57+
<TooltipTriggerasChild>
58+
<IconButton
59+
size="small"
60+
onClick={()=>{
61+
onChange("");
62+
}}
63+
>
64+
<XIconclassName="size-icon-xs"/>
65+
<spanclassName="sr-only">Clear search</span>
66+
</IconButton>
67+
</TooltipTrigger>
68+
<TooltipContent>Clear search</TooltipContent>
69+
</Tooltip>
70+
</TooltipProvider>
6171
</InputAdornment>
6272
),
6373
...InputProps,

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp