From ca1f015c26d965e736d4963f3efb0b2d29031113 Mon Sep 17 00:00:00 2001
From: Alexander Schmitz <arschmitz@gmail.com>
Date: Wed, 1 Jun 2016 11:31:41 -0400
Subject: [PATCH] Checkboxradio: Use new ui-state-checked class in
 checkboxradio

Using ui-state-highlight caused a conflict with dialog

Fixes #14955
---
 tests/unit/checkboxradio/options.js | 8 ++++----
 themes/base/theme.css               | 4 ++++
 ui/widgets/checkboxradio.js         | 8 ++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/tests/unit/checkboxradio/options.js b/tests/unit/checkboxradio/options.js
index 4f6201ef33d..7fe6a071094 100644
--- a/tests/unit/checkboxradio/options.js
+++ b/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 );
diff --git a/themes/base/theme.css b/themes/base/theme.css
index acac7cc0417..e0ca09acc11 100644
--- a/themes/base/theme.css
+++ b/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 {
diff --git a/ui/widgets/checkboxradio.js b/ui/widgets/checkboxradio.js
index 0052b19502d..e8fc43f0ffc 100644
--- a/ui/widgets/checkboxradio.js
+++ b/ui/widgets/checkboxradio.js
@@ -177,8 +177,8 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
 
 		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 )
+			// We add ui-state-checked to change the icon color based on ui-state-highlight colors
+			this._toggleClass( this.icon, null, "ui-icon-check ui-state-checked", checked )
 				._toggleClass( this.icon, null, "ui-icon-blank", !checked );
 		}
 		if ( this.type === "radio" ) {
@@ -233,14 +233,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 ) {