Controlgroup: Fixes for spinner

arschmitz · arschmitz · commit 50a7a3d6a9e4 · 2015-10-08T14:02:47.000-04:00
diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html
@@ -26,15 +26,13 @@
 		$( ".controlgroup-vertical" ).controlgroup({
 			"direction": "vertical"
 		});
-		$( ".button" ).button();
 	</script>
 </head>
 <body>
 <div class="widget">
 	<h1>Controlgroup</h1>
 	<fieldset>
 		<legend>Rental Car</legend>
-		<button class="button">button</button>
 		<div class="controlgroup">
 			<select id="car-type">
 				<option>Compact car</option>
diff --git a/themes/base/controlgroup.css b/themes/base/controlgroup.css
@@ -33,8 +33,10 @@
 	box-sizing: border-box;
 }
 .ui-controlgroup .ui-controlgroup-label {
-	font-size: .83em;
-	padding: .6em 1em;
+	padding: .4em 1em;
+}
+.ui-controlgroup .ui-controlgroup-label span {
+	font-size: 80%;
 }
 .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
 	border-left: none;
@@ -45,3 +47,23 @@
 .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
 	border-right: none;
 }
+.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
+	border-bottom: none;
+}
+
+/* Spinner specific style fixes */
+.ui-controlgroup-vertical .ui-spinner {
+	padding-right: .4em;
+}
+.ui-controlgroup-vertical .ui-spinner-input {
+	margin: .4em;
+	padding: 0;
+
+	/* Support IE8, Android < 4.4 */
+	width: 85%;
+	width: calc( 100% - 22px );
+}
+.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
+	border-top-style: solid;
+}
+
diff --git a/ui/widgets/controlgroup.js b/ui/widgets/controlgroup.js
@@ -97,6 +97,9 @@ return $.widget( "ui.controlgroup", {
 				} );
 			} else if ( selector && widget === "controlgroupLabel" ) {
 				labels = that.element.find( selector );
+				labels.each( function() {
+					$( this ).contents().wrapAll( "<span class='ui-controlgroup-label-contents'></span>" );
+				} );
 				that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
 				Array.prototype.push.apply( childWidgets, labels.get() );
 			}
@@ -117,9 +120,9 @@ return $.widget( "ui.controlgroup", {
 	},
 
 	_updateCornerClass: function( element, position ) {
-		var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right",
-			add =
-				this._buildSimpleOptions( position, this.options.direction, "label" ).classes.label;
+		var direction = this.options.direction === "vertical"
+			remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right",
+			add = this._buildSimpleOptions( position, direction, "label" ).classes.label;
 
 		this._removeClass( element, null, remove );
 		this._addClass( element, null, add );
@@ -219,7 +222,7 @@ return $.widget( "ui.controlgroup", {
 			$.each( [ "first", "last" ], function( index, value ) {
 				var instance = children[ value ]().data( "ui-controlgroup-data" );
 
-				if ( that[ "_" + instance.widgetName + "_options" ] ) {
+				if ( instance && that[ "_" + instance.widgetName + "_options" ] ) {
 					instance.element[ instance.widgetName ](
 						that[ "_" + instance.widgetName + "_options" ](
 							value,
