Merge pull request #1529 from virtuacoplenny/lenny/device-overflow-stopgap

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

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';
@@ -97,37 +96,29 @@ class DeviceSelector extends Component {
             defaultSelected,
             isDisabled: this.props.isDisabled,
             items,
-            placeholder: 'deviceSelection.selectADevice'
+            placeholder: this.props.t('deviceSelection.selectADevice')
         });
     }
 
     /**
-     * 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
-                className = 'device-selector-trigger'
-                iconAfter = { EXPAND_ICON }
-                iconBefore = { this._createDropdownIcon() }>
-                { buttonText }
-            </AKButton>
-        );
-    }
-
-    /**
-     * Creates a ReactComponent for displaying an icon.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _createDropdownIcon() {
-        return (
-            <span className = { `device-selector-icon ${this.props.icon}` } />
+            <div className = 'device-selector-trigger'>
+                <span
+                    className = { `device-selector-icon ${this.props.icon}` } />
+                <span className = 'device-selector-trigger-text'>
+                    { triggerText }
+                </span>
+                { EXPAND_ICON }
+            </div>
         );
     }
 
@@ -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>
         );