Merge pull request #6095 from mozilla/tooltip-improvements

Bug fix for tool bar tooltips remaining open when popover opens.
Hubs-Foundation · May 25, 2023 · dccd4e0 · dccd4e0
2 parents 6f5d23e + 1b8229b
commit dccd4e0
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 108 deletions.
diff --git a/src/react-components/room/InvitePopover.js b/src/react-components/room/InvitePopover.js
@@ -8,6 +8,7 @@ import { ReactComponent as InviteIcon } from "../icons/Invite.svg";
 import { Column } from "../layout/Column";
 import { InviteLinkInputField } from "./InviteLinkInputField";
 import { FormattedMessage, defineMessage, useIntl } from "react-intl";
+import { ToolTip } from "@mozilla/lilypad-ui";
 
 function InvitePopoverContent({ url, embed, inviteRequired, fetchingInvite, inviteUrl, revokeInvite }) {
   return (
@@ -45,6 +46,11 @@ InvitePopoverContent.propTypes = {
   revokeInvite: PropTypes.func
 };
 
+const inviteTooltipDescription = defineMessage({
+  id: "invite-tooltip.description",
+  defaultMessage: "Copy room link to invite others to the room"
+});
+
 const invitePopoverTitle = defineMessage({
   id: "invite-popover.title",
   defaultMessage: "Invite"
@@ -63,6 +69,7 @@ export function InvitePopoverButton({
 }) {
   const intl = useIntl();
   const title = intl.formatMessage(invitePopoverTitle);
+  const description = intl.formatMessage(inviteTooltipDescription);
 
   return (
     <Popover
@@ -83,14 +90,16 @@ export function InvitePopoverButton({
       popoverApiRef={popoverApiRef}
     >
       {({ togglePopover, popoverVisible, triggerRef }) => (
-        <ToolbarButton
-          ref={triggerRef}
-          icon={<InviteIcon />}
-          selected={popoverVisible}
-          onClick={togglePopover}
-          label={title}
-          {...rest}
-        />
+        <ToolTip description={description}>
+          <ToolbarButton
+            ref={triggerRef}
+            icon={<InviteIcon />}
+            selected={popoverVisible}
+            onClick={togglePopover}
+            label={title}
+            {...rest}
+          />
+        </ToolTip>
       )}
     </Popover>
   );

diff --git a/src/react-components/room/InvitePopoverContainer.js b/src/react-components/room/InvitePopoverContainer.js
@@ -5,18 +5,8 @@ import { hubUrl } from "../../utils/phoenix-utils";
 import { InvitePopoverButton } from "./InvitePopover";
 import { handleExitTo2DInterstitial } from "../../utils/vr-interstitial";
 import { useInviteUrl } from "./hooks/useInviteUrl";
-import { ToolTip } from "@mozilla/lilypad-ui";
-import { defineMessage, useIntl } from "react-intl";
-
-const inviteTooltipDescription = defineMessage({
-  id: "invite-tooltip.description",
-  defaultMessage: "Copy room link to invite others to the room"
-});
 
 export function InvitePopoverContainer({ hub, hubChannel, scene, store, ...rest }) {
-  const intl = useIntl();
-  const description = intl.formatMessage(inviteTooltipDescription);
-
   // TODO: Move to Hub class
   const shortUrl = `https://${configs.SHORTLINK_DOMAIN}`;
   const url = `${shortUrl}/${hub.hub_id}`;
@@ -58,18 +48,16 @@ export function InvitePopoverContainer({ hub, hubChannel, scene, store, ...rest
   }
 
   return (
-    <ToolTip description={description}>
-      <InvitePopoverButton
-        inviteRequired={inviteRequired}
-        fetchingInvite={fetchingInvite}
-        inviteUrl={inviteUrl}
-        revokeInvite={revokeInvite}
-        url={url}
-        embed={embedText}
-        popoverApiRef={popoverApiRef}
-        {...rest}
-      />
-    </ToolTip>
+    <InvitePopoverButton
+      inviteRequired={inviteRequired}
+      fetchingInvite={fetchingInvite}
+      inviteUrl={inviteUrl}
+      revokeInvite={revokeInvite}
+      url={url}
+      embed={embedText}
+      popoverApiRef={popoverApiRef}
+      {...rest}
+    />
   );
 }
 

diff --git a/src/react-components/room/PlacePopover.js b/src/react-components/room/PlacePopover.js
@@ -5,6 +5,12 @@ import { Popover } from "../popover/Popover";
 import { ToolbarButton } from "../input/ToolbarButton";
 import { ReactComponent as ObjectIcon } from "../icons/Object.svg";
 import { defineMessage, useIntl } from "react-intl";
+import { ToolTip } from "@mozilla/lilypad-ui";
+
+const placeTooltipDescription = defineMessage({
+  id: "place-tooltip.description",
+  defaultMessage: "Select from a variety of objects and tools to edit your room"
+});
 
 const placePopoverTitle = defineMessage({
   id: "place-popover.title",
@@ -21,6 +27,7 @@ export function PlacePopoverButton({ items }) {
   }
 
   const title = intl.formatMessage(placePopoverTitle);
+  const description = intl.formatMessage(placeTooltipDescription);
 
   return (
     <Popover
@@ -30,14 +37,16 @@ export function PlacePopoverButton({ items }) {
       offsetDistance={28}
     >
       {({ togglePopover, popoverVisible, triggerRef }) => (
-        <ToolbarButton
-          ref={triggerRef}
-          icon={<ObjectIcon />}
-          selected={popoverVisible}
-          onClick={togglePopover}
-          label={title}
-          preset="accent3"
-        />
+        <ToolTip description={description}>
+          <ToolbarButton
+            ref={triggerRef}
+            icon={<ObjectIcon />}
+            selected={popoverVisible}
+            onClick={togglePopover}
+            label={title}
+            preset="accent3"
+          />
+        </ToolTip>
       )}
     </Popover>
   );

diff --git a/src/react-components/room/PlacePopoverContainer.js b/src/react-components/room/PlacePopoverContainer.js
@@ -12,20 +12,12 @@ import { ReactComponent as UploadIcon } from "../icons/Upload.svg";
 import { PlacePopoverButton } from "./PlacePopover";
 import { ObjectUrlModalContainer } from "./ObjectUrlModalContainer";
 import configs from "../../utils/configs";
-import { FormattedMessage, defineMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { anyEntityWith } from "../../utils/bit-utils";
 import { MyCameraTool } from "../../bit-components";
-import { ToolTip } from "@mozilla/lilypad-ui";
-
-const placeTooltipDescription = defineMessage({
-  id: "place-tooltip.description",
-  defaultMessage: "Select from a variety of objects and tools to edit your room"
-});
 
 export function PlacePopoverContainer({ scene, mediaSearchStore, showNonHistoriedDialog, hubChannel }) {
   const [items, setItems] = useState([]);
-  const intl = useIntl();
-  const description = intl.formatMessage(placeTooltipDescription);
 
   useEffect(() => {
     function updateItems() {
@@ -119,11 +111,7 @@ export function PlacePopoverContainer({ scene, mediaSearchStore, showNonHistorie
     };
   }, [hubChannel, mediaSearchStore, showNonHistoriedDialog, scene]);
 
-  return (
-    <ToolTip description={description}>
-      <PlacePopoverButton items={items} />
-    </ToolTip>
-  );
+  return <PlacePopoverButton items={items} />;
 }
 
 PlacePopoverContainer.propTypes = {

diff --git a/src/react-components/room/ReactionPopover.js b/src/react-components/room/ReactionPopover.js
@@ -11,6 +11,12 @@ import { Row } from "../layout/Row";
 import { HandRaisedButton } from "./ReactionButton";
 import styles from "./ReactionPopover.scss";
 import { Button } from "../input/Button";
+import { ToolTip } from "@mozilla/lilypad-ui";
+
+const reactTooltipDescription = defineMessage({
+  id: "react-tooltip.description",
+  defaultMessage: "Reactions"
+});
 
 const reactionPopoverTitle = defineMessage({
   id: "reaction-popover.title",
@@ -65,6 +71,7 @@ export function ReactionPopoverButton({ items, presence, onToggleHandRaised }) {
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   const intl = useIntl();
   const title = intl.formatMessage(reactionPopoverTitle);
+  const description = intl.formatMessage(reactTooltipDescription);
   const popoverApiRef = useRef();
 
   const onTooltipHandLowered = useCallback(() => {
@@ -101,28 +108,30 @@ export function ReactionPopoverButton({ items, presence, onToggleHandRaised }) {
       disableFullscreen={isTooltipVisible}
     >
       {({ togglePopover, popoverVisible, triggerRef }) => (
-        <ToolbarButton
-          ref={triggerRef}
-          icon={
-            presence.hand_raised ? (
-              <HandRaisedIcon width="32px" height="32px" style={{ marginLeft: "5px" }} />
-            ) : (
-              <ReactionIcon />
-            )
-          }
-          selected={popoverVisible}
-          onClick={() => {
-            setIsReactionsVisible(!isReactionsVisible);
-            if (presence.hand_raised) {
-              setIsTooltipVisible(!isTooltipVisible);
-            } else {
-              setIsTooltipVisible(false);
-              togglePopover();
+        <ToolTip description={description}>
+          <ToolbarButton
+            ref={triggerRef}
+            icon={
+              presence.hand_raised ? (
+                <HandRaisedIcon width="32px" height="32px" style={{ marginLeft: "5px" }} />
+              ) : (
+                <ReactionIcon />
+              )
             }
-          }}
-          label={title}
-          preset="accent2"
-        />
+            selected={popoverVisible}
+            onClick={() => {
+              setIsReactionsVisible(!isReactionsVisible);
+              if (presence.hand_raised) {
+                setIsTooltipVisible(!isTooltipVisible);
+              } else {
+                setIsTooltipVisible(false);
+                togglePopover();
+              }
+            }}
+            label={title}
+            preset="accent2"
+          />
+        </ToolTip>
       )}
     </Popover>
   );

diff --git a/src/react-components/room/ReactionPopoverContainer.js b/src/react-components/room/ReactionPopoverContainer.js
@@ -3,13 +3,7 @@ import PropTypes from "prop-types";
 import { useState, useEffect } from "react";
 import { ReactionPopoverButton } from "./ReactionPopover";
 import { spawnEmojiInFrontOfUser, emojis } from "../../components/emoji";
-import { defineMessage, defineMessages, useIntl } from "react-intl";
-import { ToolTip } from "@mozilla/lilypad-ui";
-
-const reactTooltipDescription = defineMessage({
-  id: "react-tooltip.description",
-  defaultMessage: "Reactions"
-});
+import { defineMessages, useIntl } from "react-intl";
 
 const emojiLabels = defineMessages({
   smile: { id: "reaction-popover.emoji-label.smile", defaultMessage: "Smile" },
@@ -38,7 +32,6 @@ function usePresence(scene, initialPresence) {
 export function ReactionPopoverContainer({ scene, initialPresence }) {
   const intl = useIntl();
   const presence = usePresence(scene, initialPresence);
-  const description = intl.formatMessage(reactTooltipDescription);
 
   const items = emojis.map(emoji => ({
     src: emoji.particleEmitterConfig.src,
@@ -55,11 +48,7 @@ export function ReactionPopoverContainer({ scene, initialPresence }) {
     }
   }, [presence]);
 
-  return (
-    <ToolTip description={description}>
-      <ReactionPopoverButton items={items} presence={presence} onToggleHandRaised={onToggleHandRaised} />
-    </ToolTip>
-  );
+  return <ReactionPopoverButton items={items} presence={presence} onToggleHandRaised={onToggleHandRaised} />;
 }
 
 ReactionPopoverContainer.propTypes = {

diff --git a/src/react-components/room/SharePopover.js b/src/react-components/room/SharePopover.js
@@ -5,6 +5,12 @@ import { Popover } from "../popover/Popover";
 import { ToolbarButton } from "../input/ToolbarButton";
 import { ReactComponent as ShareIcon } from "../icons/Share.svg";
 import { defineMessage, useIntl } from "react-intl";
+import { ToolTip } from "@mozilla/lilypad-ui";
+
+const shareTooltipDescription = defineMessage({
+  id: "share-tooltip.description",
+  defaultMessage: "Display your screen or webcam as an object in the room"
+});
 
 const sharePopoverTitle = defineMessage({
   id: "share-popover.title",
@@ -14,6 +20,7 @@ const sharePopoverTitle = defineMessage({
 export function SharePopoverButton({ items }) {
   const intl = useIntl();
   const title = intl.formatMessage(sharePopoverTitle);
+  const description = intl.formatMessage(shareTooltipDescription);
 
   const filteredItems = items.filter(item => !!item);
 
@@ -52,14 +59,16 @@ export function SharePopoverButton({ items }) {
       disableFullscreen
     >
       {({ togglePopover, popoverVisible, triggerRef }) => (
-        <ToolbarButton
-          ref={triggerRef}
-          icon={<ShareIcon />}
-          selected={popoverVisible}
-          onClick={togglePopover}
-          label={title}
-          preset="accent5"
-        />
+        <ToolTip description={description}>
+          <ToolbarButton
+            ref={triggerRef}
+            icon={<ShareIcon />}
+            selected={popoverVisible}
+            onClick={togglePopover}
+            label={title}
+            preset="accent5"
+          />
+        </ToolTip>
       )}
     </Popover>
   );

diff --git a/src/react-components/room/SharePopoverContainer.js b/src/react-components/room/SharePopoverContainer.js
@@ -4,15 +4,9 @@ import { ReactComponent as VideoIcon } from "../icons/Video.svg";
 import { ReactComponent as DesktopIcon } from "../icons/Desktop.svg";
 import { ReactComponent as AvatarIcon } from "../icons/Avatar.svg";
 import { SharePopoverButton } from "./SharePopover";
-import { FormattedMessage, defineMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import useAvatar from "./hooks/useAvatar";
 import { MediaDevicesEvents, MediaDevices } from "../../utils/media-devices-utils";
-import { ToolTip } from "@mozilla/lilypad-ui";
-
-const shareTooltipDescription = defineMessage({
-  id: "share-tooltip.description",
-  defaultMessage: "Display your screen or webcam as an object in the room"
-});
 
 function useShare(scene, hubChannel) {
   const mediaDevicesManager = APP.mediaDevicesManager;
@@ -116,8 +110,6 @@ function useShare(scene, hubChannel) {
 }
 
 export function SharePopoverContainer({ scene, hubChannel }) {
-  const intl = useIntl();
-  const description = intl.formatMessage(shareTooltipDescription);
   const {
     sharingSource,
     canShareCamera,
@@ -155,11 +147,7 @@ export function SharePopoverContainer({ scene, hubChannel }) {
     }
   ];
 
-  return (
-    <ToolTip description={description}>
-      <SharePopoverButton items={items} />
-    </ToolTip>
-  );
+  return <SharePopoverButton items={items} />;
 }
 
 SharePopoverContainer.propTypes = {