Ditch legacy Tooltips in favour of Compound

Signed-off-by: Michael Telatynski <[email protected]>

playwright/e2e/editing/editing.spec.ts

@@ -263,7 +263,6 @@ test.describe("Editing", () => {
         checkA11y,
     }) => {
         axe.disableRules("color-contrast"); // XXX: We have some known contrast issues here
-        axe.exclude(".mx_Tooltip_visible"); // XXX: this is fine but would be good to fix
 
         await page.goto(`#/room/${room.roomId}`);
 

playwright/element-web-test.ts

@@ -345,8 +345,7 @@ export const expect = baseExpect.extend({
 
         if (!options?.showTooltips) {
             css += `
-                [role="tooltip"],
-                .mx_Tooltip_visible {
+                [role="tooltip"] {
                     visibility: hidden !important;
                 }
             `;

res/css/_components.pcss

@@ -217,7 +217,6 @@
 @import "./views/elements/_TagComposer.pcss";
 @import "./views/elements/_TextWithTooltip.pcss";
 @import "./views/elements/_ToggleSwitch.pcss";
-@import "./views/elements/_Tooltip.pcss";
 @import "./views/elements/_UseCaseSelection.pcss";
 @import "./views/elements/_UseCaseSelectionButton.pcss";
 @import "./views/elements/_Validation.pcss";

res/css/views/auth/_PassphraseField.pcss

@@ -16,7 +16,8 @@ progress.mx_PassphraseField_progress {
     border: 0;
     height: 4px;
     position: absolute;
-    top: -12px;
+    top: -10px;
+    left: 0;
 
     @mixin ProgressBarBorderRadius "2px";
     @mixin ProgressBarColour $PassphraseStrengthLow;

res/css/views/elements/_Field.pcss

@@ -164,14 +164,6 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_Field_tooltip {
-    width: 200px;
-}
-
-.mx_Field_tooltip.mx_Field_valid {
-    animation: mx_fadeout 1s 2s forwards;
-}
-
 /* Customise other components when placed inside a Field */
 
 .mx_Field .mx_Dropdown_input {

res/css/views/elements/_MiniAvatarUploader.pcss

@@ -10,18 +10,6 @@ Please see LICENSE files in the repository root for full details.
     position: relative;
     width: min-content;
 
-    /* this isn't a floating tooltip so override some things to not need to bother with z-index and floating */
-    .mx_Tooltip {
-        display: inline-block;
-        position: absolute;
-        z-index: unset;
-        width: max-content;
-        left: 72px;
-        /* top edge starting at 50 % of parent - 50 % of itself -> centered vertically */
-        top: 50%;
-        transform: translateY(-50%);
-    }
-
     .mx_MiniAvatarUploader_indicator {
         position: absolute;
 

res/css/views/elements/_Validation.pcss

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_Validation {
     position: relative;
+    max-width: 200px;
 }
 
 .mx_Validation_details {

src/components/structures/HomePage.tsx

@@ -11,7 +11,7 @@ import { useContext, useState } from "react";
 
 import AutoHideScrollbar from "./AutoHideScrollbar";
 import { getHomePageUrl } from "../../utils/pages";
-import { _tDom } from "../../languageHandler";
+import { _t, _tDom } from "../../languageHandler";
 import SdkConfig from "../../SdkConfig";
 import dis from "../../dispatcher/dispatcher";
 import { Action } from "../../dispatcher/actions";
@@ -66,8 +66,8 @@ const UserWelcomeTop: React.FC = () => {
         <div>
             <MiniAvatarUploader
                 hasAvatar={!!ownProfile.avatarUrl}
-                hasAvatarLabel={_tDom("onboarding|has_avatar_label")}
-                noAvatarLabel={_tDom("onboarding|no_avatar_label")}
+                hasAvatarLabel={_t("onboarding|has_avatar_label")}
+                noAvatarLabel={_t("onboarding|no_avatar_label")}
                 setAvatarUrl={(url) => cli.setAvatarUrl(url)}
                 isUserAvatar
                 onClick={(ev) => PosthogTrackers.trackInteraction("WebHomeMiniAvatarUploadButton", ev)}

src/components/views/auth/EmailField.tsx

@@ -6,13 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { PureComponent, RefCallback, RefObject } from "react";
+import React, { ComponentProps, PureComponent, RefCallback, RefObject } from "react";
 
 import Field, { IInputProps } from "../elements/Field";
 import { _t, _td, TranslationKey } from "../../../languageHandler";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import * as Email from "../../../email";
-import { Alignment } from "../elements/Tooltip";
 
 interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     id?: string;
@@ -23,7 +22,7 @@ interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     label: TranslationKey;
     labelRequired: TranslationKey;
     labelInvalid: TranslationKey;
-    tooltipAlignment?: Alignment;
+    tooltipAlignment?: ComponentProps<typeof Field>["tooltipAlignment"];
 
     // When present, completely overrides the default validation rules.
     validationRules?: (fieldState: IFieldState) => Promise<IValidationResult>;

src/components/views/auth/PassphraseConfirmField.tsx

@@ -6,12 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { PureComponent, RefCallback, RefObject } from "react";
+import React, { ComponentProps, PureComponent, RefCallback, RefObject } from "react";
 
 import Field, { IInputProps } from "../elements/Field";
 import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import { _t, _td, TranslationKey } from "../../../languageHandler";
-import { Alignment } from "../elements/Tooltip";
 
 interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
     id?: string;
@@ -23,7 +22,7 @@ interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
     label: TranslationKey;
     labelRequired: TranslationKey;
     labelInvalid: TranslationKey;
-    tooltipAlignment?: Alignment;
+    tooltipAlignment?: ComponentProps<typeof Field>["tooltipAlignment"];
     onChange(ev: React.FormEvent<HTMLElement>): void;
     onValidate?(result: IValidationResult): void;
 }

src/components/views/auth/PassphraseField.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { PureComponent, RefCallback, RefObject } from "react";
+import React, { ComponentProps, PureComponent, RefCallback, RefObject } from "react";
 import classNames from "classnames";
 
 import type { ZxcvbnResult } from "@zxcvbn-ts/core";
@@ -15,7 +15,6 @@ import withValidation, { IFieldState, IValidationResult } from "../elements/Vali
 import { _t, _td, TranslationKey } from "../../../languageHandler";
 import Field, { IInputProps } from "../elements/Field";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { Alignment } from "../elements/Tooltip";
 
 interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     autoFocus?: boolean;
@@ -31,7 +30,7 @@ interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
     labelEnterPassword: TranslationKey;
     labelStrongPassword: TranslationKey;
     labelAllowedButUnsafe: TranslationKey;
-    tooltipAlignment?: Alignment;
+    tooltipAlignment?: ComponentProps<typeof Field>["tooltipAlignment"];
 
     onChange(ev: React.FormEvent<HTMLElement>): void;
     onValidate?(result: IValidationResult): void;

src/components/views/auth/RegistrationForm.tsx

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { BaseSyntheticEvent, ReactNode } from "react";
+import React, { BaseSyntheticEvent, ComponentProps, ReactNode } from "react";
 import { MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -26,7 +26,6 @@ import RegistrationEmailPromptDialog from "../dialogs/RegistrationEmailPromptDia
 import CountryDropdown from "./CountryDropdown";
 import PassphraseConfirmField from "./PassphraseConfirmField";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";
-import { Alignment } from "../elements/Tooltip";
 
 enum RegistrationField {
     Email = "field_email",
@@ -441,9 +440,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return true;
     }
 
-    private tooltipAlignment(): Alignment | undefined {
+    private tooltipAlignment(): ComponentProps<typeof EmailField>["tooltipAlignment"] | undefined {
         if (this.props.mobileRegister) {
-            return Alignment.Bottom;
+            return "bottom";
         }
         return undefined;
     }

src/components/views/elements/CopyableText.tsx

@@ -21,7 +21,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 
-const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true, className, ...props }) => {
+export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className">> = ({ getTextToCopy, className }) => {
     const [tooltip, setTooltip] = useState<string | undefined>(undefined);
 
     const onCopyClickInternal = async (e: ButtonEvent): Promise<void> => {
@@ -37,21 +37,27 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true
         }
     };
 
+    return (
+        <AccessibleButton
+            title={tooltip ?? _t("action|copy")}
+            onClick={onCopyClickInternal}
+            className={className}
+            onTooltipOpenChange={(open) => {
+                if (!open) onHideTooltip();
+            }}
+        />
+    );
+};
+
+const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true, className, ...props }) => {
     const combinedClassName = classNames("mx_CopyableText", className, {
         mx_CopyableText_border: border,
     });
 
     return (
         <div className={combinedClassName} {...props}>
             {children}
-            <AccessibleButton
-                title={tooltip ?? _t("action|copy")}
-                onClick={onCopyClickInternal}
-                className="mx_CopyableText_copyButton"
-                onTooltipOpenChange={(open) => {
-                    if (!open) onHideTooltip();
-                }}
-            />
+            <CopyTextButton getTextToCopy={getTextToCopy} className="mx_CopyableText_copyButton" />
         </div>
     );
 };