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:
parent
607bef8d68
commit
17fc28b020
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue