Add border for avatar coin for raised hand (#3793)

* Add border for avatar coin for raised hand

change/@azure-communication-react-1f205ba8-aa01-473b-84b9-d6bd6f6436e4.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Add border for avatar coin for raised hand",
+  "packageName": "@azure/communication-react",
+  "email": "ruslanzdor@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -14,7 +14,7 @@ import {
 /* @conditional-compile-remove(total-participant-count) */ /* @conditional-compile-remove(raise-hand) */
 import { Text } from '@fluentui/react';
 /* @conditional-compile-remove(raise-hand) */
-import { useTheme } from '../theming';
+import { useTheme, CallingTheme } from '../theming';
 /* @conditional-compile-remove(raise-hand) */
 import { RaisedHandIcon } from './assets/RaisedHandIcon';
 import React, { useCallback, useMemo } from 'react';
@@ -26,6 +26,8 @@ import {
   OnRenderAvatarCallback,
   ParticipantListParticipant
 } from '../types';
+/* @conditional-compile-remove(raise-hand) */
+import { CustomAvatarOptions } from '../types';
 import { ParticipantItem, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';
 import { iconStyles, participantListItemStyle, participantListStyle } from './styles/ParticipantList.styles';
 import { _formatString } from '@internal/acs-ui-common';
@@ -148,6 +150,9 @@ const onRenderParticipantDefault = (
   /* @conditional-compile-remove(hide-attendee-name) */
   displayName = formatDisplayName();
 
+  /* @conditional-compile-remove(raise-hand) */
+  const callingPalette = (theme as unknown as CallingTheme).callingPalette;
+
   const onRenderIcon =
     callingParticipant?.isScreenSharing ||
     callingParticipant?.isMuted ||
@@ -191,6 +196,21 @@ const onRenderParticipantDefault = (
         )
       : () => null;
 
+  /* @conditional-compile-remove(raise-hand) */
+  const onRenderAvatarWithRaiseHand =
+    callingParticipant?.raisedHand && onRenderAvatar
+      ? (
+          userId?: string,
+          options?: CustomAvatarOptions,
+          defaultOnRender?: (props: CustomAvatarOptions) => JSX.Element
+        ) =>
+          onRenderAvatar(
+            userId,
+            { ...options, styles: { root: { border: callingPalette.raiseHandGold } } },
+            defaultOnRender
+          )
+      : onRenderAvatar;
+
   return (
     <ParticipantItem
       styles={styles}
@@ -201,7 +221,7 @@ const onRenderParticipantDefault = (
       menuItems={menuItems}
       presence={presence}
       onRenderIcon={onRenderIcon}
-      onRenderAvatar={onRenderAvatar}
+      onRenderAvatar={onRenderAvatarWithRaiseHand}
       onClick={() => onParticipantClick?.(participant)}
       showParticipantOverflowTooltip={showParticipantOverflowTooltip}
       /* @conditional-compile-remove(one-to-n-calling) */

packages/react-composites/src/composites/common/AvatarPersona.tsx

@@ -3,6 +3,8 @@
 
 import { IPersonaProps, Persona, PersonaInitialsColor } from '@fluentui/react';
 import React, { useEffect, useState } from 'react';
+/* @conditional-compile-remove(raise-hand) */
+import { mergeStyles } from '@fluentui/react';
 
 /**
  * Custom data attributes for displaying avatar for a user.
@@ -60,6 +62,11 @@ export interface AvatarPersonaProps extends IPersonaProps {
    * A function that returns a Promise that resolves to the data to be displayed.
    */
   dataProvider?: AvatarPersonaDataCallback;
+  /**
+   * Allow to show colored border around persona coin, but isActive is what shows it.
+   */
+  /* @conditional-compile-remove(raise-hand) */
+  allowActiveBorder?: boolean;
 }
 
 /**
@@ -86,9 +93,28 @@ export const AvatarPersona = (props: AvatarPersonaProps): JSX.Element => {
     })();
   }, [data, dataProvider, userId]);
 
+  /* @conditional-compile-remove(raise-hand) */
+  let activePersona = '';
+  /* @conditional-compile-remove(raise-hand) */
+  if (props.allowActiveBorder) {
+    // Display a border for raised handed participants in participant list
+    activePersona = mergeStyles({
+      border: 'solid 2px',
+      borderColor: 'transparent',
+      borderRadius: '50%',
+      padding: '2px',
+      boxSizing: 'content-box',
+      margin: '-4px'
+    });
+
+    mergeStyles(activePersona, props.styles);
+  }
+
   return (
     <Persona
       {...props}
+      /* @conditional-compile-remove(raise-hand) */
+      className={activePersona}
       text={data?.text ?? text}
       imageUrl={data?.imageUrl ?? imageUrl}
       imageInitials={data?.imageInitials ?? imageInitials}

packages/react-composites/src/composites/common/ParticipantContainer.tsx

@@ -83,6 +83,8 @@ export const ParticipantListWithHeading = (props: {
                 {...options}
                 {...{ hidePersonaDetails: !!options?.text }}
                 dataProvider={onFetchAvatarPersonaData}
+                /* @conditional-compile-remove(raise-hand) */
+                allowActiveBorder={true}
               />
               {options?.text && (
                 <Text nowrap={true} styles={displayNameStyles}>

packages/storybook/stories/ParticipantItem/ParticipantItem.stories.tsx

@@ -4,7 +4,7 @@
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 import { ParticipantItem as ParticipantItemComponent } from '@azure/communication-react';
 import { Stack, mergeStyles } from '@fluentui/react';
-import { MicOff16Regular, ShareScreenStart20Filled } from '@fluentui/react-icons';
+import { MicOff16Regular, ShareScreenStart20Filled, HandLeft16Regular } from '@fluentui/react-icons';
 import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
@@ -95,6 +95,7 @@ const ParticipantItemStory: (args) => JSX.Element = (args) => {
         menuItems={menuItems}
         onRenderIcon={() => (
           <Stack horizontal tokens={tokenProps}>
+            {args.isRaisedHand && <HandLeft16Regular className={iconStyles} primaryFill="currentColor" />}
             {args.isScreenSharing && <ShareScreenStart20Filled className={iconStyles} primaryFill="currentColor" />}
             {args.isMuted && <MicOff16Regular className={iconStyles} primaryFill="currentColor" />}
           </Stack>
@@ -125,7 +126,8 @@ export default {
     presence: hiddenControl,
     styles: hiddenControl,
     strings: hiddenControl,
-    userId: hiddenControl
+    userId: hiddenControl,
+    isRaisedHand: { ...controlsToAdd.isRaisedHand, defaultValue: false }
   },
   parameters: {
     docs: {

packages/storybook/stories/controlsUtils.ts

@@ -267,6 +267,7 @@ export const controlsToAdd = {
   isMuted: { control: 'boolean', defaultValue: false, name: 'Is muted' },
   isSpeaking: { control: 'boolean', defaultValue: false, name: 'Is Speaking' },
   isScreenSharing: { control: 'boolean', defaultValue: false, name: 'Is screen sharing' },
+  isRaisedHand: { control: 'boolean', defaultValue: false, name: 'Is Raised Hand' },
   isSendBoxWithWarning: { control: 'boolean', defaultValue: false, name: 'Has warning/information message' },
   isVideoAvailable: { control: 'boolean', defaultValue: true, name: 'Is video available' },
   isVideoMirrored: { control: 'boolean', defaultValue: false, name: 'Is video mirrored' },