Controlgroup: Fix rendering of labels

Fixes #14967
Closes gh-1703

Author: arschmitz

demos/controlgroup/default.html

@@ -75,7 +75,7 @@ <h1>Controlgroup</h1>
 			<input type="checkbox" name="insurance" id="insurance-v">
 			<label for="vertical-spinner" class="ui-controlgroup-label"># of cars</label>
 			<input id="vertical-spinner" class="ui-spinner-input">
-			<button>Book Now!</button>
+			<button id="book">Book Now!</button>
 		</div>
 	</fieldset>
 </div>

tests/unit/controlgroup/controlgroup.html

@@ -55,6 +55,7 @@
 			<option>Medium</option>
 			<option>Slow</option>
 		</select>
+		<label class="ui-controlgroup-label">Label</label>
 		<button>Button with icon on the bottom</button>
 	</div>
 </div>

tests/unit/controlgroup/core.js

@@ -92,12 +92,12 @@ var assertSanatized = function( assert, initClasses, expectedClasses, message )
 
 QUnit.test( "_resolveClassesValues", function( assert ) {
 	assert.expect( 6 );
-	assertSanatized( assert, "bar ui-corner-bottom", "bar", "Single Corner Class Removed end" );
-	assertSanatized( assert, "ui-corner-bottom bar", "bar", "Single Corner Class Removed beginning" );
-	assertSanatized( assert, "bar ui-corner-bottom ui-corner-left", "bar", "Multiple Corner Class Removed end" );
-	assertSanatized( assert, "ui-corner-bottom ui-corner-left bar", "bar", "Multiple Corner Class Removed beginning" );
-	assertSanatized( assert, "bar ui-corner-bottom ui-corner-left foo", "bar foo", "Multiple Corner Class Removed Middle" );
-	assertSanatized( assert, "bar", "bar", "No corner Class" );
+	assertSanatized( assert, "bar ui-corner-bottom", "bar", "Single corner class removed end" );
+	assertSanatized( assert, "ui-corner-bottom bar", "bar", "Single corner class removed beginning" );
+	assertSanatized( assert, "bar ui-corner-bottom ui-corner-left", "bar", "Multiple corner classes removed end" );
+	assertSanatized( assert, "ui-corner-bottom ui-corner-left bar", "bar", "Multiple corner classes removed beginning" );
+	assertSanatized( assert, "bar ui-corner-bottom ui-corner-left foo", "bar foo", "Multiple corner class removed middle" );
+	assertSanatized( assert, "bar", "bar", "No corner classes" );
 } );
 
 } );

tests/unit/controlgroup/methods.js

@@ -177,4 +177,12 @@ QUnit.test( "Child Classes Option: refresh", function( assert ) {
 	assert.hasClasses( selectmenu.selectmenu( "widget" ), "test-class" );
 } );
 
+QUnit.test( "Controlgroup Label: refresh", function( assert ) {
+	assert.expect( 1 );
+	var controlgroup = $( ".controlgroup-refresh" ).controlgroup();
+	controlgroup.controlgroup( "refresh" );
+	assert.strictEqual( controlgroup.find( ".ui-controlgroup-label-contents" ).length, 1,
+		"Controlgroup label does not re-wrap on refresh" );
+} );
+
 } );

ui/widgets/controlgroup.js

@@ -30,7 +30,7 @@
 		factory( jQuery );
 	}
 }( function( $ ) {
-var removeClassRegex = /ui-corner-([a-z]){2,6}/g;
+var controlgroupCornerRegex = /ui-corner-([a-z]){2,6}/g;
 
 return $.widget( "ui.controlgroup", {
 	version: "@VERSION",
@@ -87,7 +87,12 @@ return $.widget( "ui.controlgroup", {
 			if ( widget === "controlgroupLabel" ) {
 				labels = that.element.find( selector );
 				labels.each( function() {
-					$( this ).contents()
+					var element = $( this );
+
+					if ( element.children( ".ui-controlgroup-label-contents" ).length ) {
+						return;
+					}
+					element.contents()
 						.wrapAll( "<span class='ui-controlgroup-label-contents'></span>" );
 				} );
 				that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
@@ -210,8 +215,8 @@ return $.widget( "ui.controlgroup", {
 	_resolveClassesValues: function( classes, instance ) {
 		$.each( classes, function( key ) {
 			var current = instance.options.classes[ key ] || "";
-			current = current.replace( removeClassRegex, "" ).trim();
-			classes[ key ] = ( current + " " + classes[ key ] ).replace( / +/g, " " );
+			current = current.replace( controlgroupCornerRegex, "" ).trim();
+			classes[ key ] = ( current + " " + classes[ key ] ).replace( /\s+/g, " " );
 		} );
 		return classes;
 	},