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.
This commit is contained in:
Leonard Kim 2017-04-20 19:24:55 -07:00
parent 607bef8d68
commit 17fc28b020
3 changed files with 43 additions and 30 deletions

View File

@ -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%;
}
}

View File

@ -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",

View File

@ -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>
);