Controlgroup: Add "only" position to class generator functions

Fixes #14972
Closes gh-1711

diff --git a/tests/unit/controlgroup/controlgroup.html b/tests/unit/controlgroup/controlgroup.html
index 170676aa85a36330da3dd691897f28afcf59dd17..d90bf607c1a56fb52df50e8b374ec9e53b735f2a 100644 (file)
--- a/tests/unit/controlgroup/controlgroup.html
+++ b/tests/unit/controlgroup/controlgroup.html
@@ -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>

diff --git a/tests/unit/controlgroup/core.js b/tests/unit/controlgroup/core.js
index b32d829ed00e0257bd1b6634204a438f1ee60850..dff3b1b1230da161d910672bc2572d2161d144a8 100644 (file)
--- a/tests/unit/controlgroup/core.js
+++ b/tests/unit/controlgroup/core.js
@@ -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" );
+} );
+
 } );

diff --git a/ui/widgets/controlgroup.js b/ui/widgets/controlgroup.js
index a79491bfb7b56610b70d71d3b4650f7524d5d3c8..5d2bbba83741c2a6c5a781dca0e294f5c3e03df1 100644 (file)
--- a/ui/widgets/controlgroup.js
+++ b/ui/widgets/controlgroup.js
@@ -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 {