Fixed some captionsBanner naming issues, improved styling and internal storybook (#2844)

carocao-msft · dmceachernmsft · prabhjot-msft · web-flow · commit 7d6294c74fef · 2023-03-28T20:27:21.000Z
* captions composite * captions composite * captions composite * Change files * Duplicate change files for beta release * captions composite * captions composite * Video gallery show local tile and horizontal/vertical gallery when screensharing with no participant (#2822) * video gallery show local tile when screensharing * Change files * Duplicate change files for beta release * [VerticalGallery Bugfix] Video tile rendering controlled by index (#2818) * calculate indexes in verticalGallery * update logic to horizontal galleries using indexes * add logic to scrollable gallery 1D array * Change files * Duplicate change files for beta release * add to default layout * fix lint * generate paginated children from indexes array * remove the use of useCallBack * fix test throw error * remove console * [Vertical Gallery] Calculate children utils (#2823) * mock children calc functions * update index array to be created with values * Change files * Duplicate change files for beta release * fix lint * update max streams default * update comments * update comments --------- Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> * Video Effects Button and Pane (#2825) * Video effects button and Pane * Change files * Duplicate change files for beta release * minor change * minor changes * minor changes * minor change * minor change * minor changes * [A11y bugfix] Allow voice controls to action people button in Call and CallWithChat (#2833) * update aria strings for people button * fix ??? * Change files * Duplicate change files for beta release * Fix CTE storybook sample code (#2835) * memoize Teams call adapter args for CTE storybook sample code * Change files * Duplicate change files * lint fix * lint fix * [Vertical Galleries Bugfix] Horizontal gallery tile resizing (#2830) * update styles to allow horizontal resizing * Change files * Duplicate change files for beta release * fix test bug * create test file for horizontal resizing tests * change sizing in tests * Update packages/react-composites CallWithChatComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallWithChatComposite browser test snapshots * write horizontal gallery tests * build API * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots * update comments --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * [Refactor] Modal styles sizes change to rem (#2838) * Refactor modal sizes in VideoGallery to use rem instead of px * Change files * Duplicate change files * Update packages/react-composites CallComposite browser test snapshots * Update packages/react-composites CallComposite browser test snapshots --------- Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Keep dominant speakers on the first page of overflow gallery (#2819) * fix dominant speaker ordering to keep dominant speakers on the first page of overflow gallery * Change files * Duplicate change files * adding video participants at the end of dominant speaker list in case there is room * adjust max horizontal gallery dominant speakers based on pinned participants * order remote participants such that video participants are first. do not maintain order for indices after max dominant speakers. * update expectations in VideoGallery.test.tsx * added tests to videoGalleryLayoutUtils.test.tsx * change childrenPerPage initial value to 4 * update dominant speaker test expected value --------- Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> * [InlineImages] Update FileAdapter to include new method to download authenticated attachments from teams (#2827) * [AzureCommunicationAttachmentManager] Introduce new attachment manager * [AzureCommunicationChatAdapter] Bind new method to fetch attachments * [ChatAdapter] fixing spelling * [AzureCommunicationAttachmentManager.ts] Temp remove reference to ChatAttachment and use a string for now * Change files * Duplicate change files for beta release * [AzureCommunicationAttachmentManager.ts] fixing tagging * [AzureCommunicationFileUploadAdapter.ts] Combine the attachment manager into this adapter so all attachments logic is in one place * Change files * Duplicate change files for beta release * [APIView] updating apiview with new changes * [changelog] removing old change log * fix captions style and storybook * Change files * Duplicate change files for beta release * fix captions style and storybook * pr fix --------- Signed-off-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com> Co-authored-by: prabhjot-msft <97124699+prabhjot-msft@users.noreply.github.com> Co-authored-by: mgamis-msft <79475487+mgamis-msft@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: JoshuaLai <9044372+JoshuaLai@users.noreply.github.com>
diff --git a/change-beta/@azure-communication-react-dc6cde72-83a7-44ac-a551-8c9f9bfd53de.json b/change-beta/@azure-communication-react-dc6cde72-83a7-44ac-a551-8c9f9bfd53de.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fixed captionsBannerProps naming to adhere to internal type naming convention, improved styling and internal storybook",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@azure-communication-react-dc6cde72-83a7-44ac-a551-8c9f9bfd53de.json b/change/@azure-communication-react-dc6cde72-83a7-44ac-a551-8c9f9bfd53de.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fixed captionsBannerProps naming to adhere to internal type naming convention, improved styling and internal storybook",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/react-components/review/beta/react-components.api.md b/packages/react-components/review/beta/react-components.api.md
@@ -210,25 +210,23 @@ export interface CameraSitePermissionsProps extends CommonSitePermissionsProps {
 // @beta
 export type CameraSitePermissionsStrings = SitePermissionsStrings;
 
-// Warning: (ae-internal-missing-underscore) The name "CaptionInfo" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export type CaptionInfo = {
-    displayName: string;
-    caption: string;
-    userId?: string;
-};
-
 // @internal
 export const _CaptionsBanner: (props: _CaptionsBannerProps) => JSX.Element;
 
 // @internal
 export interface _CaptionsBannerProps {
     // (undocumented)
-    captions: CaptionInfo[];
+    captions: _CaptionsInfo[];
     onRenderAvatar?: OnRenderAvatarCallback;
 }
 
+// @internal
+export type _CaptionsInfo = {
+    displayName: string;
+    captionText: string;
+    userId?: string;
+};
+
 // @public
 export interface ChatMessage extends MessageCommon {
     // (undocumented)
diff --git a/packages/react-components/review/stable/react-components.api.md b/packages/react-components/review/stable/react-components.api.md
@@ -122,25 +122,23 @@ export interface CameraButtonStyles extends ControlBarButtonStyles {
     menuStyles?: Partial<CameraButtonContextualMenuStyles>;
 }
 
-// Warning: (ae-internal-missing-underscore) The name "CaptionInfo" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export type CaptionInfo = {
-    displayName: string;
-    caption: string;
-    userId?: string;
-};
-
 // @internal
 export const _CaptionsBanner: (props: _CaptionsBannerProps) => JSX.Element;
 
 // @internal
 export interface _CaptionsBannerProps {
     // (undocumented)
-    captions: CaptionInfo[];
+    captions: _CaptionsInfo[];
     onRenderAvatar?: OnRenderAvatarCallback;
 }
 
+// @internal
+export type _CaptionsInfo = {
+    displayName: string;
+    captionText: string;
+    userId?: string;
+};
+
 // @public
 export interface ChatMessage extends MessageCommon {
     // (undocumented)
diff --git a/packages/react-components/src/components/CaptionsBanner.tsx b/packages/react-components/src/components/CaptionsBanner.tsx
@@ -1,19 +1,19 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { IPersona, Persona, Stack, PersonaSize, Text, mergeStyles } from '@fluentui/react';
+import { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';
 import React, { useEffect, useRef } from 'react';
-import { _pxToRem } from '@internal/acs-ui-common';
 import { _FileUploadCardsStrings } from './FileUploadCards';
 import { OnRenderAvatarCallback } from '../types';
 import { Ref } from '@fluentui/react-northstar';
+import { captionClassName, displayNameClassName, gridContainerClassName } from './styles/CaptionsBanner.style';
 
 /**
  * @internal
  * information required for each line of caption
  */
-export type CaptionInfo = {
+export type _CaptionsInfo = {
   displayName: string;
-  caption: string;
+  captionText: string;
   userId?: string;
 };
 
@@ -22,7 +22,7 @@ export type CaptionInfo = {
  * _CaptionsBanner Component Props.
  */
 export interface _CaptionsBannerProps {
-  captions: CaptionInfo[];
+  captions: _CaptionsInfo[];
   /**
    * Optional callback to override render of the avatar.
    *
@@ -37,31 +37,6 @@ export interface _CaptionsBannerProps {
  */
 export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
   const { captions, onRenderAvatar } = props;
-
-  const gridContainerClassName = mergeStyles({
-    overflowY: 'scroll',
-    overflowX: 'hidden',
-    width: '100%',
-    height: _pxToRem(60),
-    display: 'grid',
-    gridTemplateColumns: '20% 80%',
-    alignItems: 'stretch',
-    columnGap: _pxToRem(16),
-    padding: _pxToRem(8)
-  });
-
-  const displayNameClassName = mergeStyles({
-    fontWeight: 600,
-    fontSize: _pxToRem(12),
-    lineHeight: _pxToRem(30)
-  });
-
-  const captionClassName = mergeStyles({
-    fontWeight: 400,
-    fontSize: _pxToRem(16),
-    lineHeight: _pxToRem(30)
-  });
-
   const captionsScrollDivRef = useRef<HTMLElement>(null);
   const scrollToBottom = (): void => {
     if (captionsScrollDivRef.current) {
@@ -76,7 +51,7 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
   return (
     <Ref innerRef={captionsScrollDivRef}>
       <div data-is-focusable={true} className={gridContainerClassName}>
-        {captions.map((caption) => {
+        {captions.map((caption, key) => {
           const personaOptions: IPersona = {
             hidePersonaDetails: true,
             size: PersonaSize.size24,
@@ -97,15 +72,15 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
 
           return (
             <>
-              <div>
+              <div key={`username_${key}`}>
                 <Stack horizontal verticalAlign="center" horizontalAlign="end">
                   <span>{userIcon}</span>
                   <Text className={displayNameClassName}>{caption.displayName}</Text>
                 </Stack>
               </div>
-              <div>
+              <div key={`captionText_${key}`}>
                 <span>
-                  <Text className={captionClassName}>{caption.caption}</Text>
+                  <Text className={captionClassName}>{caption.captionText}</Text>
                 </span>
               </div>
             </>
diff --git a/packages/react-components/src/components/styles/CaptionsBanner.style.ts b/packages/react-components/src/components/styles/CaptionsBanner.style.ts
@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { mergeStyles } from '@fluentui/react';
+import { _pxToRem } from '@internal/acs-ui-common';
+
+/**
+ * @private
+ */
+export const gridContainerClassName = mergeStyles({
+  overflowY: 'scroll',
+  overflowX: 'hidden',
+  width: '100%',
+  height: _pxToRem(60),
+  display: 'grid',
+  gridTemplateColumns: 'auto 1fr',
+  alignItems: 'stretch',
+  columnGap: _pxToRem(16),
+  padding: _pxToRem(8)
+});
+
+/**
+ * @private
+ */
+export const displayNameClassName = mergeStyles({
+  fontWeight: 600,
+  fontSize: _pxToRem(12),
+  lineHeight: _pxToRem(30)
+});
+
+/**
+ * @private
+ */
+export const captionClassName = mergeStyles({
+  fontWeight: 400,
+  fontSize: _pxToRem(16),
+  lineHeight: _pxToRem(30)
+});
diff --git a/packages/storybook/stories/INTERNAL/Captions/CaptionsBanner/CaptionsBanner.stories.tsx b/packages/storybook/stories/INTERNAL/Captions/CaptionsBanner/CaptionsBanner.stories.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import { PrimaryButton, Stack } from '@fluentui/react';
-import { CaptionInfo, _CaptionsBanner } from '@internal/react-components';
+import { _CaptionsInfo, _CaptionsBanner } from '@internal/react-components';
 import { Meta } from '@storybook/react/types-6-0';
 import React, { useState } from 'react';
 import { COMPONENT_FOLDER_PREFIX } from '../../../constants';
@@ -15,7 +15,7 @@ import {
 } from './mockCaptions';
 
 const CaptionsBannerStory = (): JSX.Element => {
-  const [captions, setCaptions] = useState<CaptionInfo[]>(GenerateMockNewCaptions());
+  const [captions, setCaptions] = useState<_CaptionsInfo[]>(GenerateMockNewCaptions());
 
   const addNewCaption = (): void => {
     setCaptions([...captions, GenerateMockNewCaption()]);
@@ -30,24 +30,30 @@ const CaptionsBannerStory = (): JSX.Element => {
   };
 
   const extendLastCaption = (): void => {
-    captions[captions.length - 1].caption = `${captions[captions.length - 1].caption} hello`;
+    captions[captions.length - 1].captionText = `${captions[captions.length - 1].captionText} hello`;
     setCaptions([...captions]);
   };
 
   const containerStyles = {
     width: '100%',
     height: '100%',
-    padding: '1rem'
+    padding: '2rem'
   };
 
   return (
-    <Stack verticalFill tokens={{ childrenGap: '1rem' }} style={containerStyles}>
-      <_CaptionsBanner captions={captions} />
+    <Stack verticalFill tokens={{ childrenGap: '5rem' }} style={containerStyles} verticalAlign="space-between">
+      <Stack style={{ border: 'solid grey 0.1rem' }} horizontalAlign="center">
+        <Stack.Item style={{ width: '60%' }}>
+          <_CaptionsBanner captions={captions} />
+        </Stack.Item>
+      </Stack>
 
-      <PrimaryButton text="Add new captions" onClick={addNewCaption} />
-      <PrimaryButton text="Add new short captions" onClick={addNewShortCaption} />
-      <PrimaryButton text="Add new captions with long name" onClick={addNewLongNameCaption} />
-      <PrimaryButton text="Extend last caption" onClick={extendLastCaption} />
+      <Stack horizontal horizontalAlign="space-between">
+        <PrimaryButton text="Add new captions" onClick={addNewCaption} />
+        <PrimaryButton text="Add new short captions" onClick={addNewShortCaption} />
+        <PrimaryButton text="Add new captions with long name" onClick={addNewLongNameCaption} />
+        <PrimaryButton text="Extend last caption" onClick={extendLastCaption} />
+      </Stack>
     </Stack>
   );
 };
@@ -58,7 +64,7 @@ export const CaptionsBanner = CaptionsBannerStory.bind({});
 
 export default {
   id: `${COMPONENT_FOLDER_PREFIX}-internal-CaptionsBanner`,
-  title: `${COMPONENT_FOLDER_PREFIX}/Internal/CaptionsBanners/CaptionsBanner`,
+  title: `${COMPONENT_FOLDER_PREFIX}/Internal/CaptionsBanner/CaptionsBanner`,
   component: _CaptionsBanner,
   argTypes: {
     captions: hiddenControl,
diff --git a/packages/storybook/stories/INTERNAL/Captions/CaptionsBanner/mockCaptions.ts b/packages/storybook/stories/INTERNAL/Captions/CaptionsBanner/mockCaptions.ts
@@ -1,53 +1,53 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { CaptionInfo } from '@internal/react-components';
+import { _CaptionsInfo } from '@internal/react-components';
 
-export const GenerateMockNewCaption = (): CaptionInfo => {
+export const GenerateMockNewCaption = (): _CaptionsInfo => {
   return {
     displayName: 'SpongeBob',
-    caption:
+    captionText:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
   };
 };
 
-export const GenerateMockNewShortCaption = (): CaptionInfo => {
+export const GenerateMockNewShortCaption = (): _CaptionsInfo => {
   return {
     displayName: 'SpongeBob Patrick',
-    caption: 'Lorem ipsum dolor sit amet'
+    captionText: 'Lorem ipsum dolor sit amet'
   };
 };
 
-export const GenerateMockNewCaptionWithLongName = (): CaptionInfo => {
+export const GenerateMockNewCaptionWithLongName = (): _CaptionsInfo => {
   return {
     displayName: 'SpongeBob Patrick Robert',
-    caption: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt'
+    captionText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt'
   };
 };
 
-export const GenerateMockNewCaptions = (): CaptionInfo[] => {
+export const GenerateMockNewCaptions = (): _CaptionsInfo[] => {
   return [
     {
       displayName: 'Caroline',
-      caption: 'Hello there'
+      captionText: 'Hello there'
     },
     {
       displayName: 'Mike',
-      caption: 'Hi welcome'
+      captionText: 'Hi welcome'
     },
     {
       displayName: 'SpongeBob Patrick Robert',
-      caption:
+      captionText:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
     },
     {
       displayName: 'Patrick',
-      caption:
+      captionText:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
     },
     {
       displayName: 'Sandy',
-      caption: 'Lorem ipsum dolor sit amet'
+      captionText: 'Lorem ipsum dolor sit amet'
     }
   ];
 };
