ref(components) Replace some InlineDialogs with Popover (#12453)

Remove comments referencing InlineDialog

css/_video-preview.scss

@@ -8,6 +8,7 @@
         border-radius: 3px;
         overflow: auto;
         padding: 8px;
+        margin-bottom: 8px;
     }
 
     &-entry {

react/features/base/popover/components/Popover.web.tsx

@@ -48,7 +48,7 @@ type Props = {
     /**
      * Callback to invoke when the popover has opened.
      */
-    onPopoverOpen: Function;
+    onPopoverOpen?: Function;
 
     /**
      * Whether to display the Popover as a drawer.
@@ -56,8 +56,7 @@ type Props = {
     overflowDrawer?: boolean;
 
     /**
-     * From which side of the dialog trigger the dialog should display. The
+     * Where should the popover content be placed.
-     * value will be passed to {@code InlineDialog}.
      */
     position: string;
 
@@ -89,7 +88,7 @@ type State = {
 };
 
 /**
- * Implements a React {@code Component} for showing an {@code InlineDialog} on
+ * Implements a React {@code Component} for showing an {@code Popover} on
  * mouseenter of the trigger and contents, and hiding the dialog on mouseleave.
  *
  * @augments Component
@@ -273,7 +272,7 @@ class Popover extends Component<Props, State> {
     }
 
     /**
-     * Stops displaying the {@code InlineDialog}.
+     * Stops displaying the {@code Popover}.
      *
      * @private
      * @returns {void}
@@ -289,7 +288,7 @@ class Popover extends Component<Props, State> {
     }
 
     /**
-     * Displays the {@code InlineDialog} and calls any registered onPopoverOpen
+     * Displays the {@code Popover} and calls any registered onPopoverOpen
      * callbacks.
      *
      * @param {Object} event - The mouse event or the keypress event to intercept.
@@ -300,7 +299,7 @@ class Popover extends Component<Props, State> {
         event?.stopPropagation();
 
         if (!this.props.disablePopover) {
-            this.props.onPopoverOpen();
+            this.props.onPopoverOpen?.();
         }
     }
 
@@ -377,7 +376,7 @@ class Popover extends Component<Props, State> {
     }
 
     /**
-     * Renders the React Element to be displayed in the {@code InlineDialog}.
+     * Renders the React Element to be displayed in the {@code Popover}.
      * Also adds padding to support moving the mouse from the trigger to the
      * dialog to prevent mouseleave events.
      *

react/features/settings/components/web/video/VideoSettingsPopup.js

@@ -1,12 +1,12 @@
 // @flow
 
-import InlineDialog from '@atlaskit/inline-dialog';
 import React from 'react';
 
 import {
     getVideoDeviceIds,
     setVideoInputDeviceAndUpdateSettings
 } from '../../../../base/devices';
+import Popover from '../../../../base/popover/components/Popover.web';
 import { connect } from '../../../../base/redux';
 import { SMALL_MOBILE_WIDTH } from '../../../../base/responsive-ui/constants';
 import { getCurrentCameraDeviceId } from '../../../../base/settings';
@@ -18,17 +18,17 @@ import VideoSettingsContent, { type Props as VideoSettingsProps } from './VideoS
 
 type Props = VideoSettingsProps & {
 
-   /**
+    /**
     * Component children (the Video button).
     */
     children: React$Node,
 
-   /**
+    /**
     * Flag controlling the visibility of the popup.
     */
     isOpen: boolean,
 
-   /**
+    /**
     * Callback executed when the popup closes.
     */
     onClose: Function,
@@ -36,7 +36,7 @@ type Props = VideoSettingsProps & {
     /**
      * The popup placement enum value.
      */
-     popupPlacement: string
+    popupPlacement: string
 }
 
 /**
@@ -55,17 +55,18 @@ function VideoSettingsPopup({
 }: Props) {
     return (
         <div className = 'video-preview'>
-            <InlineDialog
+            <Popover
                 content = { <VideoSettingsContent
                     currentCameraDeviceId = { currentCameraDeviceId }
                     setVideoInputDevice = { setVideoInputDevice }
                     toggleVideoSettings = { onClose }
                     videoDeviceIds = { videoDeviceIds } /> }
-                isOpen = { isOpen }
+                onPopoverClose = { onClose }
-                onClose = { onClose }
+                position = { popupPlacement }
-                placement = { popupPlacement }>
+                trigger = 'click'
+                visible = { isOpen }>
                 { children }
-            </InlineDialog>
+            </Popover>
         </div>
     );
 }
@@ -83,7 +84,7 @@ function mapStateToProps(state) {
     return {
         currentCameraDeviceId: getCurrentCameraDeviceId(state),
         isOpen: getVideoSettingsVisibility(state),
-        popupPlacement: clientWidth <= SMALL_MOBILE_WIDTH ? 'auto' : 'top-start',
+        popupPlacement: clientWidth <= SMALL_MOBILE_WIDTH ? 'auto' : 'top-end',
         videoDeviceIds: getVideoDeviceIds(state)
     };
 }

react/features/toolbox/components/web/HangupMenuButton.tsx

@@ -1,10 +1,10 @@
-import InlineDialog from '@atlaskit/inline-dialog';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 
 import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
 import { translate } from '../../../base/i18n/functions';
+import Popover from '../../../base/popover/components/Popover.web';
 
 import HangupToggleButton from './HangupToggleButton';
 
@@ -81,17 +81,18 @@ class HangupMenuButton extends Component<IProps> {
 
         return (
             <div className = 'toolbox-button-wth-dialog context-menu'>
-                <InlineDialog
+                <Popover
                     content = { children }
-                    isOpen = { isOpen }
+                    onPopoverClose = { this._onCloseDialog }
-                    onClose = { this._onCloseDialog }
+                    position = 'top'
-                    placement = 'top-end'>
+                    trigger = 'click'
+                    visible = { isOpen }>
                     <HangupToggleButton
                         customClass = 'hangup-menu-button'
                         handleClick = { this._toggleDialogVisibility }
                         isOpen = { isOpen }
                         onKeyDown = { this._onEscClick } />
-                </InlineDialog>
+                </Popover>
             </div>
         );
     }

react/features/toolbox/components/web/OverflowMenuButton.tsx

@@ -31,7 +31,7 @@ interface IProps {
     ariaControls: string;
 
     /**
-     * A child React Element to display within {@code InlineDialog}.
+     * A child React Element to display within {@code Popover}.
      */
     children: ReactNode;
 

react/features/toolbox/components/web/Toolbox.tsx

@@ -367,7 +367,8 @@ const styles = () => {
             flexDirection: 'column' as const,
             rowGap: '8px',
             margin: 0,
-            padding: '16px'
+            padding: '16px',
+            marginBottom: '8px'
         }
     };
 };

react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx

@@ -46,8 +46,7 @@ interface IProps extends WithTranslation {
 
     /**
      * The position relative to the trigger the local video menu should display
-     * from. Valid values are those supported by AtlasKit
+     * from.
-     * {@code InlineDialog}.
      */
     _menuPosition: string;
 

react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx

@@ -43,8 +43,7 @@ interface IProps extends WithTranslation {
 
     /**
      * The position relative to the trigger the remote menu should display
-     * from. Valid values are those supported by AtlasKit
+     * from.
-     * {@code InlineDialog}.
      */
     _menuPosition: string;