fix(device-selection): convert trigger element to a div

AtlasKit Dropdown was recently updated to support fitting the
width of its container. However, AtlasKit Button, the trigger
element currently used for the dropdowns, does not fit the width
of AtlasKit Dropdown and stll has text overflowing out of its
button when there is an iconBefore prop passed in. Instead of
using AtlasKit Button, use a div and mimic the button look. This
allows the "button" to fit the container width and can display
ellipsized text within itself.

css/modals/device-selection/_device-selection.scss

@@ -4,12 +4,6 @@
     .device-selectors {
         font-size: 14px;
 
-        /* ensure all child components do not exceed parent width */
-        button,
-        div {
-            max-width: 100%;
-        }
-
         > div {
             display: block;
             margin-bottom: 10px;
@@ -20,8 +14,35 @@
         }
 
         .device-selector-icon {
+            align-self: center;
             color: inherit;
             font-size: 20px;
+            margin-left: 3px;
+        }
+
+        /* device-selector-trigger stylings attempt to mimic AtlasKit button */
+        .device-selector-trigger {
+            background-color: rgba(9, 30, 66, 0.04);
+            border-radius: 3px;
+            color: #505f79;
+            display: flex;
+            height: 2.3em;
+            justify-content: space-between;
+            line-height: 2.3em;
+            overflow: hidden;
+            padding: 0 8px;
+
+            &:hover {
+                background-color: rgba(9,30,66,.08);
+            }
+        }
+
+        .device-selector-trigger-text {
+            overflow: hidden;
+            margin-left: 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
         }
     }
 

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@atlaskit/button": "1.0.3",
     "@atlaskit/button-group": "1.0.0",
-    "@atlaskit/dropdown-menu": "1.1.12",
+    "@atlaskit/dropdown-menu": "1.4.0",
     "@atlaskit/field-text": "2.0.3",
     "@atlaskit/icon": "6.0.0",
     "@atlaskit/modal-dialog": "1.2.4",

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

@@ -1,4 +1,3 @@
-import AKButton from '@atlaskit/button';
 import AKDropdownMenu from '@atlaskit/dropdown-menu';
 import ExpandIcon from '@atlaskit/icon/glyph/expand';
 import React, { Component } from 'react';
@@ -102,32 +101,24 @@ class DeviceSelector extends Component {
     }
 
     /**
-     * Creates an AtlasKit Button.
+     * Creates a React Element for displaying the passed in text surrounded by
+     * two icons. The left icon is the icon class passed in through props and
+     * the right icon is AtlasKit ExpandIcon.
      *
-     * @param {string} buttonText - The text to display within the button.
+     * @param {string} triggerText - The text to display within the element.
      * @private
      * @returns {ReactElement}
      */
-    _createDropdownTrigger(buttonText) {
+    _createDropdownTrigger(triggerText) {
         return (
-            <AKButton
+            <div className = 'device-selector-trigger'>
-                className = 'device-selector-trigger'
+                <span
-                iconAfter = { EXPAND_ICON }
+                    className = { `device-selector-icon ${this.props.icon}` } />
-                iconBefore = { this._createDropdownIcon() }>
+                <span className = 'device-selector-trigger-text'>
-                { buttonText }
+                    { triggerText }
-            </AKButton>
+                </span>
-        );
+                { EXPAND_ICON }
-    }
+            </div>
-
-    /**
-     * Creates a ReactComponent for displaying an icon.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _createDropdownIcon() {
-        return (
-            <span className = { `device-selector-icon ${this.props.icon}` } />
         );
     }
 
@@ -171,7 +162,8 @@ class DeviceSelector extends Component {
                 items = { [ { items: options.items || [] } ] }
                 noMatchesFound
                     = { this.props.t('deviceSelection.noOtherDevices') }
-                onItemActivated = { this._onSelect }>
+                onItemActivated = { this._onSelect }
+                shouldFitContainer = { true }>
                 { this._createDropdownTrigger(triggerText) }
             </AKDropdownMenu>
         );