Skip to content
Permalink
Browse files

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
  • Loading branch information...
arschmitz authored and scottgonzalez committed Jun 1, 2016
1 parent b7d0c70 commit abc2a755f97689145de81000534cca138736a539
Showing with 12 additions and 9 deletions.
  1. +4 −4 tests/unit/checkboxradio/options.js
  2. +4 −0 themes/base/theme.css
  3. +4 −5 ui/widgets/checkboxradio.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 );
@@ -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 {
@@ -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 ) {

1 comment on commit abc2a75

@jzaefferer

This comment has been minimized.

Copy link
Member

commented on abc2a75 Jul 9, 2016

This caused a regression, where the checkmark only shows up on a checked button on hover. It seems like the icons for for .ui-state-active .ui-icon are all white (background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;), making the checkmark invisible on top of the white background. As long as we were using ui-state-higlight, this selector applied instead:

.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
    background-image: url("images/ui-icons_777620_256x240.png")/*{iconsHighlight}*/;
}

Overriding the ui-state-active white icons to #777620.

I don't know how to fix this without making even more of a mess.

Please sign in to comment.
You can’t perform that action at this time.