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>

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

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
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
-                    className="mx_AuthBody_resend-button"
+                    <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
-                    kind="link"
+                        <RetryIcon className="mx_Icon mx_Icon_16" />
-                    onClick={onResendClickFn}
+                        {_t("action|resend")}
-                    aria-describedby={tooltipVisible ? tooltipId : undefined}
+                    </AccessibleButton>
-                >
+                </Tooltip>
-                    <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>
             </div>
         </>
     );

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
+                <Tooltip label={_t("auth|check_email_resend_tooltip")} side="top" open={tooltipVisible}>
-                    className="mx_AuthBody_resend-button"
+                    <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
-                    kind="link"
+                        <RetryIcon className="mx_Icon mx_Icon_16" />
-                    onClick={onResendClickFn}
+                        {_t("action|resend")}
-                    aria-describedby={tooltipVisible ? tooltipId : undefined}
+                    </AccessibleButton>
-                >
+                </Tooltip>
-                    <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>
                 {errorText && <ErrorMessage message={errorText} />}
             </div>
 

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
+    showCounts: boolean; // whether to show counts. Independent of props.forceCount
-    showTooltip: boolean;
 }
 
 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 label={_t("notifications|message_didnt_send")} side="right">
-                    {tooltip}
+                    {badge}
-                </StatelessNotificationBadge>
+                </Tooltip>
             );
         }
 
-        return <StatelessNotificationBadge {...commonProps}>{tooltip}</StatelessNotificationBadge>;
+        return badge;
     }
 }

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({
+export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props, ClickableProps>>(
-    symbol,
+    ({ symbol, count, color, knocked, ...props }, ref) => {
-    count,
+        const hideBold = useSettingValue("feature_hidebold");
-    color,
-    knocked,
-    ...props
-}: XOR<Props, ClickableProps>): JSX.Element {
-    const hideBold = useSettingValue("feature_hidebold");
 
-    // Don't show a badge if we don't need to
+        // Don't show a badge if we don't need to
-    if ((color === NotificationColor.None || (hideBold && color == NotificationColor.Bold)) && !knocked) {
+        if ((color === NotificationColor.None || (hideBold && color == NotificationColor.Bold)) && !knocked) {
-        return <></>;
+            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) {
+        if (symbol === null && count > 0) {
-        symbol = formatCount(count);
+            symbol = formatCount(count);
-    }
+        }
 
-    const classes = classNames({
+        const classes = classNames({
-        mx_NotificationBadge: true,
+            mx_NotificationBadge: true,
-        mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
+            mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount,
-        mx_NotificationBadge_highlighted: color >= NotificationColor.Red,
+            mx_NotificationBadge_highlighted: color >= NotificationColor.Red,
-        mx_NotificationBadge_dot: isEmptyBadge && !knocked,
+            mx_NotificationBadge_dot: isEmptyBadge && !knocked,
-        mx_NotificationBadge_knocked: knocked,
+            mx_NotificationBadge_knocked: knocked,
-        mx_NotificationBadge_2char: symbol && symbol.length > 0 && symbol.length < 3,
+            mx_NotificationBadge_2char: symbol && symbol.length > 0 && symbol.length < 3,
-        mx_NotificationBadge_3char: symbol && symbol.length > 2,
+            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
+            <div className={classes} ref={ref}>
-                aria-label={props.label}
-                {...props}
-                className={classes}
-                onClick={props.onClick}
-                onMouseOver={props.onMouseOver}
-                onMouseLeave={props.onMouseLeave}
-            >
                 <span className="mx_NotificationBadge_count">{symbol}</span>
-                {props.children}
+            </div>
-            </AccessibleButton>
         );
-    }
+    },
-
+);
-    return (
-        <div className={classes}>
-            <span className="mx_NotificationBadge_count">{symbol}</span>
-        </div>
-    );
-}

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

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(
+            const { getByRole } = render(
-                <StatelessNotificationBadge
+                <StatelessNotificationBadge symbol="" color={NotificationColor.Red} count={5} onClick={cb} />,
-                    symbol=""
-                    color={NotificationColor.Red}
-                    count={5}
-                    onClick={cb}
-                    onMouseOver={cb}
-                    onMouseLeave={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", () => {