Skip to content

Commit ee1890e

Browse files
committed
Selectmenu: use the _classes method.
Fixes #7053
1 parent 0f412e6 commit ee1890e

File tree

3 files changed

+47
-12
lines changed

3 files changed

+47
-12
lines changed

tests/unit/selectmenu/selectmenu_common.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
TestHelpers.commonWidgetTests( "selectmenu", {
22
defaults: {
33
appendTo: null,
4+
classes: {
5+
"ui-selectmenu-button": "",
6+
"ui-selectmenu-button-open": "ui-corner-top",
7+
"ui-selectmenu-button-closed": "ui-corner-all",
8+
"ui-selectmenu-text": null,
9+
"ui-selectmenu-menu": null,
10+
"ui-selectmenu-optgroup": null,
11+
"ui-selectmenu-open": null,
12+
},
413
disabled: null,
514
icons: {
615
button: "ui-icon-triangle-1-s"

tests/unit/selectmenu/selectmenu_core.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,24 @@
22

33
module( "selectmenu: core" );
44

5+
test( "markup structure", function() {
6+
var element = $( "#files" ).selectmenu(),
7+
button = element.selectmenu( "widget" ),
8+
menu = element.selectmenu( "menuWidget" );
9+
menuWrap = menu.parent();
10+
11+
expect( 7 );
12+
13+
ok( button.hasClass( "ui-selectmenu-button" ), "button is .ui-selectmenu-button" );
14+
ok( button.hasClass( "ui-selectmenu-button-closed" ), "button is .ui-selectmenu-button-closed" );
15+
ok( !button.hasClass( "ui-selectmenu-button-open" ), "button is not .ui-selectmenu-button-open" );
16+
ok( button.hasClass( "ui-widget" ), "button is .ui-widget" );
17+
ok( button.hasClass( "ui-state-default" ), "button is .ui-state-default" );
18+
19+
ok( menuWrap.hasClass( "ui-selectmenu-menu" ), "menu is .ui-selectmenu-menu" );
20+
ok( !menuWrap.hasClass( "ui-selectmenu-menu-open" ), "menu is not .ui-selectmenu-menu-open" );
21+
});
22+
523
asyncTest( "accessibility", function() {
624
var links,
725
element = $( "#speed" ).selectmenu(),

ui/selectmenu.js

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,15 @@ return $.widget( "ui.selectmenu", {
3131
defaultElement: "<select>",
3232
options: {
3333
appendTo: null,
34+
classes: {
35+
"ui-selectmenu-button": "",
36+
"ui-selectmenu-button-open": "ui-corner-top",
37+
"ui-selectmenu-button-closed": "ui-corner-all",
38+
"ui-selectmenu-text": null,
39+
"ui-selectmenu-menu": null,
40+
"ui-selectmenu-optgroup": null,
41+
"ui-selectmenu-open": null,
42+
},
3443
disabled: null,
3544
icons: {
3645
button: "ui-icon-triangle-1-s"
@@ -84,7 +93,7 @@ return $.widget( "ui.selectmenu", {
8493

8594
// Create button
8695
this.button = $( "<span>", {
87-
"class": "ui-selectmenu-button ui-widget ui-state-default ui-corner-all",
96+
"class": this._classes( "ui-selectmenu-button ui-selectmenu-button-closed" ) + " ui-widget ui-state-default",
8897
tabindex: tabindex || this.options.disabled ? -1 : 0,
8998
id: this.ids.button,
9099
role: "combobox",
@@ -101,7 +110,7 @@ return $.widget( "ui.selectmenu", {
101110
.prependTo( this.button );
102111

103112
this.buttonText = $( "<span>", {
104-
"class": "ui-selectmenu-text"
113+
"class": this._classes( "ui-selectmenu-text" )
105114
})
106115
.appendTo( this.button );
107116

@@ -133,14 +142,18 @@ return $.widget( "ui.selectmenu", {
133142

134143
// Wrap menu
135144
this.menuWrap = $( "<div>", {
136-
"class": "ui-selectmenu-menu ui-front"
145+
"class": this._classes( "ui-selectmenu-menu" ) + " ui-front"
137146
})
138147
.append( this.menu )
139148
.appendTo( this._appendTo() );
140149

141150
// Initialize menu widget
142151
this.menuInstance = this.menu
143152
.menu({
153+
// Adjust menu styles to dropdown
154+
classes: {
155+
"ui-menu": "ui-corner-bottom"
156+
},
144157
role: "listbox",
145158
select: function( event, ui ) {
146159
event.preventDefault();
@@ -164,11 +177,6 @@ return $.widget( "ui.selectmenu", {
164177
})
165178
.menu( "instance" );
166179

167-
// Adjust menu styles to dropdown
168-
this.menu
169-
.addClass( "ui-corner-bottom" )
170-
.removeClass( "ui-corner-all" );
171-
172180
// Don't close the menu on mouseleave
173181
this.menuInstance._off( this.menu, "mouseleave" );
174182

@@ -274,7 +282,7 @@ return $.widget( "ui.selectmenu", {
274282
$.each( items, function( index, item ) {
275283
if ( item.optgroup !== currentOptgroup ) {
276284
$( "<li>", {
277-
"class": "ui-selectmenu-optgroup ui-menu-divider" +
285+
"class": that._classes( "ui-selectmenu-optgroup" ) + " ui-menu-divider" +
278286
( item.element.parent( "optgroup" ).prop( "disabled" ) ?
279287
" ui-state-disabled" :
280288
"" ),
@@ -510,10 +518,10 @@ return $.widget( "ui.selectmenu", {
510518

511519
_toggleAttr: function() {
512520
this.button
513-
.toggleClass( "ui-corner-top", this.isOpen )
514-
.toggleClass( "ui-corner-all", !this.isOpen )
521+
.toggleClass( this._classes( "ui-selectmenu-button-open" ), this.isOpen )
522+
.toggleClass( this._classes( "ui-selectmenu-button-closed" ), !this.isOpen )
515523
.attr( "aria-expanded", this.isOpen );
516-
this.menuWrap.toggleClass( "ui-selectmenu-open", this.isOpen );
524+
this.menuWrap.toggleClass( this._classes( "ui-selectmenu-open" ), this.isOpen );
517525
this.menu.attr( "aria-hidden", !this.isOpen );
518526
},
519527

0 commit comments

Comments
 (0)