Checkboxradio: change all classes to be prefixed with ui-checkboxradio

And simplify css

Author: arschmitz

tests/unit/checkboxradio/checkboxradio_common.js

@@ -3,16 +3,13 @@ TestHelpers.commonWidgetTests( "checkboxradio", {
 	defaults: {
 		disabled: null,
 		label: null,
-		icon: false,
+		icon: true,
 		classes: {
-			"ui-checkboxradio": null,
-			"ui-checkbox": null,
-			"ui-radio": null,
-			"ui-checkbox-label": "ui-corner-all",
-			"ui-radio-label": "ui-corner-all",
+			"ui-checkboxradio": "",
+			"ui-checkboxradio-label": "ui-corner-all",
+			"ui-checkboxradio-radio-label": "",
 			"ui-checkboxradio-icon": "ui-corner-all",
-			"ui-radio-checked": null,
-			"ui-checkbox-checked": null
+			"ui-checkboxradio-checked": ""
 		},
 
 		// Callbacks

tests/unit/checkboxradio/checkboxradio_core.js

@@ -14,7 +14,8 @@ test("Checkbox", function() {
 	ok( !label.hasClass(".ui-button)") );
 	input.checkboxradio();
 	strictEqual( input.attr( "class" ), "ui-helper-hidden-accessible ui-checkboxradio" );
-	strictEqual( label.attr( "class" ), "ui-button ui-widget ui-checkbox-label ui-corner-all" );
+	strictEqual( label.attr( "class" ), "ui-icon-beginning ui-button ui-widget" +
+		" ui-checkboxradio-label ui-corner-all" );
 });
 
 test("Radios", function() {

tests/unit/checkboxradio/checkboxradio_methods.js

@@ -21,7 +21,7 @@ module( "Checkboxradio: methods" );
 		strictEqual( widget.find( ".ui-icon" ).length, 1, "Icon is recreated on refresh" );
 		checkbox.prop( "checked", true );
 		checkbox.checkboxradio( "refresh" );
-		strictEqual( widget.hasClass( "ui-checkbox-checked" ), true,
+		strictEqual( widget.hasClass( "ui-checkboxradio-checked" ), true,
 			"State updated based on checked property" );
 	});
 
@@ -82,7 +82,7 @@ module( "Checkboxradio: methods" );
 		strictEqual( widget.find( ".ui-icon" ).length, 1, "Icon is recreated on refresh" );
 		radio.prop( "checked", true );
 		radio.checkboxradio( "refresh" );
-		strictEqual( widget.hasClass( "ui-radio-checked" ), true,
+		strictEqual( widget.hasClass( "ui-checkboxradio-checked" ), true,
 			"State updated based on checked property" );
 	});
 

tests/unit/checkboxradio/checkboxradio_options.js

@@ -60,7 +60,7 @@ module( "Checkboxradio: checkbox: options" );
 
 		expect( 9 );
 
-		checkbox.checkboxradio();
+		checkbox.checkboxradio({ icon: false });
 
 		widget = checkbox.checkboxradio( "widget" );
 
@@ -75,8 +75,8 @@ module( "Checkboxradio: checkbox: options" );
 
 		strictEqual( widget.find( "span" ).length, 1,
 			"Label contains a span when created with icon:true" );
-		strictEqual( widget.find( "span" ).attr( "class" ),
-			"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank",
+		strictEqual( widget.find( "span" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." +
+			"ui-icon-background.ui-icon-blank" ), true,
 			"Icon span has proper classes when created not checked" );
 
 		checkbox.checkboxradio( "destroy" ).prop( "checked", true );
@@ -85,8 +85,8 @@ module( "Checkboxradio: checkbox: options" );
 			icon: true
 		});
 
-		strictEqual( widget.find( "span" ).attr( "class" ),
-			"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check",
+		strictEqual( widget.find( "span" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." +
+			"ui-icon-background.ui-icon-check" ), true,
 			"Icon span has proper classes when created checked" );
 
 		checkbox.checkboxradio( "option", "icon", false );
@@ -96,8 +96,8 @@ module( "Checkboxradio: checkbox: options" );
 
 		checkbox.checkboxradio( "option", "icon", true );
 
-		strictEqual( widget.find( "span" ).attr( "class" ),
-			"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check",
+		strictEqual( widget.find( "span" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." +
+			"ui-icon-background.ui-icon-check" ), true,
 			"Icon span has proper classes when option set to true and :is( checked )" );
 
 		checkbox.prop( "checked", false ).checkboxradio( "refresh" );
@@ -108,8 +108,8 @@ module( "Checkboxradio: checkbox: options" );
 
 		checkbox.checkboxradio( "option", "icon", true );
 
-		strictEqual( widget.find( "span" ).attr( "class" ),
-			"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank",
+		strictEqual( widget.find( "span" ).is( ".ui-checkboxradio-icon.ui-corner-all.ui-icon." +
+			"ui-icon-background.ui-icon-blank" ), true,
 			"Icon span has proper classes when option set to true and not checked" );
 
 		checkbox.checkboxradio( "destroy" );
@@ -118,6 +118,13 @@ module( "Checkboxradio: checkbox: options" );
 			"Label does not contain a span after destroy when icon true" );
 
 	});
+	function getLabelText( label, element ) {
+		var text = "";
+		label.contents().not( element ).each( function() {
+			text += ( this.nodeType === 3 ) ? $( this ).text() : "";
+		});
+		return text;
+	}
 	test( "options: label", function() {
 		var checkbox = $( "#checkbox-option-label" ),
 			widget;
@@ -130,7 +137,7 @@ module( "Checkboxradio: checkbox: options" );
 
 		strictEqual( checkbox.checkboxradio( "option", "label" ),
 			"checkbox label", "When no value passed on create text from dom is used for option" );
-		strictEqual( widget.contents().not( this.element ),
+		strictEqual( getLabelText( widget, checkbox ),
 			"checkbox label", "When no value passed on create text from dom is used in dom" );
 
 		checkbox.checkboxradio( "destroy" );
@@ -141,7 +148,7 @@ module( "Checkboxradio: checkbox: options" );
 
 		strictEqual( checkbox.checkboxradio( "option", "label" ),
 			"foo", "When value is passed on create value is used for option" );
-		strictEqual( widget.contents().not( this.element ),
+		strictEqual( getLabelText( widget, checkbox ),
 			"foo", "When value is passed on create value is used in dom" );
 
 		checkbox.checkboxradio( "destroy" );
@@ -151,21 +158,21 @@ module( "Checkboxradio: checkbox: options" );
 
 		strictEqual( checkbox.checkboxradio( "option", "label" ),
 			"foo", "When null is passed on create text from dom is used for option" );
-		strictEqual( widget.contents().not( this.element ),
+		strictEqual( getLabelText( widget, checkbox ),
 			"foo", "When null is passed on create text from dom is used in dom" );
 
 		checkbox.checkboxradio( "option", "label", "bar" );
 
 		strictEqual( checkbox.checkboxradio( "option", "label" ),
 			"bar", "When value is passed value is used for option" );
-		strictEqual( widget.contents().not( this.element ),
+		strictEqual( getLabelText( widget, checkbox ),
 			"bar", "When value is passed value is used in dom" );
 
 		checkbox.checkboxradio( "option", "label", null );
 
 		strictEqual( checkbox.checkboxradio( "option", "label" ),
 			"bar", "When null is passed text from dom is used for option" );
-		strictEqual( widget.contents().not( this.element ),
+		strictEqual( getLabelText( widget, checkbox ),
 			"bar", "When null is passed text from dom is used in dom" );
 
 	});

themes/base/checkboxradio.css

@@ -9,14 +9,11 @@
  * http://api.jqueryui.com/checkboxradio/#theming
  */
 
-.ui-checkbox {
-	display: none;
-}
-.ui-checkbox-label .ui-icon-background {
+.ui-checkboxradio-label .ui-icon-background {
 	border-radius: .12em;
 	border: none;
 }
-.ui-radio-label .ui-icon.ui-icon-background {
+.ui-checkboxradio-radio-label .ui-icon-background {
 	width: 16px;
 	height: 16px;
 	border-radius: 1em;
@@ -26,8 +23,8 @@
 	background-color: rgba( 0, 0, 0, .3 );
 	opacity: .3;
 }
-.ui-radio-label.ui-radio-checked .ui-icon,
-.ui-radio-label.ui-radio-checked:hover .ui-icon {
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
 	background-image: none;
 	background-color: #fff;
 	width: 8px;

ui/button.js

@@ -57,7 +57,7 @@ $.widget( "ui.button", {
 
 	_getCreateOptions: function() {
 		var disabled,
-			options = {};
+			options =  this._super() || {};
 
 		this.isInput = this.element.is( "input" );
 		this.originalLabel = this.isInput ? this.element.val() : this.element.html();
@@ -232,7 +232,7 @@ $.widget( "ui.button", {
 });
 
 // DEPRECATED
-if ( $.uiBackCompat ) {
+if ( $.uiBackCompat === false ) {
 
 	// Text and Icons options
 	$.widget( "ui.button", $.ui.button, {

ui/checkboxradio.js

@@ -26,7 +26,8 @@
 
 var baseClasses = "ui-button ui-widget",
 	typeClasses = "ui-state-focus ui-radio-label ui-checkbox-label ui-state-active " +
-	"ui-icon-beginning ui-icon-end ui-icon-top ui-icon-bottom ui-radio-checked ui-checkbox-checked",
+	"ui-icon-beginning ui-icon-end ui-icon-top ui-icon-bottom ui-checkboxradio-radio-checked " +
+	"ui-checkboxradio-checkbox-checked",
 	formResetHandler = function() {
 		var form = $( this );
 		setTimeout(function() {
@@ -62,21 +63,18 @@ $.widget( "ui.checkboxradio", {
 		icon: false,
 >>>>>>> db16c96... Checkboxradio: add classes option
 		classes: {
-			"ui-checkboxradio": null,
-			"ui-checkbox": null,
-			"ui-radio": null,
-			"ui-checkbox-label": "ui-corner-all",
-			"ui-radio-label": "ui-corner-all",
+			"ui-checkboxradio": "",
+			"ui-checkboxradio-label": "ui-corner-all",
+			"ui-checkboxradio-radio-label": "",
 			"ui-checkboxradio-icon": "ui-corner-all",
-			"ui-radio-checked": null,
-			"ui-checkbox-checked": null
+			"ui-checkboxradio-checked": ""
 		}
 	},
 
 	_getCreateOptions: function() {
 		var disabled,
 			that = this,
-			options = {};
+			options = this._super() || {};
 
 		this._readLabel();
 
@@ -180,10 +178,14 @@ $.widget( "ui.checkboxradio", {
 		this.element.addClass( "ui-helper-hidden-accessible " +
 			this._classes( "ui-checkboxradio" ) );
 
-		this.label.addClass( baseClasses + " " + this._classes( "ui-" + this.type + "-label" ) );
+		this.label.addClass( baseClasses + " " + this._classes( "ui-checkboxradio-label" ) );
+
+		if ( this.type === "radio" ) {
+			this.label.addClass( "ui-checkboxradio-radio-label" );
+		}
 
 		if ( checked ) {
-			this.label.addClass( this._classes( "ui-" + this.type + "-checked" ) +
+			this.label.addClass( this._classes( "ui-checkboxradio-checked" ) +
 				" ui-state-active" );
 		}
 		if ( this.options.label && this.options.label !== this.originalLabel ) {
@@ -199,7 +201,7 @@ $.widget( "ui.checkboxradio", {
 
 	_toggleClasses: function() {
 		var checked = this.element.is( ":checked" );
-		this.label.toggleClass( this._classes( "ui-" + this.type + "-checked" ) +
+		this.label.toggleClass( this._classes( "ui-checkboxradio-checked" ) +
 			" ui-state-active", checked );
 		if ( this.options.icon && this.type === "checkbox" ) {
 			this.icon
@@ -212,12 +214,12 @@ $.widget( "ui.checkboxradio", {
 				.map(function() {
 					return $( this ).checkboxradio( "widget" )[ 0 ];
 				})
-				.removeClass( "ui-state-active " + this._classes( "ui-radio-checked" ) );
+				.removeClass( "ui-state-active " + this._classes( "ui-checkboxradio-checked" ) );
 		}
 	},
 
 	_destroy: function() {
-		this.label.removeClass( this._classes( "ui-radio-label ui-checkbox-label" ) + " " +
+		this.label.removeClass( this._classes( "ui-checkboxradio-radio-label ui-checkboxradio-label" ) + " " +
 			baseClasses + " " + typeClasses );
 		if ( this.icon ) {
 			this.icon.remove();
@@ -226,6 +228,28 @@ $.widget( "ui.checkboxradio", {
 			" ui-helper-hidden-accessible" );
 	},
 
+	_elementsFromClassKey: function( classKey ) {
+		var parts = classKey.split( "-" ),
+			checkedType = parts[ 2 ] === this.type || parts[ 2 ] === undefined,
+			checkedClass = parts[ 3 ] === "checked" || this.element.is( ":checked" );
+		switch ( classKey ) {
+			case "ui-checkboxradio":
+			case "ui-checkboxradio-radio-label":
+			case "ui-checkboxradio-label":
+			case "ui-checkboxradio-checked":
+				if ( checkedType && checkedClass ) {
+					return this.label;
+				}
+				return $();
+			case "ui-checkboxradio-icon":
+				if ( this.icon ) {
+					return this.icon;
+				}
+				return $();
+		}
+		return this._superApply( arguments );
+	},
+
 	_setOption: function( key, value ) {
 		var original;
 		if ( key === "label" && value === null ) {
@@ -270,7 +294,7 @@ $.widget( "ui.checkboxradio", {
 		var checked = this.element.is( ":checked" ),
 			isDisabled = this.element.is( ":disabled" );
 		this._updateIcon( checked );
-		this.label.toggleClass( "ui-state-active " + this._classes( "ui-" + this.type + "-checked" ), checked );
+		this.label.toggleClass( "ui-state-active " + this._classes( "ui-checkboxradio-checked" ), checked );
 		if ( this.options.label !== null ) {
 			this.label.contents().not( this.element.add( this.icon ) ).remove();
 			this.label.append( this.options.label );