library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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

Fixes #14955
Closes gh-1712
Closes gh-1704
This commit is contained in:
Alexander Schmitz 2016-06-01 11:31:41 -04:00 committed by Scott González
parent b7d0c701c7
commit abc2a755f9
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
tests/unit/checkboxradio/options.js
View File

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

4
themes/base/theme.css
View File

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

9
ui/widgets/checkboxradio.js
View File

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