From 7a35a22d8672916dc1fd079148a0290cdffff71e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Dec 2023 22:22:47 +0000 Subject: [PATCH 01/13] Migrate InfoTooltip to use Compound Tooltip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/InfoTooltip.tsx | 31 ++++++++----------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx index 9272a907043..81feb0c6c0a 100644 --- a/src/components/views/elements/InfoTooltip.tsx +++ b/src/components/views/elements/InfoTooltip.tsx @@ -17,47 +17,42 @@ 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 { - public constructor(props: ITooltipProps) { +export default class InfoTooltip extends React.PureComponent { + public constructor(props: TooltipProps) { super(props); } 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 ( - - - {children} - + +
+ + {children} +
+ ); } } From 4bb8b3953a6099f54a1ff1516f253c405a4b2d40 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Dec 2023 22:36:29 +0000 Subject: [PATCH 02/13] Migrate DecoratedRoomAvatar.tsx to Compound tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/avatars/DecoratedRoomAvatar.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 39997e186db..477e0ee268f 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -18,6 +18,7 @@ import React from "react"; import classNames from "classnames"; import { Room, RoomEvent, MatrixEvent, User, UserEvent, EventType, JoinRule } from "matrix-js-sdk/src/matrix"; import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue"; +import { Tooltip } from "@vector-im/compound-web"; import RoomAvatar from "./RoomAvatar"; import NotificationBadge from "../rooms/NotificationBadge"; @@ -26,10 +27,8 @@ import { NotificationState } from "../../../stores/notifications/NotificationSta import { isPresenceEnabled } from "../../../utils/presence"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { _t } from "../../../languageHandler"; -import TextWithTooltip from "../elements/TextWithTooltip"; import DMRoomMap from "../../../utils/DMRoomMap"; import { IOOBData } from "../../../stores/ThreepidInviteStore"; -import TooltipTarget from "../elements/TooltipTarget"; interface IProps { room: Room; @@ -38,7 +37,9 @@ interface IProps { forceCount?: boolean; oobData?: IOOBData; viewAvatarOnClick?: boolean; - tooltipProps?: Omit, "label" | "tooltipClassName" | "className">; + tooltipProps?: { + tabIndex?: number; + }; } interface IState { @@ -191,10 +192,9 @@ export default class DecoratedRoomAvatar extends React.PureComponent ); } @@ -211,7 +211,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent - {icon} + {icon && {icon}} {badge} ); From 77a65b5b02d3f19dd267510b696f87e0b27c3252 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Dec 2023 23:40:42 +0000 Subject: [PATCH 03/13] Small type tweaks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/toasts/IncomingCallToast.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx index ad4c5af57cf..1bd8dad4cc2 100644 --- a/src/toasts/IncomingCallToast.tsx +++ b/src/toasts/IncomingCallToast.tsx @@ -58,7 +58,7 @@ function JoinCallButtonWithCall({ onClick, call }: JoinCallButtonWithCallProps): className="mx_IncomingCallToast_joinButton" onClick={onClick} disabled={disabledTooltip !== null} - tooltip={disabledTooltip} + tooltip={disabledTooltip ?? undefined} kind="primary" > {_t("action|join")} From 3b73d370300dbc9c27b22c7c40faab5c7cd4639c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Dec 2023 23:41:18 +0000 Subject: [PATCH 04/13] Remove unused props Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/RoomList.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 374cb380393..4404b9ea9e4 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -170,7 +170,6 @@ const DmAuxButton: React.FC = ({ tabIndex, dispatcher = default tabIndex={tabIndex} onClick={openMenu} className="mx_RoomSublist_auxButton" - tooltipClassName="mx_RoomSublist_addRoomTooltip" aria-label={_t("action|add_people")} title={_t("action|add_people")} isExpanded={menuDisplayed} @@ -189,7 +188,6 @@ const DmAuxButton: React.FC = ({ tabIndex, dispatcher = default PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateChatItem", e); }} className="mx_RoomSublist_auxButton" - tooltipClassName="mx_RoomSublist_addRoomTooltip" aria-label={_t("action|start_chat")} title={_t("action|start_chat")} /> @@ -355,7 +353,6 @@ const UntaggedAuxButton: React.FC = ({ tabIndex }) => { tabIndex={tabIndex} onClick={openMenu} className="mx_RoomSublist_auxButton" - tooltipClassName="mx_RoomSublist_addRoomTooltip" aria-label={_t("room_list|add_room_label")} title={_t("room_list|add_room_label")} isExpanded={menuDisplayed} From cd1b04ec824fba027a2781e6e9e188afdc36c0b0 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 13 Dec 2023 23:48:20 +0000 Subject: [PATCH 05/13] 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> --- res/css/_common.pcss | 4 +++ .../views/dialogs/ServerPickerDialog.tsx | 2 +- .../views/elements/AppPermission.tsx | 13 ++++---- .../views/elements/ServerPicker.tsx | 2 +- .../views/elements/TextWithTooltip.tsx | 31 +++++++------------ 5 files changed, 24 insertions(+), 28 deletions(-) diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 020767b0ec4..3091532cc87 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -52,6 +52,10 @@ limitations under the License. --dialog-zIndex-standard: calc(var(--dialog-zIndex-standard-background) + 1); /* 4012 */ } +#matrixchat { + contain: strict; +} + /** * We need to increase the specificity of the selector to override the * custom property set by the design tokens package diff --git a/src/components/views/dialogs/ServerPickerDialog.tsx b/src/components/views/dialogs/ServerPickerDialog.tsx index 793cfcf27a6..ee8a3751daa 100644 --- a/src/components/views/dialogs/ServerPickerDialog.tsx +++ b/src/components/views/dialogs/ServerPickerDialog.tsx @@ -182,7 +182,7 @@ export default class ServerPickerDialog extends React.PureComponent