Checkboxradio: Deprecate option "mini"

This marks the occurrences of the option as deprecated, and moves processing of
the initial value of wrapperClass from _wrapper() to _setOptions(), so that
ui-mini will be applied if it's present in wrapperClass even if the mini option
is false.

Note that this requires the wrapperClass option to be processed after the mini
option in _setOptions().

Closes jquery-archivegh-7466
Fixes jquery-archivegh-7463

Author: Gabriel Schulhof

demos/checkboxradio-checkbox/index.php

@@ -42,11 +42,11 @@
 
 		<h2>Mini size</h2>
 
-		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a mini version. </p>
+		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>ui-mini</code> class to the element's <code>data-wrapper-class</code> attribute to create a mini version. </p>
 
 		<div data-demo-html="true">
 			<form>
-				<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true">
+				<input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-wrapper-class="ui-mini">
 				<label for="checkbox-mini-0">I agree</label>
 			</form>
 		</div><!--/demo-html -->
@@ -89,7 +89,7 @@
 
 		<h2>Icon position</h2>
 
-		<p>To swap the position of the check icon from the default position on the left, add the <code>data-iconpos="right"</code> attribute to the fieldset to create a mini version. </p>
+		<p>To swap the position of the check icon from the default position on the left, add the <code>data-iconpos="right"</code> attribute to the fieldset.</p>
 
 		<div data-demo-html="true">
 			<form>

demos/checkboxradio-radio/index.php

@@ -81,7 +81,7 @@
 
 		<h2>Mini size</h2>
 
-		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>data-mini="true"</code> attribute to the element to create a mini version. </p>
+		<p>For a more compact version that is useful in toolbars and tight spaces, add the <code>ui-mini</code> class to the element to create a mini version. </p>
 
 		<div data-demo-html="true">
 			<form>

demos/grids-buttons/index.php

@@ -85,18 +85,18 @@
 					<select id="grid-select-2" name="grid-select-2" data-shadow="false" data-mini="true">
 						<option>Select</option>
 						<option value="1">The 1st Option</option>
-						<option value="2">The 2nt Option</option>
+						<option value="2">The 2nd Option</option>
 						<option value="3">The 3rd Option</option>
 						<option value="4">The 4th Option</option>
 					</select>
 				</div>
 				<div class="ui-block-b">
 					<label for="grid-checkbox-2">Checkbox</label>
-					<input type="checkbox" id="grid-checkbox-2" name="grid-checkbox-2" data-mini="true">
+					<input type="checkbox" id="grid-checkbox-2" name="grid-checkbox-2" data-wrapper-class="mini">
 				</div>
 				<div class="ui-block-c">
 					<label for="grid-radio-2">Radio</label>
-					<input type="radio" id="grid-radio-2" name="grid-radio-2" data-mini="true">
+					<input type="radio" id="grid-radio-2" name="grid-radio-2" data-wrapper-class="mini">
 				</div>
 			</form>
         </div><!--/demo-html -->

js/widgets/forms/checkboxradio.js

@@ -26,6 +26,8 @@ $.widget( "mobile.checkboxradio", $.extend( {
 
 	options: {
 		theme: "inherit",
+
+		// Deprecated as of 1.5.0
 		mini: false,
 		wrapperClass: null,
 		enhanced: false,
@@ -60,6 +62,7 @@ $.widget( "mobile.checkboxradio", $.extend( {
 		o.iconpos = inheritAttr( input, "iconpos" ) ||
 			label.element.attr( "data-" + $.mobile.ns + "iconpos" ) || o.iconpos,
 
+		// Deprecated as of 1.5.0
 		// Establish options
 		o.mini = inheritAttr( input, "mini" ) || o.mini;
 
@@ -135,15 +138,16 @@ $.widget( "mobile.checkboxradio", $.extend( {
 		this._setOptions({
 			"theme": this.options.theme,
 			"iconpos": this.options.iconpos,
+			"wrapperClass": this.options.wrapperClass,
+
+			// Deprecated as of 1.5.0
 			"mini": this.options.mini
 		});
 
 	},
 
 	_wrapper: function() {
-		return $( "<div class='"  +
-			( this.options.wrapperClass ? this.options.wrapperClass : "" ) +
-			" ui-" + this.inputtype +
+		return $( "<div class='ui-" + this.inputtype +
 			( this.options.disabled ? " ui-state-disabled" : "" ) + "' ></div>" );
 	},
 
@@ -339,6 +343,8 @@ $.widget( "mobile.checkboxradio", $.extend( {
 			this.input.prop( "disabled", !!options.disabled );
 			outer.toggleClass( "ui-state-disabled", !!options.disabled );
 		}
+
+		// Deprecated as of 1.5.0
 		if ( options.mini !== undefined ) {
 			outer.toggleClass( "ui-mini", !!options.mini );
 		}

tests/unit/checkboxradio/checkboxradio_core.js

@@ -3,6 +3,16 @@
  */
 (function($){
 	module( 'jquery.mobile.forms.checkboxradio.js' );
+	test( "Checkbox is made mini when ui-mini is among wrapper classes", function() {
+		var widget = $( "#wrapper-class-mini" );
+
+		deepEqual( widget.checkboxradio( "option", "mini" ), false,
+			"Checkboxradio option mini is false" );
+		deepEqual( widget.parent().hasClass( "ui-mini" ),
+		true,
+		"Widget has class ui-mini" );
+	});
+
 	test( "Programmatic click on radio input correctly updates group", function() {
 		var first = $( "#programmatic-click-test input" ).eq( 0 ),
 			last = $( "#programmatic-click-test input" ).eq( 2 );

tests/unit/checkboxradio/index.html

@@ -18,7 +18,6 @@
 			],
 			[
 				"widgets/forms/checkboxradio",
-				"widgets/page" // Needed by the test suite
 			],
 			[
 				"checkboxradio_core.js"
@@ -40,6 +39,8 @@
 	<div data-nstest-role="page" data-nstest-theme="b">
 		<div data-nstest-role="content" id="the-content">
 
+			<label>Wrapper Class Mini<input type="checkbox" id="wrapper-class-mini" data-nstest-wrapper-class="ui-mini"></label>
+
 			<div id="programmatic-click-test">
 				<label>Radio 1<input type="radio" name="programmatic-click-test" checked></label>
 				<label>Radio 2<input type="radio" name="programmatic-click-test"></label>