Selectmenu: use the _classes method.

Fixes #7053

tests/unit/selectmenu/selectmenu_common.js

@@ -1,6 +1,15 @@
 TestHelpers.commonWidgetTests( "selectmenu", {
 defaults: {
 appendTo: null,
+classes: {
+"ui-selectmenu-button": "",
+"ui-selectmenu-button-open": "ui-corner-top",
+"ui-selectmenu-button-closed": "ui-corner-all",
+"ui-selectmenu-text": null,
+"ui-selectmenu-menu": null,
+"ui-selectmenu-optgroup": null,
+"ui-selectmenu-open": null
+},
 disabled: null,
 icons: {
 button: "ui-icon-triangle-1-s"

tests/unit/selectmenu/selectmenu_core.js

@@ -2,6 +2,24 @@
 
 module( "selectmenu: core" );
 
+test( "markup structure", function() {
+var element = $( "#files" ).selectmenu(),
+button = element.selectmenu( "widget" ),
+menu = element.selectmenu( "menuWidget" ),
+menuWrap = menu.parent();
+
+expect( 7 );
+
+ok( button.hasClass( "ui-selectmenu-button" ), "button is .ui-selectmenu-button" );
+ok( button.hasClass( "ui-selectmenu-button-closed" ), "button is .ui-selectmenu-button-closed" );
+ok( !button.hasClass( "ui-selectmenu-button-open" ), "button is not .ui-selectmenu-button-open" );
+ok( button.hasClass( "ui-widget" ), "button is .ui-widget" );
+ok( button.hasClass( "ui-state-default" ), "button is .ui-state-default" );
+
+ok( menuWrap.hasClass( "ui-selectmenu-menu" ), "menu is .ui-selectmenu-menu" );
+ok( !menuWrap.hasClass( "ui-selectmenu-menu-open" ), "menu is not .ui-selectmenu-menu-open" );
+});
+
 asyncTest( "accessibility", function() {
 var wrappers, button, menu,
 element = $( "#speed" ).attr( "title", "A demo title" );

ui/selectmenu.js

@@ -31,6 +31,15 @@ return $.widget( "ui.selectmenu", {
 defaultElement: "<select>",
 options: {
 appendTo: null,
+classes: {
+"ui-selectmenu-button": "",
+"ui-selectmenu-button-open": "ui-corner-top",
+"ui-selectmenu-button-closed": "ui-corner-all",
+"ui-selectmenu-text": null,
+"ui-selectmenu-menu": null,
+"ui-selectmenu-optgroup": null,
+"ui-selectmenu-open": null
+},
 disabled: null,
 icons: {
 button: "ui-icon-triangle-1-s"
@@ -87,7 +96,7 @@ return $.widget( "ui.selectmenu", {
 
 // Create button
 this.button = $( "<span>", {
-"class": "ui-selectmenu-button ui-widget ui-state-default ui-corner-all",
+"class": this._classes( "ui-selectmenu-button ui-selectmenu-button-closed" ) + " ui-widget ui-state-default",
 tabindex: this.options.disabled ? -1 : 0,
 id: this.ids.button,
 role: "combobox",
@@ -134,14 +143,18 @@ return $.widget( "ui.selectmenu", {
 
 // Wrap menu
 this.menuWrap = $( "<div>", {
-"class": "ui-selectmenu-menu ui-front"
+"class": this._classes( "ui-selectmenu-menu" ) + " ui-front"
 })
 .append( this.menu )
 .appendTo( this._appendTo() );
 
 // Initialize menu widget
 this.menuInstance = this.menu
 .menu({
+// Adjust menu styles to dropdown
+classes: {
+"ui-menu": "ui-corner-bottom"
+},
 role: "listbox",
 select: function( event, ui ) {
 event.preventDefault();
@@ -171,11 +184,6 @@ return $.widget( "ui.selectmenu", {
 })
 .menu( "instance" );
 
-// Adjust menu styles to dropdown
-this.menu
-.addClass( "ui-corner-bottom" )
-.removeClass( "ui-corner-all" );
-
 // Don't close the menu on mouseleave
 this.menuInstance._off( this.menu, "mouseleave" );
 
@@ -283,7 +291,7 @@ return $.widget( "ui.selectmenu", {
 
 _renderButtonItem: function( item ) {
 var buttonItem = $( "<span>", {
-"class": "ui-selectmenu-text"
+"class": this._classes( "ui-selectmenu-text" )
 });
 this._setText( buttonItem, item.label );
 
@@ -297,7 +305,7 @@ return $.widget( "ui.selectmenu", {
 $.each( items, function( index, item ) {
 if ( item.optgroup !== currentOptgroup ) {
 $( "<li>", {
-"class": "ui-selectmenu-optgroup ui-menu-divider" +
+"class": that._classes( "ui-selectmenu-optgroup" ) + " ui-menu-divider" +
 ( item.element.parent( "optgroup" ).prop( "disabled" ) ?
 " ui-state-disabled" :
 "" ),
@@ -573,10 +581,10 @@ return $.widget( "ui.selectmenu", {
 
 _toggleAttr: function() {
 this.button
-.toggleClass( "ui-corner-top", this.isOpen )
-.toggleClass( "ui-corner-all", !this.isOpen )
+.toggleClass( this._classes( "ui-selectmenu-button-open" ), this.isOpen )
+.toggleClass( this._classes( "ui-selectmenu-button-closed" ), !this.isOpen )
 .attr( "aria-expanded", this.isOpen );
-this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen );
+this.menuWrap.toggleClass( this._classes( "ui-selectmenu-open" ), this.isOpen );
 this.menu.attr( "aria-hidden", !this.isOpen );
 },