Button: Add helper class to make icons float

[jaspermdegroot]

Class names: ui-widget-icon-floatbeginning and ui-widget-icon-floatend. (First investigate if it's possible to do this with one class: ui-widget-icon-float)

See http://jsbin.com/muceye/1/edit?html,output

Also add a demo.

[jaspermdegroot]

We should be able to do this with one class:

.ui-widget-icon-float { float: right; }
.ui-widget-icon-float:first-child { float: left; }
.ui-widget-icon-float.ui-widget-icon-block { float: none; }

Update: negating block icons (top/bottom) is not really necessary.... just don't add the helper class to those.

[jaspermdegroot]

@arschmitz

I think we shouldn't add a class for this, but make icons float by default. That's what people are used to in all previous versions and it also looks better IMHO.

.ui-button > .ui-icon { float: right; }
.ui-button > .ui-icon:first-child { float: left; }
.ui-button > .ui-icon.ui-widget-icon-block { float: none; }

What do you think?

[arschmitz]

So i think your right as long as by default we have block buttons vs inline float should be the default. I would really like to see us move towards inline by default, however i think this should wait for chassis.

[jaspermdegroot]

@arschmitz

as long as by default we have block buttons vs inline float should be the default

I don't really get this.

What does block vs. inline buttons have to do with this?

[jaspermdegroot]

And we are back at the beginning .... using two helper classes (ui-widget-icon-floatbeginning and ui-widget-icon-floatend).

The reason is that the solution should also work with CSS-only buttons (no Button widget) where you can omit the space span and just add a space between icon span and text. In that case the icon span is always :first-child no matter if you put the span before or after the button text. Hence the solution I mentioned in my previous comments won't work.

[jaspermdegroot]

@arschmitz

I tried to add a demo for this, but how to add the class to the icon if you use the button widget? In other words, when you don't add the icon span to the markup yourself.

You can't change the classes of the icon with the classes option, right?

See http://view.jquerymobile.com/1.5-css-and-demos/demos/icons/#Floaticons

Update: This was a markup problem. It works now!

[jaspermdegroot]

Landed in 1.5-dev