Sorry, I forgot to link the spec. It's at https://trello.com/c/JETLmm7F/7-check-boxes

looking good, I'd like to get the animation in, prior to calling this closed. The mixed state is probably not needed at this time (I was channeling the needs of AutoCAD from my previous job)

here is a web example (from gmail) of mixed state checkboxes
https://www.dropbox.com/s/1eyuj50vuoz6g7y/Screenshot%202014-08-06%2022.02.10.png

Okay, so it basically means some of the represented items are checked. I don't know if we have that anywhere.

HTML doesn't really support tri-state checkboxes (or the 'indeterminate' checkedness state) – the standard does define such a thing [1], however it is only controllable via JavaScript (there isn't any way to define this state in HTML, not any UI that allows the user to set it). I believe the browser support for this is currently spotty at best, too. We shouldn't concern ourselves with it.

[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#dom-input-indeterminate

Agreed, indeterminate/mixed should be considered out of scope for this bug. I agree there are potential use cases, but let's file a separate bug when they arise.

Jared, is it possible for one of the designers to make a 24x24 SVG of a gray check mark for checked.normal.yes (see https://trello.com/c/JETLmm7F/7-check-boxes). That should allow us to make the focus distinction as specified (gray unfocused, green focused).

Can we use wikifont characters for this rather than svgs?

the check mark already exists in the wikifont

(In reply to Jared Zimmerman (WMF) from comment #8)

Can we use wikifont characters for this rather than svgs?

I don't know, but the initial implementation is already in core using background-image-svg (https://git.wikimedia.org/blob/mediawiki%2Fcore.git/287e641483e62c0e3070d3f35601f5c62f41eaf7/resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Fcheckbox.less#L66).

So if you want to switch to WikiFont, that will require re-implementing it, whereas adding a focus distinction looks like a relatively straightforward enhancement. See the bottom of this comment (I did a quick test with a fake image, and this works in Firefox):

the check mark already exists in the wikifont

This is a different shape from the green one we currently have, though. The green one has all hard edges. The WikiFont one has a curve. If that's understood, someone could make a 24x24 version of the WikiFont checkmark, which could easily be colored the appropriate shades of gray and green.

&:focus {
+ label {

		&::before {
			.background-image-svg('images/checked_focus.svg', 'images/checked_focus.png');
		}

}

}

If all the other mediawiki.ui controls will be using wikifont I'd prefer we go ahead and do this correctly vs quickly. It'll just come back to bite us if we don't.

Whilst WikiFont is not in core we cannot rely on it Jared. We are a long way off from that point as I understand it. WikiFont to my knowledge is only being used by Flow.

I added a black, grey, and green version of the check to the trello board.

(In reply to Jared Zimmerman (WMF) from comment #13)

I added a black, grey, and green version of the check to the trello board.

Could someone please change the size to 24x24, or tell me how to do so?

It's easy to change the canvas size, but that just results in a tiny canvas, and big contents that overflow it.

I don't know how to scale the existing image proportionally. The only command I found that almost does it is rsvg-convert, but it outputs in points, not pixels, and unfortunately, 24px is a non-integer number of points (19.2) which is apparently not allowed (either by SVG or rsvg, not sure).

This is still blocked on 24x24 SVGs.

Also, we've decided not to use WikiFont for core/web.