[Calling] Tooltip for each of the reaction button applied (#4035)

Author: Mohtasim

change-beta/@azure-communication-react-5fb78aa9-9d3c-44a7-a6c7-a2ea0d3ea24e.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "Adding tooltip for each reaction button",
+  "comment": "Tooltip for each of the reaction button applied",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-5fb78aa9-9d3c-44a7-a6c7-a2ea0d3ea24e.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "Adding tooltip for each reaction button",
+  "comment": "Tooltip for each of the reaction button applied",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -3673,7 +3673,12 @@ export interface ReactionButtonProps extends ControlBarButtonProps {
 
 // @beta
 export interface ReactionButtonStrings {
+    applauseReactionTooltipContent?: string;
+    heartReactionTooltipContent?: string;
     label: string;
+    laughReactionTooltipContent?: string;
+    likeReactionTooltipContent?: string;
+    surprisedReactionTooltipContent?: string;
     tooltipContent?: string;
     tooltipDisabledContent?: string;
 }

packages/react-components/review/beta/react-components.api.md

@@ -1908,7 +1908,12 @@ export interface ReactionButtonProps extends ControlBarButtonProps {
 
 // @beta
 export interface ReactionButtonStrings {
+    applauseReactionTooltipContent?: string;
+    heartReactionTooltipContent?: string;
     label: string;
+    laughReactionTooltipContent?: string;
+    likeReactionTooltipContent?: string;
+    surprisedReactionTooltipContent?: string;
     tooltipContent?: string;
     tooltipDisabledContent?: string;
 }

packages/react-components/src/components/ReactionButton.tsx

@@ -6,9 +6,12 @@ import {
   ContextualMenuItemType,
   DefaultPalette,
   IButtonStyles,
+  ICalloutContentStyles,
+  IconButton,
   IContextualMenuItem,
   mergeStyles,
   Theme,
+  TooltipHost,
   useTheme
 } from '@fluentui/react';
 /* @conditional-compile-remove(reaction) */
@@ -22,7 +25,9 @@ import { useLocale } from '../localization';
 /* @conditional-compile-remove(reaction) */
 import { reactionEmoji } from './utils/videoTileStylesUtils';
 /* @conditional-compile-remove(reaction) */
-import { emojiStyles, reactionEmojiMenuStyles } from './styles/ReactionButton.styles';
+import { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';
+/* @conditional-compile-remove(reaction) */
+import { isDarkThemed } from '../theming/themeUtils';
 
 /* @conditional-compile-remove(reaction) */
 /**
@@ -50,10 +55,20 @@ export interface ReactionButtonProps extends ControlBarButtonProps {
 export interface ReactionButtonStrings {
   /** Label of the button. */
   label: string;
-  /** * Tooltip content when the button is disabled. */
+  /** Tooltip content when the button is disabled. */
   tooltipDisabledContent?: string;
   /** Tooltip content when the button is enabled. */
   tooltipContent?: string;
+  /** Tooltip content of like reaction button. */
+  likeReactionTooltipContent?: string;
+  /** Tooltip content of heart reaction button. */
+  heartReactionTooltipContent?: string;
+  /** Tooltip content of laugh reaction button. */
+  laughReactionTooltipContent?: string;
+  /** Tooltip content of clap reaction button. */
+  applauseReactionTooltipContent?: string;
+  /** Tooltip content of surprised reaction button. */
+  surprisedReactionTooltipContent?: string;
 }
 
 /* @conditional-compile-remove(reaction) */
@@ -69,35 +84,61 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => {
   const strings = { ...localeStrings, ...props.strings };
   const theme = useTheme();
   const styles = reactionButtonStyles(theme);
-  const onRenderIcon = (): JSX.Element => <_HighContrastAwareIcon iconName="ReactionButtonIcon" />;
+  const onRenderIcon = (): JSX.Element => (
+    <_HighContrastAwareIcon disabled={props.disabled} iconName="ReactionButtonIcon" />
+  );
 
   const [isHoveredMap, setIsHoveredMap] = useState(new Map());
   const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
+  const emojiButtonTooltip: Map<string, string | undefined> = new Map([
+    ['like', strings.likeReactionTooltipContent],
+    ['heart', strings.heartReactionTooltipContent],
+    ['laugh', strings.laughReactionTooltipContent],
+    ['applause', strings.applauseReactionTooltipContent],
+    ['surprised', strings.surprisedReactionTooltipContent]
+  ]);
+
+  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
+
+  const calloutProps = {
+    gapSpace: 4,
+    styles: calloutStyle,
+    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
+  };
 
   const renderEmoji = (item: IContextualMenuItem, dismissMenu: () => void): React.JSX.Element => (
     <div style={reactionEmojiMenuStyles()}>
       {emojis.map((emoji, index) => (
-        <div
+        <TooltipHost
           key={index}
-          onClick={() => {
-            props.onReactionClicked(emoji);
-            setIsHoveredMap((prevMap) => {
-              return new Map(prevMap).set(emoji, false);
-            });
-            dismissMenu();
-          }}
-          style={emojiStyles(reactionEmoji.get(emoji), isHoveredMap.get(emoji) ? 'running' : 'paused')}
-          onMouseEnter={() =>
-            setIsHoveredMap((prevMap) => {
-              return new Map(prevMap).set(emoji, true);
-            })
-          }
-          onMouseLeave={() =>
-            setIsHoveredMap((prevMap) => {
-              return new Map(prevMap).set(emoji, false);
-            })
-          }
-        />
+          data-ui-id={index}
+          hidden={props.disableTooltip}
+          content={emojiButtonTooltip.get(emoji)}
+          styles={reactionToolTipHostStyle()}
+          calloutProps={{ ...calloutProps }}
+        >
+          <IconButton
+            key={index}
+            onClick={() => {
+              props.onReactionClicked(emoji);
+              setIsHoveredMap((prevMap) => {
+                return new Map(prevMap).set(emoji, false);
+              });
+              dismissMenu();
+            }}
+            style={emojiStyles(reactionEmoji.get(emoji), isHoveredMap.get(emoji) ? 'running' : 'paused')}
+            onMouseEnter={() =>
+              setIsHoveredMap((prevMap) => {
+                return new Map(prevMap).set(emoji, true);
+              })
+            }
+            onMouseLeave={() =>
+              setIsHoveredMap((prevMap) => {
+                return new Map(prevMap).set(emoji, false);
+              })
+            }
+          />
+        </TooltipHost>
       ))}
     </div>
   );
@@ -118,6 +159,7 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => {
       strings={strings}
       labelKey={props.labelKey ?? 'reactionButtonLabel'}
       onRenderMenuIcon={() => <div />}
+      disabled={props.disabled}
     />
   );
 };

packages/react-components/src/components/styles/ReactionButton.styles.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /* @conditional-compile-remove(reaction) */
-import { keyframes, memoizeFunction } from '@fluentui/react';
+import { ITooltipHostStyles, keyframes, memoizeFunction } from '@fluentui/react';
 /* @conditional-compile-remove(reaction) */
 import React from 'react';
 
@@ -46,7 +46,7 @@ export const emojiStyles = (backgroundImage?: string, animationPlayState?: strin
     backgroundSize: `44px 2142px`,
     transition: 'opacity 2s',
     backgroundColor: 'transparent',
-    transform: `scale(0.6)`
+    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
   };
 };
 
@@ -65,3 +65,19 @@ export const reactionEmojiMenuStyles = (): React.CSSProperties => {
     height: '42px'
   };
 };
+
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+export const reactionToolTipHostStyle = (): ITooltipHostStyles => {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      width: '100%'
+    }
+  };
+};

packages/react-components/src/localization/locales/en-US/strings.json

@@ -126,7 +126,12 @@
   "reactionButton": {
     "label": "React",
     "tooltipDisabledContent": "Reaction action is disabled",
-    "tooltipContent": "Send a reaction"
+    "tooltipContent": "Send a reaction",
+    "likeReactionTooltipContent": "Like",
+    "heartReactionTooltipContent": "Love",
+    "laughReactionTooltipContent": "Laugh",
+    "applauseReactionTooltipContent": "Applause",
+    "surprisedReactionTooltipContent": "Surprised"
   },
   "messageThread": {
     "yesterday": "Yesterday",

packages/react-composites/src/composites/CallComposite/components/buttons/Reaction.tsx

@@ -20,6 +20,7 @@ export const Reaction = (props: {
   displayType?: CallControlDisplayType;
   styles?: ControlBarButtonStyles;
   disabled?: boolean;
+  disableTooltip?: boolean;
 }): JSX.Element => {
   const reactionButtonProps = usePropsFor(ReactionButton) as unknown as ReactionButtonProps;
   const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);
@@ -33,6 +34,7 @@ export const Reaction = (props: {
       showLabel={props.displayType !== 'compact'}
       disabled={reactionButtonDisabled || props.disabled}
       styles={styles}
+      disableTooltip={props.disableTooltip}
     />
   );
 };