Checkboxradio: Use new ui-state-checked class in checkboxradio

Using `ui-state-highlight` caused a conflict with dialog

Fixes #14955
Closes gh-1712
Closes gh-1704

Author: arschmitz

tests/unit/checkboxradio/options.js

@@ -72,7 +72,7 @@ function assertIcon( checkbox, icon, assert ) {
 		"ui-icon-background ui-icon-" + icon,
 		"Icon has proper classes" );
 	if ( icon === "blank" ) {
-		assert.lacksClasses( iconElement, "ui-icon-check ui-state-highlight" );
+		assert.lacksClasses( iconElement, "ui-icon-check ui-state-checked" );
 	}
 }
 
@@ -100,7 +100,7 @@ QUnit.test( "icon - default checked", function( assert ) {
 	assert.expect( 2 );
 
 	checkbox.checkboxradio();
-	assertIcon( checkbox, "check ui-state-highlight", assert );
+	assertIcon( checkbox, "check ui-state-checked", assert );
 } );
 
 QUnit.test( "icon", function( assert ) {
@@ -111,13 +111,13 @@ QUnit.test( "icon", function( assert ) {
 	checkbox.prop( "checked", true );
 
 	checkbox.checkboxradio();
-	assertIcon( checkbox, "check ui-state-highlight", assert );
+	assertIcon( checkbox, "check ui-state-checked", assert );
 
 	checkbox.checkboxradio( "option", "icon", false );
 	assertNoIcon( assert, checkbox );
 
 	checkbox.checkboxradio( "option", "icon", true );
-	assertIcon( checkbox, "check ui-state-highlight", assert );
+	assertIcon( checkbox, "check ui-state-checked", assert );
 
 	checkbox.checkboxradio( "option", "icon", false );
 	assertNoIcon( assert, checkbox );

themes/base/theme.css

@@ -137,6 +137,10 @@ a.ui-button:active,
 	background: #fffa90/*{bgColorHighlight}*/ /*{bgImgUrlHighlight}*/ /*{bgHighlightXPos}*/ /*{bgHighlightYPos}*/ /*{bgHighlightRepeat}*/;
 	color: #777620/*{fcHighlight}*/;
 }
+.ui-state-checked {
+	border: 1px solid #dad55e/*{borderColorHighlight}*/;
+	background: #fffa90/*{bgColorHighlight}*/;
+}
 .ui-state-highlight a,
 .ui-widget-content .ui-state-highlight a,
 .ui-widget-header .ui-state-highlight a {

ui/widgets/checkboxradio.js

@@ -176,11 +176,10 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
 		this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
 
 		if ( this.options.icon && this.type === "checkbox" ) {
-
-			// We add ui-state-highlight to change the icon color
-			this._toggleClass( this.icon, null, "ui-icon-check ui-state-highlight", checked )
+			this._toggleClass( this.icon, null, "ui-icon-check ui-state-checked", checked )
 				._toggleClass( this.icon, null, "ui-icon-blank", !checked );
 		}
+
 		if ( this.type === "radio" ) {
 			this._getRadioGroup()
 				.each( function() {
@@ -233,14 +232,14 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
 			}
 
 			if ( this.type === "checkbox" ) {
-				toAdd += checked ? "ui-icon-check ui-state-highlight" : "ui-icon-blank";
+				toAdd += checked ? "ui-icon-check ui-state-checked" : "ui-icon-blank";
 				this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" );
 			} else {
 				toAdd += "ui-icon-blank";
 			}
 			this._addClass( this.icon, "ui-checkboxradio-icon", toAdd );
 			if ( !checked ) {
-				this._removeClass( this.icon, null, "ui-icon-check ui-state-highlight" );
+				this._removeClass( this.icon, null, "ui-icon-check ui-state-checked" );
 			}
 			this.icon.prependTo( this.label ).after( this.iconSpace );
 		} else if ( this.icon !== undefined ) {