Add storybook doc note to highlight that landscape is unsupported whe…

…n formfactor is mobile (#1109)

* Adding info message to storybook about unsupported landscape mode

* Change files

* Adding docs to meeting composite

change/@internal-storybook-9814385c-5de0-4f94-91c8-5cdd586ac211.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adding info message to storybook about unsupported landscape mode",
+  "packageName": "@internal/storybook",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/storybook/stories/CallComposite/CallCompositeDocs.tsx

@@ -2,7 +2,8 @@
 // Licensed under the MIT license.
 
 import { CallComposite } from '@azure/communication-react';
-import { Description, Heading, Props, Source, Title } from '@storybook/addon-docs';
+import { MessageBar } from '@fluentui/react';
+import { Description, Heading, Props, Source, Title, Canvas } from '@storybook/addon-docs';
 import React from 'react';
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 
@@ -62,12 +63,15 @@ export const getDocs: () => JSX.Element = () => {
       <Heading>Running in a Mobile browser</Heading>
       <Description>
         CallComposite by default is optimized for desktop views. To provide an optimized mobile experience, you may set
-        the `formFactor` property to `"mobile"`. Currently the mobile form factor only supports Portrait orientation and
-        not Landscape. The CallComposite does not detect if it is running on mobile device vs desktop, instead you must
-        identify if your clients device is a mobile device and set the `formFactor` property to `"mobile"`. This prop
-        can be set at any time and immediately updates the composite UI to be optimized for a mobile device.
+        the `formFactor` property to `"mobile"`. The CallComposite does not detect if it is running on mobile device vs
+        desktop, instead you must identify if your clients device is a mobile device and set the `formFactor` property
+        to `"mobile"`. This prop can be set at any time and immediately updates the composite UI to be optimized for a
+        mobile device.
       </Description>
       <Source code={formFactorSnippet} />
+      <MessageBar>
+        Note: Only Protrait mode is supported when the `formFactor` is set to "mobile". Landscape mode is not supported.
+      </MessageBar>
       <Description>
         You can try out the form factor property in the [CallComposite Basic
         Example](./?path=/story/composites-call-basicexample--basic-example).

packages/storybook/stories/MeetingComposite/MeetingCompositeDocs.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+import { MessageBar } from '@fluentui/react';
 import { Title, Description, Heading, Source } from '@storybook/addon-docs';
 import React from 'react';
 
@@ -40,12 +41,15 @@ export const getDocs: () => JSX.Element = () => {
       <Heading>Running in a Mobile browser</Heading>
       <Description>
         MeetingComposite by default is optimized for desktop views. To provide an optimized mobile experience, you may
-        set the `formFactor` property to `"mobile"`. Currently the mobile form factor only supports Portrait orientation
-        and not Landscape. The MeetingComposite does not detect if it is running on mobile device vs desktop, instead
-        you must identify if your clients device is a mobile device and set the `formFactor` property to `"mobile"`.
-        This prop can be set at any time and immediately updates the composite UI to be optimized for a mobile device.
+        set the `formFactor` property to `"mobile"`. The MeetingComposite does not detect if it is running on mobile
+        device vs desktop, instead you must identify if your clients device is a mobile device and set the `formFactor`
+        property to `"mobile"`. This prop can be set at any time and immediately updates the composite UI to be
+        optimized for a mobile device.
       </Description>
       <Source code={formFactorSnippet} />
+      <MessageBar>
+        Note: Only Protrait mode is supported when the `formFactor` is set to "mobile". Landscape mode is not supported.
+      </MessageBar>
       <Description>
         You can try out the form factor property in the [MeetingComposite Basic
         Example](./?path=/story/composites-meeting-basicexample--basic-example).