Use Compound Tooltips in StatelessNotificationBadge, VerifyEmailModal, CheckEmail (#12084)

* Switch StatelessNotificationBadge to using Compound Tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Migrate CheckEmail & VerifyEmailModal to Compound tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix test 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>
2024-01-09 11:46:27 +00:00 · 2024-01-09 11:46:27 +00:00 · 061c269f36
commit 061c269f36
parent 82840a19f9
7 changed files with 71 additions and 142 deletions
--- a/res/css/views/rooms/_NotificationBadge.pcss
+++ b/res/css/views/rooms/_NotificationBadge.pcss
@ -75,10 +75,3 @@ limitations under the License.
        }
    }
 }
-
-.mx_NotificationBadge_tooltip {
-    display: inline-block;
-    position: relative;
-    top: -25px;
-    left: 6px;
-}
--- a/src/components/structures/auth/forgot-password/CheckEmail.tsx
+++ b/src/components/structures/auth/forgot-password/CheckEmail.tsx
@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { ReactNode, useRef } from "react";
+import React, { ReactNode } from "react";
+import { Tooltip } from "@vector-im/compound-web";

 import AccessibleButton from "../../../views/elements/AccessibleButton";
 import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
 import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { _t } from "../../../../languageHandler";
-import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";

@ -42,7 +42,6 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
    onSubmitForm,
    onResendClick,
 }) => {
-    const tooltipId = useRef(`mx_CheckEmail_${Math.random()}`).current;
    const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);

    const onResendClickFn = async (): Promise<void> => {
@ -67,21 +66,12 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
            <input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} />
            <div className="mx_AuthBody_did-not-receive">
                <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <AccessibleButton
-                    className="mx_AuthBody_resend-button"
-                    kind="link"
-                    onClick={onResendClickFn}
-                    aria-describedby={tooltipVisible ? tooltipId : undefined}
-                >
-                    <RetryIcon className="mx_Icon mx_Icon_16" />
-                    {_t("action|resend")}
-                    <Tooltip
-                        id={tooltipId}
-                        label={_t("auth|check_email_resend_tooltip")}
-                        alignment={Alignment.Top}
-                        visible={tooltipVisible}
-                    />
-                </AccessibleButton>
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
+                    <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
+                        <RetryIcon className="mx_Icon mx_Icon_16" />
+                        {_t("action|resend")}
+                    </AccessibleButton>
+                </Tooltip>
            </div>
        </>
    );
--- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
+++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { ReactNode, useRef } from "react";
+import React, { ReactNode } from "react";
+import { Tooltip } from "@vector-im/compound-web";

 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../../views/elements/AccessibleButton";
 import { Icon as RetryIcon } from "../../../../../res/img/compound/retry-16px.svg";
 import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
-import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";

@ -40,7 +40,6 @@ export const VerifyEmailModal: React.FC<Props> = ({
    onReEnterEmailClick,
    onResendClick,
 }) => {
-    const tooltipId = useRef(`mx_VerifyEmailModal_${Math.random()}`).current;
    const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);

    const onResendClickFn = async (): Promise<void> => {
@ -66,21 +65,12 @@ export const VerifyEmailModal: React.FC<Props> = ({

            <div className="mx_AuthBody_did-not-receive">
                <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <AccessibleButton
-                    className="mx_AuthBody_resend-button"
-                    kind="link"
-                    onClick={onResendClickFn}
-                    aria-describedby={tooltipVisible ? tooltipId : undefined}
-                >
-                    <RetryIcon className="mx_Icon mx_Icon_16" />
-                    {_t("action|resend")}
-                    <Tooltip
-                        id={tooltipId}
-                        label={_t("auth|check_email_resend_tooltip")}
-                        alignment={Alignment.Top}
-                        visible={tooltipVisible}
-                    />
-                </AccessibleButton>
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
+                    <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
+                        <RetryIcon className="mx_Icon mx_Icon_16" />
+                        {_t("action|resend")}
+                    </AccessibleButton>
+                </Tooltip>
                {errorText && <ErrorMessage message={errorText} />}
            </div>

--- a/src/components/views/rooms/NotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge.tsx
@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { MouseEvent, ReactNode } from "react";
+import React, { ReactNode } from "react";
+import { Tooltip } from "@vector-im/compound-web";

 import SettingsStore from "../../../settings/SettingsStore";
 import { XOR } from "../../../@types/common";
 import { NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState";
-import Tooltip from "../elements/Tooltip";
 import { _t } from "../../../languageHandler";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
 import { StatelessNotificationBadge } from "./NotificationBadge/StatelessNotificationBadge";
@ -48,8 +48,7 @@ interface IClickableProps extends IProps, React.InputHTMLAttributes<Element> {
 }

 interface IState {
-    showCounts: boolean; // whether or not to show counts. Independent of props.forceCount
-    showTooltip: boolean;
+    showCounts: boolean; // whether to show counts. Independent of props.forceCount
 }

 export default class NotificationBadge extends React.PureComponent<XOR<IProps, IClickableProps>, IState> {
@ -61,7 +60,6 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I

        this.state = {
            showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId),
-            showTooltip: false,
        };

        this.countWatcherRef = SettingsStore.watchSetting(
@ -97,19 +95,6 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
        this.forceUpdate(); // notification state changed - update
    };

-    private onMouseOver = (e: MouseEvent): void => {
-        e.stopPropagation();
-        this.setState({
-            showTooltip: true,
-        });
-    };
-
-    private onMouseLeave = (): void => {
-        this.setState({
-            showTooltip: false,
-        });
-    };
-
    public render(): ReactNode {
        /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
        const { notification, showUnsentTooltip, forceCount, onClick, tabIndex } = this.props;
@ -119,31 +104,28 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
            if (!notification.hasUnreadCount) return null; // Can't render a badge
        }

-        let label: string | undefined;
-        let tooltip: JSX.Element | undefined;
-        if (showUnsentTooltip && this.state.showTooltip && notification.color === NotificationColor.Unsent) {
-            label = _t("notifications|message_didnt_send");
-            tooltip = <Tooltip className="mx_NotificationBadge_tooltip" label={label} />;
-        }
-
        const commonProps: React.ComponentProps<typeof StatelessNotificationBadge> = {
-            label,
            symbol: notification.symbol,
            count: notification.count,
            color: notification.color,
            knocked: notification.knocked,
-            onMouseOver: this.onMouseOver,
-            onMouseLeave: this.onMouseLeave,
        };

+        let badge: JSX.Element;
        if (onClick) {
+            badge = <StatelessNotificationBadge {...commonProps} onClick={onClick} tabIndex={tabIndex} />;
+        } else {
+            badge = <StatelessNotificationBadge {...commonProps} />;
+        }
+
+        if (showUnsentTooltip && notification.color === NotificationColor.Unsent) {
            return (
-                <StatelessNotificationBadge {...commonProps} onClick={onClick} tabIndex={tabIndex}>
-                    {tooltip}
-                </StatelessNotificationBadge>
+                <Tooltip label={_t("notifications|message_didnt_send")} side="right">
+                    {badge}
+                </Tooltip>
            );
        }

-        return <StatelessNotificationBadge {...commonProps}>{tooltip}</StatelessNotificationBadge>;
+        return badge;
    }
 }
--- a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
+++ b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React, { MouseEvent, ReactNode } from "react";
+import React, { forwardRef } from "react";
 import classNames from "classnames";

 import { formatCount } from "../../../../utils/FormattingUtils";
@ -28,10 +28,6 @@ interface Props {
    count: number;
    color: NotificationColor;
    knocked?: boolean;
-    onMouseOver?: (ev: MouseEvent) => void;
-    onMouseLeave?: (ev: MouseEvent) => void;
-    children?: ReactNode;
-    label?: string;
 }

 interface ClickableProps extends Props {
@ -42,57 +38,46 @@ interface ClickableProps extends Props {
    tabIndex?: number;
 }

-export function StatelessNotificationBadge({
-    symbol,
-    count,
-    color,
-    knocked,
-    ...props
-}: XOR<Props, ClickableProps>): JSX.Element {
-    const hideBold = useSettingValue("feature_hidebold");
+export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props, ClickableProps>>(
+    ({ symbol, count, color, knocked, ...props }, ref) => {
+        const hideBold = useSettingValue("feature_hidebold");

-    // Don't show a badge if we don't need to
-    if ((color === NotificationColor.None || (hideBold && color == NotificationColor.Bold)) && !knocked) {
-        return <></>;
-    }
+        // Don't show a badge if we don't need to
+        if ((color === NotificationColor.None || (hideBold && color == NotificationColor.Bold)) && !knocked) {
+            return <></>;
+        }

-    const hasUnreadCount = color >= NotificationColor.Grey && (!!count || !!symbol);
+        const hasUnreadCount = color >= NotificationColor.Grey && (!!count || !!symbol);

-    const isEmptyBadge = symbol === null && count === 0;
+        const isEmptyBadge = symbol === null && count === 0;

-    if (symbol === null && count > 0) {
-        symbol = formatCount(count);
-    }
+        if (symbol === null && count > 0) {
+            symbol = formatCount(count);
+        }

-    const classes = classNames({
-        mx_NotificationBadge: true,
-        mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
-        mx_NotificationBadge_highlighted: color >= NotificationColor.Red,
-        mx_NotificationBadge_dot: isEmptyBadge && !knocked,
-        mx_NotificationBadge_knocked: knocked,
-        mx_NotificationBadge_2char: symbol && symbol.length > 0 && symbol.length < 3,
-        mx_NotificationBadge_3char: symbol && symbol.length > 2,
-    });
+        const classes = classNames({
+            mx_NotificationBadge: true,
+            mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
+            mx_NotificationBadge_highlighted: color >= NotificationColor.Red,
+            mx_NotificationBadge_dot: isEmptyBadge && !knocked,
+            mx_NotificationBadge_knocked: knocked,
+            mx_NotificationBadge_2char: symbol && symbol.length > 0 && symbol.length < 3,
+            mx_NotificationBadge_3char: symbol && symbol.length > 2,
+        });
+
+        if (props.onClick) {
+            return (
+                <AccessibleButton {...props} className={classes} onClick={props.onClick} ref={ref}>
+                    <span className="mx_NotificationBadge_count">{symbol}</span>
+                    {props.children}
+                </AccessibleButton>
+            );
+        }

-    if (props.onClick) {
        return (
-            <AccessibleButton
-                aria-label={props.label}
-                {...props}
-                className={classes}
-                onClick={props.onClick}
-                onMouseOver={props.onMouseOver}
-                onMouseLeave={props.onMouseLeave}
-            >
+            <div className={classes} ref={ref}>
                <span className="mx_NotificationBadge_count">{symbol}</span>
-                {props.children}
-            </AccessibleButton>
+            </div>
        );
-    }
-
-    return (
-        <div className={classes}>
-            <span className="mx_NotificationBadge_count">{symbol}</span>
-        </div>
-    );
-}
+    },
+);
--- a/test/components/structures/auth/ForgotPassword-test.tsx
+++ b/test/components/structures/auth/ForgotPassword-test.tsx
@ -235,7 +235,9 @@ describe("<ForgotPassword>", () => {
                        expect.any(String),
                        2, // second send attempt
                    );
-                    expect(screen.getByText("Verification link email resent!")).toBeInTheDocument();
+                    expect(
+                        screen.getByRole("tooltip", { name: "Verification link email resent!" }),
+                    ).toBeInTheDocument();
                });
            });

--- a/test/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx
+++ b/test/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx
@ -26,25 +26,12 @@ describe("NotificationBadge", () => {
        it("lets you click it", () => {
            const cb = jest.fn();

-            const { container } = render(
-                <StatelessNotificationBadge
-                    symbol=""
-                    color={NotificationColor.Red}
-                    count={5}
-                    onClick={cb}
-                    onMouseOver={cb}
-                    onMouseLeave={cb}
-                />,
+            const { getByRole } = render(
+                <StatelessNotificationBadge symbol="" color={NotificationColor.Red} count={5} onClick={cb} />,
            );

-            fireEvent.click(container.firstChild!);
+            fireEvent.click(getByRole("button")!);
            expect(cb).toHaveBeenCalledTimes(1);
-
-            fireEvent.mouseEnter(container.firstChild!);
-            expect(cb).toHaveBeenCalledTimes(2);
-
-            fireEvent.mouseLeave(container.firstChild!);
-            expect(cb).toHaveBeenCalledTimes(3);
        });

        it("hides the bold icon when the settings is set", () => {