Standardize buttons and form

[jaspermdegroot]

All changes are described in the changelog at the test page and in the commit messages.

Test page: http://ugomobi.github.com/buttons-form/

Fixes:
#3284
#3983
#3301
#3922
#1998
#2804
#3684
#4252
#4098
#3979
#4263
#4489

[johnbender]

Holy moly

@Wilto @scottjehl

We need you guys to review this stuff.

[toddparker]

Zach and I tested http://ugomobi.github.com/buttons-form/ on the following platforms without any major issues, everything looked good. As long as that failing test is passing, this looks ready to land. Excellent work @uGoMobi

Safari 4.1.3
Opera Mobile
Opera Mini
Google Chrome
FireFox
Firefox (beta)
Apple Ipad ios4.3
Apple Ipad ios5.0.1
Samsung Galaxy Tab Android 3.1
HP Touchpad WebOS 3.0.2
Kindle Fire
Nook Android 2.2
Apple Iphone ios 5.0.1
Blackberry Playbook OS 2.0
HTC Incredible Android 2.3
Samsung Galaxy nexus Android 4.0X
HTC Surround Windows 7
Nokia Lumia Windows 7.5

Some minor issues I noticed:

SAFARI 4.1.3:
-Under form, in the slider input, 1 digit gets cut off from lack of space

IPHONE 4, HTC INCREDIBLE, DROID TOUCH (all cells with smaller screen than the GALAXY NEXUS):
-Under buttons in the Grid Blocks section:
-Button Outside UI Grid is wider than the other buttons (On all tests this occurred, including computers)
-The 2 Select buttons cut off the text within it on the right (only mobile)

OPERA MINI:

-Under Control Group, Horizontal, Some of the "X" buttons are misaligned or completely out of the box underneath them. Menu Button overlaps Search Button.

OPERA MOBILE:

-Under Form, Cannot select any "Choices" (Full size or mini). The popup menu comes up for a second, than disappears. In the old one it works fine.
-Under Control Group, Horizontal, Some of the "X" buttons are misaligned or completely out of the box underneath them. Menu Button overlaps Search Button.

[jaspermdegroot]

Thanks a lot for the test result Todd and Zach!

• Under form, in the slider input, 1 digit gets cut off from lack of space

  Fixed

• Button Outside UI Grid is wider than the other buttons (On all tests this occurred, including computers)

  In the current situation buttons have left/right margin by default. This way you can not align them with other components. Therefor I removed that margin and only added it where really needed (i.e. inline buttons and buttons in grids). Only downside of this is that when you combine two or more buttons with a single full width button. The first go in a grid and have margin and the last not. As a "solution" I added a note in the docs (part of the first commit above) that when you can wrap a button in a div with ui-grid class and then it will get the same margin.
  I should have mentioned on the test page that I added that button outside the grid on purpose to show the difference.

[UPDATE:] I just found out we have a class ui-grid-solo for this. Will update the note in the docs.

• The 2 Select buttons cut off the text within it on the right (only mobile)

  I used this example because the issue I fixed was about the select button being misaligned next to a regular button. Using a custom multiple select menu like this is not really good practise.
  What happens is that the multiple select has class has-count from the beginning, even when the count bubble isn't visible yet. So there is also extra padding. This makes the available space for text so small that some browsers don't even show an ellipsis anymore. Same goes for the three buttons at the top of the grid where I didn't see text at all when testing Opera Mini, but I see similar issues when I resize Chrome browser to smallest possible width.
  I was able to optimize it a little bit, but I don't think we can really fix this.

• Under Control Group, Horizontal, Some of the "X" buttons are misaligned or completely out of the box underneath them. Menu Button overlaps Search Button. (Opera Mobile and Mini)

  Fixed

• Under Form, Cannot select any "Choices" (Full size or mini). The popup menu comes up for a second, than disappears. In the old one it works fine. (Opera Mobile)

  I could not reproduce this on the Opera Mobile emulator, but that was after I already made a few changes. So maybe I fixed it without knowing. Other possibility is issues with fiexed toolbars. I changed the header and footer of the test page to inline.
  Can you please test again?

The branch passed all unit tests.

@toddparker - Do you want all commits to be cherry-picked into 1.1.1.?

[toddparker]

@uGoMobi - Great news. Why don't you land this (I'll give you the pleasure of hitting the big green button). Yes, let's cherry pick this to stable since they are bug fixes. We'll re-test the opera mobile issue once this lands.