2 bug fixes. Incoming Call Modal referencing correct snippet and Them…

…ing page with borders around components (#5120)

* referencing the component for the incoming call modal.

* adding index.stories so we can reference the stories in the canvas elements

packages/storybook8/stories/Concepts/Theming/Docs.mdx

@@ -1,13 +1,11 @@
-import { Meta, Controls, Primary, Source } from '@storybook/addon-docs';
-import { DarkControlBar } from './DarkControlBar.story';
-import { DefaultTheme } from './DefaultTheme.story';
-import { ThemedButton } from './ThemedButton.story';
+import { Meta, Controls, Primary, Source, Canvas } from '@storybook/addon-docs';
+import * as ThemingStories from './index.stories';
 
 import DarkControlBarText from '!!raw-loader!./snippets/DarkControlBar.snippet.tsx';
 import DefaultThemeSnippetText from '!!raw-loader!./snippets/DefaultTheme.snippet.tsx';
 import ThemedButtonText from '!!raw-loader!./snippets/ThemedButton.snippet.tsx';
 
-<Meta title="Concepts/Theming" />
+<Meta of={ThemingStories} />
 
 # Theming
 
@@ -20,14 +18,14 @@ is a wrapping component that allows you to theme all ACS UI Library components c
 ACS UI Library components are themed with a light theme by default as shown by the `ControlBar` and buttons below.
 
 <Source code={DefaultThemeSnippetText} />
-<DefaultTheme />
+<Canvas of={ThemingStories.DefaultThemeDocsOnly} sourceState={'none'} layout={'padded'} />
 
 To theme this ControlBar, import `FluentThemeProvider` from `@azure/communication-react` and wrap it around the `ControlBar`.
 Then import `darkTheme` from `@azure/communication-react` and assign it to the `fluentTheme` property of `FluentThemeProvider`.
 `darkTheme` is a [Theme](https://aka.ms/fluentui#/controls/web/references/theme) object from Fluent UI.
 
 <Source code={DarkControlBarText} />
-<DarkControlBar />
+<Canvas of={ThemingStories.DarkControlBarDocsOnly} sourceState={'none'} layout={'padded'} />
 
 ## FluentThemeProvider Props
 
@@ -78,7 +76,7 @@ But if you wish to override the mapping, we recommend that you use the `useTheme
 use the component's `styles` prop like in the example below.
 
 <Source code={ThemedButtonText} />
-<ThemedButton />
+<Canvas of={ThemingStories.ThemedButtonDocsOnly} sourceState={'none'} layout={'padded'} />
 
 Should you override the palette mapping, please note that ACS UI Library components abide by the general Fluent UI
 mappings. Foreground colors are used for text, icons, and outlines while background colors for component

packages/storybook8/stories/Concepts/Theming/index.stories.tsx

@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Meta } from '@storybook/react';
+import { DarkControlBar as DarkControlBarSnippet } from './DarkControlBar.story';
+import { DefaultTheme as DefaultThemeSnippet } from './DefaultTheme.story';
+import { ThemedButton as ThemedButtonSnippet } from './ThemedButton.story';
+
+export const DarkControlBarDocsOnly = {
+  render: DarkControlBarSnippet
+};
+
+export const DefaultThemeDocsOnly = {
+  render: DefaultThemeSnippet
+};
+
+export const ThemedButtonDocsOnly = {
+  render: ThemedButtonSnippet
+};
+
+const meta: Meta = {
+  title: 'Concepts/Theming',
+  component: DefaultThemeSnippet,
+  argTypes: {}
+};
+
+export default meta;

packages/storybook8/stories/Examples/IncomingCallAlerts/IncomingCallModal/index.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react/*';
 import { controlsToAdd, hiddenControl } from '../../../controlsUtils';
-import { IncomingCallModal as IncomingCallModalStory } from './snippets/exampleIncomingCallModal.snippet';
+import { IncomingCallModal as IncomingCallModalStory } from './IncomingCallModal.story';
 
 export const IncomingCallModal = {
   render: IncomingCallModalStory