diff --git a/package.json b/package.json index 298bd1469d..72cd0fee50 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ "@sentry/browser": "^7.0.0", "@testing-library/react-hooks": "^8.0.1", "@vector-im/compound-design-tokens": "^1.2.0", - "@vector-im/compound-web": "^3.3.1", + "@vector-im/compound-web": "^4.0.2", "@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4", "@zxcvbn-ts/language-en": "^3.0.2", diff --git a/src/Modal.tsx b/src/Modal.tsx index aa4ba691dc..2ac12d280f 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 26b52a6e72..0b71c8dd30 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 3aae34e311..2574156279 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -33,7 +33,6 @@ import { logger } from "matrix-js-sdk/src/logger"; import { throttle } from "lodash"; import { CryptoEvent } from "matrix-js-sdk/src/crypto"; 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"; @@ -2137,9 +2136,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 d9d9c4ca80..af3e6cf216 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 11ede00340..fd461ddc5d 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 5879dd3b1a..1c3f0b7ae0 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 1f6247ccf3..318552cde9 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 37e5fc26ad..99730ec344 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 9f332e29c3..52ad1e2b89 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 95f8608dae..b6a3bd0cd2 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 a002670b52..073da22b2a 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 a3bac0b9cd..f0b5c70f17 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 58a2909ea0..7115f3b6a1 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 657d940865..5da7772323 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 308d21dcf0..d288541f5c 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" > - +