Selectmenu: update to use button css

This ensures consistency between different form elements

Author: arschmitz

tests/unit/selectmenu/selectmenu.html

@@ -12,7 +12,7 @@
 	<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
 	<script>
 	TestHelpers.loadResources({
-		css: [ "core", "menu" , "selectmenu" ],
+		css: [ "core", "menu" , "selectmenu", "button" ],
 		js: [
 			"ui/core.js",
 			"ui/widget.js",

tests/unit/selectmenu/selectmenu_core.js

@@ -13,6 +13,7 @@ test( "markup structure", function( assert ) {
 	assert.hasClasses( button,
 		"ui-selectmenu-button ui-selectmenu-button-closed ui-widget" );
 	assert.lacksClasses( button, "ui-selectmenu-button-open" );
+	assert.lacksClasses( button, "ui-selectmenu-open" );
 	assert.hasClasses( menuWrap, "ui-selectmenu-menu" );
 	assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" );
 });
@@ -86,7 +87,7 @@ test( "_renderButtonItem()", function() {
 	element.selectmenu( "refresh" );
 	option = element.find( "option:selected" );
 	equal(
-		option.text() + element[ 0 ].selectedIndex,
+		" " + option.text() + element[ 0 ].selectedIndex,
 		button.text(),
 		"refresh: button item text"
 	);
@@ -95,7 +96,7 @@ test( "_renderButtonItem()", function() {
 	menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" );
 	option = element.find( "option" ).last();
 	equal(
-		option.text() + element[ 0 ].selectedIndex,
+		" " + option.text() + element[ 0 ].selectedIndex,
 		button.text(),
 		"click: button item text"
 	);
@@ -143,7 +144,7 @@ $.each([
 				selected.val() ,
 				"original select state"
 			);
-			equal( button.text(), selected.text(), "button text" );
+			equal( button.text(), " " + selected.text(), "button text" );
 			start();
 		});
 	});
@@ -178,7 +179,7 @@ $.each([
 				selected.val(),
 				"original select state"
 			);
-			equal( button.text(), selected.text(), "button text" );
+			equal( button.text(), " " + selected.text(), "button text" );
 			start();
 		}, 1 );
 	});
@@ -219,7 +220,7 @@ $.each([
 					"button aria-activedescendant" );
 				equal( element.find( "option:selected" ).val(), options.eq( 1 ).val() ,
 					"original select state" );
-				equal( button.text(), options.eq( 1 ).text(), "button text" );
+				equal( button.text(), " " + options.eq( 1 ).text(), "button text" );
 				start();
 			});
 		});

tests/unit/selectmenu/selectmenu_methods.js

@@ -78,21 +78,21 @@ asyncTest( "refresh - change selected option", function() {
 	var element = $( "#speed" ).selectmenu(),
 		button = element.selectmenu( "widget" );
 
-	equal( element.find( "option:selected" ).text(), button.text(), "button text after init" );
+	equal( " " + element.find( "option:selected" ).text(), button.text(), "button text after init" );
 
 	button.simulate( "focus" );
 	setTimeout(function() {
-		equal( element.find( "option:selected" ).text(), button.text(), "button text after focus" );
+		equal( " " + element.find( "option:selected" ).text(), button.text(), "button text after focus" );
 
 		element[ 0 ].selectedIndex = 0;
 		element.selectmenu( "refresh" );
-		equal( element.find( "option:selected" ).text(), button.text(),
+		equal( " " + element.find( "option:selected" ).text(), button.text(),
 			"button text after changing selected option" );
 
 		element.find( "option" ).prop( "selected", false );
 		element.append( "<option selected value=\"selected_option\">Selected option</option>" );
 		element.selectmenu( "refresh" );
-		equal( "Selected option", button.text(), "button text after adding selected option" );
+		equal( " Selected option", button.text(), "button text after adding selected option" );
 
 		start();
 	});
@@ -177,7 +177,7 @@ test( "widget and menuWidget", function( assert ) {
 		menu = element.selectmenu( "menuWidget" );
 
 	equal( button.length, 1, "button: one element" );
-	assert.hasClasses( button, "ui-selectmenu-button" );
+	assert.hasClasses( button, "ui-button" );
 
 	equal( menu.length, 1, "Menu Widget: one element" );
 	ok( menu.is( "ul.ui-menu" ), "Menu Widget: element and class" );

themes/base/selectmenu.css

@@ -33,27 +33,10 @@
 .ui-selectmenu-open {
 	display: block;
 }
-.ui-selectmenu-button {
-	display: inline-block;
-	overflow: hidden;
-	position: relative;
-	text-decoration: none;
-	cursor: pointer;
-	width: 14em;
-}
-.ui-selectmenu-button span.ui-icon {
-	right: 0.5em;
-	left: auto;
-	margin-top: -8px;
-	position: absolute;
-	top: 50%;
-}
-.ui-selectmenu-button span.ui-selectmenu-text {
+.ui-selectmenu-button.ui-button {
 	text-align: left;
-	padding: 0.4em 2.1em 0.4em 1em;
-	display: block;
-	line-height: 1.4;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	width: 14em;
 }

ui/selectmenu.js

@@ -82,7 +82,7 @@ return $.widget( "ui.selectmenu", {
 	},
 
 	_drawButton: function() {
-		var icon,
+		var icon, space,
 			that = this,
 			item = this._parseOption(
 				this.element.find( "option:selected" ),
@@ -115,10 +115,13 @@ return $.widget( "ui.selectmenu", {
 			.insertAfter( this.element );
 
 		this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
-			"ui-widget ui-state-default" );
+			"ui-button ui-widget" );
 
 		icon = $( "<span>" ).prependTo( this.button );
+		space = $( "<span> </span>" );
+		this._addClass( space, "ui-selectmenu-button-space" );
 		this._addClass( icon, null, "ui-icon " + this.options.icons.button );
+		icon.after( space );
 
 		this.buttonItem = this._renderButtonItem( item )
 			.appendTo( this.button );
@@ -136,8 +139,6 @@ return $.widget( "ui.selectmenu", {
 				that._refreshMenu();
 			}
 		} );
-		this._hoverable( this.button );
-		this._focusable( this.button );
 	},
 
 	_drawMenu: function() {
@@ -603,7 +604,7 @@ return $.widget( "ui.selectmenu", {
 		// we always remove classes first and add them second, otherwise if both classes have the
 		// same theme class, it will be removed after we add it.
 		this._removeClass( this.button, "ui-selectmenu-button-" +
-				( this.isOpen ? "closed" : "open" ) )
+			( this.isOpen ? "closed" : "open" ) )
 			._addClass( this.button, "ui-selectmenu-button-" +
 				( this.isOpen ? "open" : "closed" ) )
 			._toggleClass( this.menuWrap, "ui-selectmenu-open", null, this.isOpen );