diff --git a/change/@azure-communication-react-1f205ba8-aa01-473b-84b9-d6bd6f6436e4.json b/change/@azure-communication-react-1f205ba8-aa01-473b-84b9-d6bd6f6436e4.json new file mode 100644 index 00000000000..79d12b7c8a2 --- /dev/null +++ b/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" +} diff --git a/packages/react-components/src/components/ParticipantList.tsx b/packages/react-components/src/components/ParticipantList.tsx index 67f002b1543..3b3ff6e3352 100644 --- a/packages/react-components/src/components/ParticipantList.tsx +++ b/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 ( onParticipantClick?.(participant)} showParticipantOverflowTooltip={showParticipantOverflowTooltip} /* @conditional-compile-remove(one-to-n-calling) */ diff --git a/packages/react-composites/src/composites/common/AvatarPersona.tsx b/packages/react-composites/src/composites/common/AvatarPersona.tsx index be988770a26..35fb067b9ba 100644 --- a/packages/react-composites/src/composites/common/AvatarPersona.tsx +++ b/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 ( {options?.text && ( diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png index 68aa7643c6c..867c69ec76c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ParticipantPane.test.ts-snapshots/participant-with-no-name-unknown-icon-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ParticipantPane.test.ts-snapshots/participant-with-no-name-unknown-icon-Desktop-Chrome-linux.png index 5524888f452..3fe61ed7b85 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ParticipantPane.test.ts-snapshots/participant-with-no-name-unknown-icon-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/ParticipantPane.test.ts-snapshots/participant-with-no-name-unknown-icon-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/PeoplePane.test.ts-snapshots/video-gallery-page-participants-no-displayname-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/PeoplePane.test.ts-snapshots/video-gallery-page-participants-no-displayname-Desktop-Chrome-linux.png index e2534941172..62c0ad11450 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/PeoplePane.test.ts-snapshots/video-gallery-page-participants-no-displayname-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/call/hermetic/PeoplePane.test.ts-snapshots/video-gallery-page-participants-no-displayname-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png index 5f67a482b6a..3967bede93a 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png index 27f5b4f316d..94892ed8160 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-with-people-pane-open-rtl-Desktop-Chrome-16-9-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-with-people-pane-open-rtl-Desktop-Chrome-16-9-linux.png index 6f6f89504bc..82dc153b9bb 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-with-people-pane-open-rtl-Desktop-Chrome-16-9-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-with-people-pane-open-rtl-Desktop-Chrome-16-9-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Desktop-Chrome-linux.png index b2d2cd4265a..d1b4fe71302 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Landscape-linux.png index e18cc5193df..4d85e51177f 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Portrait-linux.png index a7cec559ff5..5317b445392 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/CustomDataModel.test.ts-snapshots/custom-data-model-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/CustomDataModel.test.ts-snapshots/custom-data-model-Mobile-Android-Portrait-linux.png index 12efadda18c..fb9ef909ee4 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/CustomDataModel.test.ts-snapshots/custom-data-model-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/CustomDataModel.test.ts-snapshots/custom-data-model-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-broken-link-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-broken-link-Desktop-Chrome-linux.png index a0b61691f64..966859ad149 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-broken-link-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-broken-link-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-broken-link-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-broken-link-Mobile-Android-Portrait-linux.png index 19acefea8f7..295b0187520 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-broken-link-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-broken-link-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-dark-mode-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-dark-mode-Desktop-Chrome-linux.png index ff6cc5dcb43..aebe48ee0a5 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-dark-mode-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ImageGallery.test.ts-snapshots/inline-image-gallery-modal-dark-mode-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ReadReceipt.test.ts-snapshots/read-message-contextualMenu-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ReadReceipt.test.ts-snapshots/read-message-contextualMenu-Desktop-Chrome-linux.png index 96f8ae43187..518a53c5755 100644 Binary files a/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ReadReceipt.test.ts-snapshots/read-message-contextualMenu-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/beta/tests/browser/chat/hermetic/ReadReceipt.test.ts-snapshots/read-message-contextualMenu-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png index d87b13a5301..73a719161f9 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png index 68aa7643c6c..867c69ec76c 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png index 5f67a482b6a..3967bede93a 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png index 27f5b4f316d..94892ed8160 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/ClosedCaptions.test.ts-snapshots/show-captions-RTL-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-with-people-pane-open-rtl-Desktop-Chrome-16-9-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-with-people-pane-open-rtl-Desktop-Chrome-16-9-linux.png index b43a6ae169a..16100548fb7 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-with-people-pane-open-rtl-Desktop-Chrome-16-9-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/hermetic/OverflowGallery.test.ts-snapshots/overflow-gallery-with-people-pane-open-rtl-Desktop-Chrome-16-9-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Desktop-Chrome-linux.png index 93c0f647d2f..7629ea2fdd2 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Desktop-Chrome-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Landscape-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Landscape-linux.png index e04a3dded43..21be4ba95b1 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Landscape-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Landscape-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Portrait-linux.png index 9d9da0a1d58..436eb56acbf 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Portrait-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/callwithchat/live/CallWithChatComposite.test.ts-snapshots/call-with-chat-gallery-screen-with-people-pane-Mobile-Android-Portrait-linux.png differ diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/chat/hermetic/ReadReceipt.test.ts-snapshots/read-message-contextualMenu-Desktop-Chrome-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/chat/hermetic/ReadReceipt.test.ts-snapshots/read-message-contextualMenu-Desktop-Chrome-linux.png index 1bae745ee58..518a53c5755 100644 Binary files a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/chat/hermetic/ReadReceipt.test.ts-snapshots/read-message-contextualMenu-Desktop-Chrome-linux.png and b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/chat/hermetic/ReadReceipt.test.ts-snapshots/read-message-contextualMenu-Desktop-Chrome-linux.png differ diff --git a/packages/storybook/stories/ParticipantItem/ParticipantItem.stories.tsx b/packages/storybook/stories/ParticipantItem/ParticipantItem.stories.tsx index 6ae70297136..ef1294a5003 100644 --- a/packages/storybook/stories/ParticipantItem/ParticipantItem.stories.tsx +++ b/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={() => ( + {args.isRaisedHand && } {args.isScreenSharing && } {args.isMuted && } @@ -125,7 +126,8 @@ export default { presence: hiddenControl, styles: hiddenControl, strings: hiddenControl, - userId: hiddenControl + userId: hiddenControl, + isRaisedHand: { ...controlsToAdd.isRaisedHand, defaultValue: false } }, parameters: { docs: { diff --git a/packages/storybook/stories/controlsUtils.ts b/packages/storybook/stories/controlsUtils.ts index 3ca88a36382..64cd7e11c71 100644 --- a/packages/storybook/stories/controlsUtils.ts +++ b/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' },