fix missing keys for ControlBar buttons (#226)

change/react-components-230b2ed2-67f5-4463-b417-c70ad0e5e5b5.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix missing keys for ControlBar buttons",
+  "packageName": "react-components",
+  "email": "alcail@microsoft.com",
+  "dependentChangeType": "none"
+}

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

@@ -27,12 +27,12 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
   const componentStyles = concatStyleSets(controlButtonStyles, styles ?? {});
 
   const defaultRenderIcon = (props?: IButtonProps): JSX.Element => {
-    return props?.checked ? <CallVideoIcon /> : <CallVideoOffIcon />;
+    return props?.checked ? <CallVideoIcon key={'videoIconKey'} /> : <CallVideoOffIcon key={'videoOffIconKey'} />;
   };
 
   const defaultRenderText = (props?: IButtonProps): JSX.Element => {
     return (
-      <Stack className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>
+      <Stack key={'videoLabelKey'} className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>
         {props?.checked ? 'Turn off' : 'Turn on'}
       </Stack>
     );

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

@@ -27,11 +27,15 @@ export const EndCallButton = (props: EndCallButtonProps): JSX.Element => {
   const componentStyles = concatStyleSets(endCallControlButtonStyles, styles ?? {});
 
   const defaultRenderIcon = (): JSX.Element => {
-    return <CallEndIcon />;
+    return <CallEndIcon key={'callEndIconKey'} />;
   };
 
   const defaultRenderText = (props?: IButtonProps): JSX.Element => {
-    return <Stack className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>{'Hangup'}</Stack>;
+    return (
+      <Stack key={'callEndLabelKey'} className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>
+        {'Hangup'}
+      </Stack>
+    );
   };
 
   return (

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

@@ -25,11 +25,7 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
   const componentStyles = concatStyleSets(controlButtonStyles, styles ?? {});
 
   const defaultRenderIcon = (props?: IButtonProps): JSX.Element => {
-    if (props?.checked) {
-      return <MicIcon key={'micIconKey'} />;
-    }
-
-    return <MicOffIcon key={'micOffIconKey'} />;
+    return props?.checked ? <MicIcon key={'microphoneIconKey'} /> : <MicOffIcon key={'microphoneOffIconKey'} />;
   };
 
   const defaultRenderText = (props?: IButtonProps): JSX.Element => {

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

@@ -28,11 +28,15 @@ export const OptionsButton = (props: OptionsButtonProps): JSX.Element => {
   const componentStyles = concatStyleSets(controlButtonStyles, styles ?? {});
 
   const defaultRenderIcon = (): JSX.Element => {
-    return <MoreIcon />;
+    return <MoreIcon key={'optionsIconKey'} />;
   };
 
   const defaultRenderText = (props?: IButtonProps): JSX.Element => {
-    return <Stack className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>{'Options'}</Stack>;
+    return (
+      <Stack key={'optionsLabelKey'} className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>
+        {'Options'}
+      </Stack>
+    );
   };
 
   return (

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

@@ -27,12 +27,16 @@ export const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element =>
   const componentStyles = concatStyleSets(controlButtonStyles, styles ?? {});
 
   const defaultRenderIcon = (props?: IButtonProps): JSX.Element => {
-    return props?.checked ? <CallControlCloseTrayIcon /> : <CallControlPresentNewIcon bordered={false} />;
+    return props?.checked ? (
+      <CallControlCloseTrayIcon key={'screenShareIconKey'} />
+    ) : (
+      <CallControlPresentNewIcon key={'screenShareBorderedIconKey'} bordered={false} />
+    );
   };
 
   const defaultRenderText = (props?: IButtonProps): JSX.Element => {
     return (
-      <Stack className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>
+      <Stack key={'screenShareLabelKey'} className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>
         {props?.checked ? 'Stop' : 'Share'}
       </Stack>
     );