diff options
| author | Alexander Schmitz <arschmitz@gmail.com> | 2016-06-01 11:31:41 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2016-06-06 11:34:52 -0400 |
| commit | abc2a755f97689145de81000534cca138736a539 (patch) | |
| tree | a077a52433a2e3f974deb7d4355f314c74c70966 | |
| parent | b7d0c701c79c751f80e2f4058f7a4c3a17262815 (diff) | |
| download | jquery-ui-abc2a755f97689145de81000534cca138736a539.tar.gz jquery-ui-abc2a755f97689145de81000534cca138736a539.zip | |
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
| -rw-r--r-- | tests/unit/checkboxradio/options.js | 8 | ||||
| -rw-r--r-- | themes/base/theme.css | 4 | ||||
| -rw-r--r-- | ui/widgets/checkboxradio.js | 9 |
3 files changed, 12 insertions, 9 deletions
diff --git a/tests/unit/checkboxradio/options.js b/tests/unit/checkboxradio/options.js index 4f6201ef3..7fe6a0710 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 acac7cc04..e0ca09acc 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 0052b1950..a55e4f033 100644 --- 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 ) { |