Selectmenu: Fixed selectmenu icon float right

Also removes the icon space as its not needed with a floated icon

Fixes #14914
Closes gh-1671
This commit is contained in:
Alexander Schmitz 2016-02-10 11:31:03 -05:00
parent 8564641fb8
commit 20466d5027
3 changed files with 13 additions and 8 deletions

View File

@ -6,18 +6,22 @@ define( [
module( "selectmenu: core" ); module( "selectmenu: core" );
test( "markup structure", function( assert ) { test( "markup structure", function( assert ) {
expect( 4 ); expect( 7 );
var element = $( "#files" ).selectmenu(), var element = $( "#files" ).selectmenu(),
button = element.selectmenu( "widget" ), button = element.selectmenu( "widget" ),
icon = button.find( ".ui-icon" ),
menu = element.selectmenu( "menuWidget" ), menu = element.selectmenu( "menuWidget" ),
menuWrap = menu.parent(); menuWrap = menu.parent();
assert.strictEqual( icon.length, 1, "Exactly one icon exists" );
assert.hasClasses( icon, "ui-selectmenu-icon" );
assert.hasClasses( button, assert.hasClasses( button,
"ui-selectmenu-button ui-selectmenu-button-closed ui-widget" ); "ui-selectmenu-button ui-selectmenu-button-closed ui-widget" );
assert.lacksClasses( button, "ui-selectmenu-button-open ui-selectmenu-open" ); assert.lacksClasses( button, "ui-selectmenu-button-open ui-selectmenu-open" );
assert.hasClasses( menuWrap, "ui-selectmenu-menu" ); assert.hasClasses( menuWrap, "ui-selectmenu-menu" );
assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" ); assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" );
assert.strictEqual( icon[ 0 ], button.children().last()[ 0 ], "Icon is last child of button" );
} ); } );
asyncTest( "accessibility", function() { asyncTest( "accessibility", function() {

View File

@ -40,3 +40,7 @@
white-space: nowrap; white-space: nowrap;
width: 14em; width: 14em;
} }
.ui-selectmenu-icon.ui-icon {
float: right;
margin-top: 0;
}

View File

@ -84,7 +84,7 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
}, },
_drawButton: function() { _drawButton: function() {
var icon, space, var icon,
that = this, that = this,
item = this._parseOption( item = this._parseOption(
this.element.find( "option:selected" ), this.element.find( "option:selected" ),
@ -119,15 +119,12 @@ return $.widget( "ui.selectmenu", [ $.ui.formResetMixin, {
this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed", this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
"ui-button ui-widget" ); "ui-button ui-widget" );
icon = $( "<span>" ).prependTo( this.button );
space = $( "<span> </span>" );
this._addClass( space, "ui-selectmenu-icon-space" );
this._addClass( icon, null, "ui-icon " + this.options.icons.button );
icon.after( space );
this.buttonItem = this._renderButtonItem( item ) this.buttonItem = this._renderButtonItem( item )
.appendTo( this.button ); .appendTo( this.button );
icon = $( "<span>" ).appendTo( this.button );
this._addClass( icon, "ui-selectmenu-icon", "ui-icon " + this.options.icons.button );
if ( this.options.width !== false ) { if ( this.options.width !== false ) {
this._resizeButton(); this._resizeButton();
} }