Use compound tooltip and icon button

Author: florianduros

res/css/structures/_ThreadsActivityCentre.pcss

@@ -17,22 +17,25 @@
  */
 
 .mx_ThreadsActivityCentreButton {
-    color: $secondary-content;
-    height: 32px;
-    min-width: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     border-radius: 8px;
     margin: 18px auto auto auto;
 
     &.expanded {
         /* align with settings icon */
-        margin-left: 25px;
+        margin-left: 22px;
 
-        & > .mx_ThreadsActivityCentreButton_IndicatorIcon {
+        & > div {
+            display: flex;
+        }
+
+        & .mx_ThreadsActivityCentreButton_Icon {
             /* align with settings label */
             margin-right: 14px;
+            min-width: 24px;
+        }
+
+        & .mx_ThreadsActivityCentreButton_Text {
+            color: $secondary-content;
         }
     }
 

src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx

@@ -64,6 +64,7 @@ export function ThreadsActivityCentre({ displayButtonLabel }: ThreadsActivityCen
                 <ThreadsActivityCentreButton
                     displayLabel={displayButtonLabel}
                     notificationLevel={roomsAndNotifications.greatestNotificationLevel}
+                    disableTooltip={open}
                 />
             }
         >

src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx

@@ -19,12 +19,10 @@
 import React, { forwardRef, HTMLProps } from "react";
 import { Icon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
 import classNames from "classnames";
-import { IndicatorIcon } from "@vector-im/compound-web";
+import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
 
 import { _t } from "../../../../languageHandler";
-import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
 import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
-import { notificationLevelToIndicator } from "../../../../utils/notifications";
 
 interface ThreadsActivityCentreButtonProps extends HTMLProps<HTMLDivElement> {
     /**
@@ -35,35 +33,48 @@ interface ThreadsActivityCentreButtonProps extends HTMLProps<HTMLDivElement> {
      * The notification level of the threads.
      */
     notificationLevel: NotificationLevel;
+    /**
+     * Whether to disable the tooltip.
+     */
+    disableTooltip?: boolean;
 }
 
 /**
  * A button to open the thread activity centre.
  */
 export const ThreadsActivityCentreButton = forwardRef<HTMLDivElement, ThreadsActivityCentreButtonProps>(
-    function ThreadsActivityCentreButton({ displayLabel, notificationLevel, ...props }, ref): React.JSX.Element {
+    function ThreadsActivityCentreButton(
+        { displayLabel, notificationLevel, disableTooltip = false, ...props },
+        ref,
+    ): React.JSX.Element {
+        const openTooltip = displayLabel || disableTooltip ? false : undefined;
+
         return (
-            <AccessibleTooltipButton
-                className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}
-                title={_t("common|threads")}
-                // @ts-ignore
-                // ref nightmare...
-                ref={ref}
-                forceHide={displayLabel}
-                aria-expanded={displayLabel}
-                // The compound component Menu is already handling the keyboard events
-                disableKeyboardOverrides={true}
-                {...props}
-            >
-                <IndicatorIcon
-                    className="mx_ThreadsActivityCentreButton_IndicatorIcon"
-                    indicator={notificationLevelToIndicator(notificationLevel)}
-                    size="24px"
+            <Tooltip label={_t("common|threads")} side="right" open={openTooltip}>
+                <IconButton
+                    className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}
+                    //   indicator={notificationLevelToIndicator(notificationLevel)}
+                    indicator="critical"
+                    // @ts-ignore
+                    // ref nightmare...
+                    ref={ref}
+                    {...props}
                 >
-                    <Icon className="mx_ThreadsActivityCentreButton_Icon" />
-                </IndicatorIcon>
-                {displayLabel && _t("common|threads")}
-            </AccessibleTooltipButton>
+                    <>
+                        <Icon className="mx_ThreadsActivityCentreButton_Icon" />
+                        {displayLabel && (
+                            <Text
+                                className="mx_ThreadsActivityCentreButton_Text"
+                                as="span"
+                                size="md"
+                                title={_t("common|threads")}
+                            >
+                                {_t("common|threads")}
+                            </Text>
+                        )}
+                    </>
+                </IconButton>
+            </Tooltip>
         );
     },
 );