Checkboxradio: add classes option

Author: arschmitz

tests/unit/checkboxradio/checkboxradio_common.js

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

tests/unit/checkboxradio/checkboxradio_options.js

@@ -76,7 +76,7 @@ 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-icon ui-icon-background ui-corner-all ui-icon-blank",
+			"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank",
 			"Icon span has proper classes when created not checked" );
 
 		checkbox.checkboxradio( "destroy" ).prop( "checked", true );
@@ -86,7 +86,7 @@ module( "Checkboxradio: checkbox: options" );
 		});
 
 		strictEqual( widget.find( "span" ).attr( "class" ),
-			"ui-icon ui-icon-background ui-corner-all ui-icon-check",
+			"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check",
 			"Icon span has proper classes when created checked" );
 
 		checkbox.checkboxradio( "option", "icon", false );
@@ -97,7 +97,7 @@ module( "Checkboxradio: checkbox: options" );
 		checkbox.checkboxradio( "option", "icon", true );
 
 		strictEqual( widget.find( "span" ).attr( "class" ),
-			"ui-icon ui-icon-background ui-corner-all ui-icon-check",
+			"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check",
 			"Icon span has proper classes when option set to true and :is( checked )" );
 
 		checkbox.prop( "checked", false ).checkboxradio( "refresh" );
@@ -109,7 +109,7 @@ module( "Checkboxradio: checkbox: options" );
 		checkbox.checkboxradio( "option", "icon", true );
 
 		strictEqual( widget.find( "span" ).attr( "class" ),
-			"ui-icon ui-icon-background ui-corner-all ui-icon-blank",
+			"ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank",
 			"Icon span has proper classes when option set to true and not checked" );
 
 		checkbox.checkboxradio( "destroy" );

ui/checkboxradio.js

@@ -57,7 +57,17 @@ $.widget( "ui.checkboxradio", {
 	options: {
 		disabled: null,
 		label: null,
-		icon: false
+		icon: false,
+		classes: {
+			"ui-checkboxradio": null,
+			"ui-checkbox": null,
+			"ui-radio": null,
+			"ui-checkbox-label": "ui-corner-all",
+			"ui-radio-label": "ui-corner-all",
+			"ui-checkboxradio-icon": "ui-corner-all",
+			"ui-radio-checked": null,
+			"ui-checkbox-checked": null
+		}
 	},
 
 	_getCreateOptions: function() {
@@ -168,12 +178,14 @@ $.widget( "ui.checkboxradio", {
 		var checked = this.element.is( ":checked" );
 
 		this._updateIcon( checked );
-		this.element.addClass( "ui-helper-hidden-accessible ui-checkboxradio" );
+		this.element.addClass( "ui-helper-hidden-accessible " +
+			this._classes( "ui-checkboxradio" ) );
 
-		this.label.addClass( baseClasses + " ui-" + this.type + "-label" );
+		this.label.addClass( baseClasses + " " + this._classes( "ui-" + this.type + "-label" ) );
 
 		if ( checked ) {
-			this.label.addClass( "ui-" + this.type + "-checked ui-state-active" );
+			this.label.addClass( this._classes( "ui-" + this.type + "-checked" ) +
+				" ui-state-active" );
 		}
 		if ( this.options.label && this.options.label !== this.originalLabel ) {
 			this.label.html( this.icon ? this.icon : "" ).append( this.options.label );
@@ -188,7 +200,8 @@ $.widget( "ui.checkboxradio", {
 
 	_toggleClasses: function() {
 		var checked = this.element.is( ":checked" );
-		this.label.toggleClass( "ui-" + this.type + "-checked ui-state-active", checked );
+		this.label.toggleClass( this._classes( "ui-" + this.type + "-checked" ) +
+			" ui-state-active", checked );
 		if ( this.options.icon && this.type === "checkbox" ) {
 			this.icon
 				.toggleClass( "ui-icon-check", checked )
@@ -200,7 +213,7 @@ $.widget( "ui.checkboxradio", {
 				.map(function() {
 					return $( this ).checkboxradio( "widget" )[ 0 ];
 				})
-				.removeClass( "ui-state-active ui-radio-checked" );
+				.removeClass( "ui-state-active " + this._classes( "ui-radio-checked" ) );
 		}
 	},
 
@@ -209,7 +222,8 @@ $.widget( "ui.checkboxradio", {
 		if ( this.icon ) {
 			this.icon.remove();
 		}
-		this.element.removeClass( "ui-checkboxradio ui-helper-hidden-accessible" );
+		this.element.removeClass( this._classes( "ui-checkboxradio" ) +
+			" ui-helper-hidden-accessible" );
 	},
 
 	_setOption: function( key, value ) {
@@ -230,7 +244,8 @@ $.widget( "ui.checkboxradio", {
 	},
 
 	_updateIcon: function( checked ) {
-		var toAdd = "ui-icon ui-icon-background ui-corner-all ";
+		var toAdd = this._classes( "ui-checkboxradio-icon" ) +
+		" ui-icon ui-icon-background ";
 
 		if ( this.options.icon ) {
 			this.label.addClass( "ui-icon-beginning" );
@@ -255,7 +270,7 @@ $.widget( "ui.checkboxradio", {
 		var checked = this.element.is( ":checked" ),
 			isDisabled = this.element.is( ":disabled" );
 		this._updateIcon( checked );
-		this.label.toggleClass( "ui-state-active ui-" + this.type + "-checked", checked );
+		this.label.toggleClass( "ui-state-active " + this._classes( "ui-" + this.type + "-checked" ), checked );
 		if ( this.options.label !== null ) {
 			this.label.html( !!this.icon ? this.icon : "" ).append( this.options.label );
 		}