From 3bfb33fe488743f11b36e0357b4e81d40ff4ef16 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 9 Jan 2024 11:46:31 +0000 Subject: [PATCH] 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> --- .../views/beacon/ShareLatestLocation.tsx | 6 ++--- .../views/polls/pollHistory/PollListItem.tsx | 7 +++--- .../polls/pollHistory/PollListItemEnded.tsx | 7 +++--- src/components/views/rooms/RoomListHeader.tsx | 6 ++--- .../devices/FilteredDeviceListHeader.tsx | 7 +++--- .../BeaconListItem-test.tsx.snap | 24 ++++++++----------- .../__snapshots__/DialogSidebar-test.tsx.snap | 24 ++++++++----------- .../ShareLatestLocation-test.tsx.snap | 24 ++++++++----------- .../__snapshots__/PollHistory-test.tsx.snap | 12 +++++----- .../__snapshots__/PollListItem-test.tsx.snap | 6 ++--- .../PollListItemEnded-test.tsx.snap | 6 ++--- .../FilteredDeviceListHeader-test.tsx.snap | 12 +++++----- .../SessionManagerTab-test.tsx.snap | 6 ++--- 13 files changed, 66 insertions(+), 81 deletions(-) diff --git a/src/components/views/beacon/ShareLatestLocation.tsx b/src/components/views/beacon/ShareLatestLocation.tsx index ba69628816..31f2a1387b 100644 --- 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 = ({ latestLocationState }) => { return ( <> - + - + latLonString} /> ); diff --git a/src/components/views/polls/pollHistory/PollListItem.tsx b/src/components/views/polls/pollHistory/PollListItem.tsx index 895b7b24ef..58a2909ea0 100644 --- 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 = ({ event, onClick }) => { const formattedDate = formatLocalDateShort(event.getTs()); return (
  • - +
    {formattedDate} {pollEvent.question.text}
    -     +
    • ); }; diff --git a/src/components/views/polls/pollHistory/PollListItemEnded.tsx b/src/components/views/polls/pollHistory/PollListItemEnded.tsx index 4d25176244..657d940865 100644 --- 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 = ({ event, poll, onClick }) => return (
  • - +
    @@ -127,7 +126,7 @@ export const PollListItemEnded: React.FC = ({ event, poll, onClick }) => {_t("right_panel|poll|final_result", { count: totalVoteCount })}
    -     +
    • ); }; diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx index 4f8b4f8c32..690300dfa2 100644 --- 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 = ({ onVisibilityChange }) => {