From bb58f5af9f4a1aa9215c8cc84c426629c15b5f0e Mon Sep 17 00:00:00 2001 From: Anjul Garg Date: Thu, 18 Nov 2021 11:26:28 -0800 Subject: [PATCH] Add storybook doc note to highlight that landscape is unsupported when formfactor is mobile (#1109) * Adding info message to storybook about unsupported landscape mode * Change files * Adding docs to meeting composite --- ...ybook-9814385c-5de0-4f94-91c8-5cdd586ac211.json | 7 +++++++ .../stories/CallComposite/CallCompositeDocs.tsx | 14 +++++++++----- .../MeetingComposite/MeetingCompositeDocs.tsx | 12 ++++++++---- 3 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 change/@internal-storybook-9814385c-5de0-4f94-91c8-5cdd586ac211.json diff --git a/change/@internal-storybook-9814385c-5de0-4f94-91c8-5cdd586ac211.json b/change/@internal-storybook-9814385c-5de0-4f94-91c8-5cdd586ac211.json new file mode 100644 index 00000000000..4c98d3b8ae2 --- /dev/null +++ b/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": "anjulgarg@live.com", + "dependentChangeType": "patch" +} diff --git a/packages/storybook/stories/CallComposite/CallCompositeDocs.tsx b/packages/storybook/stories/CallComposite/CallCompositeDocs.tsx index 46a31750a4f..f5d46feb5b1 100644 --- a/packages/storybook/stories/CallComposite/CallCompositeDocs.tsx +++ b/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 = () => { Running in a Mobile browser 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. + + Note: Only Protrait mode is supported when the `formFactor` is set to "mobile". Landscape mode is not supported. + You can try out the form factor property in the [CallComposite Basic Example](./?path=/story/composites-call-basicexample--basic-example). diff --git a/packages/storybook/stories/MeetingComposite/MeetingCompositeDocs.tsx b/packages/storybook/stories/MeetingComposite/MeetingCompositeDocs.tsx index 942cc80c71f..065952ef1d4 100644 --- a/packages/storybook/stories/MeetingComposite/MeetingCompositeDocs.tsx +++ b/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 = () => { Running in a Mobile browser 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. + + Note: Only Protrait mode is supported when the `formFactor` is set to "mobile". Landscape mode is not supported. + You can try out the form factor property in the [MeetingComposite Basic Example](./?path=/story/composites-meeting-basicexample--basic-example).