Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 3bfb33f

Browse files
t3chguyt3chguy
authored
Migrate the majority of TooltipTarget consumers to Compound Tooltip (#12086)
* Migrate the majority of TooltipTarget consumers to Compound Tooltip Signed-off-by: Michael Telatynski <[email protected]> * Fix tests Signed-off-by: Michael Telatynski <[email protected]> * Update snapshot Signed-off-by: Michael Telatynski <[email protected]> * Fix CSS stacking contexts for Dialogs & PersistedElement Signed-off-by: Michael Telatynski <[email protected]> * Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning Signed-off-by: Michael Telatynski <[email protected]> * Fix Widget PIP overlay being under the widget and dragging being broken Signed-off-by: Michael Telatynski <[email protected]> * Fix border-radius on widget pip Signed-off-by: Michael Telatynski <[email protected]> * Fix majority of tests Signed-off-by: Michael Telatynski <[email protected]> * Fix jest retryTimes applying outside of CI Signed-off-by: Michael Telatynski <[email protected]> * Fix remaining tests Signed-off-by: Michael Telatynski <[email protected]> * Fix React unique key warnings Signed-off-by: Michael Telatynski <[email protected]> * Fix sticker picker Signed-off-by: Michael Telatynski <[email protected]> * id not class Signed-off-by: Michael Telatynski <[email protected]> * Fix widget pip button colour in light theme Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 061c269 commit 3bfb33f

File tree

13 files changed

+66
-81
lines changed

13 files changed

+66
-81
lines changed

‎src/components/views/beacon/ShareLatestLocation.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ limitations under the License.
1616

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

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

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

4747
return (
4848
<>
49-
<TooltipTarget label={_t("timeline|context_menu|open_in_osm")}>
49+
<Tooltip label={_t("timeline|context_menu|open_in_osm")}>
5050
<a data-testid="open-location-in-osm" href={mapLink} target="_blank" rel="noreferrer noopener">
5151
<ExternalLinkIcon className="mx_ShareLatestLocation_icon" />
5252
</a>
53-
</TooltipTarget>
53+
</Tooltip>
5454
<CopyableText className="mx_ShareLatestLocation_copy" border={false} getTextToCopy={() => latLonString} />
5555
</>
5656
);

‎src/components/views/polls/pollHistory/PollListItem.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,11 @@ limitations under the License.
1717
import React from "react";
1818
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
1919
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
20+
import { Tooltip } from "@vector-im/compound-web";
2021

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

2726
interface Props {
2827
event: MatrixEvent;
@@ -37,13 +36,13 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
3736
const formattedDate = formatLocalDateShort(event.getTs());
3837
return (
3938
<li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
40-
<TooltipTarget label={_t("right_panel|poll|view_poll")} alignment={Alignment.Top}>
39+
<Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
4140
<div className="mx_PollListItem_content">
4241
<span>{formattedDate}</span>
4342
<PollIcon className="mx_PollListItem_icon" />
4443
<span className="mx_PollListItem_question">{pollEvent.question.text}</span>
4544
</div>
46-
</TooltipTarget>
45+
</Tooltip>
4746
</li>
4847
);
4948
};

‎src/components/views/polls/pollHistory/PollListItemEnded.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,14 @@ limitations under the License.
1717
import React, { useEffect, useState } from "react";
1818
import { PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
1919
import { MatrixEvent, Poll, PollEvent, Relations } from "matrix-js-sdk/src/matrix";
20+
import { Tooltip } from "@vector-im/compound-web";
2021

2122
import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
2223
import { _t } from "../../../../languageHandler";
2324
import { formatLocalDateShort } from "../../../../DateUtils";
2425
import { allVotes, collectUserVotes, countVotes } from "../../messages/MPollBody";
2526
import { PollOption } from "../../polls/PollOption";
2627
import { Caption } from "../../typography/Caption";
27-
import TooltipTarget from "../../elements/TooltipTarget";
28-
import { Alignment } from "../../elements/Tooltip";
2928

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

101100
return (
102101
<li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
103-
<TooltipTarget label={_t("right_panel|poll|view_poll")} alignment={Alignment.Top}>
102+
<Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
104103
<div className="mx_PollListItemEnded_content">
105104
<div className="mx_PollListItemEnded_title">
106105
<PollIcon className="mx_PollListItemEnded_icon" />
@@ -127,7 +126,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
127126
<Caption>{_t("right_panel|poll|final_result", { count: totalVoteCount })}</Caption>
128127
</div>
129128
</div>
130-
</TooltipTarget>
129+
</Tooltip>
131130
</li>
132131
);
133132
};

‎src/components/views/rooms/RoomListHeader.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ limitations under the License.
1616

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

2021
import MatrixClientContext from "../../../contexts/MatrixClientContext";
2122
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
@@ -57,7 +58,6 @@ import IconizedContextMenu, {
5758
} from "../context_menus/IconizedContextMenu";
5859
import SpaceContextMenu from "../context_menus/SpaceContextMenu";
5960
import InlineSpinner from "../elements/InlineSpinner";
60-
import TooltipTarget from "../elements/TooltipTarget";
6161
import { HomeButtonContextMenu } from "../spaces/SpacePanel";
6262

6363
const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
@@ -412,9 +412,9 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
412412
<aside className="mx_RoomListHeader" aria-label={_t("room|context_menu|title")}>
413413
{contextMenuButton}
414414
{pendingActionSummary ? (
415-
<TooltipTarget label={pendingActionSummary}>
415+
<Tooltip label={pendingActionSummary} isTriggerInteractive={false}>
416416
<InlineSpinner />
417-
</TooltipTarget>
417+
</Tooltip>
418418
) : null}
419419
{canShowPlusMenu && (
420420
<ContextMenuTooltipButton

‎src/components/views/settings/devices/FilteredDeviceListHeader.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,10 @@ limitations under the License.
1515
*/
1616

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

1920
import { _t } from "../../../../languageHandler";
2021
import StyledCheckbox, { CheckboxStyle } from "../../elements/StyledCheckbox";
21-
import { Alignment } from "../../elements/Tooltip";
22-
import TooltipTarget from "../../elements/TooltipTarget";
2322

2423
interface Props extends Omit<HTMLProps<HTMLDivElement>, "className"> {
2524
selectedDeviceCount: number;
@@ -41,7 +40,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
4140
return (
4241
<div className="mx_FilteredDeviceListHeader" {...rest}>
4342
{!isSelectDisabled && (
44-
<TooltipTarget label={checkboxLabel} alignment={Alignment.Top}>
43+
<Tooltip label={checkboxLabel} side="top" isTriggerInteractive={false}>
4544
<StyledCheckbox
4645
kind={CheckboxStyle.Solid}
4746
checked={isAllSelected}
@@ -50,7 +49,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
5049
data-testid="device-select-all-checkbox"
5150
aria-label={checkboxLabel}
5251
/>
53-
</TooltipTarget>
52+
</Tooltip>
5453
)}
5554
<span className="mx_FilteredDeviceListHeader_label">
5655
{selectedDeviceCount > 0

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,21 +31,17 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
3131
<div
3232
class="mx_BeaconListItem_interactions"
3333
>
34-
<div
35-
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
36-
tabindex="0"
34+
<a
35+
data-state="closed"
36+
data-testid="open-location-in-osm"
37+
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
38+
rel="noreferrer noopener"
39+
target="_blank"
3740
>
38-
<a
39-
data-testid="open-location-in-osm"
40-
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
41-
rel="noreferrer noopener"
42-
target="_blank"
43-
>
44-
<div
45-
class="mx_ShareLatestLocation_icon"
46-
/>
47-
</a>
48-
</div>
41+
<div
42+
class="mx_ShareLatestLocation_icon"
43+
/>
44+
</a>
4945
<div
5046
class="mx_CopyableText mx_ShareLatestLocation_copy"
5147
>

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,21 +64,17 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
6464
<div
6565
class="mx_BeaconListItem_interactions"
6666
>
67-
<div
68-
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
69-
tabindex="0"
67+
<a
68+
data-state="closed"
69+
data-testid="open-location-in-osm"
70+
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
71+
rel="noreferrer noopener"
72+
target="_blank"
7073
>
71-
<a
72-
data-testid="open-location-in-osm"
73-
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
74-
rel="noreferrer noopener"
75-
target="_blank"
76-
>
77-
<div
78-
class="mx_ShareLatestLocation_icon"
79-
/>
80-
</a>
81-
</div>
74+
<div
75+
class="mx_ShareLatestLocation_icon"
76+
/>
77+
</a>
8278
<div
8379
class="mx_CopyableText mx_ShareLatestLocation_copy"
8480
>

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,17 @@
22

33
exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
44
<DocumentFragment>
5-
<div
6-
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
7-
tabindex="0"
5+
<a
6+
data-state="closed"
7+
data-testid="open-location-in-osm"
8+
href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
9+
rel="noreferrer noopener"
10+
target="_blank"
811
>
9-
<a
10-
data-testid="open-location-in-osm"
11-
href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
12-
rel="noreferrer noopener"
13-
target="_blank"
14-
>
15-
<div
16-
class="mx_ShareLatestLocation_icon"
17-
/>
18-
</a>
19-
</div>
12+
<div
13+
class="mx_ShareLatestLocation_icon"
14+
/>
15+
</a>
2016
<div
2117
class="mx_CopyableText mx_ShareLatestLocation_copy"
2218
>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
7878
class="mx_PollListItem"
7979
data-testid="pollListItem-$2"
8080
>
81-
<div
82-
aria-describedby="mx_TooltipTarget_PomxwKpa"
81+
<span
82+
data-state="closed"
8383
tabindex="0"
8484
>
8585
<div
@@ -97,14 +97,14 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
9797
Where?
9898
</span>
9999
</div>
100-
</div>
100+
</span>
101101
</li>
102102
<li
103103
class="mx_PollListItem"
104104
data-testid="pollListItem-$1"
105105
>
106-
<div
107-
aria-describedby="mx_TooltipTarget_tmBG4yVC"
106+
<span
107+
data-state="closed"
108108
tabindex="0"
109109
>
110110
<div
@@ -122,7 +122,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
122122
Question?
123123
</span>
124124
</div>
125-
</div>
125+
</span>
126126
</li>
127127
</ol>
128128
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ exports[`<PollListItem /> renders a poll 1`] = `
66
class="mx_PollListItem"
77
data-testid="pollListItem-$mypoll"
88
>
9-
<div
10-
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
9+
<span
10+
data-state="closed"
1111
tabindex="0"
1212
>
1313
<div
@@ -25,7 +25,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
2525
Question?
2626
</span>
2727
</div>
28-
</div>
28+
</span>
2929
</li>
3030
</div>
3131
`;

0 commit comments

Comments
 (0)