Fix call react button lingering tooltip

signalapp · Apr 29, 2024 · f02a11b · f02a11b
1 parent bef5fd6
commit f02a11b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/stylesheets/components/CallControls.scss b/stylesheets/components/CallControls.scss
@@ -110,10 +110,6 @@
   margin-block: -5px;
 }
 
-.CallControls__ReactButtonContainer--menu-shown .module-tooltip {
-  opacity: 0;
-}
-
 .CallControls__OuterSpacer {
   // Defined in _modules but duplicated here for ease of refactor
   $local-preview-width: 108px;

diff --git a/ts/components/CallingButton.tsx b/ts/components/CallingButton.tsx
@@ -111,34 +111,42 @@ export function CallingButton({
     tooltipContent = i18n('icu:CallingButton--more-options');
   }
 
+  const buttonContent = (
+    <button
+      aria-label={tooltipContent}
+      className={classNames(
+        'CallingButton__icon',
+        `CallingButton__icon--${classNameSuffix}`
+      )}
+      disabled={disabled}
+      id={uniqueButtonId}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      type="button"
+    >
+      <div />
+    </button>
+  );
+
   return (
     <div className="CallingButton">
-      <Tooltip
-        className="CallingButton__tooltip"
-        wrapperClassName={classNames(
-          'CallingButton__button-container',
-          !isVisible && 'CallingButton__button-container--hidden'
-        )}
-        content={tooltipContent}
-        direction={tooltipDirection}
-        theme={Theme.Dark}
-      >
-        <button
-          aria-label={tooltipContent}
-          className={classNames(
-            'CallingButton__icon',
-            `CallingButton__icon--${classNameSuffix}`
+      {tooltipContent === '' ? (
+        <div className="CallingButton__button-container">{buttonContent}</div>
+      ) : (
+        <Tooltip
+          className="CallingButton__tooltip"
+          wrapperClassName={classNames(
+            'CallingButton__button-container',
+            !isVisible && 'CallingButton__button-container--hidden'
           )}
-          disabled={disabled}
-          id={uniqueButtonId}
-          onClick={onClick}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          type="button"
+          content={tooltipContent}
+          direction={tooltipDirection}
+          theme={Theme.Dark}
         >
-          <div />
-        </button>
-      </Tooltip>
+          {buttonContent}
+        </Tooltip>
+      )}
     </div>
   );
 }