From 17fc28b020367c3295a225f7d8a01b49ec70a0b5 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.h.kim@gmail.com>
Date: Thu, 20 Apr 2017 19:24:55 -0700
Subject: [PATCH] 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.
---
 .../device-selection/_device-selection.scss   | 33 +++++++++++++---
 package.json                                  |  2 +-
 .../components/DeviceSelector.js              | 38 ++++++++-----------
 3 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/css/modals/device-selection/_device-selection.scss b/css/modals/device-selection/_device-selection.scss
index d5efd7541..128975bf5 100644
--- a/css/modals/device-selection/_device-selection.scss
+++ b/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%;
         }
     }
 
diff --git a/package.json b/package.json
index 3437bab4b..f92acd217 100644
--- a/package.json
+++ b/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",
diff --git a/react/features/device-selection/components/DeviceSelector.js b/react/features/device-selection/components/DeviceSelector.js
index 827ae61c7..c4f98dfe1 100644
--- a/react/features/device-selection/components/DeviceSelector.js
+++ b/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
-                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>
         );