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>

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} />
         </>
     );

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>
     );
 };

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>
     );
 };

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

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

test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap

@@ -30,12 +30,9 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
         </div>
         <div
           class="mx_BeaconListItem_interactions"
-        >
-          <div
-            aria-describedby="mx_TooltipTarget_vY7Q4uEh"
-            tabindex="0"
         >
           <a
+            data-state="closed"
             data-testid="open-location-in-osm"
             href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
             rel="noreferrer noopener"
@@ -45,7 +42,6 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
               class="mx_ShareLatestLocation_icon"
             />
           </a>
-          </div>
           <div
             class="mx_CopyableText mx_ShareLatestLocation_copy"
           >

test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -63,12 +63,9 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
             </div>
             <div
               class="mx_BeaconListItem_interactions"
-            >
-              <div
-                aria-describedby="mx_TooltipTarget_vY7Q4uEh"
-                tabindex="0"
             >
               <a
+                data-state="closed"
                 data-testid="open-location-in-osm"
                 href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
                 rel="noreferrer noopener"
@@ -78,7 +75,6 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                   class="mx_ShareLatestLocation_icon"
                 />
               </a>
-              </div>
               <div
                 class="mx_CopyableText mx_ShareLatestLocation_copy"
               >

test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap

@@ -2,11 +2,8 @@
 
 exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
 <DocumentFragment>
-  <div
-    aria-describedby="mx_TooltipTarget_vY7Q4uEh"
-    tabindex="0"
-  >
   <a
+    data-state="closed"
     data-testid="open-location-in-osm"
     href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
     rel="noreferrer noopener"
@@ -16,7 +13,6 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
       class="mx_ShareLatestLocation_icon"
     />
   </a>
-  </div>
   <div
     class="mx_CopyableText mx_ShareLatestLocation_copy"
   >

test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap

@@ -78,8 +78,8 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
           class="mx_PollListItem"
           data-testid="pollListItem-$2"
         >
-          <div
+          <span
-            aria-describedby="mx_TooltipTarget_PomxwKpa"
+            data-state="closed"
             tabindex="0"
           >
             <div
@@ -97,14 +97,14 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
                 Where?
               </span>
             </div>
-          </div>
+          </span>
         </li>
         <li
           class="mx_PollListItem"
           data-testid="pollListItem-$1"
         >
-          <div
+          <span
-            aria-describedby="mx_TooltipTarget_tmBG4yVC"
+            data-state="closed"
             tabindex="0"
           >
             <div
@@ -122,7 +122,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
                 Question?
               </span>
             </div>
-          </div>
+          </span>
         </li>
       </ol>
     </div>

test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap

@@ -6,8 +6,8 @@ exports[`<PollListItem /> renders a poll 1`] = `
     class="mx_PollListItem"
     data-testid="pollListItem-$mypoll"
   >
-    <div
+    <span
-      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+      data-state="closed"
       tabindex="0"
     >
       <div
@@ -25,7 +25,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
           Question?
         </span>
       </div>
-    </div>
+    </span>
   </li>
 </div>
 `;

test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap

@@ -6,8 +6,8 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
     class="mx_PollListItemEnded"
     data-testid="pollListItem-1"
   >
-    <div
+    <span
-      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+      data-state="closed"
       tabindex="0"
     >
       <div
@@ -40,7 +40,7 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
           </span>
         </div>
       </div>
-    </div>
+    </span>
   </li>
 </div>
 `;

test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap

@@ -6,8 +6,8 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
     class="mx_FilteredDeviceListHeader"
     data-testid="test123"
   >
-    <div
+    <span
-      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+      data-state="closed"
       tabindex="0"
     >
       <span
@@ -32,7 +32,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
           </div>
         </label>
       </span>
-    </div>
+    </span>
     <span
       class="mx_FilteredDeviceListHeader_label"
     >
@@ -51,8 +51,8 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
     class="mx_FilteredDeviceListHeader"
     data-testid="test123"
   >
-    <div
+    <span
-      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+      data-state="closed"
       tabindex="0"
     >
       <span
@@ -76,7 +76,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
           </div>
         </label>
       </span>
-    </div>
+    </span>
     <span
       class="mx_FilteredDeviceListHeader_label"
     >

test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -342,8 +342,8 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
 <div
   class="mx_FilteredDeviceListHeader"
 >
-  <div
+  <span
-    aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+    data-state="closed"
     tabindex="0"
   >
     <span
@@ -367,7 +367,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
         </div>
       </label>
     </span>
-  </div>
+  </span>
   <span
     class="mx_FilteredDeviceListHeader_label"
   >