Standardize buttons and form #4498

Merged
merged 26 commits into from Jun 8, 2012

Projects

None yet

3 participants

@jaspermdegroot
Member

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

jaspermdegroot added some commits Jun 7, 2012
@jaspermdegroot jaspermdegroot Removed default left and right margin from buttons to create consiste…
…ncy between buttons in and outside forms.
0fe6591
@jaspermdegroot jaspermdegroot Set font-size 16px for all (fullsize) buttons for consistency. ccbc313
@jaspermdegroot jaspermdegroot Fixes #3284 - Added vertical-align middle for inline buttons to creat…
…e consistency between browsers, since the default vertical alignment differs.
7a19f58
@jaspermdegroot jaspermdegroot Fixes #3983 - Changed display inline-block rule to only be applied to…
… buttons that are direct children of the header/footer.
ab7b44c
@jaspermdegroot jaspermdegroot Adjusted padding rules for mini inline and controlgroup buttons. 4d70953
@jaspermdegroot jaspermdegroot New class ui-submit added to button widget. e810c0a
@jaspermdegroot jaspermdegroot Fixes #3301 - Full width forms. cb16e2f
@jaspermdegroot jaspermdegroot Hide legend instead of label for checkbox/radio and other controlgrou…
…ps. Added flip toggle (ui-slider) label to the selectors.
15c355d
@jaspermdegroot jaspermdegroot Adjusted top and bottom margin for consistency. Removed margin when w…
…rapped in ui-field-contain since there is already padding.
c16b459
@jaspermdegroot jaspermdegroot Removed rule for left/right margin on ui-input-text in header/footer …
…since we recommend to wrap in a div with class ui-bar to get padding.
d924b3e
@jaspermdegroot jaspermdegroot Border-top is already 0. Changed into border-bottom 0 for last child. e6dda68
@jaspermdegroot jaspermdegroot Float left instead of display inline-block for all buttons in horizon…
…tal controlgroup.
68f4ab6
@jaspermdegroot jaspermdegroot Fixes #1998 - Added padding for icon-only buttons in controlgroup. 6b95f46
@jaspermdegroot jaspermdegroot Fixes #2804 - Added display block for vertical controlgroup ui-select…
… to prevent unwanted margin on FF.
6adbba4
@jaspermdegroot jaspermdegroot Fixes #3684 - Removed explicit margin 0 rule for selectmenu buttons. e583d00
@jaspermdegroot jaspermdegroot Fixes #4252 - Prevent adding ui-btn-icon-right class when there is no…
… icon.
03f9c6c
@jaspermdegroot jaspermdegroot Removed default mini and inline "false" to make mini and inline in he…
…ader/footer possible.
8e516b3
@jaspermdegroot jaspermdegroot Removed border radius from button behing Opera's native selectmenu. a1973d5
@jaspermdegroot jaspermdegroot Fixes #3979 and #4263 - Added/adjusted count bubble positioning and p…
…adding rules for select menu, listview buttons, and divider.
72de793
@jaspermdegroot jaspermdegroot Adjusted padding for listview buttons with (split) icon and the verti…
…cal position of the split button icon.
5ee3a81
@jaspermdegroot jaspermdegroot Fixes #4489 - Max width and height for left image icons is 16px. 85a5478
@johnbender
Contributor

Holy moly

@Wilto @scottjehl

We need you guys to review this stuff.

@toddparker
Contributor

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 added some commits Jun 8, 2012
@jaspermdegroot jaspermdegroot Negate box-sizing border-box for slider input. 79fcf3c
@jaspermdegroot jaspermdegroot Removed position relative from ui-btn-inner to have the icon being ab…
…solute positioned to button and not to inner (small selectmenu buttons with padding for count and icon can cause inner sticking out the button). Removed display inline-block from span inside ui-select ui-btn-text to get overflow ellipses.
a9372cc
@jaspermdegroot jaspermdegroot Changed min-width into width since this works as well and Opera Mini …
…doesn't understand min-width here. Changed line-height into height since this is a more consistent solution for all browsers.
a2059af
@jaspermdegroot jaspermdegroot Prevent horizontal scrollbar in IE7. 4270ee0
@jaspermdegroot jaspermdegroot Added comment to explain the whitespace remove function. c682b42
@jaspermdegroot
Member

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
Contributor

@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.

@jaspermdegroot jaspermdegroot merged commit ea5e7f1 into jquery:master Jun 8, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment