Add a custom styled ControlBar example to e2e samples (#1288)

* Add boilerplate for custom styled component example

* Add custom styled component buttons for e2e testing

* Update js bundle automation snapshots

Co-authored-by: edwardlee-msft <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

samples/ComponentExamples/src/Examples.tsx

@@ -23,6 +23,7 @@ import { CallAgentProvider } from '@azure/communication-react';
 import { CallProvider } from '@azure/communication-react';
 import { RenderVideoTileExample } from './examples/RenderSingleVideoTileExample';
 import { initializeIcons, registerIcons } from '@fluentui/react';
+import { StyledControlBarExample } from './examples/StyledControlBarExample';
 
 initializeIcons();
 registerIcons({ icons: { ...DEFAULT_COMPOSITE_ICONS } });
@@ -81,6 +82,7 @@ export const Examples = (): JSX.Element => {
       <CallAgentProvider callAgent={callAgent}>
         <CallProvider call={callInstance}>
           <RenderVideoTileExample />
+          <StyledControlBarExample />
         </CallProvider>
       </CallAgentProvider>
     </CallClientProvider>

samples/ComponentExamples/src/examples/StyledControlBarExample.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import {
+  CameraButton,
+  ControlBar,
+  ControlBarButtonStyles,
+  DevicesButton,
+  EndCallButton,
+  MicrophoneButton,
+  ScreenShareButton,
+  usePropsFor
+} from '@azure/communication-react';
+import React from 'react';
+
+export const StyledControlBarExample = (): JSX.Element => {
+  const cameraButtonProps = usePropsFor(CameraButton);
+  const microphoneButtonProps = usePropsFor(MicrophoneButton);
+  const screenShareButtonProps = usePropsFor(ScreenShareButton);
+  const deviceButtonProps = usePropsFor(DevicesButton);
+  const endCallButtonProps = usePropsFor(EndCallButton);
+
+  const controlBarButtonStyle: ControlBarButtonStyles = {
+    root: {
+      background: '#ffff00'
+    }
+  };
+
+  return (
+    <>
+      <h3>An example of custom sytled Call ControlBar:</h3>
+      <br />
+      <ControlBar layout={'horizontal'}>
+        <CameraButton styles={controlBarButtonStyle} {...cameraButtonProps} />
+        <MicrophoneButton styles={controlBarButtonStyle} {...microphoneButtonProps} />
+        <ScreenShareButton styles={controlBarButtonStyle} {...screenShareButtonProps} />
+        <DevicesButton styles={controlBarButtonStyle} {...deviceButtonProps} />
+        <EndCallButton styles={controlBarButtonStyle} {...endCallButtonProps} />
+      </ControlBar>
+    </>
+  );
+};