Skip to content

Commit e9622a0

Browse files
JamesBurnsideprprabhu-ms
JamesBurnside
and
prprabhu-ms
authored
Typeguard icon usage in composites (#1533)
Co-authored-by: Prathmesh Prabhu <82062616+prprabhu-ms@users.noreply.github.com>
1 parent cbbee63 commit e9622a0

25 files changed

Lines changed: 825 additions & 386 deletions

‎change/@internal-react-composites-ae891e88-012e-4744-b79a-9494ee9cef2b.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Make ChevronRight customizable through icons interface",
4+
"packageName": "@internal/react-composites",
5+
"email": "2684369+JamesBurnside@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 169 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,50 @@ export interface CallClientState {
302302
export const CallComposite: (props: CallCompositeProps) => JSX.Element;
303303

304304
// @public
305-
export type CallCompositeIcons = Partial<Pick<CompositeIcons, 'ControlButtonCameraOff' | 'ControlButtonCameraOn' | 'ControlButtonEndCall' | 'ControlButtonMicOff' | 'ControlButtonMicOn' | 'ControlButtonOptions' | 'ControlButtonParticipants' | 'ControlButtonScreenShareStart' | 'ControlButtonScreenShareStop' | 'ErrorBarCallCameraAccessDenied' | 'ErrorBarCallCameraAlreadyInUse' | 'ErrorBarCallLocalVideoFreeze' | 'ErrorBarCallMacOsCameraAccessDenied' | 'ErrorBarCallMacOsMicrophoneAccessDenied' | 'ErrorBarCallMicrophoneAccessDenied' | 'ErrorBarCallMicrophoneMutedBySystem' | 'ErrorBarCallNetworkQualityLow' | 'ErrorBarCallNoMicrophoneFound' | 'ErrorBarCallNoSpeakerFound' | 'HorizontalGalleryLeftButton' | 'HorizontalGalleryRightButton' | 'LobbyScreenConnectingToCall' | 'LobbyScreenWaitingToBeAdmitted' | 'LocalDeviceSettingsCamera' | 'LocalDeviceSettingsMic' | 'LocalDeviceSettingsSpeaker' | 'LocalPreviewPlaceholder' | 'Muted' | 'NetworkReconnectIcon' | 'NoticePageAccessDeniedTeamsMeeting' | 'NoticePageJoinCallFailedDueToNoNetwork' | 'NoticePageLeftCall' | 'NoticePageRemovedFromCall' | 'OptionsCamera' | 'OptionsMic' | 'OptionsSpeaker' | 'ParticipantItemMicOff' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'ParticipantItemScreenShareStart' | 'VideoTileMicOff' | /* @conditional-compile-remove(local-camera-switcher) */ 'LocalCameraSwitch'>>;
305+
export type CallCompositeIcons = {
306+
ControlButtonCameraOff?: JSX.Element;
307+
ControlButtonCameraOn?: JSX.Element;
308+
ControlButtonEndCall?: JSX.Element;
309+
ControlButtonMicOff?: JSX.Element;
310+
ControlButtonMicOn?: JSX.Element;
311+
ControlButtonOptions?: JSX.Element;
312+
ControlButtonParticipants?: JSX.Element;
313+
ControlButtonScreenShareStart?: JSX.Element;
314+
ControlButtonScreenShareStop?: JSX.Element;
315+
ErrorBarCallCameraAccessDenied?: JSX.Element;
316+
ErrorBarCallCameraAlreadyInUse?: JSX.Element;
317+
ErrorBarCallLocalVideoFreeze?: JSX.Element;
318+
ErrorBarCallMacOsCameraAccessDenied?: JSX.Element;
319+
ErrorBarCallMacOsMicrophoneAccessDenied?: JSX.Element;
320+
ErrorBarCallMicrophoneAccessDenied?: JSX.Element;
321+
ErrorBarCallMicrophoneMutedBySystem?: JSX.Element;
322+
ErrorBarCallNetworkQualityLow?: JSX.Element;
323+
ErrorBarCallNoMicrophoneFound?: JSX.Element;
324+
ErrorBarCallNoSpeakerFound?: JSX.Element;
325+
HorizontalGalleryLeftButton?: JSX.Element;
326+
HorizontalGalleryRightButton?: JSX.Element;
327+
LobbyScreenConnectingToCall?: JSX.Element;
328+
LobbyScreenWaitingToBeAdmitted?: JSX.Element;
329+
LocalDeviceSettingsCamera?: JSX.Element;
330+
LocalDeviceSettingsMic?: JSX.Element;
331+
LocalDeviceSettingsSpeaker?: JSX.Element;
332+
LocalPreviewPlaceholder?: JSX.Element;
333+
Muted?: JSX.Element;
334+
NetworkReconnectIcon?: JSX.Element;
335+
NoticePageAccessDeniedTeamsMeeting?: JSX.Element;
336+
NoticePageJoinCallFailedDueToNoNetwork?: JSX.Element;
337+
NoticePageLeftCall?: JSX.Element;
338+
NoticePageRemovedFromCall?: JSX.Element;
339+
OptionsCamera?: JSX.Element;
340+
OptionsMic?: JSX.Element;
341+
OptionsSpeaker?: JSX.Element;
342+
ParticipantItemMicOff?: JSX.Element;
343+
ParticipantItemOptions?: JSX.Element;
344+
ParticipantItemOptionsHovered?: JSX.Element;
345+
ParticipantItemScreenShareStart?: JSX.Element;
346+
VideoTileMicOff?: JSX.Element;
347+
LocalCameraSwitch?: JSX.Element;
348+
};
306349

307350
// @public
308351
export type CallCompositeOptions = {
@@ -599,7 +642,71 @@ export interface CallWithChatClientState extends Pick<CallAdapterClientState, 'd
599642
export const CallWithChatComposite: (props: CallWithChatCompositeProps) => JSX.Element;
600643

601644
// @beta
602-
export type CallWithChatCompositeIcons = Partial<Pick<CompositeIcons, /* @conditional-compile-remove(call-with-chat-composite) */ 'ControlBarButtonBadgeIcon' | /* @conditional-compile-remove(call-with-chat-composite) */ 'ControlBarChatButtonActive' | /* @conditional-compile-remove(call-with-chat-composite) */ 'ControlBarChatButtonInactive' | /* @conditional-compile-remove(call-with-chat-composite) */ 'ControlBarPeopleButton' | 'ControlButtonCameraOff' | 'ControlButtonCameraOn' | 'ControlButtonEndCall' | 'ControlButtonMicOff' | 'ControlButtonMicOn' | 'ControlButtonOptions' | 'ControlButtonScreenShareStart' | 'ControlButtonScreenShareStop' | 'ErrorBarCallCameraAccessDenied' | 'ErrorBarCallCameraAlreadyInUse' | 'ErrorBarCallLocalVideoFreeze' | 'ErrorBarCallMacOsCameraAccessDenied' | 'ErrorBarCallMacOsMicrophoneAccessDenied' | 'ErrorBarCallMicrophoneAccessDenied' | 'ErrorBarCallMicrophoneMutedBySystem' | 'ErrorBarCallNetworkQualityLow' | 'ErrorBarCallNoMicrophoneFound' | 'ErrorBarCallNoSpeakerFound' | 'HorizontalGalleryLeftButton' | 'HorizontalGalleryRightButton' | 'LobbyScreenConnectingToCall' | 'LobbyScreenWaitingToBeAdmitted' | 'LocalDeviceSettingsCamera' | 'LocalDeviceSettingsMic' | 'LocalDeviceSettingsSpeaker' | 'LocalPreviewPlaceholder' | 'Muted' | 'NetworkReconnectIcon' | 'NoticePageAccessDeniedTeamsMeeting' | 'NoticePageJoinCallFailedDueToNoNetwork' | 'NoticePageLeftCall' | 'NoticePageRemovedFromCall' | 'OptionsCamera' | 'OptionsMic' | 'OptionsSpeaker' | 'ParticipantItemMicOff' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'ParticipantItemScreenShareStart' | 'VideoTileMicOff' | /* @conditional-compile-remove(call-with-chat-composite) */ 'LocalCameraSwitch' | 'EditBoxCancel' | 'EditBoxSubmit' | 'MessageDelivered' | 'MessageEdit' | 'MessageFailed' | 'MessageRemove' | 'MessageSeen' | 'MessageSending' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'SendBoxSend' | 'SendBoxSendHovered' | /* @conditional-compile-remove(file-sharing) */ 'SendBoxAttachFile'>>;
645+
export type CallWithChatCompositeIcons = {
646+
ChevronLeft?: JSX.Element;
647+
ControlBarButtonBadgeIcon?: JSX.Element;
648+
ControlBarChatButtonActive?: JSX.Element;
649+
ControlBarChatButtonInactive?: JSX.Element;
650+
ControlBarPeopleButton?: JSX.Element;
651+
Link?: JSX.Element;
652+
MoreDrawerMicrophones?: JSX.Element;
653+
MoreDrawerPeople?: JSX.Element;
654+
MoreDrawerSelectedMicrophone?: JSX.Element;
655+
MoreDrawerSelectedSpeaker?: JSX.Element;
656+
MoreDrawerSpeakers?: JSX.Element;
657+
ControlButtonCameraOff?: JSX.Element;
658+
ControlButtonCameraOn?: JSX.Element;
659+
ControlButtonEndCall?: JSX.Element;
660+
ControlButtonMicOff?: JSX.Element;
661+
ControlButtonMicOn?: JSX.Element;
662+
ControlButtonOptions?: JSX.Element;
663+
ControlButtonScreenShareStart?: JSX.Element;
664+
ControlButtonScreenShareStop?: JSX.Element;
665+
ErrorBarCallCameraAccessDenied?: JSX.Element;
666+
ErrorBarCallCameraAlreadyInUse?: JSX.Element;
667+
ErrorBarCallLocalVideoFreeze?: JSX.Element;
668+
ErrorBarCallMacOsCameraAccessDenied?: JSX.Element;
669+
ErrorBarCallMacOsMicrophoneAccessDenied?: JSX.Element;
670+
ErrorBarCallMicrophoneAccessDenied?: JSX.Element;
671+
ErrorBarCallMicrophoneMutedBySystem?: JSX.Element;
672+
ErrorBarCallNetworkQualityLow?: JSX.Element;
673+
ErrorBarCallNoMicrophoneFound?: JSX.Element;
674+
ErrorBarCallNoSpeakerFound?: JSX.Element;
675+
HorizontalGalleryLeftButton?: JSX.Element;
676+
HorizontalGalleryRightButton?: JSX.Element;
677+
LobbyScreenConnectingToCall?: JSX.Element;
678+
LobbyScreenWaitingToBeAdmitted?: JSX.Element;
679+
LocalDeviceSettingsCamera?: JSX.Element;
680+
LocalDeviceSettingsMic?: JSX.Element;
681+
LocalDeviceSettingsSpeaker?: JSX.Element;
682+
LocalPreviewPlaceholder?: JSX.Element;
683+
Muted?: JSX.Element;
684+
NetworkReconnectIcon?: JSX.Element;
685+
NoticePageAccessDeniedTeamsMeeting?: JSX.Element;
686+
NoticePageJoinCallFailedDueToNoNetwork?: JSX.Element;
687+
NoticePageLeftCall?: JSX.Element;
688+
NoticePageRemovedFromCall?: JSX.Element;
689+
OptionsCamera?: JSX.Element;
690+
OptionsMic?: JSX.Element;
691+
OptionsSpeaker?: JSX.Element;
692+
ParticipantItemMicOff?: JSX.Element;
693+
ParticipantItemScreenShareStart?: JSX.Element;
694+
VideoTileMicOff?: JSX.Element;
695+
LocalCameraSwitch?: JSX.Element;
696+
EditBoxCancel?: JSX.Element;
697+
EditBoxSubmit?: JSX.Element;
698+
MessageDelivered?: JSX.Element;
699+
MessageEdit?: JSX.Element;
700+
MessageFailed?: JSX.Element;
701+
MessageRemove?: JSX.Element;
702+
MessageSeen?: JSX.Element;
703+
MessageSending?: JSX.Element;
704+
SendBoxSend?: JSX.Element;
705+
SendBoxSendHovered?: JSX.Element;
706+
SendBoxAttachFile?: JSX.Element;
707+
ParticipantItemOptions?: JSX.Element;
708+
ParticipantItemOptionsHovered?: JSX.Element;
709+
};
603710

604711
// @beta
605712
export type CallWithChatCompositeOptions = {
@@ -764,7 +871,23 @@ export type ChatCompositeClientState = {
764871
};
765872

766873
// @public
767-
export type ChatCompositeIcons = Partial<Pick<CompositeIcons, 'EditBoxCancel' | 'EditBoxSubmit' | 'MessageDelivered' | 'MessageEdit' | 'MessageFailed' | 'MessageRemove' | 'MessageSeen' | 'MessageSending' | 'ParticipantItemOptions' | 'ParticipantItemOptionsHovered' | 'SendBoxSend' | 'SendBoxSendHovered' | /* @conditional-compile-remove(file-sharing) */ 'SendBoxAttachFile'>>;
874+
export type ChatCompositeIcons = {
875+
EditBoxCancel?: JSX.Element;
876+
EditBoxSubmit?: JSX.Element;
877+
MessageDelivered?: JSX.Element;
878+
MessageEdit?: JSX.Element;
879+
MessageFailed?: JSX.Element;
880+
MessageRemove?: JSX.Element;
881+
MessageSeen?: JSX.Element;
882+
MessageSending?: JSX.Element;
883+
ParticipantItemOptions?: JSX.Element;
884+
ParticipantItemOptionsHovered?: JSX.Element;
885+
SendBoxSend?: JSX.Element;
886+
SendBoxSendHovered?: JSX.Element;
887+
SendBoxAttachFile?: JSX.Element;
888+
Download?: JSX.Element;
889+
Cancel?: JSX.Element;
890+
};
768891

769892
// @public
770893
export type ChatCompositeOptions = {
@@ -1029,34 +1152,12 @@ export const COMPOSITE_LOCALE_ZH_CN: CompositeLocale;
10291152
export const COMPOSITE_LOCALE_ZH_TW: CompositeLocale;
10301153

10311154
// @public
1032-
export const COMPOSITE_ONLY_ICONS: {
1033-
LobbyScreenConnectingToCall: JSX.Element;
1034-
LobbyScreenWaitingToBeAdmitted: JSX.Element;
1035-
LocalDeviceSettingsCamera: JSX.Element;
1036-
LocalDeviceSettingsMic: JSX.Element;
1037-
LocalDeviceSettingsSpeaker: JSX.Element;
1038-
LocalPreviewPlaceholder: JSX.Element;
1039-
LocalCameraSwitch: JSX.Element;
1040-
ControlBarButtonBadgeIcon: JSX.Element;
1041-
ControlBarChatButtonActive: JSX.Element;
1042-
ControlBarChatButtonInactive: JSX.Element;
1043-
ControlBarPeopleButton: JSX.Element;
1044-
MoreDrawerMicrophones: JSX.Element;
1045-
MoreDrawerPeople: JSX.Element;
1046-
MoreDrawerSpeakers: JSX.Element;
1047-
MoreDrawerSelectedMicrophone: JSX.Element;
1048-
MoreDrawerSelectedSpeaker: JSX.Element;
1049-
Muted: JSX.Element;
1050-
NetworkReconnectIcon: JSX.Element;
1051-
NoticePageAccessDeniedTeamsMeeting: JSX.Element;
1052-
NoticePageJoinCallFailedDueToNoNetwork: JSX.Element;
1053-
NoticePageLeftCall: JSX.Element;
1054-
NoticePageRemovedFromCall: JSX.Element;
1055-
SendBoxAttachFile: JSX.Element;
1056-
};
1155+
export const COMPOSITE_ONLY_ICONS: CompositeIcons;
10571156

1157+
// Warning: (ae-incompatible-release-tags) The symbol "CompositeIcons" is marked as @public, but its signature references "CallWithChatCompositeIcons" which is marked as @beta
1158+
//
10581159
// @public
1059-
export type CompositeIcons = ComponentIcons & Record<keyof typeof COMPOSITE_ONLY_ICONS, JSX.Element>;
1160+
export type CompositeIcons = ChatCompositeIcons & CallCompositeIcons & CallWithChatCompositeIcons;
10601161

10611162
// @public
10621163
export interface CompositeLocale {
@@ -1237,29 +1338,21 @@ export const DEFAULT_COMPONENT_ICONS: {
12371338

12381339
// @public
12391340
export const DEFAULT_COMPOSITE_ICONS: {
1240-
LobbyScreenConnectingToCall: JSX.Element;
1241-
LobbyScreenWaitingToBeAdmitted: JSX.Element;
1242-
LocalDeviceSettingsCamera: JSX.Element;
1243-
LocalDeviceSettingsMic: JSX.Element;
1244-
LocalDeviceSettingsSpeaker: JSX.Element;
1245-
LocalPreviewPlaceholder: JSX.Element;
1246-
LocalCameraSwitch: JSX.Element;
1247-
ControlBarButtonBadgeIcon: JSX.Element;
1248-
ControlBarChatButtonActive: JSX.Element;
1249-
ControlBarChatButtonInactive: JSX.Element;
1250-
ControlBarPeopleButton: JSX.Element;
1251-
MoreDrawerMicrophones: JSX.Element;
1252-
MoreDrawerPeople: JSX.Element;
1253-
MoreDrawerSpeakers: JSX.Element;
1254-
MoreDrawerSelectedMicrophone: JSX.Element;
1255-
MoreDrawerSelectedSpeaker: JSX.Element;
1256-
Muted: JSX.Element;
1257-
NetworkReconnectIcon: JSX.Element;
1258-
NoticePageAccessDeniedTeamsMeeting: JSX.Element;
1259-
NoticePageJoinCallFailedDueToNoNetwork: JSX.Element;
1260-
NoticePageLeftCall: JSX.Element;
1261-
NoticePageRemovedFromCall: JSX.Element;
1262-
SendBoxAttachFile: JSX.Element;
1341+
EditBoxCancel: JSX.Element;
1342+
EditBoxSubmit: JSX.Element;
1343+
MessageDelivered: JSX.Element;
1344+
MessageEdit: JSX.Element;
1345+
MessageFailed: JSX.Element;
1346+
MessageRemove: JSX.Element;
1347+
MessageSeen: JSX.Element;
1348+
MessageSending: JSX.Element;
1349+
ParticipantItemOptions: JSX.Element;
1350+
ParticipantItemOptionsHovered: JSX.Element;
1351+
SendBoxSend: JSX.Element;
1352+
SendBoxSendHovered: JSX.Element;
1353+
SendBoxAttachFile?: JSX.Element | undefined;
1354+
Download?: JSX.Element | undefined;
1355+
Cancel?: JSX.Element | undefined;
12631356
ControlButtonCameraOff: JSX.Element;
12641357
ControlButtonCameraOn: JSX.Element;
12651358
ControlButtonEndCall: JSX.Element;
@@ -1269,8 +1362,6 @@ export const DEFAULT_COMPOSITE_ICONS: {
12691362
ControlButtonParticipants: JSX.Element;
12701363
ControlButtonScreenShareStart: JSX.Element;
12711364
ControlButtonScreenShareStop: JSX.Element;
1272-
EditBoxCancel: JSX.Element;
1273-
EditBoxSubmit: JSX.Element;
12741365
ErrorBarCallCameraAccessDenied: JSX.Element;
12751366
ErrorBarCallCameraAlreadyInUse: JSX.Element;
12761367
ErrorBarCallLocalVideoFreeze: JSX.Element;
@@ -1283,22 +1374,36 @@ export const DEFAULT_COMPOSITE_ICONS: {
12831374
ErrorBarCallNoSpeakerFound: JSX.Element;
12841375
HorizontalGalleryLeftButton: JSX.Element;
12851376
HorizontalGalleryRightButton: JSX.Element;
1286-
MessageDelivered: JSX.Element;
1287-
MessageEdit: JSX.Element;
1288-
MessageFailed: JSX.Element;
1289-
MessageRemove: JSX.Element;
1290-
MessageSeen: JSX.Element;
1291-
MessageSending: JSX.Element;
1377+
LobbyScreenConnectingToCall?: JSX.Element | undefined;
1378+
LobbyScreenWaitingToBeAdmitted?: JSX.Element | undefined;
1379+
LocalDeviceSettingsCamera?: JSX.Element | undefined;
1380+
LocalDeviceSettingsMic?: JSX.Element | undefined;
1381+
LocalDeviceSettingsSpeaker?: JSX.Element | undefined;
1382+
LocalPreviewPlaceholder?: JSX.Element | undefined;
1383+
Muted?: JSX.Element | undefined;
1384+
NetworkReconnectIcon?: JSX.Element | undefined;
1385+
NoticePageAccessDeniedTeamsMeeting?: JSX.Element | undefined;
1386+
NoticePageJoinCallFailedDueToNoNetwork?: JSX.Element | undefined;
1387+
NoticePageLeftCall?: JSX.Element | undefined;
1388+
NoticePageRemovedFromCall?: JSX.Element | undefined;
12921389
OptionsCamera: JSX.Element;
12931390
OptionsMic: JSX.Element;
12941391
OptionsSpeaker: JSX.Element;
12951392
ParticipantItemMicOff: JSX.Element;
1296-
ParticipantItemOptions: JSX.Element;
1297-
ParticipantItemOptionsHovered: JSX.Element;
12981393
ParticipantItemScreenShareStart: JSX.Element;
1299-
SendBoxSend: JSX.Element;
1300-
SendBoxSendHovered: JSX.Element;
13011394
VideoTileMicOff: JSX.Element;
1395+
LocalCameraSwitch?: JSX.Element | undefined;
1396+
ChevronLeft?: JSX.Element | undefined;
1397+
ControlBarButtonBadgeIcon?: JSX.Element | undefined;
1398+
ControlBarChatButtonActive?: JSX.Element | undefined;
1399+
ControlBarChatButtonInactive?: JSX.Element | undefined;
1400+
ControlBarPeopleButton?: JSX.Element | undefined;
1401+
Link?: JSX.Element | undefined;
1402+
MoreDrawerMicrophones?: JSX.Element | undefined;
1403+
MoreDrawerPeople?: JSX.Element | undefined;
1404+
MoreDrawerSelectedMicrophone?: JSX.Element | undefined;
1405+
MoreDrawerSelectedSpeaker?: JSX.Element | undefined;
1406+
MoreDrawerSpeakers?: JSX.Element | undefined;
13021407
};
13031408

13041409
// @public

0 commit comments

Comments
 (0)
⚡