Use Compound tooltips instead of homegrown in TextWithTooltip & InfoTooltip (#12052)
* Migrate InfoTooltip to use Compound Tooltip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Migrate DecoratedRoomAvatar.tsx to Compound tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Small type tweaks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused props Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Migrate TextWithTooltip.tsx to Compound tooltips This adds `contain: strict` to #matrixchat which may have side effects. Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert accidental layout change to TextWithTooltip from inline to block Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve test coverage and simplify Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Ditch the sleep call Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
committed by
GitHub
GitHub
parent
5f92dad273
commit
2212fbadd0
@@ -27,9 +27,9 @@ import MemberAvatar from "../avatars/MemberAvatar";
|
||||
import BaseAvatar from "../avatars/BaseAvatar";
|
||||
import Heading from "../typography/Heading";
|
||||
import AccessibleButton from "./AccessibleButton";
|
||||
import TextWithTooltip from "./TextWithTooltip";
|
||||
import { parseUrl } from "../../../utils/UrlUtils";
|
||||
import { Icon as HelpIcon } from "../../../../res/img/feather-customised/help-circle.svg";
|
||||
import TooltipTarget from "./TooltipTarget";
|
||||
|
||||
interface IProps {
|
||||
url: string;
|
||||
@@ -116,13 +116,14 @@ export default class AppPermission extends React.Component<IProps, IState> {
|
||||
</div>
|
||||
);
|
||||
const warningTooltip = (
|
||||
<TextWithTooltip
|
||||
tooltip={warningTooltipText}
|
||||
tooltipClass="mx_Tooltip--appPermission mx_Tooltip--appPermission--dark"
|
||||
class="mx_TextWithTooltip_target--helpIcon"
|
||||
<TooltipTarget
|
||||
label={warningTooltipText}
|
||||
tooltipClassName="mx_Tooltip--appPermission mx_Tooltip--appPermission--dark"
|
||||
tooltipTargetClassName="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
|
||||
className="mx_TextWithTooltip_tooltip"
|
||||
>
|
||||
<HelpIcon className="mx_Icon mx_Icon_12" />
|
||||
</TextWithTooltip>
|
||||
</TooltipTarget>
|
||||
);
|
||||
|
||||
// Due to i18n limitations, we can't dedupe the code for variables in these two messages.
|
||||
|
||||
@@ -17,47 +17,38 @@ limitations under the License.
|
||||
|
||||
import React, { ReactNode } from "react";
|
||||
import classNames from "classnames";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
import { Alignment } from "./Tooltip";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import TooltipTarget from "./TooltipTarget";
|
||||
|
||||
export enum InfoTooltipKind {
|
||||
Info = "info",
|
||||
Warning = "warning",
|
||||
}
|
||||
|
||||
interface ITooltipProps {
|
||||
tooltip?: React.ReactNode;
|
||||
interface TooltipProps {
|
||||
tooltip?: string;
|
||||
className?: string;
|
||||
tooltipClassName?: string;
|
||||
kind?: InfoTooltipKind;
|
||||
children?: ReactNode;
|
||||
tabIndex?: number;
|
||||
}
|
||||
|
||||
export default class InfoTooltip extends React.PureComponent<ITooltipProps> {
|
||||
public constructor(props: ITooltipProps) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
export default class InfoTooltip extends React.PureComponent<TooltipProps> {
|
||||
public render(): React.ReactNode {
|
||||
const { tooltip, children, tooltipClassName, className, kind } = this.props;
|
||||
const { tooltip, children, className, kind } = this.props;
|
||||
const title = _t("info_tooltip_title");
|
||||
const iconClassName =
|
||||
kind !== InfoTooltipKind.Warning ? "mx_InfoTooltip_icon_info" : "mx_InfoTooltip_icon_warning";
|
||||
|
||||
// Tooltip are forced on the right for a more natural feel to them on info icons
|
||||
return (
|
||||
<TooltipTarget
|
||||
tooltipTargetClassName={classNames("mx_InfoTooltip", className)}
|
||||
className="mx_InfoTooltip_container"
|
||||
tooltipClassName={classNames("mx_InfoTooltip_tooltip", tooltipClassName)}
|
||||
label={tooltip || title}
|
||||
alignment={Alignment.Right}
|
||||
>
|
||||
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
|
||||
{children}
|
||||
</TooltipTarget>
|
||||
<Tooltip label={tooltip || title} side="right">
|
||||
<div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
|
||||
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
|
||||
{children}
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +77,7 @@ const ServerPicker: React.FC<IProps> = ({ title, dialogTitle, serverConfig, onSe
|
||||
let serverName: React.ReactNode = serverConfig.isNameResolvable ? serverConfig.hsName : serverConfig.hsUrl;
|
||||
if (serverConfig.hsNameIsDifferent) {
|
||||
serverName = (
|
||||
<TextWithTooltip class="mx_Login_underlinedServerName" tooltip={serverConfig.hsUrl}>
|
||||
<TextWithTooltip className="mx_Login_underlinedServerName" tooltip={serverConfig.hsUrl}>
|
||||
{serverConfig.hsName}
|
||||
</TextWithTooltip>
|
||||
);
|
||||
|
||||
@@ -15,16 +15,13 @@
|
||||
*/
|
||||
|
||||
import React, { HTMLAttributes } from "react";
|
||||
import classNames from "classnames";
|
||||
|
||||
import TooltipTarget from "./TooltipTarget";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
interface IProps extends HTMLAttributes<HTMLSpanElement> {
|
||||
class?: string;
|
||||
tooltipClass?: string;
|
||||
tooltip: React.ReactNode;
|
||||
tooltipProps?: Omit<React.ComponentProps<typeof TooltipTarget>, "label" | "tooltipClassName" | "className">;
|
||||
onClick?: (ev: React.MouseEvent) => void;
|
||||
tooltip: string;
|
||||
tooltipProps?: {
|
||||
tabIndex?: number;
|
||||
};
|
||||
}
|
||||
|
||||
export default class TextWithTooltip extends React.Component<IProps> {
|
||||
@@ -33,20 +30,14 @@ export default class TextWithTooltip extends React.Component<IProps> {
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
|
||||
const { className, children, tooltip, tooltipProps } = this.props;
|
||||
|
||||
return (
|
||||
<TooltipTarget
|
||||
onClick={this.props.onClick}
|
||||
tooltipTargetClassName={classNames("mx_TextWithTooltip_target", className)}
|
||||
{...tooltipProps}
|
||||
label={tooltip}
|
||||
tooltipClassName={tooltipClass}
|
||||
className="mx_TextWithTooltip_tooltip"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</TooltipTarget>
|
||||
<Tooltip label={tooltip} side="right">
|
||||
<span className={className} tabIndex={tooltipProps?.tabIndex ?? 0}>
|
||||
{children}
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user