Merge remote-tracking branch 'upstream/master'

js/jquery.mobile.forms.checkboxradio.js

@@ -16,15 +16,23 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 			//filter works though.
 			label = input.closest("form,fieldset,:jqmData(role='page')").find("label").filter('[for="' + input[0].id + '"]'),
 			inputtype = input.attr( "type" ),
-			checkedicon = "ui-icon-" + inputtype + "-on",
-			uncheckedicon = "ui-icon-" + inputtype + "-off";
+			checkedState = inputtype + "-on",
+			uncheckedState = inputtype + "-off",
+			icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState,
+			activeBtn = icon ? "" : " " + $.mobile.activeBtnClass,
+			checkedClass = "ui-"+ checkedState + activeBtn,
+			uncheckedClass = "ui-"+ uncheckedState,
+			checkedicon = "ui-icon-" + checkedState,
+			uncheckedicon = "ui-icon-" + uncheckedState;
 
 		if ( inputtype != "checkbox" && inputtype != "radio" ) { return; }
 
 		//expose for other methods
 		$.extend( this,{
 			label			: label,
 			inputtype		: inputtype,
+			checkedClass    : checkedClass,
+			uncheckedClass  : uncheckedClass,
 			checkedicon		: checkedicon,
 			uncheckedicon	: uncheckedicon
 		});
@@ -37,7 +45,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 		label
 			.buttonMarkup({
 				theme: this.options.theme,
-				icon: this.element.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedicon,
+				icon: icon,
 				shadow: false
 			});
 
@@ -133,11 +141,11 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 		// input[0].checked expando doesn't always report the proper value
 		// for checked='checked'
 		if ( $(input[0]).prop('checked') ) {
-			label.addClass( $.mobile.activeBtnClass );
+			label.addClass( this.checkedClass ).removeClass( this.uncheckedClass );
 			icon.addClass( this.checkedicon ).removeClass( this.uncheckedicon );
 
 		} else {
-			label.removeClass( $.mobile.activeBtnClass );
+			label.removeClass( this.checkedClass ).addClass( this.uncheckedClass );
 			icon.removeClass( this.checkedicon ).addClass( this.uncheckedicon );
 		}
 

tests/unit/checkboxradio/checkboxradio_core.js

@@ -2,87 +2,87 @@
  * mobile checkboxradio unit tests
  */
 (function($){
-	module('jquery.mobile.forms.checkboxradio.js');
+	module( 'jquery.mobile.forms.checkboxradio.js' );
 
 	test( "widget can be disabled and enabled", function(){
-		var input = $("#checkbox-1");
-		var button = input.parent().find(".ui-btn");
-
-		input.checkboxradio("disable");
-		input.checkboxradio("enable");
-		ok(!input.attr("disabled"), "start input as enabled");
-		ok(!input.parent().hasClass("ui-disabled"), "no disabled styles");
-		ok(!input.attr("checked"), "not checked before click");
-		button.trigger("click");
-		ok(input.attr("checked"), "checked after click");
-		ok(button.hasClass("ui-btn-active"), "active styles after click");
-		button.trigger("click");
-
-		input.checkboxradio("disable");
-		ok(input.attr("disabled"), "input disabled");
-		ok(input.parent().hasClass("ui-disabled"), "disabled styles");
-		ok(!input.attr("checked"), "not checked before click");
-		button.trigger("click");
-		ok(!input.attr("checked"), "not checked after click");
-		ok(!button.hasClass("ui-btn-active"), "no active styles after click");
+		var input = $( "#checkbox-1" ),
+			button = input.parent().find( ".ui-btn" );
+
+		input.checkboxradio( "disable" );
+		input.checkboxradio( "enable" );
+		ok( !input.attr( "disabled" ), "start input as enabled" );
+		ok( !input.parent().hasClass( "ui-disabled" ), "no disabled styles" );
+		ok( !input.attr( "checked" ), "not checked before click" );
+		button.trigger( "click" );
+		ok( input.attr( "checked" ), "checked after click" );
+		ok( button.hasClass( "ui-checkbox-on" ), "active styles after click" );
+		button.trigger( "click" );
+
+		input.checkboxradio( "disable" );
+		ok( input.attr( "disabled" ), "input disabled" );
+		ok( input.parent().hasClass( "ui-disabled" ), "disabled styles" );
+		ok( !input.attr( "checked" ), "not checked before click" );
+		button.trigger( "click" );
+		ok( !input.attr( "checked" ), "not checked after click" );
+		ok( !button.hasClass( "ui-checkbox-on" ), "no active styles after click" );
 	});
 
 	asyncTest( "change events fired on checkbox for both check and uncheck", function(){
-		var $checkbox = $("#checkbox-2"),
-				$checkboxLabel = $checkbox.parent().find(".ui-btn");
+		var $checkbox = $( "#checkbox-2" ),
+			$checkboxLabel = $checkbox.parent().find( ".ui-btn" );
 
-		$checkbox.unbind("change");
+		$checkbox.unbind( "change" );
 
 		expect( 2 );
 
 		$checkbox.change(function(){
-			ok(true, "change fired on click to check the box");
+			ok( true, "change fired on click to check the box" );
 		});
 
-		$checkboxLabel.trigger("click");
+		$checkboxLabel.trigger( "click" );
 
 		//test above will be triggered twice, and the start here once
-		$checkbox.change(function(){
+		$checkbox.change( function(){
 			start();
 		});
 
-		$checkboxLabel.trigger("click");
+		$checkboxLabel.trigger( "click" );
 	});
 
 	asyncTest( "radio button labels should update the active button class to last clicked and clear checked", function(){
-		var $radioBtns = $('#radio-active-btn-test input'),
-				singleActiveAndChecked = function(){
-					same($("#radio-active-btn-test .ui-btn-active").length, 1, "there should be only one active button");
-					same($("#radio-active-btn-test :checked").length, 1, "there should be only one checked");
-				};
+		var $radioBtns = $( '#radio-active-btn-test input' ),
+			singleActiveAndChecked = function(){
+				same( $( "#radio-active-btn-test .ui-radio-on" ).length, 1, "there should be only one active button" );
+				same( $( "#radio-active-btn-test :checked" ).length, 1, "there should be only one checked" );
+			};
 
 		$.testHelper.sequence([
 			function(){
-				$radioBtns.last().siblings('label').click();
+				$radioBtns.last().siblings( 'label' ).click();
 			},
 
 			function(){
-				ok($radioBtns.last().attr('checked'));
-				ok($radioBtns.last().siblings('label').hasClass('ui-btn-active'),
-					"last input label is an active button");
+				ok( $radioBtns.last().attr( 'checked' ) );
+				ok( $radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
+					"last input label is an active button" );
 
-				ok(!$radioBtns.first().attr('checked'));
-				ok(!$radioBtns.first().siblings('label').hasClass('ui-btn-active'),
-					"first input label is not active");
+				ok( !$radioBtns.first().attr( 'checked' ) );
+				ok( !$radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
+					"first input label is not active" );
 
 				singleActiveAndChecked();
 
-				$radioBtns.first().siblings('label').click();
+				$radioBtns.first().siblings( 'label' ).click();
 			},
 
 			function(){
-				ok($radioBtns.first().attr('checked'));
-				ok($radioBtns.first().siblings('label').hasClass('ui-btn-active'),
-					"first input label is an active button");
+				ok( $radioBtns.first().attr( 'checked' ));
+				ok( $radioBtns.first().siblings( 'label' ).hasClass( 'ui-radio-on' ),
+					"first input label is an active button" );
 
-				ok(!$radioBtns.last().attr('checked'));
-				ok(!$radioBtns.last().siblings('label').hasClass('ui-btn-active'),
-					"last input label is not active");
+				ok( !$radioBtns.last().attr( 'checked' ));
+				ok( !$radioBtns.last().siblings( 'label' ).hasClass( 'ui-radio-on' ),
+					"last input label is not active" );
 
 				singleActiveAndChecked();
 

themes/default/jquery.mobile.theme.css

@@ -819,14 +819,18 @@ a.ui-link-inherit {
 
 
 /* checks,radios */
+.ui-checkbox .ui-icon {
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
 .ui-icon-checkbox-off,
-.ui-icon-checkbox-on,
-.ui-icon-radio-off,
-.ui-icon-radio-on {
-	background-color: transparent;
-	-moz-border-radius: 0;
-	-webkit-border-radius: 0;
-	border-radius: 0;
+.ui-icon-radio-off {
+	background-color: transparent;	
+}
+.ui-checkbox-on .ui-icon,
+.ui-radio-on .ui-icon {
+	background-color: #4596ce; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
 }
 .ui-icon-searchfield {
 	background-image: url(images/icon-search-black.png);

themes/valencia/jquery.mobile.theme.css

@@ -618,7 +618,7 @@ a.ui-link-inherit {
   cursor: pointer;
   text-decoration: none;
   border: 1px solid       #FFBC19;
-  background:             #4596ce;
+  background:             #FFBC19;
   color:                  #222;
   text-shadow: 0 1px 0px  #eee;
   background-image: -moz-linear-gradient(top, 
@@ -830,14 +830,18 @@ a.ui-link-inherit {
 
 
 /* checks,radios */
+.ui-checkbox .ui-icon {
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
 .ui-icon-checkbox-off,
-.ui-icon-checkbox-on,
-.ui-icon-radio-off,
-.ui-icon-radio-on {
-	background-color: transparent;
-	-moz-border-radius: 0;
-	-webkit-border-radius: 0;
-	border-radius: 0;
+.ui-icon-radio-off {
+	background-color: transparent;	
+}
+.ui-checkbox-on .ui-icon,
+.ui-radio-on .ui-icon {
+	background-color: #FFBC19; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
 }
 .ui-icon-searchfield {
 	background-image: url(images/icon-search-black.png);