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>
This commit is contained in:
Michael Telatynski 2024-01-09 11:46:31 +00:00 committed by GitHub
parent 061c269f36
commit 3bfb33fe48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 66 additions and 81 deletions

View file

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

View file

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