Merge pull request #2038 from jitsi/apply-dark-theme

feat(dark-theme): Applies dark theme on inline-dialogs, tooltips, flags and more

css/_connection-info.scss

@@ -1,7 +1,6 @@
 %connection-info {
     font-size: 12px;
     font-weight: 400;
-    color: $modalTextColor;
 
     td {
         padding: 2px 0;
@@ -34,7 +33,6 @@
     &__download
     {
         @extend .connection-info__icon;
-        color: $downloadConnectionIconColor;
     }
 
     &__status
@@ -45,7 +43,6 @@
     &__upload
     {
         @extend .connection-info__icon;
-        color: $uploadConnectionIconColor;
     }
 
     .showmore {

css/_filmstrip.scss

@@ -86,26 +86,16 @@
                 width: 100%;
 
                 & button {
-                    background: $toolbarBackground;
                     flex-grow: 1;
                     flex-shrink: 1;
                     overflow: hidden;
                 }
 
                 & > * {
-                    color: $toolbarButtonColor;
                     flex-grow: 0;
                     flex-shrink: 0;
                     margin-left: 2px;
                 }
-
-                /**
-                 * Making sure any svg-s in an invite button group will be
-                 * colored the way we want.
-                 */
-                & path {
-                    fill: $toolbarButtonColor;
-                }
             }
         }
 

css/_popup_menu.scss

@@ -19,7 +19,6 @@
     // Link Appearance
     &__link,
     &__contents {
-        color: $modalTextColor;
         display: block;
         box-sizing: border-box;
         text-decoration: none;
@@ -30,7 +29,6 @@
         padding: 0 5px;
 
         &.disabled {
-            color: gray !important;
             pointer-events: none;
         }
     }

css/_toolbars.scss

@@ -36,7 +36,6 @@
  * Common toolbar styles.
  */
 .toolbar {
-    color: $modalTextColor;
     height: 100%;
     pointer-events: auto;
     position: relative;
@@ -82,20 +81,21 @@
         vertical-align: middle;
         width: $defaultToolbarSize;
 
-        &_hangup {
-            color: $hangupColor;
-            font-size: $hangupFontSize;
-        }
-
         &[disabled] {
             opacity: 0.5;
         }
 
         &:hover, &:active {
+            color: $toolbarButtonColor;
             cursor: pointer;
             text-decoration: none;
         }
 
+        &_hangup, &_hangup:hover {
+            color: $hangupColor;
+            font-size: $hangupFontSize;
+        }
+
         &:not(.toggled) {
             &:hover, &:active {
                 // sum opacity with background layer should give us 0.8

css/_variables.scss

@@ -64,6 +64,7 @@ $connectionIndicatorBg: #165ecc;
 $audioLevelShadow: rgba(9, 36, 77, 0.9);
 $videoStateIndicatorColor: $defaultColor;
 $videoStateIndicatorBackground: $toolbarBackground;
+$videoStateIndicatorSize: 40px;
 
 /**
  * Feedback Modal

css/_videolayout_default.scss

@@ -65,6 +65,15 @@
             float: left;
             pointer-events: all;
         }
+
+        /**
+         * Need to overwrite the background for the top toolbar dark theme div
+         * wrapper needed before we're able to move all top toolbar indicators
+         * creation to react.
+         */
+        .ckAJgx {
+            background: none;
+        }
     }
 
     &__toolbar {

css/modals/invite/_invite.scss

@@ -26,17 +26,6 @@
             user-select: text;
         }
 
-        .dial-in-numbers-trigger {
-            position: relative;
-            width: 100%;
-
-            .dial-in-numbers-trigger-icon {
-                position: absolute;
-                right: 10px;
-                top: 4px;
-            }
-        }
-
         .is-disabled,
         .is-loading {
             .dial-in-numbers-trigger-icon {
@@ -62,6 +51,10 @@
         &__input-container {
             flex: 1;
             margin-right: 10px;
+
+            .dropdown-button-trigger {
+                text-align: left;
+            }
         }
     }
 

css/modals/video-quality/_video-quality.scss

@@ -1,5 +1,4 @@
 .video-quality-dialog {
-    color: $modalTextColor;
 
     .hide-warning {
         height: 0;
@@ -12,7 +11,6 @@
 
     .video-quality-dialog-contents {
         align-items: center;
-        color: $modalTextColor;
         display: flex;
         flex-direction: column;
         padding: 10px;
@@ -29,7 +27,7 @@
             @mixin sliderTrackStyles() {
                 height: 15px;
                 border-radius: 10px;
-                background: black;
+                background: #0E1624;
             }
 
             &::-ms-track {
@@ -79,7 +77,6 @@
             transform: translate(-50%, 0%);
 
             &::before {
-                background: rgb(140, 156, 189);
                 content: '';
                 border-radius: 50%;
                 left: 0;
@@ -94,10 +91,10 @@
         }
 
         .video-quality-dialog-label-container.active {
-            color: $toolbarToggleBackground;
+            color: $videoQualityActive;
 
             &::before {
-                background: $toolbarToggleBackground;
+                background: $videoQualityActive;
                 height: 12px;
                 top: -19px;
                 width: 12px;
@@ -117,26 +114,26 @@
 
 .video-state-indicator {
     background: $videoStateIndicatorBackground;
-    color: $videoStateIndicatorColor;
     cursor: default;
     font-size: 13px;
-    height: 40px;
+    height: $videoStateIndicatorSize;
     line-height: 20px;
     text-align: left;
-    min-width: 40px;
+    min-width: $videoStateIndicatorSize;
     border-radius: 50%;
     position: absolute;
     box-sizing: border-box;
 
     i {
-        cursor: pointer;
+        line-height: $videoStateIndicatorSize;
     }
 
     /**
      * Give the label padding so it has more volume and can be easily clicked.
      */
     .video-quality-label-status {
-        padding: 10px 5px;
+        line-height: $videoStateIndicatorSize;
+        min-width: $videoStateIndicatorSize;
         text-align: center;
     }
 }

css/themes/_light.scss

@@ -44,12 +44,6 @@ $defaultBackground: #474747;
 $filmstripOnlyOverlayBg: #000;
 $reloadProgressBarBg: #0074E0;
 
-/**
-* Connection indicator
-**/
-$downloadConnectionIconColor: #4abd04;
-$uploadConnectionIconColor: #ffa800;
-
 /**
  * Dialog colors
  **/
@@ -111,3 +105,8 @@ $selectFontColor: $controlColor;
 $selectBg: $controlBackground;
 $selectActiveBg: darken($controlBackground, 5%);
 $selectActiveItemBg: darken($controlBackground, 20%);
+
+/**
+ * TODO: Replace by themed component.
+ */
+$videoQualityActive: #4C9AFF;

modules/UI/videolayout/RemoteVideo.js

@@ -5,6 +5,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { I18nextProvider } from 'react-i18next';
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 
 import { i18next } from '../../../react/features/base/i18n';
 import {
@@ -167,15 +168,18 @@ RemoteVideo.prototype._generatePopupContent = function() {
     ReactDOM.render(
         <Provider store = { APP.store }>
             <I18nextProvider i18n = { i18next }>
-                <RemoteVideoMenuTriggerButton
+                <AtlasKitThemeProvider mode = 'dark'>
-                    initialVolumeValue = { initialVolumeValue }
+                    <RemoteVideoMenuTriggerButton
-                    isAudioMuted = { this.isAudioMuted }
+                        initialVolumeValue = { initialVolumeValue }
-                    isModerator = { isModerator }
+                        isAudioMuted = { this.isAudioMuted }
-                    onMenuDisplay = {this._onRemoteVideoMenuDisplay.bind(this)}
+                        isModerator = { isModerator }
-                    onRemoteControlToggle = { onRemoteControlToggle }
+                        onMenuDisplay
-                    onVolumeChange = { onVolumeChange }
+                            = {this._onRemoteVideoMenuDisplay.bind(this)}
-                    participantID = { participantID }
+                        onRemoteControlToggle = { onRemoteControlToggle }
-                    remoteControlState = { remoteControlState } />
+                        onVolumeChange = { onVolumeChange }
+                        participantID = { participantID }
+                        remoteControlState = { remoteControlState } />
+                </AtlasKitThemeProvider>
             </I18nextProvider>
         </Provider>,
         remoteVideoMenuContainer);

modules/UI/videolayout/SmallVideo.js

@@ -4,6 +4,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { I18nextProvider } from 'react-i18next';
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import { Provider } from 'react-redux';
 
 import { i18next } from '../../../react/features/base/i18n';
@@ -780,30 +781,34 @@ SmallVideo.prototype.updateIndicators = function() {
     const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top';
 
     ReactDOM.render(
-        <I18nextProvider i18n = { i18next }>
+            <I18nextProvider i18n = { i18next }>
-            <div>
+                <div>
-                { this._showConnectionIndicator
+                    <AtlasKitThemeProvider mode = 'dark'>
-                    ? <ConnectionIndicator
+                        { this._showConnectionIndicator
-                        alwaysVisible = { showConnectionIndicator }
+                            ? <ConnectionIndicator
-                        connectionStatus = { this._connectionStatus }
+                                alwaysVisible = { showConnectionIndicator }
-                        iconSize = { iconSize }
+                                connectionStatus = { this._connectionStatus }
-                        isLocalVideo = { this.isLocal }
+                                iconSize = { iconSize }
-                        enableStatsDisplay = { !interfaceConfig.filmStripOnly }
+                                isLocalVideo = { this.isLocal }
-                        statsPopoverPosition = { this.statsPopoverLocation }
+                                enableStatsDisplay
-                        userID = { this.id } />
+                                    = { !interfaceConfig.filmStripOnly }
-                    : null }
+                                statsPopoverPosition
-                { this._showRaisedHand
+                                    = { this.statsPopoverLocation }
-                    ? <RaisedHandIndicator
+                                userID = { this.id } />
-                        iconSize = { iconSize }
+                            : null }
-                        tooltipPosition = { tooltipPosition } />
+                        { this._showRaisedHand
-                    : null }
+                            ? <RaisedHandIndicator
-                { this._showDominantSpeaker
+                                iconSize = { iconSize }
-                    ? <DominantSpeakerIndicator
+                                tooltipPosition = { tooltipPosition } />
-                        iconSize = { iconSize }
+                            : null }
-                        tooltipPosition = { tooltipPosition } />
+                        { this._showDominantSpeaker
-                    : null }
+                            ? <DominantSpeakerIndicator
-            </div>
+                                iconSize = { iconSize }
-        </I18nextProvider>,
+                                tooltipPosition = { tooltipPosition } />
+                            : null }
+                    </AtlasKitThemeProvider>
+                </div>
+            </I18nextProvider>,
         indicatorToolbar
     );
 };

package.json

@@ -15,20 +15,23 @@
   "author": "",
   "readmeFilename": "README.md",
   "dependencies": {
-    "@atlaskit/avatar": "4.0.5",
+    "@atlaskit/avatar": "8.0.5",
-    "@atlaskit/button": "3.0.0",
+    "@atlaskit/button": "5.4.2",
-    "@atlaskit/button-group": "1.1.3",
+    "@atlaskit/button-group": "1.5.3",
-    "@atlaskit/dropdown-menu": "1.4.0",
+    "@atlaskit/dropdown-menu": "3.10.2",
-    "@atlaskit/field-text": "2.7.0",
+    "@atlaskit/droplist": "4.11.1",
-    "@atlaskit/flag": "3.0.0",
+    "@atlaskit/field-text": "4.0.1",
-    "@atlaskit/icon": "7.0.0",
+    "@atlaskit/flag": "6.1.0",
-    "@atlaskit/inline-dialog": "3.2.0",
+    "@atlaskit/icon": "10.0.0",
-    "@atlaskit/inline-message": "2.1.1",
+    "@atlaskit/inline-dialog": "5.0.2",
-    "@atlaskit/modal-dialog": "2.1.2",
+    "@atlaskit/inline-message": "3.0.1",
-    "@atlaskit/multi-select": "6.2.0",
+    "@atlaskit/modal-dialog": "2.6.0",
-    "@atlaskit/spinner": "2.2.3",
+    "@atlaskit/multi-select": "7.1.3",
-    "@atlaskit/tabs": "2.0.0",
+    "@atlaskit/spinner": "4.0.0",
-    "@atlaskit/toggle": "2.0.4",
+    "@atlaskit/tabs": "4.0.1",
+    "@atlaskit/theme": "2.2.0",
+    "@atlaskit/toggle": "2.6.1",
+    "@atlaskit/tooltip": "6.0.0",
     "@atlassian/aui": "6.0.6",
     "autosize": "1.18.13",
     "es6-iterator": "2.0.1",

react/features/app/components/AbstractApp.js

@@ -4,6 +4,7 @@ import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { compose, createStore } from 'redux';
 import Thunk from 'redux-thunk';
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 
 import { i18next } from '../../base/i18n';
 import {
@@ -201,9 +202,11 @@ export class AbstractApp extends Component {
             return (
                 <I18nextProvider i18n = { i18next }>
                     <Provider store = { this._getStore() }>
-                        {
+                        <AtlasKitThemeProvider mode = 'dark'>
-                            this._createElement(component)
+                            {
-                        }
+                                this._createElement(component)
+                            }
+                        </AtlasKitThemeProvider>
                     </Provider>
                 </I18nextProvider>
             );

react/features/base/dialog/components/StatelessDialog.web.js

@@ -1,6 +1,7 @@
 import AKButton from '@atlaskit/button';
 import AKButtonGroup from '@atlaskit/button-group';
 import ModalDialog from '@atlaskit/modal-dialog';
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
@@ -114,25 +115,32 @@ class StatelessDialog extends Component {
      */
     render() {
         return (
-            <div
+
-                onKeyDown = { this._onKeyDown }
+            /**
-                ref = { this._setDialogElement }>
+             * Enabled light theme for dialogs until all in-dialog components
-                <ModalDialog
+             * support dark theme.
-                    footer = { this._renderFooter() }
+             */
-                    header = { this._renderHeader() }
+            <AtlasKitThemeProvider mode = 'light'>
-                    isOpen = { true }
+                <div
-                    onDialogDismissed = { this._onDialogDismissed }
+                    onKeyDown = { this._onKeyDown }
-                    width = { this.props.width || 'medium' }>
+                    ref = { this._setDialogElement }>
-                    <div>
+                    <ModalDialog
-                        <form
+                        footer = { this._renderFooter() }
-                            className = 'modal-dialog-form'
+                        header = { this._renderHeader() }
-                            id = 'modal-dialog-form'
+                        isOpen = { true }
-                            onSubmit = { this._onSubmit }>
+                        onDialogDismissed = { this._onDialogDismissed }
-                            { this.props.children }
+                        width = { this.props.width || 'medium' }>
-                        </form>
+                        <div>
-                    </div>
+                            <form
-                </ModalDialog>
+                                className = 'modal-dialog-form'
-            </div>
+                                id = 'modal-dialog-form'
+                                onSubmit = { this._onSubmit }>
+                                { this.props.children }
+                            </form>
+                        </div>
+                    </ModalDialog>
+                </div>
+            </AtlasKitThemeProvider>
         );
     }
 

react/features/device-selection/components/DeviceSelector.web.js

@@ -1,5 +1,5 @@
 import AKDropdownMenu from '@atlaskit/dropdown-menu';
-import ExpandIcon from '@atlaskit/icon/glyph/expand';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
@@ -116,7 +116,7 @@ class DeviceSelector extends Component {
                 <span className = 'device-selector-trigger-text'>
                     { triggerText }
                 </span>
-                <ExpandIcon
+                <ChevronDownIcon
                     label = 'expand'
                     size = 'large' />
             </div>

react/features/dial-out/components/DialOutNumbersForm.web.js

@@ -1,6 +1,6 @@
-import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
+import { DropdownMenuStateless as DropdownMenu } from '@atlaskit/dropdown-menu';
-import AKFieldText, { FieldText } from '@atlaskit/field-text';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
-import ExpandIcon from '@atlaskit/icon/glyph/expand';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -149,7 +149,7 @@ class DialOutNumbersForm extends Component {
                 { _dialOutCodes ? this._createDropdownMenu(
                         this._formatCountryCodes(_dialOutCodes)) : null }
                 <div className = 'dial-out-input'>
-                    <AKFieldText
+                    <TextField
                         autoFocus = { true }
                         isLabelHidden = { true }
                         label = { 'dial-out-input-field' }
@@ -164,7 +164,7 @@ class DialOutNumbersForm extends Component {
     }
 
     /**
-     * Creates a {@code StatelessDropdownMenu} instance.
+     * Creates a {@code DropdownMenu} instance.
      *
      * @param {Array} items - The content to display within the dropdown.
      * @returns {ReactElement}
@@ -174,14 +174,14 @@ class DialOutNumbersForm extends Component {
 
         return (
             <div className = 'dropdown-container'>
-                <StatelessDropdownMenu
+                <DropdownMenu
                     isOpen = { this.state.isDropdownOpen }
                     items = { [ { items } ] }
                     onItemActivated = { this._onSelect }
                     onOpenChange = { this._onOpenChange }
                     shouldFitContainer = { false }>
                     { this._createDropdownTrigger(dialCode, code) }
-                </StatelessDropdownMenu>
+                </DropdownMenu>
             </div>
         );
     }
@@ -203,10 +203,10 @@ class DialOutNumbersForm extends Component {
                     className = 'dial-out-flag-icon'
                     countryCode = { `${countryCode}` } />
                 { /**
-                   * FIXME Replace FieldText with AtlasKit Button when an issue
+                   * FIXME Replace TextField with AtlasKit Button when an issue
                    * with icons shrinking due to button text is fixed.
                    */ }
-                <FieldText
+                <TextField
                     className = 'input-control dial-out-code'
                     isLabelHidden = { true }
                     isReadOnly = { true }
@@ -215,9 +215,9 @@ class DialOutNumbersForm extends Component {
                     type = 'text'
                     value = { dialCode || '' } />
                 <span className = 'dropdown-trigger-icon'>
-                    <ExpandIcon
+                    <ChevronDownIcon
                         label = 'expand'
-                        size = 'medium' />
+                        size = 'small' />
                 </span>
             </div>
         );
@@ -225,7 +225,7 @@ class DialOutNumbersForm extends Component {
 
     /**
      * Transforms the passed in numbers object into an array of objects that can
-     * be parsed by {@code StatelessDropdownMenu}.
+     * be parsed by {@code DropdownMenu}.
      *
      * @param {Object} countryCodes - The list of country codes.
      * @private
@@ -259,8 +259,8 @@ class DialOutNumbersForm extends Component {
     }
 
     /**
-     * This is a no-op function used to stub out FieldText's onChange in order
+     * This is a no-op function used to stub out TextField's onChange in order
-     * to prevent FieldText from printing prop type validation errors. FieldText
+     * to prevent TextField from printing prop type validation errors. TextField
      * is used as a trigger for the dropdown in {@code DialOutNumbersForm} to
      * get the desired AtlasKit input look for the UI.
      *

react/features/display-name/components/DisplayNamePrompt.web.js

@@ -1,7 +1,7 @@
-import AKFieldText from '@atlaskit/field-text';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 
 import { Dialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
@@ -76,7 +76,7 @@ class DisplayNamePrompt extends Component {
                 onSubmit = { this._onSubmit }
                 titleKey = 'dialog.displayNameRequired'
                 width = 'small'>
-                <AKFieldText
+                <TextField
                     autoFocus = { true }
                     compact = { true }
                     label = { this.props.t('dialog.enterDisplayName') }

react/features/invite/components/AddPasswordForm.js

@@ -1,5 +1,5 @@
 import Button from '@atlaskit/button';
-import { FieldText } from '@atlaskit/field-text';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -106,7 +106,7 @@ class AddPasswordForm extends Component {
                 onSubmit = { this._onSubmit } >
                 <div className = 'form-control__container'>
                     <div className = 'form-control__input-container'>
-                        <FieldText
+                        <TextField
                             autoFocus = { true }
                             compact = { true }
                             id = 'newPasswordInput'
@@ -123,7 +123,6 @@ class AddPasswordForm extends Component {
                         id = 'addPasswordBtn'
                         isDisabled = { !this.state.password }
                         onClick = { this._onSubmit }
-                        shouldFitContainer = { true }
                         type = 'button'>
                         { t('dialog.add') }
                     </Button>

react/features/invite/components/DialInNumbersForm.js

@@ -1,7 +1,6 @@
 import Button from '@atlaskit/button';
-import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
+import DropdownMenu, {
-import { FieldText } from '@atlaskit/field-text';
+    DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
-import ExpandIcon from '@atlaskit/icon/glyph/expand';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -95,8 +94,6 @@ class DialInNumbersForm extends Component {
 
         // Bind event handlers so they are only bound once for every instance.
         this._onCopyClick = this._onCopyClick.bind(this);
-        this._onDropdownTriggerInputChange
-            = this._onDropdownTriggerInputChange.bind(this);
         this._onOpenChange = this._onOpenChange.bind(this);
         this._onSelect = this._onSelect.bind(this);
         this._setCopyElement = this._setCopyElement.bind(this);
@@ -147,7 +144,7 @@ class DialInNumbersForm extends Component {
             return null;
         }
 
-        const items = this._formatNumbers(numbers);
+        const items = this._renderDropdownItems(numbers);
 
         return (
             <div className = 'form-control dial-in-numbers'>
@@ -158,11 +155,12 @@ class DialInNumbersForm extends Component {
                     </span>
                 </label>
                 <div className = 'form-control__container'>
-                    { this._createDropdownMenu(items, selectedNumber.content) }
+                    <div className = 'form-control__input-container'>
+                        { this._createDropdownMenu(items, selectedNumber) }
+                    </div>
                     <Button
                         appearance = 'default'
                         onClick = { this._onCopyClick }
-                        shouldFitContainer = { true }
                         type = 'button'>
                         { t('dialog.copy') }
                     </Button>
@@ -178,7 +176,7 @@ class DialInNumbersForm extends Component {
     }
 
     /**
-     * Creates a {@code StatelessDropdownMenu} instance.
+     * Creates a {@code DropdownMenu} instance.
      *
      * @param {Array} items - The content to display within the dropdown.
      * @param {string} triggerText - The text to display within the
@@ -187,116 +185,32 @@ class DialInNumbersForm extends Component {
      */
     _createDropdownMenu(items, triggerText) {
         return (
-            <StatelessDropdownMenu
+            <DropdownMenu
                 isOpen = { this.state.isDropdownOpen }
-                items = { [ { items } ] }
-                onItemActivated = { this._onSelect }
                 onOpenChange = { this._onOpenChange }
-                shouldFitContainer = { true }>
+                shouldFitContainer = { true }
-                { this._createDropdownTrigger(triggerText) }
+                trigger = { triggerText || '' }
-            </StatelessDropdownMenu>
+                triggerButtonProps = {{
+                    className: 'dropdown-button-trigger',
+                    shouldFitContainer: true }}
+                triggerType = 'button'>
+                <DropdownItemGroup>
+                    { items }
+                </DropdownItemGroup>
+            </DropdownMenu>
         );
     }
 
     /**
-     * Creates a React {@code Component} with a readonly HTMLInputElement as a
+     * Formats the region and number string.
-     * trigger for displaying the dropdown menu. The {@code Component} will also
-     * display the currently selected number.
      *
-     * @param {string} triggerText - Text to display in the HTMLInputElement.
+     * @param {string} region - The region string.
+     * @param {string} number - The number string.
+     * @returns {string} - The new formatted string.
      * @private
-     * @returns {ReactElement}
      */
-    _createDropdownTrigger(triggerText) {
+    _formatRegionNumber(region, number) {
-        return (
+        return `${region}: ${number}`;
-            <div className = 'dial-in-numbers-trigger'>
-                <div className = 'form-control__input-container'>
-                    <FieldText
-                        compact = { true }
-                        isLabelHidden = { true }
-                        isReadOnly = { true }
-                        label = 'Select Dial-In Number'
-                        onChange = { this._onDropdownTriggerInputChange }
-                        ref = { this._setInput }
-                        shouldFitContainer = { true }
-                        type = 'text'
-                        value = { triggerText || '' } />
-                </div>
-                <span className = 'dial-in-numbers-trigger-icon'>
-                    <ExpandIcon
-                        label = 'expand'
-                        size = 'medium' />
-                </span>
-            </div>
-        );
-    }
-
-    /**
-     * Detects whether the response from dialInNumbersUrl returned an array or
-     * an object with dial-in numbers and calls the appropriate method to
-     * transform the numbers into the format expected by
-     * {@code StatelessDropdownMenu}.
-     *
-     * @param {Array<string>|Object} dialInNumbers - The numbers returned from
-     * requesting dialInNumbersUrl.
-     * @private
-     * @returns {Array<Object>}
-     */
-    _formatNumbers(dialInNumbers) {
-        if (Array.isArray(dialInNumbers)) {
-            return this._formatNumbersArray(dialInNumbers);
-        }
-
-        return this._formatNumbersObject(dialInNumbers);
-    }
-
-    /**
-     * Transforms the passed in numbers array into an array of objects that can
-     * be parsed by {@code StatelessDropdownMenu}.
-     *
-     * @param {Array<string>} dialInNumbers - An array with dial-in numbers to
-     * display and copy.
-     * @private
-     * @returns {Array<Object>}
-     */
-    _formatNumbersArray(dialInNumbers) {
-        return dialInNumbers.map(number => {
-            return {
-                content: number,
-                number
-            };
-        });
-    }
-
-    /**
-     * Transforms the passed in numbers object into an array of objects that can
-     * be parsed by {@code StatelessDropdownMenu}.
-     *
-     * @param {Object} dialInNumbers - The numbers object to parse. The
-     * expected format is an object with keys being the name of the country
-     * and the values being an array of numbers as strings.
-     * @private
-     * @returns {Array<Object>}
-     */
-    _formatNumbersObject(dialInNumbers) {
-        const phoneRegions = Object.keys(dialInNumbers);
-
-        if (!phoneRegions.length) {
-            return [];
-        }
-
-        const formattedNumbers = phoneRegions.map(region => {
-            const numbers = dialInNumbers[region];
-
-            return numbers.map(number => {
-                return {
-                    content: `${region}: ${number}`,
-                    number
-                };
-            });
-        });
-
-        return Array.prototype.concat(...formattedNumbers);
     }
 
     /**
@@ -313,7 +227,7 @@ class DialInNumbersForm extends Component {
         });
 
         const callNumber = t('invite.callNumber', {
-            number: this.state.selectedNumber.number
+            number: this.state.selectedNumber
         });
         const stepOne = `1) ${callNumber}`;
 
@@ -343,18 +257,6 @@ class DialInNumbersForm extends Component {
         }
     }
 
-    /**
-     * This is a no-op function used to stub out FieldText's onChange in order
-     * to prevent FieldText from printing prop type validation errors. FieldText
-     * is used as a trigger for the dropdown in {@code DialInNumbersForm} to
-     * get the desired AtlasKit input look for the UI.
-     *
-     * @returns {void}
-     */
-    _onDropdownTriggerInputChange() {
-        // Intentionally left empty.
-    }
-
     /**
      * Sets the internal state to either open or close the dropdown. If the
      * dropdown is disabled, the state will always be set to false.
@@ -380,10 +282,71 @@ class DialInNumbersForm extends Component {
     _onSelect(selection) {
         this.setState({
             isDropdownOpen: false,
-            selectedNumber: selection.item
+            selectedNumber: selection
         });
     }
 
+    /**
+     * Renders a DropDownItem for the given id and text.
+     *
+     * @param {string} id - The key identifier of the DropdownItem.
+     * @param {string} text - The text to display in the dropdown item.
+     * @returns {React.Component}
+     * @private
+     */
+    _renderDropDownItem(id, text) {
+        return (
+
+            /**
+             * Arrow functions are not allowed in props, but I leave this until
+             * I figure a better way to implement the same thing.
+             */
+            /* eslint-disable react/jsx-no-bind */
+            <DropdownItem
+                key = { id }
+                onClick = { () => this._onSelect(text || id) }>
+                { text }
+            </DropdownItem>
+            /* eslint-disable react/jsx-no-bind */
+        );
+    }
+
+    /**
+     * Detects whether the response from dialInNumbersUrl returned an array or
+     * an object with dial-in numbers and calls the appropriate method to
+     * transform the numbers into the format expected by
+     * {@code DropdownMenu}.
+     *
+     * @param {Array<string>|Object} dialInNumbers - The numbers returned from
+     * requesting dialInNumbersUrl.
+     * @private
+     * @returns {Array<Object>}
+     */
+    _renderDropdownItems(dialInNumbers) {
+        if (Array.isArray(dialInNumbers)) {
+            return dialInNumbers.map(number =>
+                this._renderDropDownItem(number)
+            );
+        }
+
+        const phoneRegions = Object.keys(dialInNumbers);
+
+        if (!phoneRegions.length) {
+            return [];
+        }
+
+        const dropdownItems = phoneRegions.map(region => {
+            const numbers = dialInNumbers[region];
+
+            return numbers.map(number =>
+                this._renderDropDownItem(number,
+                    this._formatRegionNumber(region, number))
+            );
+        });
+
+        return Array.prototype.concat(...dropdownItems);
+    }
+
     /**
      * Sets the internal reference to the DOM/HTML element backing the React
      * {@code Component} text area.
@@ -406,10 +369,18 @@ class DialInNumbersForm extends Component {
      * @returns {void}
      */
     _setDefaultNumber(dialInNumbers) {
-        const numbers = this._formatNumbers(dialInNumbers);
+        let number = '';
+
+        if (Array.isArray(dialInNumbers)) {
+            number = dialInNumbers[0];
+        } else if (Object.keys(dialInNumbers).length > 0) {
+            const region = Object.keys(dialInNumbers)[0];
+
+            number = this._formatRegionNumber(region, dialInNumbers[region]);
+        }
 
         this.setState({
-            selectedNumber: numbers[0]
+            selectedNumber: number
         });
     }
 }

react/features/invite/components/ShareLinkForm.js

@@ -1,5 +1,5 @@
 import Button from '@atlaskit/button';
-import { FieldText } from '@atlaskit/field-text';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
@@ -71,8 +71,7 @@ class ShareLinkForm extends Component {
                 </label>
                 <div className = 'form-control__container'>
                     <div className = 'form-control__input-container'>
-                        <FieldText
+                        <TextField
-                            compact = { true }
                             id = 'inviteLinkRef'
                             isLabelHidden = { true }
                             isReadOnly = { true }
@@ -86,7 +85,6 @@ class ShareLinkForm extends Component {
                     <Button
                         appearance = 'default'
                         onClick = { this._onClick }
-                        shouldFitContainer = { true }
                         type = 'button'>
                         { t('dialog.copy') }
                     </Button>
@@ -114,8 +112,8 @@ class ShareLinkForm extends Component {
     }
 
     /**
-     * This is a no-op function used to stub out FieldText's onChange in order
+     * This is a no-op function used to stub out TextField's onChange in order
-     * to prevent FieldText from printing prop type validation errors. FieldText
+     * to prevent TextField from printing prop type validation errors. TextField
      * is used as a trigger for the dropdown in {@code ShareLinkForm} to get the
      * desired AtlasKit input look for the UI.
      *

react/features/room-lock/components/PasswordRequiredPrompt.web.js

@@ -1,9 +1,8 @@
 // @flow
-
-import AKFieldText from '@atlaskit/field-text';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 
 import { setPassword } from '../../base/conference';
 import { Dialog } from '../../base/dialog';
@@ -75,7 +74,7 @@ class PasswordRequiredPrompt extends Component {
     _renderBody() {
         return (
             <div>
-                <AKFieldText
+                <TextField
                     autoFocus = { true }
                     compact = { true }
                     label = { this.props.t('dialog.passwordLabel') }

react/features/toolbox/components/ToolbarButton.web.js

@@ -1,14 +1,13 @@
 /* @flow */
 
-import AKInlineDialog from '@atlaskit/inline-dialog';
+import InlineDialog from '@atlaskit/inline-dialog';
-import { Tooltip } from '@atlaskit/tooltip';
+import Tooltip from '@atlaskit/tooltip';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 
 import { TOOLTIP_TO_POPUP_POSITION } from '../constants';
-import { isButtonEnabled } from '../functions';
 import StatelessToolbarButton from './StatelessToolbarButton';
 
 declare var APP: Object;
@@ -24,20 +23,6 @@ class ToolbarButton extends Component {
 
     _onClick: Function;
 
-    _onMouseOut: Function;
-
-    _onMouseOver: Function;
-
-    state: {
-
-        /**
-         * Whether or not the tooltip for the button should be displayed.
-         *
-         * @type {boolean}
-         */
-        showTooltip: boolean
-    }
-
     /**
      * Toolbar button component's property types.
      *
@@ -81,14 +66,8 @@ class ToolbarButton extends Component {
     constructor(props: Object) {
         super(props);
 
-        this.state = {
-            showTooltip: false
-        };
-
         // Bind methods to save the context
         this._onClick = this._onClick.bind(this);
-        this._onMouseOut = this._onMouseOut.bind(this);
-        this._onMouseOver = this._onMouseOver.bind(this);
     }
 
     /**
@@ -134,10 +113,7 @@ class ToolbarButton extends Component {
         const buttonComponent = ( // eslint-disable-line no-extra-parens
             <Tooltip
                 description = { button.tooltipText || t(button.tooltipKey) }
-                onMouseOut = { this._onMouseOut }
+                position = { tooltipPosition }>
-                onMouseOver = { this._onMouseOver }
-                position = { tooltipPosition }
-                visible = { this.state.showTooltip }>
                 <StatelessToolbarButton { ...props }>
                     { this.props.children }
                 </StatelessToolbarButton>
@@ -151,12 +127,12 @@ class ToolbarButton extends Component {
             const { dataAttr, dataInterpolate, position } = popupConfig;
 
             children = ( // eslint-disable-line no-extra-parens
-                <AKInlineDialog
+                <InlineDialog
                     content = { t(dataAttr, dataInterpolate) }
                     isOpen = { Boolean(popupConfig) }
                     position = { position }>
                     { buttonComponent }
-                </AKInlineDialog>
+                </InlineDialog>
             );
         }
 
@@ -176,7 +152,6 @@ class ToolbarButton extends Component {
      */
     _onClick(event) {
         this.props.onClick(event);
-        this.setState({ showTooltip: false });
     }
 
     /**
@@ -205,31 +180,6 @@ class ToolbarButton extends Component {
             });
     }
 
-    /**
-     * Hides any displayed tooltip.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onMouseOut(): void {
-        this.setState({ showTooltip: false });
-    }
-
-    /**
-     * Hides any displayed tooltip.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onMouseOver(): void {
-        const { button } = this.props;
-
-        this.setState({
-            showTooltip: isButtonEnabled(button.buttonName)
-                && !button.unclickable
-        });
-    }
-
     /**
      * Sets shortcut and tooltip for current toolbar button.
      *