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

diff --git a/tests/unit/checkboxradio/options.js b/tests/unit/checkboxradio/options.js
index 4f6201ef33d316e1e28ef3b5bd03ad2ba06aab04..7fe6a0710946738796810f0e0493a3b715639f70 100644 (file)
--- 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 acac7cc0417c74bf31a39b6fd7e7556c165458e8..e0ca09acc1119a5ec3bca072ce7aa4a223c50858 100644 (file)
--- 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 0052b19502dd5eaa35b383de113aa5d17a71651f..a55e4f033e9bf937eb0c2e5072550a24794d8ced 100644 (file)
--- a/ui/widgets/checkboxradio.js
+++ b/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 ) {