Migrate the majority of TooltipTarget consumers to Compound Tooltip (#12086)

* Migrate the majority of TooltipTarget consumers to Compound Tooltip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix CSS stacking contexts for Dialogs & PersistedElement Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix Widget PIP overlay being under the widget and dragging being broken Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix border-radius on widget pip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix majority of tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix jest retryTimes applying outside of CI Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix remaining tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix React unique key warnings Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix sticker picker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * id not class Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix widget pip button colour in light theme Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-01-09 11:46:31 +00:00 · 2024-01-09 11:46:31 +00:00 · 3bfb33fe48
commit 3bfb33fe48
parent 061c269f36
13 changed files with 66 additions and 81 deletions
--- a/src/components/views/beacon/ShareLatestLocation.tsx
+++ b/src/components/views/beacon/ShareLatestLocation.tsx
@ -16,12 +16,12 @@ limitations under the License.

 import React, { useEffect, useState } from "react";
 import { ContentHelpers } from "matrix-js-sdk/src/matrix";
+import { Tooltip } from "@vector-im/compound-web";

 import { Icon as ExternalLinkIcon } from "../../../../res/img/external-link.svg";
 import { _t } from "../../../languageHandler";
 import { makeMapSiteLink, parseGeoUri } from "../../../utils/location";
 import CopyableText from "../elements/CopyableText";
-import TooltipTarget from "../elements/TooltipTarget";

 interface Props {
    latestLocationState?: ContentHelpers.BeaconLocationState;
@ -46,11 +46,11 @@ const ShareLatestLocation: React.FC<Props> = ({ latestLocationState }) => {

    return (
        <>
-            <TooltipTarget label={_t("timeline|context_menu|open_in_osm")}>
+            <Tooltip label={_t("timeline|context_menu|open_in_osm")}>
                <a data-testid="open-location-in-osm" href={mapLink} target="_blank" rel="noreferrer noopener">
                    <ExternalLinkIcon className="mx_ShareLatestLocation_icon" />
                </a>
-            </TooltipTarget>
+            </Tooltip>
            <CopyableText className="mx_ShareLatestLocation_copy" border={false} getTextToCopy={() => latLonString} />
        </>
    );
--- a/src/components/views/polls/pollHistory/PollListItem.tsx
+++ b/src/components/views/polls/pollHistory/PollListItem.tsx
@ -17,12 +17,11 @@ limitations under the License.
 import React from "react";
 import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { Tooltip } from "@vector-im/compound-web";

 import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
 import { formatLocalDateShort } from "../../../../DateUtils";
 import { _t } from "../../../../languageHandler";
-import TooltipTarget from "../../elements/TooltipTarget";
-import { Alignment } from "../../elements/Tooltip";

 interface Props {
    event: MatrixEvent;
@ -37,13 +36,13 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
    const formattedDate = formatLocalDateShort(event.getTs());
    return (
        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
-            <TooltipTarget label={_t("right_panel|poll|view_poll")} alignment={Alignment.Top}>
+            <Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
                <div className="mx_PollListItem_content">
                    <span>{formattedDate}</span>
                    <PollIcon className="mx_PollListItem_icon" />
                    <span className="mx_PollListItem_question">{pollEvent.question.text}</span>
                </div>
-            </TooltipTarget>
+            </Tooltip>
        </li>
    );
 };
--- a/src/components/views/polls/pollHistory/PollListItemEnded.tsx
+++ b/src/components/views/polls/pollHistory/PollListItemEnded.tsx
@ -17,6 +17,7 @@ limitations under the License.
 import React, { useEffect, useState } from "react";
 import { PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { MatrixEvent, Poll, PollEvent, Relations } from "matrix-js-sdk/src/matrix";
+import { Tooltip } from "@vector-im/compound-web";

 import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
 import { _t } from "../../../../languageHandler";
@ -24,8 +25,6 @@ import { formatLocalDateShort } from "../../../../DateUtils";
 import { allVotes, collectUserVotes, countVotes } from "../../messages/MPollBody";
 import { PollOption } from "../../polls/PollOption";
 import { Caption } from "../../typography/Caption";
-import TooltipTarget from "../../elements/TooltipTarget";
-import { Alignment } from "../../elements/Tooltip";

 interface Props {
    event: MatrixEvent;
@ -100,7 +99,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>

    return (
        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
-            <TooltipTarget label={_t("right_panel|poll|view_poll")} alignment={Alignment.Top}>
+            <Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
                <div className="mx_PollListItemEnded_content">
                    <div className="mx_PollListItemEnded_title">
                        <PollIcon className="mx_PollListItemEnded_icon" />
@ -127,7 +126,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
                        <Caption>{_t("right_panel|poll|final_result", { count: totalVoteCount })}</Caption>
                    </div>
                </div>
-            </TooltipTarget>
+            </Tooltip>
        </li>
    );
 };
--- a/src/components/views/rooms/RoomListHeader.tsx
+++ b/src/components/views/rooms/RoomListHeader.tsx
@ -16,6 +16,7 @@ limitations under the License.

 import { EventType, RoomType, Room, RoomEvent, ClientEvent } from "matrix-js-sdk/src/matrix";
 import React, { useContext, useEffect, useState } from "react";
+import { Tooltip } from "@vector-im/compound-web";

 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
@ -57,7 +58,6 @@ import IconizedContextMenu, {
 } from "../context_menus/IconizedContextMenu";
 import SpaceContextMenu from "../context_menus/SpaceContextMenu";
 import InlineSpinner from "../elements/InlineSpinner";
-import TooltipTarget from "../elements/TooltipTarget";
 import { HomeButtonContextMenu } from "../spaces/SpacePanel";

 const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
@ -412,9 +412,9 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
        <aside className="mx_RoomListHeader" aria-label={_t("room|context_menu|title")}>
            {contextMenuButton}
            {pendingActionSummary ? (
-                <TooltipTarget label={pendingActionSummary}>
+                <Tooltip label={pendingActionSummary} isTriggerInteractive={false}>
                    <InlineSpinner />
-                </TooltipTarget>
+                </Tooltip>
            ) : null}
            {canShowPlusMenu && (
                <ContextMenuTooltipButton
--- a/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
+++ b/src/components/views/settings/devices/FilteredDeviceListHeader.tsx
@ -15,11 +15,10 @@ limitations under the License.
 */

 import React, { HTMLProps } from "react";
+import { Tooltip } from "@vector-im/compound-web";

 import { _t } from "../../../../languageHandler";
 import StyledCheckbox, { CheckboxStyle } from "../../elements/StyledCheckbox";
-import { Alignment } from "../../elements/Tooltip";
-import TooltipTarget from "../../elements/TooltipTarget";

 interface Props extends Omit<HTMLProps<HTMLDivElement>, "className"> {
    selectedDeviceCount: number;
@ -41,7 +40,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
    return (
        <div className="mx_FilteredDeviceListHeader" {...rest}>
            {!isSelectDisabled && (
-                <TooltipTarget label={checkboxLabel} alignment={Alignment.Top}>
+                <Tooltip label={checkboxLabel} side="top" isTriggerInteractive={false}>
                    <StyledCheckbox
                        kind={CheckboxStyle.Solid}
                        checked={isAllSelected}
@ -50,7 +49,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
                        data-testid="device-select-all-checkbox"
                        aria-label={checkboxLabel}
                    />
-                </TooltipTarget>
+                </Tooltip>
            )}
            <span className="mx_FilteredDeviceListHeader_label">
                {selectedDeviceCount > 0