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>
matrix-org · Jan 9, 2024 · 3bfb33f · 3bfb33f
1 parent 061c269
commit 3bfb33f
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 81 deletions.
diff --git 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} />
         </>
     );

diff --git 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>
     );
 };
diff --git a/src/components/views/polls/pollHistory/PollListItemEnded.tsx b/src/components/views/polls/pollHistory/PollListItemEnded.tsx
@@ -17,15 +17,14 @@ 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";
 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>
     );
 };
diff --git 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

diff --git 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

diff --git a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
@@ -31,21 +31,17 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
         <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"
+            target="_blank"
           >
-            <a
-              data-testid="open-location-in-osm"
-              href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              <div
-                class="mx_ShareLatestLocation_icon"
-              />
-            </a>
-          </div>
+            <div
+              class="mx_ShareLatestLocation_icon"
+            />
+          </a>
           <div
             class="mx_CopyableText mx_ShareLatestLocation_copy"
           >

diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -64,21 +64,17 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
             <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"
+                target="_blank"
               >
-                <a
-                  data-testid="open-location-in-osm"
-                  href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
-                  rel="noreferrer noopener"
-                  target="_blank"
-                >
-                  <div
-                    class="mx_ShareLatestLocation_icon"
-                  />
-                </a>
-              </div>
+                <div
+                  class="mx_ShareLatestLocation_icon"
+                />
+              </a>
               <div
                 class="mx_CopyableText mx_ShareLatestLocation_copy"
               >

diff --git a/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
@@ -2,21 +2,17 @@
 
 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"
+    target="_blank"
   >
-    <a
-      data-testid="open-location-in-osm"
-      href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
-      rel="noreferrer noopener"
-      target="_blank"
-    >
-      <div
-        class="mx_ShareLatestLocation_icon"
-      />
-    </a>
-  </div>
+    <div
+      class="mx_ShareLatestLocation_icon"
+    />
+  </a>
   <div
     class="mx_CopyableText mx_ShareLatestLocation_copy"
   >

diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap b/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
-            aria-describedby="mx_TooltipTarget_PomxwKpa"
+          <span
+            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
-            aria-describedby="mx_TooltipTarget_tmBG4yVC"
+          <span
+            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>

diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap b/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
-      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+    <span
+      data-state="closed"
       tabindex="0"
     >
       <div
@@ -25,7 +25,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
           Question?
         </span>
       </div>
-    </div>
+    </span>
   </li>
 </div>
 `;
diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap b/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
-      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+    <span
+      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>
 `;
diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/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
-      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+    <span
+      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
-      aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+    <span
+      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"
     >

diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/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
-    aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+  <span
+    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"
   >