);
}
@@ -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.
*/ }
-
-
+ size = 'small' />
);
@@ -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
- * to prevent FieldText from printing prop type validation errors. FieldText
+ * This is a no-op function used to stub out TextField's onChange in order
+ * 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.
*
diff --git a/react/features/display-name/components/DisplayNamePrompt.web.js b/react/features/display-name/components/DisplayNamePrompt.web.js
index 62cef420d..ea51b7c9d 100644
--- a/react/features/display-name/components/DisplayNamePrompt.web.js
+++ b/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'>
-
-
{ t('dialog.add') }
diff --git a/react/features/invite/components/DialInNumbersForm.js b/react/features/invite/components/DialInNumbersForm.js
index daf703689..b9749b660 100644
--- a/react/features/invite/components/DialInNumbersForm.js
+++ b/react/features/invite/components/DialInNumbersForm.js
@@ -1,7 +1,6 @@
import Button from '@atlaskit/button';
-import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
-import { FieldText } from '@atlaskit/field-text';
-import ExpandIcon from '@atlaskit/icon/glyph/expand';
+import DropdownMenu, {
+ DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
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 (
@@ -158,11 +155,12 @@ class DialInNumbersForm extends Component {
@@ -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 (
-
- { this._createDropdownTrigger(triggerText) }
-
+ shouldFitContainer = { true }
+ trigger = { triggerText || '' }
+ triggerButtonProps = {{
+ className: 'dropdown-button-trigger',
+ shouldFitContainer: true }}
+ triggerType = 'button'>
+
+ { items }
+
+
);
}
/**
- * Creates a React {@code Component} with a readonly HTMLInputElement as a
- * trigger for displaying the dropdown menu. The {@code Component} will also
- * display the currently selected number.
+ * Formats the region and number string.
*
- * @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) {
- return (
-
-
-
-
-
-
-
-
- );
- }
-
- /**
- * 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|Object} dialInNumbers - The numbers returned from
- * requesting dialInNumbersUrl.
- * @private
- * @returns {Array