Rename RTT to RealTimeText (#5528)

* rename

* Change files

Author: carocao-msft

change-beta/@azure-communication-react-f5b7088d-a3d8-47ed-8b8a-289d4fdd0f5d.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "RTT",
+  "comment": "Rename rtt to real time text",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -2582,10 +2582,10 @@ export interface ComponentStrings {
     participantsButton: ParticipantsButtonStrings;
     raiseHandButton: RaiseHandButtonStrings;
     reactionButton: ReactionButtonStrings;
+    realTimeText: RealTimeTextStrings;
+    realTimeTextModal: RealTimeTextModalStrings;
     richTextSendBox: RichTextSendBoxStrings;
-    rtt: RealTimeTextStrings;
     rttDisclosureBanner: RTTDisclosureBannerStrings;
-    rttModal: RTTModalStrings;
     screenShareButton: ScreenShareButtonStrings;
     sendBox: SendBoxStrings;
     spokenLanguages: SpokenLanguageStrings;
@@ -4563,6 +4563,27 @@ export type ReadReceiptsBySenderId = {
 // @beta
 export const RealTimeText: (props: RealTimeTextProps) => JSX.Element;
 
+// @beta
+export const RealTimeTextModal: (props: RealTimeTextModalProps) => JSX.Element;
+
+// @beta
+export interface RealTimeTextModalProps {
+    onDismissModal?: () => void;
+    onStartRealTimeText?: () => Promise<void>;
+    showModal?: boolean;
+    strings?: RealTimeTextModalStrings;
+}
+
+// @beta
+export interface RealTimeTextModalStrings {
+    realTimeTextCancelButtonLabel?: string;
+    realTimeTextCloseModalButtonAriaLabel?: string;
+    realTimeTextConfirmButtonLabel?: string;
+    realTimeTextModalAriaLabel?: string;
+    realTimeTextModalText?: string;
+    realTimeTextModalTitle?: string;
+}
+
 // @beta
 export interface RealTimeTextProps {
     captionText: string;
@@ -4736,27 +4757,6 @@ export interface RTTDisclosureBannerStrings {
     bannerTitle: string;
 }
 
-// @beta
-export const RTTModal: (props: RTTModalProps) => JSX.Element;
-
-// @beta
-export interface RTTModalProps {
-    onDismissModal?: () => void;
-    onStartRTT?: () => Promise<void>;
-    showModal?: boolean;
-    strings?: RTTModalStrings;
-}
-
-// @beta
-export interface RTTModalStrings {
-    rttCancelButtonLabel?: string;
-    rttCloseModalButtonAriaLabel?: string;
-    rttConfirmButtonLabel?: string;
-    rttModalAriaLabel?: string;
-    rttModalText?: string;
-    rttModalTitle?: string;
-}
-
 // @public
 export const ScreenShareButton: (props: ScreenShareButtonProps) => JSX.Element;
 

packages/communication-react/src/index.ts

@@ -454,9 +454,9 @@ export type {
 } from '../../react-components/src';
 export type { MeetingConferencePhoneInfoModalStrings } from '../../react-components/src';
 /* @conditional-compile-remove(rtt) */
-export type { RTTModalStrings, RTTModalProps } from '../../react-components/src';
+export type { RealTimeTextModalStrings, RealTimeTextModalProps } from '../../react-components/src';
 /* @conditional-compile-remove(rtt) */
-export { RTTModal } from '../../react-components/src';
+export { RealTimeTextModal } from '../../react-components/src';
 
 /* @conditional-compile-remove(rtt) */
 export type { RTTDisclosureBannerProps, RTTDisclosureBannerStrings } from '../../react-components/src';

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

@@ -81,7 +81,7 @@ export interface RealTimeTextProps {
 export const RealTimeText = (props: RealTimeTextProps): JSX.Element => {
   const { displayName, userId, captionText, onRenderAvatar, isTyping } = props;
   const theme = useTheme();
-  const localeStrings = useLocale().strings.rtt;
+  const localeStrings = useLocale().strings.realTimeText;
   const strings = { ...localeStrings, ...props.strings };
 
   const personaOptions: IPersona = {

packages/react-components/src/components/RTTModal.tsx renamed to packages/react-components/src/components/RealTimeTextModal.tsx

@@ -22,45 +22,45 @@ import { useLocale } from '../localization';
 /* @conditional-compile-remove(rtt) */
 /**
  * @beta
- * strings for rtt modal
+ * strings for realTimeText modal
  */
-export interface RTTModalStrings {
-  /** The title of the RTT modal */
-  rttModalTitle?: string;
-  /** The text of the RTT modal */
-  rttModalText?: string;
+export interface RealTimeTextModalStrings {
+  /** The title of the RealTimeText modal */
+  realTimeTextModalTitle?: string;
+  /** The text of the RealTimeText modal */
+  realTimeTextModalText?: string;
   /** The label for the confirm button */
-  rttConfirmButtonLabel?: string;
+  realTimeTextConfirmButtonLabel?: string;
   /** The label for the cancel button */
-  rttCancelButtonLabel?: string;
+  realTimeTextCancelButtonLabel?: string;
   /** The aria label for the modal */
-  rttModalAriaLabel?: string;
+  realTimeTextModalAriaLabel?: string;
   /** The aria label for the close button */
-  rttCloseModalButtonAriaLabel?: string;
+  realTimeTextCloseModalButtonAriaLabel?: string;
 }
 /* @conditional-compile-remove(rtt) */
 /**
  * @beta
- * RTTModal Component Props.
+ * RealTimeTextModal Component Props.
  */
-export interface RTTModalProps {
-  /** The strings for the RTT modal */
-  strings?: RTTModalStrings;
+export interface RealTimeTextModalProps {
+  /** The strings for the RealTimeText modal */
+  strings?: RealTimeTextModalStrings;
   /** The flag to show the modal */
   showModal?: boolean;
   /** The function to dismiss the modal */
   onDismissModal?: () => void;
-  /** The function to start RTT */
-  onStartRTT?: () => Promise<void>;
+  /** The function to start RealTimeText */
+  onStartRealTimeText?: () => Promise<void>;
 }
 /* @conditional-compile-remove(rtt) */
 /**
  * @beta
- * a component for rtt modal
+ * a component for realTimeText modal
  */
-export const RTTModal = (props: RTTModalProps): JSX.Element => {
-  const { showModal, onDismissModal, onStartRTT } = props;
-  const localeStrings = useLocale().strings.rttModal;
+export const RealTimeTextModal = (props: RealTimeTextModalProps): JSX.Element => {
+  const { showModal, onDismissModal, onStartRealTimeText } = props;
+  const localeStrings = useLocale().strings.realTimeTextModal;
   const strings = { ...localeStrings, ...props.strings };
 
   const theme = useTheme();
@@ -72,41 +72,41 @@ export const RTTModal = (props: RTTModalProps): JSX.Element => {
   }, [onDismissModal]);
 
   const onConfirm = useCallback(async (): Promise<void> => {
-    if (onStartRTT) {
-      await onStartRTT();
+    if (onStartRealTimeText) {
+      await onStartRealTimeText();
     }
     onDismiss();
-  }, [onDismiss, onStartRTT]);
+  }, [onDismiss, onStartRealTimeText]);
 
-  const RTTModalStyle: Partial<IModalStyles> = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
+  const RealTimeTextModalStyle: Partial<IModalStyles> = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
 
   return (
     <>
       {
         <Modal
-          titleAriaId={strings?.rttModalAriaLabel}
+          titleAriaId={strings?.realTimeTextModalAriaLabel}
           isOpen={showModal}
           onDismiss={onDismiss}
           isBlocking={true}
-          styles={RTTModalStyle}
+          styles={RealTimeTextModalStyle}
         >
           <Stack horizontal horizontalAlign="space-between" verticalAlign="center" className={titleContainerClassName}>
-            <Text className={titleClassName}>{strings?.rttModalTitle}</Text>
+            <Text className={titleClassName}>{strings?.realTimeTextModalTitle}</Text>
             <IconButton
               iconProps={{ iconName: 'Cancel' }}
-              ariaLabel={strings?.rttCloseModalButtonAriaLabel}
+              ariaLabel={strings?.realTimeTextCloseModalButtonAriaLabel}
               onClick={onDismiss}
               style={{ color: theme.palette.black }}
             />
           </Stack>
-          <Text>{strings?.rttModalText}</Text>
+          <Text>{strings?.realTimeTextModalText}</Text>
 
           <Stack horizontal horizontalAlign="end" className={buttonsContainerClassName}>
             <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>
-              <span>{strings?.rttConfirmButtonLabel}</span>
+              <span>{strings?.realTimeTextConfirmButtonLabel}</span>
             </PrimaryButton>
             <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>
-              <span>{strings?.rttCancelButtonLabel}</span>
+              <span>{strings?.realTimeTextCancelButtonLabel}</span>
             </DefaultButton>
           </Stack>
         </Modal>

packages/react-components/src/components/index.ts

@@ -297,7 +297,7 @@ export * from './StartCaptionsButton';
 export * from './CaptionsSettingsModal';
 
 /* @conditional-compile-remove(rtt) */
-export * from './RTTModal';
+export * from './RealTimeTextModal';
 
 export * from './MeetingConferencePhoneInfo';
 export { _formatPhoneNumber } from './utils/formatPhoneNumber';

packages/react-components/src/localization/LocalizationProvider.tsx

@@ -52,7 +52,7 @@ import { IncomingCallNotificationStrings } from '../components/IncomingCallNotif
 /* @conditional-compile-remove(rtt) */
 import { RTTDisclosureBannerStrings } from '../components/RTTDisclosureBanner';
 /* @conditional-compile-remove(rtt) */
-import { RTTModalStrings } from '../components/RTTModal';
+import { RealTimeTextModalStrings } from '../components/RealTimeTextModal';
 /* @conditional-compile-remove(rtt) */
 import { RealTimeTextStrings } from '../components/RealTimeText';
 import { CaptionLanguageStrings, SpokenLanguageStrings } from '../types';
@@ -195,11 +195,11 @@ export interface ComponentStrings {
   /** Strings for the RTT Disclosure Banner */
   rttDisclosureBanner: RTTDisclosureBannerStrings;
   /* @conditional-compile-remove(rtt) */
-  /** Strings for the RTTModal */
-  rttModal: RTTModalStrings;
+  /** Strings for the RealTimeTextModal */
+  realTimeTextModal: RealTimeTextModalStrings;
   /* @conditional-compile-remove(rtt) */
   /** Strings for RealTimeText */
-  rtt: RealTimeTextStrings;
+  realTimeText: RealTimeTextStrings;
   /** Strings for Captions Setting Modal */
   captionsSettingsModal: CaptionsSettingsModalStrings;
   /**

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

@@ -69,13 +69,13 @@
     "richTextBulletedListAppliedAnnouncement": "Bulleted list applied",
     "richTextNumberedListAppliedAnnouncement": "Numbered list applied"
   },
-  "rttModal": {
-    "rttModalAriaLabel": "Turn on RTT Modal",
-    "rttModalTitle": "Turn on RTT?",
-    "rttModalText": "Real-time text (RTT) will be turned on for everyone in the meeting.",
-    "rttConfirmButtonLabel": "Turn on",
-    "rttCancelButtonLabel": "Cancel",
-    "rttCloseModalButtonAriaLabel": "Close RTT Modal"
+  "realTimeTextModal": {
+    "realTimeTextModalAriaLabel": "Turn on RTT Modal",
+    "realTimeTextModalTitle": "Turn on RTT?",
+    "realTimeTextModalText": "Real-time text (RTT) will be turned on for everyone in the meeting.",
+    "realTimeTextConfirmButtonLabel": "Turn on",
+    "realTimeTextCancelButtonLabel": "Cancel",
+    "realTimeTextCloseModalButtonAriaLabel": "Close RTT Modal"
   },
   "captionsBanner": {
     "captionsBannerSpinnerText": "Starting captions...",
@@ -196,7 +196,7 @@
     "applauseReactionTooltipContent": "Applause",
     "surprisedReactionTooltipContent": "Surprised"
   },
-  "rtt": {
+  "realTimeText": {
     "isTypingText": "RTT typing"
   },
   "captionsSettingsModal": {

packages/storybook8/stories/INTERNAL/RTT/Docs.mdx

@@ -0,0 +1,16 @@
+import { RealTimeText } from '@internal/react-components';
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import * as RealTimeTextStories from './index.stories';
+import RealTimeTextExampleText from '!!raw-loader!./snippets/ExampleRealTimeText.snippet.tsx';
+
+<Meta of={RealTimeTextStories} />
+
+# Real Time Text
+
+A component for displaying a Real time text message with user icon, displayName and captions text.
+
+<Canvas of={RealTimeTextStories.ExampleRealTimeTextExampleDocsOnly} source={{ code: RealTimeTextExampleText }} />
+
+## Props
+
+<ArgTypes of={RealTimeText} />

packages/storybook8/stories/INTERNAL/RTTModal/Docs.mdx

@@ -2,13 +2,13 @@
 // Licensed under the MIT License.
 
 import { Stack } from '@fluentui/react';
-import { RealTimeText as RTTExample } from '@internal/react-components';
+import { RealTimeText as RealTimeTextExample } from '@internal/react-components';
 import React from 'react';
 
 const RealTimeTextStory = (args: { isTyping: boolean; displayName: string; captionText: string }): JSX.Element => {
   return (
     <Stack>
-      <RTTExample
+      <RealTimeTextExample
         id="1"
         displayName={args.displayName ?? 'Caroline'}
         captionText={args.captionText ?? 'Hello'}

packages/storybook8/stories/INTERNAL/RealTimeText/Docs.mdx

@@ -4,10 +4,10 @@
 import { RealTimeText } from '@internal/react-components';
 import { Meta } from '@storybook/react';
 import { controlsToAdd, hiddenControl } from '../../controlsUtils';
-import { ExampleRTT } from './snippets/ExampleRTT.snippet';
+import { ExampleRealTimeText } from './snippets/ExampleRealTimeText.snippet';
 
-export const ExampleRTTExampleDocsOnly = {
-  render: ExampleRTT
+export const ExampleRealTimeTextExampleDocsOnly = {
+  render: ExampleRealTimeText
 };
 
 export { RealTimeText } from './RealTimeText.story';

packages/storybook8/stories/INTERNAL/RTT/RealTimeText.story.tsx renamed to packages/storybook8/stories/INTERNAL/RealTimeText/RealTimeText.story.tsx

@@ -5,7 +5,7 @@ import { Stack } from '@fluentui/react';
 import { RealTimeText } from '@internal/react-components';
 import React from 'react';
 
-export const ExampleRTT = (): JSX.Element => {
+export const ExampleRealTimeText = (): JSX.Element => {
   return (
     <Stack style={{ padding: '0.5rem' }}>
       <RealTimeText id="1" displayName="Caroline" captionText="Hello I am Caroline" isTyping />

packages/storybook8/stories/INTERNAL/RTT/index.stories.tsx renamed to packages/storybook8/stories/INTERNAL/RealTimeText/index.stories.tsx

@@ -0,0 +1,16 @@
+import { RealTimeTextModal } from '@internal/react-components';
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import * as RealTimeTextModalStories from './index.stories';
+import RealTimeTextModalExampleText from '!!raw-loader!./snippets/RealTimeTextModal.snippet.tsx';
+
+<Meta of={RealTimeTextModalStories} />
+
+# RealTimeText Modal
+
+A component for displaying a modal showing contents related to RealTimeText
+
+<Canvas of={RealTimeTextModalStories.RealTimeTextModal} source={{ code: RealTimeTextModalExampleText }} />
+
+## Props
+
+<ArgTypes of={RealTimeTextModal} />