Controlgroup: Add "only" position to class generator functions

Fixes #14972
Closes gh-1711
This commit is contained in:
Alexander Schmitz 2016-05-18 11:48:47 -04:00
parent 3c860f95aa
commit 8a79fc8784
3 changed files with 80 additions and 3 deletions

View File

@ -58,6 +58,16 @@
<label class="ui-controlgroup-label">Label</label>
<button>Button with icon on the bottom</button>
</div>
<div class="controlgroup-single-select">
<select id="select-single">
<option>Fast</option>
<option>Medium</option>
<option>Slow</option>
</select>
</div>
<div class="controlgroup-single-button">
<button class="single-button">button</button>
</div>
</div>
</body>
</html>

View File

@ -100,4 +100,64 @@ QUnit.test( "_resolveClassesValues", function( assert ) {
assertSanatized( assert, "bar", "bar", "No corner classes" );
} );
QUnit.test( "Single controlgroup select - horizontal", function( assert ) {
assert.expect( 4 );
var group = $( ".controlgroup-single-select" ).controlgroup();
var select = group.find( ".ui-selectmenu-button" );
assert.hasClasses( select, "ui-corner-all" );
assert.lacksClasses( select,
"ui-corner-left ui-corner-right ui-corner-top ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
group.find( "select" ).selectmenu( "open" );
assert.hasClasses( select, "ui-corner-top" );
assert.lacksClasses( select,
"ui-corner-left ui-corner-right ui-corner-all ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
} );
QUnit.test( "Single controlgroup select - vertical", function( assert ) {
assert.expect( 4 );
var group = $( ".controlgroup-single-select" ).controlgroup( {
direction: "verticle"
} );
var select = group.find( ".ui-selectmenu-button" );
assert.hasClasses( select, "ui-corner-all" );
assert.lacksClasses( select,
"ui-corner-left ui-corner-right ui-corner-top ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
group.find( "select" ).selectmenu( "open" );
assert.hasClasses( select, "ui-corner-top" );
assert.lacksClasses( select,
"ui-corner-left ui-corner-right ui-corner-all ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
} );
QUnit.test( "Single controlgroup button - horizontal", function( assert ) {
assert.expect( 2 );
var group = $( ".controlgroup-single-button" ).controlgroup();
var button = group.find( "button" );
assert.hasClasses( button, "ui-corner-all" );
assert.lacksClasses( button,
"ui-corner-left ui-corner-right ui-corner-top ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
} );
QUnit.test( "Single controlgroup button - vertical", function( assert ) {
assert.expect( 2 );
var group = $( ".controlgroup-single-button" ).controlgroup( {
direction: "verticle"
} );
var button = group.find( "button" );
assert.hasClasses( button, "ui-corner-all" );
assert.lacksClasses( button,
"ui-corner-left ui-corner-right ui-corner-top ui-corner-left" +
" ui-corner-tr ui-corner-tl ui-corner-bl ui corner-br" );
} );
} );

View File

@ -152,7 +152,7 @@ return $.widget( "ui.controlgroup", {
},
_updateCornerClass: function( element, position ) {
var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right";
var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right ui-corner-all";
var add = this._buildSimpleOptions( position, "label" ).classes.label;
this._removeClass( element, null, remove );
@ -167,7 +167,8 @@ return $.widget( "ui.controlgroup", {
result.classes[ key ] = {
"middle": "",
"first": "ui-corner-" + ( direction ? "top" : "left" ),
"last": "ui-corner-" + ( direction ? "bottom" : "right" )
"last": "ui-corner-" + ( direction ? "bottom" : "right" ),
"only": "ui-corner-all"
}[ position ];
return result;
@ -206,6 +207,10 @@ return $.widget( "ui.controlgroup", {
last: {
"ui-selectmenu-button-open": direction ? "" : "ui-corner-tr",
"ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "bottom" : "right" )
},
only: {
"ui-selectmenu-button-open": "ui-corner-top",
"ui-selectmenu-button-closed": "ui-corner-all"
}
}[ position ]
@ -261,7 +266,9 @@ return $.widget( "ui.controlgroup", {
var instance = children[ value ]().data( "ui-controlgroup-data" );
if ( instance && that[ "_" + instance.widgetName + "Options" ] ) {
var options = that[ "_" + instance.widgetName + "Options" ]( value );
var options = that[ "_" + instance.widgetName + "Options" ](
children.length === 1 ? "only" : value
);
options.classes = that._resolveClassesValues( options.classes, instance );
instance.element[ instance.widgetName ]( options );
} else {