Checkbox & Radio: Use SVG data-uri as background-image about skin HOT 9 CLOSED

Pixel XL Android 7.1 Chrome

from skin.

Galaxy S7, Android v6, Firefox

from skin.

Seems to work well. Will schedule this into v3.1.0 release. The only slightly funky thing is that I have to use the :not([hidden]) selector in order to use the same .checkbox__icon name. To avoid this, we could use a different name, but can discuss more at PR time.

Huge shoutout to Pranav Jha (@pranavjha) as the inspiration behind this improvement!!

.checkbox__icon:not([hidden]) {
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E');
    background-size: contain;
    width: 1em;
    height: 1em;
}

.checkbox__control[type="checkbox"] {
    &:checked + .checkbox__icon:not([hidden]) {
        .mixin-bounce-animation;
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E');
    }
}

from skin.

@ianmcburnie thanks for considering this change. This will reduce a lot of DOM for us.

Was wondering if we need the empty <span class="checkbox__icon"></span> ?
The below structures might work too:

<span class="checkbox">
    <input class="checkbox__control" type="checkbox" />
</span>

and

<span class="checkbox checkbox--custom">
    <input class="checkbox__control" type="checkbox" />
    <svg aria-hidden="true" focusable="false">
        <use xlink:href="#svg-icon-checkbox"></use>
    </svg>
</span>

from skin.

I think both of those would be breaking changes, which I'd rather not do if we can avoid it. Also, for that 2nd structure, we need hidden on a wrapper of the SVG to avoid showing the SVG and the browser's default checkbox in a non-CSS state (hidden attribute doesn't work on an SVG tag for some reason).

Also, while we could feasibly generate a pseudo element on the input element to host the background image, that approach has led to positioning problems in the past (although we no longer have block level or inline level label to worry about affecting layout). A separation of concerns, while adding an extra element to the DOM, gives a little more layout flexibility and allows us to add attributes (e.g. ARIA) should we ever need.

Having said all that, I'm not going to completely rule it out, and will do some more investigation!

from skin.

@pranavjha Thinking about it more, we can't have the background image on the input element, because the input element has an opacity of zero. We can't have the background image on the root element either, because we can't toggle the background image of the root based on the checked state of the input.

from skin.

I have applied the same background-image technique to the public facing eBay MIND patterns site so that we can test support on mobile devices (anyone?):

http://ianmcburnie.github.io/mindpatterns/input/checkbox/
http://ianmcburnie.github.io/mindpatterns/input/radio/

from skin.

@ianmcburnie Please see below for the different screen shots of Chrome and Safari on my iPhone 6.

Chrome checkbox

Chrome radio

Safari checkbox

Safari radio

Sorry about how big these are. I did try to scale them down.

from skin.

Great! Thanks for this @seangates !

from skin.