From 5354e6efea8fa9ac0ab74e316db52d00d6de57d7 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 12 Apr 2024 14:56:23 +0200 Subject: [PATCH 001/108] Use new compound tooltip --- src/Modal.tsx | 46 +++++++++---------- src/components/structures/ContextMenu.tsx | 21 ++++----- src/components/structures/MatrixChat.tsx | 5 +- .../auth/forgot-password/CheckEmail.tsx | 2 +- .../auth/forgot-password/VerifyEmailModal.tsx | 2 +- .../views/avatars/DecoratedRoomAvatar.tsx | 2 +- src/components/views/elements/InfoTooltip.tsx | 2 +- .../views/elements/PersistedElement.tsx | 9 ++-- src/components/views/elements/Pill.tsx | 2 +- .../views/elements/TextWithTooltip.tsx | 2 +- .../views/messages/MStickerBody.tsx | 3 +- src/components/views/messages/TextualBody.tsx | 7 +-- .../views/polls/pollHistory/PollListItem.tsx | 2 +- .../polls/pollHistory/PollListItemEnded.tsx | 2 +- .../views/right_panel/RoomSummaryCard.tsx | 2 +- src/components/views/rooms/E2EIcon.tsx | 6 +-- src/components/views/rooms/EventTile.tsx | 2 +- .../views/rooms/LegacyRoomHeader.tsx | 2 +- .../views/rooms/NotificationBadge.tsx | 2 +- src/components/views/rooms/RoomHeader.tsx | 6 +-- .../devices/FilteredDeviceListHeader.tsx | 2 +- .../ThreadsActivityCentreButton.tsx | 2 +- src/toasts/IncomingCallToast.tsx | 6 +-- src/utils/exportUtils/HtmlExport.tsx | 41 ++++++++--------- src/utils/pillify.tsx | 19 +++----- src/utils/tooltipify.tsx | 9 ++-- .../structures/MessagePanel-test.tsx | 5 +- .../components/structures/RightPanel-test.tsx | 2 - test/components/structures/RoomView-test.tsx | 3 -- .../structures/SpaceHierarchy-test.tsx | 5 +- .../structures/ThreadPanel-test.tsx | 34 +++++--------- .../structures/TimelinePanel-test.tsx | 29 ++++-------- .../structures/auth/ForgotPassword-test.tsx | 2 +- .../views/beacon/BeaconListItem-test.tsx | 2 - .../views/beacon/BeaconViewDialog-test.tsx | 3 +- .../views/beacon/ShareLatestLocation-test.tsx | 4 +- .../views/dialogs/ServerPickerDialog-test.tsx | 3 +- .../views/elements/FacePile-test.tsx | 2 - test/components/views/elements/Pill-test.tsx | 2 +- .../views/messages/CallEvent-test.tsx | 2 +- .../views/messages/MStickerBody-test.tsx | 3 +- .../views/messages/MessageTimestamp-test.tsx | 6 +-- .../polls/pollHistory/PollListItem-test.tsx | 4 +- .../pollHistory/PollListItemEnded-test.tsx | 2 +- .../views/rooms/LegacyRoomHeader-test.tsx | 4 +- .../views/rooms/MemberList-test.tsx | 3 -- .../views/rooms/MemberTile-test.tsx | 7 ++- .../views/rooms/MessageComposer-test.tsx | 2 - .../spaces/ThreadsActivityCentre-test.tsx | 3 -- 49 files changed, 127 insertions(+), 211 deletions(-) diff --git a/src/Modal.tsx b/src/Modal.tsx index aa4ba691dc3..2ac12d280f6 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -20,7 +20,7 @@ import ReactDOM from "react-dom"; import classNames from "classnames"; import { defer, sleep } from "matrix-js-sdk/src/utils"; import { TypedEventEmitter } from "matrix-js-sdk/src/matrix"; -import { Glass, TooltipProvider } from "@vector-im/compound-web"; +import { Glass } from "@vector-im/compound-web"; import dis from "./dispatcher/dispatcher"; import AsyncWrapper from "./AsyncWrapper"; @@ -374,18 +374,16 @@ export class ModalManager extends TypedEventEmitter -
- -
{this.staticModal.elem}
- -
-
- +
+ +
{this.staticModal.elem}
+ +
+
); ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer()); @@ -401,18 +399,16 @@ export class ModalManager extends TypedEventEmitter -
- -
{modal.elem}
- -
-
- +
+ +
{modal.elem}
+ +
+
); setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer())); diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 26b52a6e728..0b71c8dd300 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -20,7 +20,6 @@ import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } fro import ReactDOM from "react-dom"; import classNames from "classnames"; import FocusLock from "react-focus-lock"; -import { TooltipProvider } from "@vector-im/compound-web"; import { Writeable } from "../../@types/common"; import UIStore from "../../stores/UIStore"; @@ -630,17 +629,15 @@ export function createMenu( }; const menu = ( - - - - - + + + ); ReactDOM.render(menu, getOrCreateContainer()); diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index bda30a06a39..cd14552f075 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -34,7 +34,6 @@ import { throttle } from "lodash"; import { CryptoEvent } from "matrix-js-sdk/src/crypto"; import { DecryptionError } from "matrix-js-sdk/src/crypto/algorithms"; import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup"; -import { TooltipProvider } from "@vector-im/compound-web"; // what-input helps improve keyboard accessibility import "what-input"; @@ -2136,9 +2135,7 @@ export default class MatrixChat extends React.PureComponent { return ( - - {view} - + {view} ); } diff --git a/src/components/structures/auth/forgot-password/CheckEmail.tsx b/src/components/structures/auth/forgot-password/CheckEmail.tsx index d9d9c4ca808..af3e6cf2160 100644 --- a/src/components/structures/auth/forgot-password/CheckEmail.tsx +++ b/src/components/structures/auth/forgot-password/CheckEmail.tsx @@ -66,7 +66,7 @@ export const CheckEmail: React.FC = ({
{_t("auth|check_email_resend_prompt")} - + {_t("action|resend")} diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx index 11ede003403..fd461ddc5db 100644 --- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx +++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx @@ -65,7 +65,7 @@ export const VerifyEmailModal: React.FC = ({
{_t("auth|check_email_resend_prompt")} - + {_t("action|resend")} diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx index 5879dd3b1a7..1c3f0b7ae0f 100644 --- a/src/components/views/avatars/DecoratedRoomAvatar.tsx +++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx @@ -218,7 +218,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent {icon && ( - + {icon} )} diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx index 1f6247ccf33..318552cde9b 100644 --- a/src/components/views/elements/InfoTooltip.tsx +++ b/src/components/views/elements/InfoTooltip.tsx @@ -43,7 +43,7 @@ export default class InfoTooltip extends React.PureComponent { // Tooltip are forced on the right for a more natural feel to them on info icons return ( - +
{children} diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx index 37e5fc26ad5..99730ec3443 100644 --- a/src/components/views/elements/PersistedElement.tsx +++ b/src/components/views/elements/PersistedElement.tsx @@ -17,7 +17,6 @@ limitations under the License. import React, { MutableRefObject, ReactNode } from "react"; import ReactDOM from "react-dom"; import { isNullOrUndefined } from "matrix-js-sdk/src/utils"; -import { TooltipProvider } from "@vector-im/compound-web"; import dis from "../../../dispatcher/dispatcher"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; @@ -177,11 +176,9 @@ export default class PersistedElement extends React.Component { private renderApp(): void { const content = ( - -
- {this.props.children} -
- +
+ {this.props.children} +
); diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index 9f332e29c3f..52ad1e2b89a 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -151,7 +151,7 @@ export const Pill: React.FC = ({ type: propType, url, inMessage, room {isAnchor ? ( diff --git a/src/components/views/elements/TextWithTooltip.tsx b/src/components/views/elements/TextWithTooltip.tsx index 95f8608dae4..b6a3bd0cd23 100644 --- a/src/components/views/elements/TextWithTooltip.tsx +++ b/src/components/views/elements/TextWithTooltip.tsx @@ -33,7 +33,7 @@ export default class TextWithTooltip extends React.Component { const { className, children, tooltip, tooltipProps } = this.props; return ( - + {children} diff --git a/src/components/views/messages/MStickerBody.tsx b/src/components/views/messages/MStickerBody.tsx index a002670b52b..073da22b2a1 100644 --- a/src/components/views/messages/MStickerBody.tsx +++ b/src/components/views/messages/MStickerBody.tsx @@ -69,8 +69,7 @@ export default class MStickerBody extends MImageBody { if (!content?.body || !content.info?.w) return null; return { - align: "center", - side: "right", + placement: "right", label: content.body, }; } diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index a3bac0b9cd7..f0b5c70f17d 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -17,7 +17,6 @@ limitations under the License. import React, { createRef, SyntheticEvent, MouseEvent } from "react"; import ReactDOM from "react-dom"; import { MsgType } from "matrix-js-sdk/src/matrix"; -import { TooltipProvider } from "@vector-im/compound-web"; import * as HtmlUtils from "../../../HtmlUtils"; import { formatDate } from "../../../DateUtils"; @@ -349,11 +348,7 @@ export default class TextualBody extends React.Component { const reason = node.getAttribute("data-mx-spoiler") ?? undefined; node.removeAttribute("data-mx-spoiler"); // we don't want to recurse - const spoiler = ( - - - - ); + const spoiler = ; ReactDOM.render(spoiler, spoilerContainer); node.parentNode?.replaceChild(spoilerContainer, node); diff --git a/src/components/views/polls/pollHistory/PollListItem.tsx b/src/components/views/polls/pollHistory/PollListItem.tsx index 58a2909ea08..7115f3b6a14 100644 --- a/src/components/views/polls/pollHistory/PollListItem.tsx +++ b/src/components/views/polls/pollHistory/PollListItem.tsx @@ -36,7 +36,7 @@ export const PollListItem: React.FC = ({ event, onClick }) => { const formattedDate = formatLocalDateShort(event.getTs()); return (
  • - +
    {formattedDate} diff --git a/src/components/views/polls/pollHistory/PollListItemEnded.tsx b/src/components/views/polls/pollHistory/PollListItemEnded.tsx index 657d940865f..5da77723236 100644 --- a/src/components/views/polls/pollHistory/PollListItemEnded.tsx +++ b/src/components/views/polls/pollHistory/PollListItemEnded.tsx @@ -99,7 +99,7 @@ export const PollListItemEnded: React.FC = ({ event, poll, onClick }) => return (
  • - +
    diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 308d21dcf05..d288541f5cd 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -405,7 +405,7 @@ const RoomSummaryCard: React.FC = ({ room, permalinkCreator, onClose, on align="center" justify="space-between" > - +
    ambiguous display name 1`] = `
    ambiguous display name 1`] = ` exports[` with display name 1`] = `
    with display name 1`] = ` exports[` without display name 1`] = `
    with crypto enabled renders 1`] = ` class="mx_BaseCard_header" >
    { let prevMember: RoomMember | undefined; for (const tile of memberTiles) { const memberA = prevMember; - const memberB = memberListRoom.currentState.members[tile.getAttribute("title")!.split(" ")[0]]; + const memberB = memberListRoom.currentState.members[tile.getAttribute("aria-label")!.split(" ")[0]]; prevMember = memberB; // just in case an expect fails, set this early if (!memberA) { continue; diff --git a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap index f40db566bb5..77c87d93da1 100644 --- a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap @@ -4,10 +4,11 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver
    handles when device is falsy 1`] = ` > Current session -
    renders device and correct security card when
    • +
    + + + + +