add OptionsButton to ControlBar buttons (#204)

* add  OptionsButton to ControlBar buttons

* Change files

* remove unnecessary Stack and fix doc quote issue

* address review comments

* address review comments

change/@azure-communication-ui-deebc461-ee6c-4ce9-a380-92837d2b6afd.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add OptionsButton Component",
+  "packageName": "@azure/communication-ui",
+  "email": "alcail@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-ui/review/communication-ui.api.md

@@ -138,9 +138,6 @@ export interface JumpToNewMessageButtonProps {
 // @public
 export const labeledAnswerButtonProps: IButtonProps;
 
-// @public
-export const labeledOptionsButtonProps: IButtonProps;
-
 // @public
 export const labeledRecordButtonProps: IButtonProps;
 
@@ -214,7 +211,12 @@ export type NamedTheme = {
 };
 
 // @public
-export const optionsButtonProps: IButtonProps;
+export const OptionsButton: (props: OptionsButtonProps) => JSX.Element;
+
+// @public
+export interface OptionsButtonProps extends IButtonProps {
+    showLabel?: boolean;
+}
 
 // @public
 export const ParticipantItem: (props: ParticipantItemProps) => JSX.Element;

packages/communication-ui/src/components/CameraButton.tsx

@@ -23,7 +23,7 @@ export interface CameraButtonProps extends IButtonProps {
  */
 export const CameraButton = (props: CameraButtonProps): JSX.Element => {
   const { showLabel = false, styles, onRenderIcon, onRenderText } = props;
-  const componentStyles = styles ? concatStyleSets(controlButtonStyles, styles) : controlButtonStyles;
+  const componentStyles = concatStyleSets(controlButtonStyles, styles ?? {});
 
   const defaultRenderIcon = (props?: IButtonProps): JSX.Element => {
     return props?.checked ? <CallVideoIcon /> : <CallVideoOffIcon />;

packages/communication-ui/src/components/ControlBar.tsx

@@ -1,33 +1,12 @@
 // © Microsoft Corporation. All rights reserved.
 import { mergeStyles, Stack, IButtonProps } from '@fluentui/react';
 import { useTheme } from '@fluentui/react-theme-provider';
-import { CallIcon, CallRecordingIcon, MoreIcon } from '@fluentui/react-northstar';
+import { CallIcon, CallRecordingIcon } from '@fluentui/react-northstar';
 import React from 'react';
 import { BaseCustomStylesProps } from '../types';
 import { controlBarStyles, controlButtonLabelStyles, controlButtonStyles } from './styles/ControlBar.styles';
 import { isDarkThemed } from '../utils/themeUtils';
 
-/** Fluent UI Button props for options control */
-export const optionsButtonProps: IButtonProps = {
-  onRenderIcon: (): JSX.Element => <MoreIcon />,
-  menuIconProps: {
-    hidden: true
-  },
-  styles: controlButtonStyles
-};
-
-/** Fluent UI Button props for options control with label */
-export const labeledOptionsButtonProps: IButtonProps = {
-  ...optionsButtonProps,
-  onRenderText: (): JSX.Element => {
-    return (
-      <Stack className={mergeStyles(controlButtonLabelStyles)}>
-        <Stack>Options</Stack>
-      </Stack>
-    );
-  }
-};
-
 /** Fluent UI Button props for recording control */
 export const recordButtonProps: IButtonProps = {
   onRenderIcon: (): JSX.Element => <CallRecordingIcon />,

packages/communication-ui/src/components/EndCallButton.tsx

@@ -22,7 +22,7 @@ export interface EndCallButtonProps extends IButtonProps {
  */
 export const EndCallButton = (props: EndCallButtonProps): JSX.Element => {
   const { showLabel = false, styles, onRenderIcon, onRenderText } = props;
-  const componentStyles = styles ? concatStyleSets(endCallControlButtonStyles, styles) : endCallControlButtonStyles;
+  const componentStyles = concatStyleSets(endCallControlButtonStyles, styles ?? {});
 
   const defaultRenderIcon = (): JSX.Element => {
     return <CallEndIcon />;

packages/communication-ui/src/components/MicrophoneButton.tsx

@@ -22,7 +22,7 @@ export interface MicrophoneButtonProps extends IButtonProps {
  */
 export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
   const { showLabel = false, styles, onRenderIcon, onRenderText } = props;
-  const componentStyles = styles ? concatStyleSets(controlButtonStyles, styles) : controlButtonStyles;
+  const componentStyles = concatStyleSets(controlButtonStyles, styles ?? {});
 
   const defaultRenderIcon = (props?: IButtonProps): JSX.Element => {
     if (props?.checked) {

packages/communication-ui/src/components/OptionsButton.tsx

@@ -0,0 +1,47 @@
+// © Microsoft Corporation. All rights reserved.
+
+import React from 'react';
+import { DefaultButton, IButtonProps, Stack, concatStyleSets, mergeStyles } from '@fluentui/react';
+import { MoreIcon } from '@fluentui/react-northstar';
+import { controlButtonLabelStyles, controlButtonStyles } from './styles/ControlBar.styles';
+
+/**
+ * Props for OptionsButton component
+ */
+export interface OptionsButtonProps extends IButtonProps {
+  /**
+   * Whether the label is displayed or not.
+   * @defaultValue `false`
+   */
+  showLabel?: boolean;
+}
+
+/**
+ * `OptionsButton` allows you to easily create a component for rendering an options button. It can be used in your ControlBar component for example.
+ * This button should contain dropdown menu items you can define through its property `menuProps`.
+ * This `menuProps` property is of type [IContextualMenuProps](https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu#IContextualMenuProps).
+ *
+ * @param props - of type OptionsButtonProps
+ */
+export const OptionsButton = (props: OptionsButtonProps): JSX.Element => {
+  const { showLabel = false, styles, onRenderIcon, onRenderText } = props;
+  const componentStyles = concatStyleSets(controlButtonStyles, styles ?? {});
+
+  const defaultRenderIcon = (): JSX.Element => {
+    return <MoreIcon />;
+  };
+
+  const defaultRenderText = (props?: IButtonProps): JSX.Element => {
+    return <Stack className={mergeStyles(controlButtonLabelStyles, props?.styles?.label)}>{'Options'}</Stack>;
+  };
+
+  return (
+    <DefaultButton
+      {...props}
+      menuIconProps={{ hidden: true }}
+      styles={componentStyles}
+      onRenderIcon={onRenderIcon ?? defaultRenderIcon}
+      onRenderText={showLabel ? onRenderText ?? defaultRenderText : undefined}
+    />
+  );
+};

packages/communication-ui/src/components/ScreenShareButton.tsx

@@ -23,7 +23,7 @@ export interface ScreenShareButtonProps extends IButtonProps {
  */
 export const ScreenShareButton = (props: ScreenShareButtonProps): JSX.Element => {
   const { showLabel = false, styles, onRenderIcon, onRenderText } = props;
-  const componentStyles = styles ? concatStyleSets(controlButtonStyles, styles) : controlButtonStyles;
+  const componentStyles = concatStyleSets(controlButtonStyles, styles ?? {});
 
   const defaultRenderIcon = (props?: IButtonProps): JSX.Element => {
     return props?.checked ? <CallControlCloseTrayIcon /> : <CallControlPresentNewIcon bordered={false} />;

packages/communication-ui/src/components/index.ts

@@ -35,10 +35,8 @@ export type { CameraButtonProps } from './CameraButton';
 
 export {
   ControlBar,
-  optionsButtonProps,
   answerButtonProps,
   recordButtonProps,
-  labeledOptionsButtonProps,
   labeledAnswerButtonProps,
   labeledRecordButtonProps
 } from './ControlBar';
@@ -50,6 +48,9 @@ export type { EndCallButtonProps } from './EndCallButton';
 export { MicrophoneButton } from './MicrophoneButton';
 export type { MicrophoneButtonProps } from './MicrophoneButton';
 
+export { OptionsButton } from './OptionsButton';
+export type { OptionsButtonProps } from './OptionsButton';
+
 export { ScreenShareButton } from './ScreenShareButton';
 export type { ScreenShareButtonProps } from './ScreenShareButton';
 

packages/communication-ui/src/composites/common/CallControls.tsx

@@ -1,14 +1,14 @@
 // © Microsoft Corporation. All rights reserved.
 
-import { DefaultButton, IButtonStyles, IContextualMenuProps } from '@fluentui/react';
+import { IButtonStyles, IContextualMenuProps } from '@fluentui/react';
 import React, { useCallback } from 'react';
 import {
   CameraButton,
   ControlBar,
   EndCallButton,
   MicrophoneButton,
-  ScreenShareButton,
-  optionsButtonProps
+  OptionsButton,
+  ScreenShareButton
 } from '../../components';
 import { ControlBarProps } from '../../components/ControlBar';
 import {
@@ -64,7 +64,7 @@ const CallOptionsButton = (props: LocalDeviceSettingsContainerProps): JSX.Elemen
       }
     ]
   };
-  return <DefaultButton {...optionsButtonProps} menuProps={callOptionsMenu} />;
+  return <OptionsButton menuProps={callOptionsMenu} />;
 };
 
 const CallOptionsButtonComponent = connectFuncsToContext(CallOptionsButton, MapToLocalDeviceSettingsProps);

packages/storybook/stories/ControlBar/ControlBar.stories.tsx

@@ -7,15 +7,13 @@ import {
   ControlBar,
   EndCallButton,
   MicrophoneButton,
+  OptionsButton,
   ScreenShareButton,
-  labeledOptionsButtonProps,
-  optionsButtonProps,
   LIGHT,
   DARK
 } from '@azure/communication-ui';
 import { boolean, select } from '@storybook/addon-knobs';
 import { getDocs } from './ControlBarDocs';
-import { DefaultButton } from '@fluentui/react';
 import { COMPONENT_FOLDER_PREFIX } from '../constants';
 
 const CONTROL_BAR_LAYOUTS = [
@@ -95,10 +93,7 @@ export const ControlBarComponent: (
         <CameraButton showLabel={showLabels} checked={toggleButtons} />
         <MicrophoneButton showLabel={showLabels} checked={toggleButtons} />
         <ScreenShareButton showLabel={showLabels} checked={toggleButtons} />
-        <DefaultButton
-          {...(showLabels ? labeledOptionsButtonProps : optionsButtonProps)}
-          menuProps={exampleOptionsMenuProps}
-        />
+        <OptionsButton showLabel={showLabels} menuProps={exampleOptionsMenuProps} />
         <EndCallButton showLabel={showLabels} />
       </ControlBar>
     </div>

packages/storybook/stories/ControlBar/ControlBarDocs.tsx

@@ -30,10 +30,10 @@ export const getDocs: () => JSX.Element = () => {
 
       <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 `optionsButtonProps` 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.
+        We recommend using our pre-defined buttons you can find [here](./?path=/docs/ui-components-controlbar-buttons)
+        or `DefaultButton`, a [Button](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) component
+        from Fluent UI, as controls inside `ControlBar`. Pre-defined styles like `controlButtonStyles` or
+        `controlButtonLabelStyles` can also be imported and used as `DefaultButton` styles for easy styling.
         `FluentThemeProvider` is needed around `ControlBar` to provide theming and icons. Learn more about theming
         [here](./?path=/docs/theming--page).
       </Description>
@@ -81,8 +81,8 @@ export const getDocs: () => JSX.Element = () => {
 
       <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
+        The `OptionsButton` can be used for any dropdown items defined through `menuProps`. For more information, check
+        out the official Fluent UI documentation at https://developer.microsoft.com/en-us/fluentui#/controls/web/button
       </Description>
       <Canvas withSource={SourceState.NONE}>
         <OptionsButtonExample />

packages/storybook/stories/ControlBar/snippets/AllButtonsControlBar.snippet.tsx

@@ -5,9 +5,9 @@ import {
   EndCallButton,
   FluentThemeProvider,
   MicrophoneButton,
+  OptionsButton,
   ScreenShareButton,
   answerButtonProps,
-  optionsButtonProps,
   recordButtonProps
 } from '@azure/communication-ui';
 import { DefaultButton, IContextualMenuProps } from '@fluentui/react';
@@ -54,7 +54,7 @@ export const AllButtonsControlBarExample: () => JSX.Element = () => {
             /*handle onClick*/
           }}
         />
-        <DefaultButton {...optionsButtonProps} menuProps={exampleOptionsMenuProps} />
+        <OptionsButton menuProps={exampleOptionsMenuProps} />
         <EndCallButton
           onClick={() => {
             /*handle onClick*/

packages/storybook/stories/ControlBar/snippets/ControlBar.snippet.tsx

@@ -5,10 +5,9 @@ import {
   EndCallButton,
   FluentThemeProvider,
   MicrophoneButton,
-  ScreenShareButton,
-  optionsButtonProps
+  OptionsButton,
+  ScreenShareButton
 } from '@azure/communication-ui';
-import { DefaultButton } from '@fluentui/react';
 
 export const ControlBarExample: () => JSX.Element = () => {
   return (
@@ -29,7 +28,7 @@ export const ControlBarExample: () => JSX.Element = () => {
             /*handle onClick*/
           }}
         />
-        <DefaultButton {...optionsButtonProps} menuProps={undefined /*some IContextualMenuProps*/} />
+        <OptionsButton menuProps={undefined /*some IContextualMenuProps*/} />
         <EndCallButton
           onClick={() => {
             /*handle onClick*/

packages/storybook/stories/ControlBar/snippets/ControlBarLayout.snippet.tsx

@@ -5,10 +5,10 @@ import {
   EndCallButton,
   FluentThemeProvider,
   MicrophoneButton,
-  ScreenShareButton,
-  optionsButtonProps
+  OptionsButton,
+  ScreenShareButton
 } from '@azure/communication-ui';
-import { Stack, DefaultButton } from '@fluentui/react';
+import { Stack } from '@fluentui/react';
 
 export const ControlBarLayoutExample: () => JSX.Element = () => {
   return (
@@ -18,7 +18,7 @@ export const ControlBarLayoutExample: () => JSX.Element = () => {
           <CameraButton />
           <MicrophoneButton />
           <ScreenShareButton />
-          <DefaultButton {...optionsButtonProps} />
+          <OptionsButton />
           <EndCallButton />
         </ControlBar>
       </FluentThemeProvider>

packages/storybook/stories/ControlBar/snippets/OptionsButton.snippet.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { CameraButton, ControlBar, FluentThemeProvider, optionsButtonProps } from '@azure/communication-ui';
-import { DefaultButton } from '@fluentui/react';
+import { CameraButton, ControlBar, FluentThemeProvider, OptionsButton } from '@azure/communication-ui';
+import { IContextualMenuProps } from '@fluentui/react';
 
 export const OptionsButtonExample: () => JSX.Element = () => {
-  const exampleOptionsMenuProps = {
+  const exampleOptionsMenuProps: IContextualMenuProps = {
     items: [
       {
         key: '1',
@@ -38,7 +38,7 @@ export const OptionsButtonExample: () => JSX.Element = () => {
             /*handle onClick*/
           }}
         />
-        <DefaultButton {...optionsButtonProps} menuProps={exampleOptionsMenuProps} />
+        <OptionsButton menuProps={exampleOptionsMenuProps} />
       </ControlBar>
     </FluentThemeProvider>
   );

packages/storybook/stories/Examples/Lobby/snippets/LobbyControlBar.snippet.tsx

@@ -1,14 +1,7 @@
 // LobbyControlBar.example.tsx
 
 import React from 'react';
-import {
-  CameraButton,
-  ControlBar,
-  EndCallButton,
-  MicrophoneButton,
-  labeledOptionsButtonProps
-} from '@azure/communication-ui';
-import { DefaultButton } from '@fluentui/react';
+import { CameraButton, ControlBar, EndCallButton, MicrophoneButton, OptionsButton } from '@azure/communication-ui';
 import { useTheme } from '@fluentui/react-theme-provider';
 
 export const LobbyCallControlBar = (): JSX.Element => {
@@ -20,7 +13,7 @@ export const LobbyCallControlBar = (): JSX.Element => {
     >
       <CameraButton showLabel={true} checked={true} />
       <MicrophoneButton showLabel={true} checked={true} />
-      <DefaultButton {...labeledOptionsButtonProps} />
+      <OptionsButton showLabel={true} />
       <EndCallButton showLabel={true} style={{ borderRadius: '0.25rem', marginLeft: '0.25rem' }} />
     </ControlBar>
   );

packages/storybook/stories/Examples/TeamsInterop/snippets/CallControlBar.snippet.tsx

@@ -1,11 +1,4 @@
-import {
-  CameraButton,
-  ControlBar,
-  EndCallButton,
-  MicrophoneButton,
-  labeledOptionsButtonProps
-} from '@azure/communication-ui';
-import { DefaultButton } from '@fluentui/react';
+import { CameraButton, ControlBar, EndCallButton, MicrophoneButton, OptionsButton } from '@azure/communication-ui';
 import React from 'react';
 
 // TODO: Add unique keys to the list here.
@@ -17,7 +10,7 @@ export const CallControlBar = (): JSX.Element => {
     >
       <CameraButton showLabel={true} checked={true} />
       <MicrophoneButton showLabel={true} checked={true} />
-      <DefaultButton {...labeledOptionsButtonProps} />
+      <OptionsButton showLabel={true} />
       <EndCallButton showLabel={true} style={{ borderRadius: '0.25rem', marginLeft: '0.25rem' }} />
     </ControlBar>
   );

packages/storybook/stories/Examples/Themes/ThemesDocs.tsx

@@ -16,7 +16,6 @@ export const getDocs: () => JSX.Element = () => {
     ScreenShareButton,
     VideoTile
   } from '@azure/communication-ui';
-  import { DefaultButton } from '@fluentui/react';
 
   const TeamsTheme = {
     palette: {

packages/storybook/stories/QuickStarts/snippets/CallingComponents.snippet.tsx

@@ -4,12 +4,12 @@ import {
   EndCallButton,
   GridLayout,
   MicrophoneButton,
+  OptionsButton,
   ScreenShareButton,
-  VideoTile,
-  optionsButtonProps
+  VideoTile
 } from '@azure/communication-ui';
 
-import { DefaultButton, Stack, IContextualMenuProps } from '@fluentui/react';
+import { Stack, IContextualMenuProps } from '@fluentui/react';
 import React from 'react';
 import { useState } from 'react';
 
@@ -47,7 +47,7 @@ export const CallingComponents = (): JSX.Element => {
           checked={screenshareButtonChecked}
           onClick={() => setScreenshareButtonChecked(!screenshareButtonChecked)}
         />
-        <DefaultButton {...optionsButtonProps} menuProps={exampleOptionsMenuProps} />
+        <OptionsButton menuProps={exampleOptionsMenuProps} />
         <EndCallButton />
       </ControlBar>
     </Stack>

packages/storybook/stories/Styling/Styling.stories.mdx

@@ -6,10 +6,9 @@ import {
   EndCallButton,
   FluentThemeProvider,
   MicrophoneButton,
-  ScreenShareButton,
-  optionsButtonProps
+  OptionsButton,
+  ScreenShareButton
 } from '@azure/communication-ui';
-import { DefaultButton } from '@fluentui/react';
 import { ControlBarExample } from './snippets/StylingControlBar.snippet';
 import { VideoTileExample } from './snippets/StylingVideoTile.snippet';
 import ControlBarExampleText from '!!raw-loader!./snippets/StylingControlBar.snippet.tsx';

packages/storybook/stories/Theming.stories.mdx

@@ -14,11 +14,10 @@ import {
   EndCallButton,
   FluentThemeProvider,
   MicrophoneButton,
+  OptionsButton,
   ScreenShareButton,
-  darkTheme,
-  optionsButtonProps
+  darkTheme
 } from '@azure/communication-ui';
-import { DefaultButton } from '@fluentui/react';
 
 <Meta title="Theming" />
 
@@ -57,8 +56,8 @@ and assign it to the `fluentTheme` property.
   <DarkControlBar />
 </Canvas>
 
-The dark theme is applied to the `ControlBar`. The icon colors in `DefaultButton` are themed
-correctly because it is a Fluent UI component.
+The dark theme is applied to the `ControlBar`. The icon colors in the predefined button components are themed correctly
+because they are built using the `DefaultButton` Fluent UI component.
 
 ## FluentThemeProvider Props
 

packages/storybook/stories/VideoTile/VideoTile.stories.tsx

@@ -2,15 +2,15 @@
 
 import React from 'react';
 import { Meta } from '@storybook/react/types-6-0';
-import { Stack, DefaultButton } from '@fluentui/react';
+import { Stack } from '@fluentui/react';
 import {
   CameraButton,
   ControlBar,
   EndCallButton,
   MicrophoneButton,
+  OptionsButton,
   StreamMedia,
-  VideoTile,
-  optionsButtonProps
+  VideoTile
 } from '@azure/communication-ui';
 import { text, boolean, number } from '@storybook/addon-knobs';
 import { renderVideoStream } from '../utils';
@@ -50,7 +50,7 @@ export const VideoTileComponent: () => JSX.Element = () => {
           <ControlBar styles={{ root: { position: 'relative', left: '-50%' } }}>
             <CameraButton />
             <MicrophoneButton />
-            <DefaultButton {...optionsButtonProps} />
+            <OptionsButton />
             <EndCallButton />
           </ControlBar>
         </Stack>

packages/storybook/stories/snippets/DarkControlBar.snippet.tsx

@@ -4,11 +4,10 @@ import {
   EndCallButton,
   FluentThemeProvider,
   MicrophoneButton,
+  OptionsButton,
   ScreenShareButton,
-  defaultThemes,
-  optionsButtonProps
+  defaultThemes
 } from '@azure/communication-ui';
-import { DefaultButton } from '@fluentui/react';
 import React from 'react';
 
 export const DarkControlBar = (): JSX.Element => {
@@ -18,7 +17,7 @@ export const DarkControlBar = (): JSX.Element => {
         <CameraButton />
         <MicrophoneButton />
         <ScreenShareButton />
-        <DefaultButton {...optionsButtonProps} />
+        <OptionsButton />
         <EndCallButton />
       </ControlBar>
     </FluentThemeProvider>