Alcail/storybook control bar (#165)

* add importing statement to MessageThread * fix and update controlBar docs * Change files * fix quote issue in description
2021-04-23 13:33:57 -07:00 · 2021-04-23 13:33:57 -07:00 · cd27638779
--- a/change/@azure-communication-ui-4ba5c3a8-0eae-464f-b61e-f4e3f59e04ea.json
+++ b/change/@azure-communication-ui-4ba5c3a8-0eae-464f-b61e-f4e3f59e04ea.json
@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "updating documentation for ControlBar",
+  "packageName": "@azure/communication-ui",
+  "email": "alcail@microsoft.com",
+  "dependentChangeType": "none"
+}
--- a/packages/communication-ui/src/components/ControlBar.tsx
+++ b/packages/communication-ui/src/components/ControlBar.tsx
@ -179,7 +179,7 @@ export interface ControlBarProps {
  /** React Child components. */
  children?: React.ReactNode;
  /**
-   * Allows users to pass in an object contains custom CSS styles.
+   * Allows users to pass an object containing custom CSS styles.
   * @Example
   * ```
   * <ControlBar styles={{ root: { background: 'blue' } }} />
--- a/packages/storybook/stories/ControlBar/ControlBarDocs.tsx
+++ b/packages/storybook/stories/ControlBar/ControlBarDocs.tsx
@ -1,17 +1,18 @@
 // © Microsoft Corporation. All rights reserved.

-import { Canvas, Description, Heading, Props, Source, Title } from '@storybook/addon-docs/blocks';
+import { Canvas, Description, Heading, Props, Source, SourceState, Title } from '@storybook/addon-docs/blocks';
 import React from 'react';
 import { ControlBar } from '../../../communication-ui/src';
 import { AllButtonsControlBarExample } from './snippets/AllButtonsControlBar.snippet';
-import { ControlBarExample } from './snippets/ControlBar.snippet';
 import { ControlBarLayoutExample } from './snippets/ControlBarLayout.snippet';
-import { CustomControlBarExample } from './snippets/CustomControlBar.snippet';
+import { CustomButtonsExample } from './snippets/CustomButtons.snippet';
+import { CustomControlBarStylesExample } from './snippets/CustomControlBarStyles.snippet';
 import { OptionsButtonExample } from './snippets/OptionsButton.snippet';
+const AllButtonsControlBarExampleText = require('!!raw-loader!./snippets/AllButtonsControlBar.snippet.tsx').default;
+const ControlBarLayoutExampleText = require('!!raw-loader!./snippets/ControlBarLayout.snippet.tsx').default;
+const CustomButtonsExampleText = require('!!raw-loader!./snippets/CustomButtons.snippet.tsx').default;
+const CustomControlBarStylesExampleText = require('!!raw-loader!./snippets/CustomControlBarStyles.snippet.tsx').default;
 const OptionsButtonExampleText = require('!!raw-loader!./snippets/OptionsButton.snippet.tsx').default;
-const AllButtonsControlBarExampleText = require('!!raw-loader?./snippets/AllButtonsControlBar.snippet.tsx').default;
-const ControlBarLayoutExampleText = require('!!raw-loader?./snippets/ControlBarLayout.snippet.tsx').default;
-const CustomControlBarExampleText = require('!!raw-loader?./snippets/CustomControlBar.snippet.tsx').default;

 const importStatement = `
 import { FluentThemeProvider, ControlBar } from '@azure/communication-ui';
@ -23,23 +24,20 @@ export const getDocs: () => JSX.Element = () => {
    <>
      <Title>ControlBar</Title>
      <Description of={ControlBar} />
-      <Canvas withSource="none">
-        <ControlBarExample />
-      </Canvas>

      <Heading>Importing</Heading>
      <Source code={importStatement} />

-      <Heading>Usage</Heading>
+      <Heading>Example</Heading>
      <Description>
        We recommend using `DefaultButton`, a
-        [Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) component from Fluent UI as
-        controls inside `ControlBar`. Props like `videoButtonProps` can also be imported and used for `DefaultButton`
-        for easy icons and styling. All the available importable props are shown in the example below.
+        [Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) component from Fluent UI, as
+        controls inside `ControlBar`. Props like `videoButtonProps` can also be imported and used as `DefaultButton`
+        props for easy icons and styling. All the available importable props are shown in the example below.
        `FluentThemeProvider` is needed around `ControlBar` to provide theming and icons. Learn more about theming
        [here](./?path=/docs/theming--page).
      </Description>
-      <Canvas withSource="none">
+      <Canvas withSource={SourceState.NONE}>
        <AllButtonsControlBarExample />
      </Canvas>
      <Source code={AllButtonsControlBarExampleText} />
@ -51,30 +49,41 @@ export const getDocs: () => JSX.Element = () => {

      <Heading>Layouts</Heading>
      <Description>
-        You can change the layout of Control Bar by providing a preset layout to the `layout` prop.
+        You can change the layout of `ControlBar` by providing a preset layout to the `layout` prop. Preset layouts are
+        `horizontal`, `vertical`, `dockedTop`, `dockedBottom`, `dockedLeft`, `dockedRight`, `floatingTop`,
+        `floatingBottom`, `floatingLeft` and `floatingRight`.
      </Description>
-      <Canvas withSource="none">
+      <Canvas withSource={SourceState.NONE}>
        <ControlBarLayoutExample />
      </Canvas>
      <Source code={ControlBarLayoutExampleText} />

-      <Heading>Custom Control Bar</Heading>
+      <Heading>Custom ControlBar Styles</Heading>
+      <Description>
+        You can change the styles of the `ControlBar` by customizing its `styles` prop like in the example below.
+      </Description>
+      <Canvas withSource={SourceState.NONE}>
+        <CustomControlBarStylesExample />
+      </Canvas>
+      <Source code={CustomControlBarStylesExampleText} />
+
+      <Heading>Custom Buttons</Heading>
      <Description>
        You can also easily change the styles of any `DefaultButton`. In the example, below we import `videoButtonProps`
        and `audioButtonProps` for the 1st and 2nd buttons and style our own hang up button for the 3rd button. Learn
        more about styling [here](./?path=/docs/styling--page).
      </Description>
-      <Source code={CustomControlBarExampleText} />
-      <Canvas withSource="none">
-        <CustomControlBarExample />
+      <Canvas withSource={SourceState.NONE}>
+        <CustomButtonsExample />
      </Canvas>
+      <Source code={CustomButtonsExampleText} />

      <Heading>Dropdown Options Button</Heading>
      <Description>
        A `DefaultButton` can be customised to be used as a dropdown. For more information, check out the official
        Fluent UI documentation at https://developer.microsoft.com/en-us/fluentui#/controls/web/button
      </Description>
-      <Canvas withSource="none">
+      <Canvas withSource={SourceState.NONE}>
        <OptionsButtonExample />
      </Canvas>
      <Source code={OptionsButtonExampleText} />
--- a/packages/storybook/stories/ControlBar/snippets/AllButtonsControlBar.snippet.tsx
+++ b/packages/storybook/stories/ControlBar/snippets/AllButtonsControlBar.snippet.tsx
@ -5,8 +5,8 @@ import {
  answerButtonProps,
  audioButtonProps,
  hangupButtonProps,
-  recordButtonProps,
  optionsButtonProps,
+  recordButtonProps,
  screenShareButtonProps,
  videoButtonProps
 } from '@azure/communication-ui';
--- a/packages/storybook/stories/ControlBar/snippets/ControlBar.snippet.tsx
+++ b/packages/storybook/stories/ControlBar/snippets/ControlBar.snippet.tsx
@ -1,8 +1,8 @@
 import React from 'react';
 import {
  FluentThemeProvider,
-  audioButtonProps,
  ControlBar,
+  audioButtonProps,
  hangupButtonProps,
  optionsButtonProps,
  screenShareButtonProps,
--- a/packages/storybook/stories/ControlBar/snippets/ControlBarLayout.snippet.tsx
+++ b/packages/storybook/stories/ControlBar/snippets/ControlBarLayout.snippet.tsx
@ -1,8 +1,8 @@
 import React from 'react';
 import {
  FluentThemeProvider,
-  audioButtonProps,
  ControlBar,
+  audioButtonProps,
  hangupButtonProps,
  optionsButtonProps,
  screenShareButtonProps,
--- a/packages/storybook/stories/ControlBar/snippets/CustomControlBar.snippet.tsx
+++ b/packages/storybook/stories/ControlBar/snippets/CustomControlBar.snippet.tsx
@ -1,15 +1,15 @@
 import React from 'react';
 import {
  FluentThemeProvider,
-  audioButtonProps,
  ControlBar,
+  audioButtonProps,
  hangupButtonProps,
  videoButtonProps
 } from '@azure/communication-ui';
 import { DefaultButton, concatStyleSets } from '@fluentui/react';
 import { CallEndIcon } from '@fluentui/react-northstar';

-export const CustomControlBarExample: () => JSX.Element = () => {
+export const CustomButtonsExample: () => JSX.Element = () => {
  const CustomHangupButton: () => JSX.Element = () => {
    const styles = concatStyleSets(hangupButtonProps.styles, {
      root: {
@ -24,10 +24,15 @@ export const CustomControlBarExample: () => JSX.Element = () => {
      },
      flexContainer: { flexFlow: 'row' }
    });
+
    return (
      <DefaultButton
-        onRenderIcon={() => <CallEndIcon />}
-        onRenderText={() => <span style={{ marginLeft: '0.250rem' }}>End Call</span>}
+        onRenderIcon={() => <CallEndIcon key={'hangupBtnIconKey'} />}
+        onRenderText={() => (
+          <span key={'hangupBtnTextKey'} style={{ marginLeft: '0.5rem' }}>
+            End Call
+          </span>
+        )}
        styles={styles}
        onClick={() => {
          /* handle hangup */
--- a/packages/storybook/stories/ControlBar/snippets/CustomControlBarStyles.snippet.tsx
+++ b/packages/storybook/stories/ControlBar/snippets/CustomControlBarStyles.snippet.tsx
@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  FluentThemeProvider,
+  ControlBar,
+  audioButtonProps,
+  hangupButtonProps,
+  videoButtonProps
+} from '@azure/communication-ui';
+import { DefaultButton } from '@fluentui/react';
+
+export const CustomControlBarStylesExample: () => JSX.Element = () => {
+  const customStyles = {
+    root: {
+      backgroundColor: 'lightgray',
+      border: 'solid black',
+      borderRadius: '0.3rem',
+      maxWidth: 'fit-content'
+    }
+  };
+
+  return (
+    <FluentThemeProvider>
+      <ControlBar layout={'horizontal'} styles={customStyles}>
+        <DefaultButton {...videoButtonProps} />
+        <DefaultButton {...audioButtonProps} />
+        <DefaultButton {...hangupButtonProps} />
+      </ControlBar>
+    </FluentThemeProvider>
+  );
+};
--- a/packages/storybook/stories/ControlBar/snippets/OptionsButton.snippet.tsx
+++ b/packages/storybook/stories/ControlBar/snippets/OptionsButton.snippet.tsx
@ -29,6 +29,7 @@ export const OptionsButtonExample: () => JSX.Element = () => {
      }
    ]
  };
+
  return (
    <FluentThemeProvider>
      <ControlBar layout={'horizontal'}>
--- a/packages/storybook/stories/MessageThread/MessageThreadDocs.tsx
+++ b/packages/storybook/stories/MessageThread/MessageThreadDocs.tsx
@ -28,11 +28,17 @@ import { MessageThreadWithCustomReadReceiptExample } from './snippets/MessageThr
 const MessageThreadWithCustomReadReceiptExampleText = require('!!raw-loader!./snippets/MessageThreadWithCustomReadReceipt.snippet.tsx')
  .default;

+const importStatement = `
+import { FluentThemeProvider, MessageThread } from '@azure/communication-ui';
+`;
+
 export const getDocs: () => JSX.Element = () => {
  return (
    <>
      <Title>MessageThread</Title>
      <Description of={MessageThread} />
+      <Heading>Importing</Heading>
+      <Source code={importStatement} />
      <Heading>Sample Messages</Heading>
      <Description>
        Create a `placeholdermessages.ts` file in the current folder you are working on. Then copy paste the code below