Add images to replace previews for custom button injection middle of page focus (#5153)

packages/storybook8/stories/Examples/CustomButtonInjection/Docs.mdx

@@ -14,7 +14,6 @@ import SecondaryCustomButtonInjectionExampleText from '!!raw-loader!./snippets/S
 
 <Meta of={CustomButtonInjectionStories} component={CustomButtonInjectionComponent} />
 
-<div id='custom-button-injection-story'>
 <script> { addCSS('#custom-button-injection-story button[aria-label="Custom"]{ border: 1px solid green; }') } </script>
 <script> {initializeIcons()} </script>
 
@@ -40,6 +39,7 @@ Max number of buttons: '3'
 <Canvas
   of={CustomButtonInjectionStories.PrimaryCustomButtonInjectionDocsOnly}
   source={{ code: PrimaryCustomButtonInjectionExampleText }}
+  layout='centered'
 />
 
 ## Desktop: Secondary Main Bar
@@ -49,6 +49,7 @@ Max number of buttons: '2'
 <Canvas
   of={CustomButtonInjectionStories.SecondaryCustomButtonInjectionDocsOnly}
   source={{ code: SecondaryCustomButtonInjectionExampleText }}
+  layout='centered'
 />
 
 ## Desktop: Overflow More Button
@@ -58,6 +59,7 @@ Max number of buttons: '∞'
 <Canvas
   of={CustomButtonInjectionStories.OverflowCustomButtonInjectionDocsOnly}
   source={{ code: OverflowCustomButtonInjectionExampleText }}
+  layout='centered'
 />
 
 ## Mobile: Primary and Overflow Contextual Menu
@@ -67,6 +69,7 @@ Max number of buttons in primary: '1' Max number of buttons in Contextual Menu:
 <Canvas
   of={CustomButtonInjectionStories.MobileCustomButtonInjectionDocsOnly}
   source={{ code: MobileCustomButtonInjectionExampleText }}
+  layout='centered'
 />
 
 ## Custom Button With State
@@ -74,6 +77,7 @@ Max number of buttons in primary: '1' Max number of buttons in Contextual Menu:
 <Canvas
   of={CustomButtonInjectionStories.CustomButtonWithStateDocsOnly}
   source={{ code: CustomButtonWithStateExampleText }}
+  layout='centered'
 />
 
 ## Custom Button With Async loading State
@@ -81,6 +85,7 @@ Max number of buttons in primary: '1' Max number of buttons in Contextual Menu:
 <Canvas
   of={CustomButtonInjectionStories.CustomButtonWithAsyncStateDocsOnly}
   source={{ code: CustomButtonWithAsyncStateExampleText }}
+  layout='centered'
 />
 
 ## Legacy Control Bar Custom Button Injection
@@ -88,10 +93,9 @@ Max number of buttons in primary: '1' Max number of buttons in Contextual Menu:
 <Canvas
   of={CustomButtonInjectionStories.LegacyControlBarCustomButtonInjectionDocsOnly}
   source={{ code: LegacyControlBarCustomButtonInjectionExampleText }}
+  layout='centered'
 />
 
 ## Props
 
 <ArgTypes of={CustomButtonInjectionComponent} />
-
-</div>

packages/storybook8/stories/Examples/CustomButtonInjection/index.stories.tsx

@@ -4,13 +4,15 @@
 import { Meta } from '@storybook/react';
 import { controlsToAdd, hiddenControl } from '../../controlsUtils';
 import { CustomButtonInjection as CustomButtonInjectionComponent } from './snippets/CustomButtonInjectionTypes';
-import { CustomButtonWithAsyncStateExample } from './snippets/CustomButtonWithAsyncState.snippet';
-import { CustomButtonWithStateExample } from './snippets/CustomButtonWithState.snippet';
-import { LegacyControlBarCustomButtonInjectionExample } from './snippets/LegacyControlBarCustomButtonInjection.snippet';
-import { MobileCustomButtonInjectionExample } from './snippets/MobileCustomButtonInjection.snippet';
-import { OverflowCustomButtonInjectionExample } from './snippets/OverflowCustomButtonInjection.snippet';
-import { PrimaryCustomButtonInjectionExample } from './snippets/PrimaryCustomButtonInjection.snippet';
-import { SecondaryCustomButtonInjectionExample } from './snippets/SecondaryCustomButtonInjection.snippet';
+import {
+  CustomButtonWithAsyncStateExample,
+  CustomButtonWithStateExample,
+  LegacyControlBarCustomButtonInjectionExample,
+  MobileCustomButtonInjectionExample,
+  OverflowCustomButtonInjectionExample,
+  PrimaryCustomButtonInjectionExample,
+  SecondaryCustomButtonInjectionExample
+} from './snippets/CustomButtonImages';
 
 export { CustomButtonInjection } from './CustomButtonInjection.story';
 

packages/storybook8/stories/Examples/CustomButtonInjection/snippets/CustomButtonImages.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+export const CustomButtonWithAsyncStateExample = (): JSX.Element => {
+
+  return (
+    <img style={{ width: '100%' }}
+      src="images/custom-button-injection/CustomButtonWithAsyncStateExample.png"
+      alt="Call composite where all participants have their camera turned off"
+    />
+  );
+};
+
+export const CustomButtonWithStateExample = (): JSX.Element => {
+
+  return (
+    <img style={{ width: '100%' }}
+      src="images/custom-button-injection/CustomButtonWithStateExample.png"
+      alt="Call composite where all participants have their camera turned off"
+    />
+  );
+};
+
+export const LegacyControlBarCustomButtonInjectionExample = (): JSX.Element => {
+
+  return (
+    <img style={{ width: '100%' }}
+      src="images/custom-button-injection/LegacyControlBarCustomButtonInjectionExample.png"
+      alt="Call composite where all participants have their camera turned off"
+    />
+  );
+};
+
+export const MobileCustomButtonInjectionExample = (): JSX.Element => {
+
+  return (
+    <img style={{ width: '100%', maxWidth: '20rem' }}
+      src="images/custom-button-injection/MobileCustomButtonInjectionExample.png"
+      alt="Call composite where all participants have their camera turned off"
+    />
+  );
+};
+
+export const OverflowCustomButtonInjectionExample = (): JSX.Element => {
+
+  return (
+    <img style={{ width: '100%' }}
+      src="images/custom-button-injection/OverflowCustomButtonInjectionExample.png"
+      alt="Call composite where all participants have their camera turned off"
+    />
+  );
+};
+
+export const PrimaryCustomButtonInjectionExample = (): JSX.Element => {
+
+  return (
+    <img style={{ width: '100%' }}
+      src="images/custom-button-injection/PrimaryCustomButtonInjectionExample.png"
+      alt="Call composite where all participants have their camera turned off"
+    />
+  );
+};
+
+export const SecondaryCustomButtonInjectionExample = (): JSX.Element => {
+
+  return (
+    <img style={{ width: '100%' }}
+      src="images/custom-button-injection/SecondaryCustomButtonInjectionExample.png"
+      alt="Call composite where all participants have their camera turned off"
+    />
+  );
+};