Skip to content

Commit 9a24fda

Browse files
carocao-msftgithub-actions[bot]
carocao-msft
and
github-actions[bot]
authored
RTT Disclosure Banner (#5360)
* rtt * build * UI fix * Change files * build * use notification * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * fix ui * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * fix ui bug * api * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * api --------- Signed-off-by: carocao-msft <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 64e4a48 commit 9a24fda

File tree

66 files changed

+391
-45
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+391
-45
lines changed

‎change-beta/@azure-communication-react-d5d89289-b2e5-4af7-8ae6-b7f148d46345.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "prerelease",
3+
"area": "feature",
4+
"workstream": "RTT",
5+
"comment": "RTT Disclosure Banner",
6+
"packageName": "@azure/communication-react",
7+
"email": "[email protected]",
8+
"dependentChangeType": "patch"
9+
}

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

+38-1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ import { IContextualMenuItemStyles } from '@fluentui/react';
5959
import { IContextualMenuProps } from '@fluentui/react';
6060
import { IContextualMenuStyles } from '@fluentui/react';
6161
import { IIconProps } from '@fluentui/react';
62+
import { IIconStyles } from '@fluentui/react';
6263
import { ILinkStyles } from '@fluentui/react';
6364
import { IMessageBarProps } from '@fluentui/react';
6465
import { IncomingCall } from '@azure/communication-calling';
@@ -2394,6 +2395,7 @@ export interface ComponentStrings {
23942395
reactionButton: ReactionButtonStrings;
23952396
richTextSendBox: RichTextSendBoxStrings;
23962397
rtt: RealTimeTextStrings;
2398+
rttDisclosureBanner: RTTDisclosureBannerStrings;
23972399
rttModal: RTTModalStrings;
23982400
screenShareButton: ScreenShareButtonStrings;
23992401
sendBox: SendBoxStrings;
@@ -2804,6 +2806,7 @@ export const DEFAULT_COMPONENT_ICONS: {
28042806
IncomingCallNotificationRejectIcon: React_2.JSX.Element;
28052807
IncomingCallNotificationAcceptIcon: React_2.JSX.Element;
28062808
IncomingCallNotificationAcceptWithVideoIcon: React_2.JSX.Element;
2809+
RTTIcon: React_2.JSX.Element;
28072810
};
28082811

28092812
// @public
@@ -2984,6 +2987,7 @@ export const DEFAULT_COMPOSITE_ICONS: {
29842987
IncomingCallNotificationRejectIcon: React_2.JSX.Element;
29852988
IncomingCallNotificationAcceptIcon: React_2.JSX.Element;
29862989
IncomingCallNotificationAcceptWithVideoIcon: React_2.JSX.Element;
2990+
RTTIcon: React_2.JSX.Element;
29872991
};
29882992

29892993
// @beta
@@ -3876,10 +3880,12 @@ export interface NotificationProps {
38763880
autoDismiss?: boolean;
38773881
notificationIconProps?: IIconProps;
38783882
notificationStrings?: NotificationStrings;
3883+
onClickLink?: () => void;
38793884
onClickPrimaryButton?: () => void;
38803885
onClickSecondaryButton?: () => void;
38813886
onDismiss?: () => void;
38823887
showStackedEffect?: boolean;
3888+
styles?: NotificationStyles;
38833889
}
38843890

38853891
// @public
@@ -3950,13 +3956,25 @@ export interface NotificationStackStrings {
39503956

39513957
// @public
39523958
export interface NotificationStrings {
3953-
dismissButtonAriaLabel: string;
3959+
dismissButtonAriaLabel?: string;
3960+
linkLabel?: string;
39543961
message?: string;
39553962
primaryButtonLabel?: string;
39563963
secondaryButtonLabel?: string;
39573964
title: string;
39583965
}
39593966

3967+
// @public
3968+
export interface NotificationStyles {
3969+
content?: IStackStyles;
3970+
icon?: IIconStyles;
3971+
link?: IStackStyles;
3972+
primaryButton?: IButtonStyles;
3973+
root?: IStackStyles;
3974+
secondaryButton?: IButtonStyles;
3975+
title?: IStackStyles;
3976+
}
3977+
39603978
// @public (undocumented)
39613979
export type NotificationTarget = 'assignedBreakoutRoomOpened' | 'assignedBreakoutRoomOpenedPromptJoin' | 'assignedBreakoutRoomChanged' | 'breakoutRoomJoined' | 'breakoutRoomClosingSoon';
39623980

@@ -4449,6 +4467,25 @@ export interface RichTextStrings {
44494467
richTextUnderlineTooltip: string;
44504468
}
44514469

4470+
// @beta
4471+
export const RTTDisclosureBanner: (props: RTTDisclosureBannerProps) => JSX.Element;
4472+
4473+
// @beta
4474+
export interface RTTDisclosureBannerProps {
4475+
onClickLink?: () => void;
4476+
strings?: RTTDisclosureBannerStrings;
4477+
}
4478+
4479+
// @beta
4480+
export interface RTTDisclosureBannerStrings {
4481+
// (undocumented)
4482+
bannerContent: string;
4483+
// (undocumented)
4484+
bannerLinkLabel?: string;
4485+
// (undocumented)
4486+
bannerTitle: string;
4487+
}
4488+
44524489
// @beta
44534490
export const RTTModal: (props: RTTModalProps) => JSX.Element;
44544491

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

+16-1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import { IContextualMenuItemStyles } from '@fluentui/react';
5252
import { IContextualMenuProps } from '@fluentui/react';
5353
import { IContextualMenuStyles } from '@fluentui/react';
5454
import { IIconProps } from '@fluentui/react';
55+
import { IIconStyles } from '@fluentui/react';
5556
import { IMessageBarProps } from '@fluentui/react';
5657
import { IncomingCall } from '@azure/communication-calling';
5758
import { IncomingCallKind } from '@azure/communication-calling';
@@ -3413,10 +3414,12 @@ export interface NotificationProps {
34133414
autoDismiss?: boolean;
34143415
notificationIconProps?: IIconProps;
34153416
notificationStrings?: NotificationStrings;
3417+
onClickLink?: () => void;
34163418
onClickPrimaryButton?: () => void;
34173419
onClickSecondaryButton?: () => void;
34183420
onDismiss?: () => void;
34193421
showStackedEffect?: boolean;
3422+
styles?: NotificationStyles;
34203423
}
34213424

34223425
// @public
@@ -3482,13 +3485,25 @@ export interface NotificationStackStrings {
34823485

34833486
// @public
34843487
export interface NotificationStrings {
3485-
dismissButtonAriaLabel: string;
3488+
dismissButtonAriaLabel?: string;
3489+
linkLabel?: string;
34863490
message?: string;
34873491
primaryButtonLabel?: string;
34883492
secondaryButtonLabel?: string;
34893493
title: string;
34903494
}
34913495

3496+
// @public
3497+
export interface NotificationStyles {
3498+
content?: IStackStyles;
3499+
icon?: IIconStyles;
3500+
link?: IStackStyles;
3501+
primaryButton?: IButtonStyles;
3502+
root?: IStackStyles;
3503+
secondaryButton?: IButtonStyles;
3504+
title?: IStackStyles;
3505+
}
3506+
34923507
// @public
34933508
export type NotificationType = keyof NotificationStackStrings;
34943509

‎packages/communication-react/src/index.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -433,16 +433,20 @@ export type {
433433
NotificationStrings,
434434
NotificationStackStrings,
435435
NotificationType,
436-
ActiveNotification
436+
ActiveNotification,
437+
NotificationStyles
437438
} from '../../react-components/src';
438439
export type { MeetingConferencePhoneInfoModalStrings } from '../../react-components/src';
439440
/* @conditional-compile-remove(rtt) */
440441
export type { RTTModalStrings, RTTModalProps } from '../../react-components/src';
441442
/* @conditional-compile-remove(rtt) */
442443
export { RTTModal } from '../../react-components/src';
443444

445+
/* @conditional-compile-remove(rtt) */
446+
export type { RTTDisclosureBannerProps, RTTDisclosureBannerStrings } from '../../react-components/src';
447+
/* @conditional-compile-remove(rtt) */
448+
export { RTTDisclosureBanner } from '../../react-components/src';
444449
/* @conditional-compile-remove(rtt) */
445450
export type { RealTimeTextProps, RealTimeTextStrings } from '../../react-components/src/components/RealTimeText';
446-
447451
/* @conditional-compile-remove(rtt) */
448452
export { RealTimeText } from '../../react-components/src/components/RealTimeText';

‎packages/react-components/src/components/Notification.tsx

+96-20
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,28 @@
22
// Licensed under the MIT License.
33

44
import React, { useState } from 'react';
5-
import { Icon, IconButton, PrimaryButton, Stack, useTheme, Text, IIconProps, DefaultButton } from '@fluentui/react';
5+
import {
6+
Icon,
7+
IconButton,
8+
PrimaryButton,
9+
Stack,
10+
useTheme,
11+
Text,
12+
IIconProps,
13+
DefaultButton,
14+
Link,
15+
IStackStyles,
16+
IButtonStyles,
17+
IIconStyles
18+
} from '@fluentui/react';
619
import { cancelIcon } from './styles/ImageOverlay.style';
720
import {
821
containerStyles,
922
hiddenContainerStyles,
10-
messageTextStyle,
11-
notificationIconClassName,
12-
titleTextClassName
23+
messageTextStyles,
24+
notificationIconStyles,
25+
notificationLinkStyles,
26+
titleTextStyles
1327
} from './styles/Notification.styles';
1428

1529
/**
@@ -54,6 +68,16 @@ export interface NotificationProps {
5468
* Callback called when the notification is dismissed.
5569
*/
5670
onDismiss?: () => void;
71+
72+
/**
73+
* Optional callback to supply users with further troubleshooting steps or more information for the notification.
74+
*/
75+
onClickLink?: () => void;
76+
77+
/**
78+
* Styles for the incoming call notifications.
79+
*/
80+
styles?: NotificationStyles;
5781
}
5882

5983
/**
@@ -69,7 +93,7 @@ export interface NotificationStrings {
6993
/**
7094
* Notification bar dismiss button aria label
7195
*/
72-
dismissButtonAriaLabel: string;
96+
dismissButtonAriaLabel?: string;
7397
/**
7498
* Notification bar message.
7599
*/
@@ -82,6 +106,46 @@ export interface NotificationStrings {
82106
* Notification bar secondary button label
83107
*/
84108
secondaryButtonLabel?: string;
109+
/**
110+
* Notification bar link label
111+
*/
112+
linkLabel?: string;
113+
}
114+
115+
/**
116+
* Styles for the notification component.
117+
*
118+
* @public
119+
*/
120+
export interface NotificationStyles {
121+
/**
122+
* Styles for the primary button.
123+
*/
124+
primaryButton?: IButtonStyles;
125+
/**
126+
* Styles for the secondary button.
127+
*/
128+
secondaryButton?: IButtonStyles;
129+
/**
130+
* Styles for the root container.
131+
*/
132+
root?: IStackStyles;
133+
/**
134+
* Styles for the notification title.
135+
*/
136+
title?: IStackStyles;
137+
/**
138+
* Styles for the notification icon.
139+
*/
140+
icon?: IIconStyles;
141+
/**
142+
* Styles for the notification content.
143+
*/
144+
content?: IStackStyles;
145+
/**
146+
* Styles for the notification hyperlink.
147+
*/
148+
link?: IStackStyles;
85149
}
86150

87151
/**
@@ -108,35 +172,47 @@ export const Notification = (props: NotificationProps): JSX.Element => {
108172

109173
return (
110174
<Stack horizontalAlign="center">
111-
<Stack data-ui-id="notification-bar" className={containerStyles(theme)}>
175+
<Stack data-ui-id="notification-bar" styles={props.styles?.root ?? containerStyles(theme)}>
112176
<Stack horizontal horizontalAlign="space-between">
113177
<Stack horizontal>
114178
<Icon
115-
className={notificationIconClassName}
179+
styles={props.styles?.icon ?? notificationIconStyles()}
116180
iconName={props.notificationIconProps?.iconName ?? 'ErrorBadge'}
117181
{...props.notificationIconProps}
118182
/>
119-
<Text className={titleTextClassName}>{strings?.title}</Text>
183+
<Text styles={props.styles?.title ?? titleTextStyles()}>{strings?.title}</Text>
120184
</Stack>
121-
122-
<IconButton
123-
iconProps={cancelIcon}
124-
ariaLabel={strings?.dismissButtonAriaLabel}
125-
aria-live={'polite'}
126-
onClick={props.onDismiss}
127-
/>
185+
{props.onDismiss && (
186+
<IconButton
187+
iconProps={cancelIcon}
188+
ariaLabel={strings?.dismissButtonAriaLabel}
189+
aria-live={'polite'}
190+
onClick={props.onDismiss}
191+
/>
192+
)}
128193
</Stack>
129-
<Text className={messageTextStyle(theme)} style={{ marginTop: '0.25rem' }}>
130-
{strings?.message}
131-
</Text>
194+
<span>
195+
<Text styles={props.styles?.content ?? messageTextStyles(theme)}> {strings?.message}</Text>
196+
{props.onClickLink && strings?.linkLabel && (
197+
<Link styles={props.styles?.link ?? notificationLinkStyles(theme)} onClick={props.onClickLink}>
198+
{strings?.linkLabel}
199+
</Link>
200+
)}
201+
</span>
132202
<Stack horizontal horizontalAlign="space-evenly">
133203
{strings?.secondaryButtonLabel && (
134-
<DefaultButton onClick={props.onClickSecondaryButton} style={{ marginTop: '1rem' }}>
204+
<DefaultButton
205+
onClick={props.onClickSecondaryButton}
206+
styles={props.styles?.secondaryButton ?? { root: { marginTop: '1rem' } }}
207+
>
135208
{strings?.secondaryButtonLabel}
136209
</DefaultButton>
137210
)}
138211
{strings?.primaryButtonLabel && (
139-
<PrimaryButton onClick={props.onClickPrimaryButton} style={{ marginTop: '1rem' }}>
212+
<PrimaryButton
213+
onClick={props.onClickPrimaryButton}
214+
styles={props.styles?.primaryButton ?? { root: { marginTop: '1rem' } }}
215+
>
140216
{strings?.primaryButtonLabel}
141217
</PrimaryButton>
142218
)}

0 commit comments

Comments
 (0)