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

chore: migrate@mui/material/Tooltip tocomponents/Tooltip/Tooltip#20573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
jakehwll wants to merge1 commit intomain
base:main
Choose a base branch
Loading
fromjakehwll/migrate-mui-tooltips
Draft
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 26 additions & 7 deletionssite/src/components/Badges/Badges.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
import type { Interpolation, Theme } from "@emotion/react";
import Tooltip from "@mui/material/Tooltip";
import { Stack } from "components/Stack/Stack";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import {
type FC,
forwardRef,
Expand DownExpand Up@@ -69,17 +74,31 @@ export const NotHealthyBadge: FC = () => {

export const NotRegisteredBadge: FC = () => {
return (
<Tooltip title="Workspace Proxy has never come online and needs to be started.">
<span css={[styles.badge, styles.warnBadge]}>Never seen</span>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<span css={[styles.badge, styles.warnBadge]}>Never seen</span>
</TooltipTrigger>
<TooltipContent>
Workspace Proxy has never come online and needs to be started.
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};

export const NotReachableBadge: FC = () => {
return (
<Tooltip title="Workspace Proxy not responding to http(s) requests.">
<span css={[styles.badge, styles.warnBadge]}>Not reachable</span>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<span css={[styles.badge, styles.warnBadge]}>Not reachable</span>
</TooltipTrigger>
<TooltipContent>
Workspace Proxy not responding to http(s) requests.
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};

Expand Down
43 changes: 30 additions & 13 deletionssite/src/components/Latency/Latency.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
import { useTheme } from "@emotion/react";
import CircularProgress from "@mui/material/CircularProgress";
importTooltipfrom "@mui/material/Tooltip";
import{ TooltipProvider }from "@radix-ui/react-tooltip";
import { Abbr } from "components/Abbr/Abbr";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { CircleHelpIcon } from "lucide-react";
import type { FC } from "react";
import { cn } from "utils/cn";
Expand All@@ -26,23 +31,35 @@ export const Latency: FC<LatencyProps> = ({

if (isLoading) {
return (
<Tooltip title="Loading latency..." className={className}>
<CircularProgress
className={cn("!size-icon-xs", iconClassName)}
style={{ color }}
/>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<div className="!size-icon-xs">
<CircularProgress
className={cn("!size-icon-xs", iconClassName)}
style={{ color }}
/>
</div>
</TooltipTrigger>
<TooltipContent>Loading latency...</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}

if (!latency) {
return (
<Tooltip title="Latency not available" className={className}>
<CircleHelpIcon
className={cn("!size-icon-sm", iconClassName)}
style={{ color }}
/>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<CircleHelpIcon
className={cn("!size-icon-sm", iconClassName)}
style={{ color }}
/>
</TooltipTrigger>
<TooltipContent>Latency not available</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}

Expand Down
44 changes: 27 additions & 17 deletionssite/src/components/PaginationWidget/PaginationNavButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
import Tooltip from "@mui/material/Tooltip";
import { Button } from "components/Button/Button";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import {
type ButtonHTMLAttributes,
type ReactNode,
Expand DownExpand Up@@ -52,22 +57,27 @@ function PaginationNavButtonCore({
}, [showDisabledMessage, disabledMessageTimeout]);

return (
<Tooltip title={disabledMessage} open={showDisabledMessage}>
{/*
* Going more out of the way to avoid attaching the disabled prop directly
* to avoid unwanted side effects of using the prop:
* - Not being focusable/keyboard-navigable
* - Not being able to call functions in response to invalid actions
* (mostly for giving direct UI feedback to those actions)
*/}
<Button
variant="outline"
size="icon"
disabled={disabled}
onClick={onClick}
{...delegatedProps}
/>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
{/*
* Going more out of the way to avoid attaching the disabled prop directly
* to avoid unwanted side effects of using the prop:
* - Not being focusable/keyboard-navigable
* - Not being able to call functions in response to invalid actions
* (mostly for giving direct UI feedback to those actions)
*/}
<Button
variant="outline"
size="icon"
disabled={disabled}
onClick={onClick}
{...delegatedProps}
/>
</TooltipTrigger>
<TooltipContent>{disabledMessage}</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}

Expand Down
84 changes: 58 additions & 26 deletionssite/src/components/RichParameterInput/RichParameterInput.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,13 +5,18 @@ import type { InputBaseComponentProps } from "@mui/material/InputBase";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import type { TemplateVersionParameter } from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { MemoizedMarkdown } from "components/Markdown/Markdown";
import { Pill } from "components/Pill/Pill";
import { Stack } from "components/Stack/Stack";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { CircleAlertIcon, SettingsIcon } from "lucide-react";
import { type FC, type ReactNode, useState } from "react";
import type {
Expand DownExpand Up@@ -136,26 +141,50 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
{displayName}

{!parameter.required && (
<Tooltip title="If no value is specified, the system will default to the value set by the administrator.">
<span css={styles.optionalLabel}>(optional)</span>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<span css={styles.optionalLabel}>(optional)</span>
</TooltipTrigger>
<TooltipContent>
If no value is specified, the system will default to the value set
by the administrator.
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{!parameter.mutable && (
<Tooltip title="This value cannot be modified after the workspace has been created.">
<Pill
type="warning"
icon={<CircleAlertIcon className="size-icon-xs" />}
>
Immutable
</Pill>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<Pill
type="warning"
icon={<CircleAlertIcon className="size-icon-xs" />}
>
Immutable
</Pill>
</TooltipTrigger>
<TooltipContent>
This value cannot be modified after the workspace has been
created.
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{isPreset && (
<Tooltip title="This value was set by a preset">
<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
Preset
</Pill>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<Pill
type="info"
icon={<SettingsIcon className="size-icon-xs" />}
>
Preset
</Pill>
</TooltipTrigger>
<TooltipContent>This value was set by a preset.</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</span>
);
Expand DownExpand Up@@ -328,15 +357,18 @@ const RichParameterField: FC<RichParameterInputProps> = ({
css={{ padding: small ? undefined : "4px 0" }}
>
{small ? (
<Tooltip
title={
<MemoizedMarkdown>
{option.description}
</MemoizedMarkdown>
}
>
<div>{option.name}</div>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<span>{option.name}</span>
</TooltipTrigger>
<TooltipContent>
<MemoizedMarkdown className="max-w-xs">
{option.description}
</MemoizedMarkdown>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : (
<>
<span>{option.name}</span>
Expand Down
34 changes: 22 additions & 12 deletionssite/src/components/SearchField/SearchField.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "components/Tooltip/Tooltip";
import { useEffectEvent } from "hooks/hookPolyfills";
import { SearchIcon, XIcon } from "lucide-react";
import { type FC, useLayoutEffect, useRef } from "react";
Expand DownExpand Up@@ -47,17 +52,22 @@ export const SearchField: FC<SearchFieldProps> = ({
),
endAdornment: value !== "" && (
<InputAdornment position="end">
<Tooltip title="Clear search">
<IconButton
size="small"
onClick={() => {
onChange("");
}}
>
<XIcon className="size-icon-xs" />
<span className="sr-only">Clear search</span>
</IconButton>
</Tooltip>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<IconButton
size="small"
onClick={() => {
onChange("");
}}
>
<XIcon className="size-icon-xs" />
<span className="sr-only">Clear search</span>
</IconButton>
</TooltipTrigger>
<TooltipContent>Clear search</TooltipContent>
</Tooltip>
</TooltipProvider>
</InputAdornment>
),
...InputProps,
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp