#21598 closed task (blessed) (fixed)
Update default button styles in core
Reported by: | lessbloat | Owned by: | azaozz |
---|---|---|---|
Milestone: | 3.5 | Priority: | normal |
Severity: | normal | Version: | |
Component: | UI | Keywords: | needs-testing needs-patch |
Focuses: | Cc: |
Description
Wondering if it's time to put the pill button to rest... ;-)
Attachments (60)
Change History (184)
#3
follow-up:
↓ 4
@
12 years ago
From the screenshot they doesn't look quite pretty.
But please no -o-box-shadow, -ms-box-shadow and -moz-box-shadow.
#4
in reply to:
↑ 3
@
12 years ago
Replying to ocean90:
From the screenshot they doesn't look quite pretty.
Can you please explain a bit more? What do you like/not like? :-)
#5
@
12 years ago
The secondary button looks like an inactive button because of the color. Grey on grey isn't the best contrast.
Should it be a 3D Button? Since the secondary button has a darken bottom line/shadow but, if you take a look at zoom.png, the primary button not.
Also the light blue line at the top of the primary button looks misplaced, it looks like a missing blue line. On wp.com it's better solved.
#6
@
12 years ago
Replying to ocean90:
I appreciate the feedback, thanks.
I took another pass at these in 21598-v2.diff
#8
@
12 years ago
The v2 buttons look good. Few releases ago there was a last minute css error (ok, it was my fault) making some of the buttons in the admin with border-radius: 3px
:
Trying this again makes them look somewhat small, at least in QuickPress. Perhaps we can increase the padding a bit but not make them taller than the text input fields.
#10
follow-up:
↓ 11
@
12 years ago
It's about time our buttons were updated to have mouse-nibbled corners. I'm a fan of v2. I think the shadow on the over state might be a little too aggressive, but that can be tweaked.
I'm not sure the size of the buttons work as well in a few scenarios, especially with the large text size on smaller buttons. We may want to explore having several sizes of buttons for this purpose. After looking through the patch, also I'm noticing quite a few inconsistencies in the size and spacing of the buttons. I'd like to address these sooner rather than later — if we want to do this for 3.5, we should get the patch in on the early side to allow us time to find and fix any issues we miss.
I've refreshed the patch to account for the move from .dev.css to just .css in [21592].
#11
in reply to:
↑ 10
;
follow-up:
↓ 12
@
12 years ago
Replying to koopersmith:
I'm not sure the size of the buttons work as well in a few scenarios, especially with the large text size on smaller buttons. We may want to explore having several sizes of buttons for this purpose. After looking through the patch, also I'm noticing quite a few inconsistencies in the size and spacing of the buttons.
Mind sharing a screen of these, or shooting me a list of areas you think need some attention? I'm happy to make another pass.
#12
in reply to:
↑ 11
@
12 years ago
As discussed in UI chat today, Helen has also been experimenting with button styles, and will take a shot at revising the patch.
I'm curious if we can communicate importance better through various sizes and styles of buttons (like those found in Helen's styles). Bootstrap's buttons are particularly inspiring.
#13
@
12 years ago
Replying to lessbloat:
Mind sharing a screen of these, or shooting me a list of areas you think need some attention?
Off the top of my head, the filter buttons on the list tables, and the buttons in the publish box and permalink actions on the edit post screen.
#14
@
12 years ago
- Milestone changed from Awaiting Review to 3.5
Going for it. If we haven't done it in the next week, we should punt it back out.
#15
@
12 years ago
21598.4.diff is a fresh look at the patch, with a bunch of tweaks to classes on various buttons to account for having some lovely new structures for small and short buttons (and larger, but unused in core). The blue button could use some crisping up, probably with the nice light inset shadow (highlight) on the top.
The real goal of the patch is to have something more structurally sound in place for the CSS - colors can be tweaked from here, and any funky spacing issues addressed as we sweep around the admin. I'm also pretty sure we can do better with the selectors, especially the ones in large groups that just keep living.
A bigger picture item to keep in mind is that we should be creating something that is reusable by additions to the admin. We may need to create a little plugin to have an example/component styleguide type of page for full testing.
Example from the post screen: Screen Shot 2012-08-30 at 1.09.51 AM.png
#16
@
12 years ago
One more thing: I wanted to note some pitfalls I ran into for whoever picks this up next. Firefox does not apply line-height
to input buttons (ARGH), and browsers do all kinds of fun and different things when em values end up in partial pixels. Be looking in multiple browsers at all times, especially for this.
@
12 years ago
Small button tweaks: text-shadow on top for primary button, hover style for focus, slightly darker border on focus
#18
@
12 years ago
- Keywords has-patch needs-testing added
21598.5b.diff is looking quite nice to me. We might still want to consider making a demo page with various button types/common layouts, especially if we still add some extra goodies for extensions to use. Would love eyes on this and a sweep around the admin, especially with plugins and such.
#19
@
12 years ago
21598.5b.diff: The outer shadow on mouse over should be reduced. 0 0 1px
looks good in my eyes.
#20
follow-up:
↓ 24
@
12 years ago
- Cc travis@… added
I would highly encourage those working on these buttons (thanks, by the way!) to consider :focus styles that are several orders of magnitude more obvious. I say that as someone with "normal" vision who prefers to keep both hands on the keyboard whenever possible; I would imagine that for someone who is vision-impaired but not blind this would be even more important.
@
12 years ago
adds .focus, .active, and .hover styles (and adds some missing .button-highlighted styles)
#21
@
12 years ago
Patch adds .focus, .active, and .hover styles to make it easier to check styles (without needing to actually focus/activate/hover).
In doing so, discovered some missing styles for the highlighted button style and added those.
Also sharing a plugin that displays 6 styles of buttons (Primary, Secondary, Highlighted, .button, .short, .small) in 5 states each (normal, :hover, :focus, :active, disabled)
@
12 years ago
Would it be preferable to create a re-usable function to render all the button variants?
#24
in reply to:
↑ 20
;
follow-up:
↓ 26
@
12 years ago
Replying to travisnorthcutt:
I would highly encourage those working on these buttons (thanks, by the way!) to consider :focus styles that are several orders of magnitude more obvious.
lessbloat and I discussed the focus state in a previous patch, where they were more obvious but had the "depressed" look, which also seemed wrong. Suggestions (from anybody) about focus state are welcome. I am also largely a keyboard user and so far find them to be serviceable, but we're always interested in alternatives.
#25
@
12 years ago
In the mock-ups, the text looks a pixel or two too high (line-height issue?) Either that, or too much bottom padding.
azaozz's alignment in comment:8 appears more balanced to me.
#26
in reply to:
↑ 24
@
12 years ago
- Cc JerrySarcastic added
Replying to helenyhou:
lessbloat and I discussed the focus state in a previous patch, where they were more obvious but had the "depressed" look, which also seemed wrong. Suggestions (from anybody) about focus state are welcome. I am also largely a keyboard user and so far find them to be serviceable, but we're always interested in alternatives.
I agree that a "depressed" look, while great for an action like clicking, is not the right solution for :focus and :hover states.
How about gradients that are visually lighter than their base state? Think of it as the *opposite* of depressing a button; by making them several shades lighter, they leap out a the viewer a bit, which is a better metaphor for focus IMHO.
#27
@
12 years ago
- removes :hover styling from disabled buttons (:active still there though)
- reduces bottom padding very slightly. Tried changing line-height, but that only worked in Chrome, not Firefox
- incorrectly had 'active' applied to the disabled buttons
- incorrectly used null
- adds 'big' button style
Together:
#30
@
12 years ago
21598.theme-search-buttons.patch adds small
to submit_button
for theme search buttons.
21598.remove-small-style.patch removes .small.active, .small:active
styles from colors-fresh.css.
#32
@
12 years ago
The new get_submit_button()
does not seem to transform $type='secondary'
to a CSS class .button-secondary
. Is that on purpose?
Also: What's the idea of adding all of those .XYZ.focus
and .XYZ.hover
selectors? I can see a use case for .XYZ.active
in button groups (though that would also need extra CSS), but what the use case for .focus
, .hover
and .active
here? Why are :focus
/:hover
/:active
not enough?
#33
@
12 years ago
- Looks like disabled primary buttons still have a hover style (text-shadow).
- There is a size difference between
button
andbutton-primary
which is noticable on the Updates screen: (Firefox 15.0.1 on Win7)
#36
@
12 years ago
I think the change in size of buttons is going to cause some issues. Buttons by default have 20% more height than they did in 3.4.
I think default buttons should be the size that button-small
is currently, and anything that needs some extra size should be given button-large
and button-largest
classes which have the size of the current default buttons and button-large
buttons respectively.
Thoughts?
#38
in reply to:
↑ 29
@
12 years ago
Replying to ocean90:
IMO the link/button on Update Network screen should be a small button.
Also, "click this link" should probably be replaced with "click this button".
#42
follow-up:
↓ 43
@
12 years ago
I guess you can get the old height by adding the .button-small
class, but it's something that plugin devs need to be aware of.
#43
follow-up:
↓ 47
@
12 years ago
- Keywords needs-patch added; has-patch removed
Current size names:
.button-tiny .button-small .button (default)
Proposed:
.button-small .button (default) .button-big
#44
follow-up:
↓ 45
@
12 years ago
scribu, since [21789] there's also .button-large
. That would then remain bigger/larger than .button-big
? :-) (Ah, fun with names... :-) )
And can maybe someone please explain the extra CSS classes like .hover
/.active
to me (see my comment above)? Thanks!
#45
in reply to:
↑ 44
@
12 years ago
And can maybe someone please explain the extra CSS classes like
.hover
/.active
to me (see my comment above)? Thanks!
What should we explain here? If a plugin author needs to style a button like an active button he can use the class. Nothing more.
#46
@
12 years ago
Thanks, Dominik. I do understand this use case for .active
(button groups), but for .focus
and .hover
this doesn't really make sense. I really don't think that this will be done a lot. IMO, it's just bloating the CSS, especially as core is not using it.
If a plugin dev really wanted to do this, why don't we let him do it himself in his own CSS?
#47
in reply to:
↑ 43
@
12 years ago
Replying to johnbillion:
I think default buttons should be the size that
button-small
is currently, and anything that needs some extra size should be givenbutton-large
andbutton-largest
classes which have the size of the current default buttons andbutton-large
buttons respectively.
It seems that we should make the swap, yeah :) Maybe something not -large
and -largest
. I'm not 100% on needing what's currently called large
with the larger font size, even as a component for other use - maybe just replace it. Or call it jumbo or something.
#49
@
12 years ago
- Type changed from enhancement to task (blessed)
setup-config.php and install.php still have the old button style. It looks like those buttons are also the only ones in core that would actually use the button-large style. I can't find button-large used anywhere currently, otherwise.
#50
in reply to:
↑ 34
@
12 years ago
Replying to johnbillion:
Some wonkiness on the Customize screen. Firefox 15 on Win7 the buttons are different sizes
Related: #21889
#51
follow-up:
↓ 52
@
12 years ago
Since we are rewamping both the button styles and the Upload/Insert media interface in #21390, shouldn't we grab this opportunity and apply our sweet new button style to the Upload/Insert media link?
We can actually see this link rendered as a button in the first pages of the wireframes at http://make.wordpress.org/ui/2012/07/30/media-wireframes/ which seems a really obvious improvement to me... but I don't find any mention of this change here in trac.
I would see it as a big UI improvement to have that link styled as a button.
#54
follow-up:
↓ 55
@
12 years ago
Not sure about the .hover
, .focus
and .active
classes too. Using them will disable the corresponding CSS states and make that button's behavior inconsistent. Even worse, the user would not be able to tell when .button.active
is "activated" by tabbing.
If a plugin really wants to make its buttons different, best would be to add couple lines of CSS.
#55
in reply to:
↑ 54
;
follow-up:
↓ 57
@
12 years ago
Replying to azaozz:
Not sure about the
.hover
,.focus
and.active
classes too.
I'm pretty sure they were just intended to be used with the plugin in: http://core.trac.wordpress.org/ticket/21598#comment:27
A way to see them all visually on one page.
#56
@
12 years ago
21598.9.diff consolidates:
- 21598.upgrade-small-button.patch
- 21598.theme-search-buttons.patch
- 21598.remove-small-style.patch
in addition:
- Removed hover style in disabled primary buttons - #comment:33
- Fixed button and button-primary size difference - #comment:33 & #comment:53
- Fixed customizer button sizes and alignment - #comment:34
- Fixed QuickPress button sizes and margin - #comment:53
- Change widget save buttons to button-small - #comment:53
- Changed "upload" button to button-small - #comment:53
Remaining issues:
- Make button-small the default button size - #comment:36, #comment:41
- setup-config.php and install.php need new button styles (do we include wp-admin.css and colors-fresh.css, or extract the button styles into their own CSS file?).
#57
in reply to:
↑ 55
@
12 years ago
Replying to lessbloat:
I'm pretty sure they were just intended to be used with the plugin...
Ah, that makes sense for testing not in Chrome or FF/Firebug. Shouldn't comment on trac before the first coffee :)
#60
@
12 years ago
Related (closed) #21958 - The secondary button/tablenav icon is still full sized, vs the other buttons on that row. Most apparent when you have Akismet on and go to look at comments.
#61
@
12 years ago
Notes for 21598.11.diff:
- Added new focus styles to colors-classic.css
- Made small the default button size (also fixed Akismet plugin "check for spam" button)
- Fixed tablenav alignment
- Fixed search box button alignments (across multiple pages)
- Lightened up grey buttons a bit more
- Increased tiny button font-size from 11px to 12px
- Fixed QuickPress button alignment
If we can commit this updated patch, that might help us in finding additional areas that can be improved. Please have a look, and post additional bugs that you find.
#62
@
12 years ago
Removed button-tiny, button-medium, and button-jumbo in 21598.12.diff.
Now we are left with:
- button-small - fits well next to text or select box
- button - regular button size
- button-large - most button-primary buttons inherit this style (slightly taller)
#64
@
12 years ago
I have some reservations about the line-height
, as Firefox will not apply it to inputs but will apply it to other HTML elements. However, a brief excursion into attempting to change it ended in tears. I will leave it alone for the moment, but it does seem that the text is low in some OS/browser combinations and we should address that.
If we're having the upload button in custom header/background as small, then we'll want to change theme and plugin install from upload as well to match.
#65
@
12 years ago
I also think disabled should perhaps not have the pointer cursor, or an active state. Patch on #20855 is good for testing that.
#67
@
12 years ago
Couple bug fixes in 21598.13.diff:
- Removed pointer cursor for disabled buttons
- Removed disabled :active, and :hover styles
- Added button-small to theme and plugin upload buttons
- Fixed search themes text box size to match button size
- Fixed button height in IE7
#71
in reply to:
↑ 69
@
12 years ago
Replying to lessbloat:
.regular just overrides a primary buttons padding to act more like a regular .button (it's a bit of a hack).
Thanks for the explanation, but why is not named .button-regular
for consistency? It just sets padding (ok, with an
!important
), just like
.button-small
and
.button-large
.
#72
@
12 years ago
Has anyone thought of the "Move to Trash"? I think a button for that would look great too.
#73
@
12 years ago
21598.14.diff refines the button styles to have crisper edges and retunes the gray button to be visible against both white and gray backgrounds.
It also remove the application of button-large
styles to button-primary
. While that should be a default in submit_button()
, adding the large size to all primary buttons breaks the cascading nature of the various CSS button modifications. We should be aiming for stackable classes.
#75
@
12 years ago
Next steps:
- Refresh 21598.13.diff. Keep the IE changes,
cursor: default;
on disabled buttons, and the changes towp-admin.css
. - Audit core for usage of
submit_button( $text, 'primary', $etc );
and updateprimary
toprimary large
. - Finally, since the buttons CSS in
colors-fresh
andcolors-classic
is identical (not to mention a substantial amount of CSS), I propose we move the button CSS to a section inwp-admin.css
.
#76
@
12 years ago
I really like the stackable classes approach!
However, IMHO, the linear background gradient on .button
is now a little bit soft after [22099]: On a white background the gradient from #fefefe
to #f4f4f4
will be hardly noticable for the average user with a non-calibrated monitor. And then the buttons just look like text with a border around them. Especially, if you view a .button
next to a .button-primary
, you can see the difference in the "3D effect".
Also, compare .button
to the Quicktags toolbar buttons. Those have a higher gradient contrast and make the buttons more "3D-ish". Maybe we can come up with something between those two gradients?
#78
@
12 years ago
Removing height: 1em;
from #edit-slug-box means that #edit-slug-box no longer takes up space on post-new.php. That blank space is taken up by the permalink editor after an autosave. Without it, you end up with the editor getting bumped down. Adding it back; if there's a better solution, that's fine too. We need a solution.
#79
in reply to:
↑ 77
@
12 years ago
Replying to Ipstenu:
Empty spam on the bottom row is missing it's tushie.
Ipstenu,
I can't seem to be able to replicate this. However, I did notice that the margin-top for that button was off. Does 21598-tushie.diff perhaps fix the tushie missing issue you mentioned?
#80
@
12 years ago
Replying to nacin:
Removing
height: 1em;
from #edit-slug-box means that #edit-slug-box no longer takes up space on post-new.php. That blank space is taken up by the permalink editor after an autosave. Without it, you end up with the editor getting bumped down.Adding it back; if there's a better solution, that's fine too.We need a solution.
I'd say just add it back when the slug is visible. Something like:
.post-php #edit-slug-box { height: 1.8em; }
Which prevents having a huge gap on the new post page.
#81
in reply to:
↑ 66
;
follow-up:
↓ 82
@
12 years ago
Replying to SergeyBiryukov:
IE 7 doesn't apply button height properly: 21598.ie7.png.
Also reported in #22136.
#82
in reply to:
↑ 81
;
follow-up:
↓ 83
@
12 years ago
Replying to SergeyBiryukov:
Replying to SergeyBiryukov:
IE 7 doesn't apply button height properly: 21598.ie7.png.
Also reported in #22136.
I believe I fixed this in 21598.13b.diff, but it has yet to be committed. See http://core.trac.wordpress.org/ticket/21598#comment:75 @koopersmith added it to a next steps list.
#83
in reply to:
↑ 82
@
12 years ago
Replying to Ipstenu:
Empty spam on the bottom row is missing it's tushie.
Could not reproduce in any of my browsers, which browser is that? Confirmed that 21598-tushie.diff fixes the margin though.
Replying to lessbloat:
I believe I fixed this in 21598.13b.diff, but it has yet to be committed.
21598.13b.diff fixes the button height, however the line height seems a bit off: 21598.ie7.2.png.
Changing line-height: 12px
to 15px
in line 569 of ie.css
appears to fix this (21598.ie7.3.png) everywhere but the Publish button, which I guess needs more height: 21598.ie7.4.png.
#29
follow-up:
↓ 38
@
12 years ago
The vertical misalignment of the "Log In" button in Firefox/Win and a little bit in Chrome/Win is caused by an !important
(surprise!). How about we use .button-large
on the login screen?
#32
@
12 years ago
Added in missing ticket:21598:21598-tushie.diff, as well as 1px margin-top from ticket:22034:22034-2.patch in 21598-17.patch.
#34
follow-up:
↓ 50
@
12 years ago
- Owner set to azaozz
- Resolution set to fixed
- Status changed from new to closed
In [22289]:
#36
@
12 years ago
On further inspection, the issues is between <input class="button"> & <a class="button"> not primary and secondary buttons.
21598-18.patch is my attempt get button heights to match up cross browser:
Having line-height plus height may look odd, but it's the only way I've been able to figure out how to get this right cross browser.
#37
@
12 years ago
@lessbloat, yeah, was going to reopen it.
Seems Firefox renders buttons differently on Mac and Win :(
Also Firefox always overrides line-height in all <input> and <button>. This cannot be fixed. Also adds 3px left and right padding, thankfully this can be fixed in css.
#38
@
12 years ago
Turns out the top and bottom padding were causing most of the issues cross browser. 21598-19.patch seems to work pretty well for me cross browser.
#39
@
12 years ago
21598-19.patch does something funky to the welcome panel button:
And doesn't look very good for some of the buttons (not necessarily all of them) in FF/OSX:
#40
@
12 years ago
21598-20-install+errors.diff updates button styles on the install pages and the error page generated by _default_wp_die_handler()
Before:
- Create config (error) - http://cl.ly/image/2A1M3k1K3T3S
- Install 1 - http://cl.ly/image/1O1T2k0s0D3L
- Install 2 - http://cl.ly/image/2L3H3B0U3P3W
- No database (error) - http://cl.ly/image/0D3O433M2U2o
After:
- Create config (error) - http://cl.ly/image/3b0l1T0L0K0U
- Install 1 - http://cl.ly/image/320h313h450P
- Install 2 - http://cl.ly/image/0E1g1j2j263h
- No database (error) - http://cl.ly/image/1r311o1c223J
#41
@
12 years ago
21598-20.2.diff uses wp_admin_css()
in install.php
And ugh, here are the remaining Install screenshots:
Before:
- Install 3 - http://cl.ly/image/1J393E3R0a1C
- Install 4 - http://cl.ly/image/3M2v1C3M2p31
- Install 5 - http://cl.ly/image/2T1g0n0g0y2U
After:
- Install 3 - http://cl.ly/image/3V210a2t2u3m
- Install 4 - http://cl.ly/image/3i0d3x3G1M2l
- Install 5 - http://cl.ly/image/2R311D1J2A3f
#42
follow-up:
↓ 43
@
12 years ago
I think those need to be bigger buttons / larger text, since it's what the screens currently have and makes sense to retain.
#43
in reply to:
↑ 42
;
follow-up:
↓ 47
@
12 years ago
Replying to helenyhou:
I think those need to be bigger buttons / larger text, since it's what the screens currently have and makes sense to retain.
Bigger buttons and larger text are covered in 21598-20.3.diff
Before/Afters:
#44
follow-up:
↓ 45
@
12 years ago
21598-20.4.diff adds updated styles to repair.php
Updated before/afters: http://cl.ly/image/073u0h361C2y
#45
@
12 years ago
21598-21.diff includes:
- 21598-19.patch
- Fix for welcome screen button
- Fix for FF (OSX) buttons
- 21598-20.4.diff (with updated new button styles in wp-includes/functions.php)
#46
@
12 years ago
@DrewAPicture pointed out that the button styles in function.php used 14px font. Updated in 21598-21b.diff.
#48
follow-up:
↓ 51
@
12 years ago
Also, it appears that for some reason the 'Install WordPress' button is shorter than the others with button-large applied, by maybe 2-ish pixels. It's on the first screen we see on install.php after the wp-config is generated.
#49
@
12 years ago
Buttons in the "error" pages use printed styles coming from markup generated by _default_wp_die_handler()
but are assigned classes like .button and/or .button-large in the file generating the error.
We need to locate all files that generate error pages with buttons and apply the .button-large class. 'Create a configuration file' in wp-load and 'Repair database' et al in repair.php are covered in 21598-21c.diff.
Adversely, in setup-config.php and install.php we can rely on admin stylesheets.
Something to keep in mind is that until now all of the aforementioned buttons had a font-size 14px which differs from the updated styles at 12px. Using a body class was suggested in IRC and it would make it possible to further condense some styles without having to resort to thinks like !important.
#50
@
12 years ago
I forgot to mention that I think we should continue to treat _default_wp_die_handler()
as a unique case and set whatever button styles we need to in there, separate from the body class discussion concerning setup-config.php and install.php.
#51
in reply to:
↑ 48
;
follow-up:
↓ 52
@
12 years ago
Replying to DrewAPicture:
Also, it appears that for some reason the 'Install WordPress' button is shorter than the others with button-large applied, by maybe 2-ish pixels.
21598-22.diff should fix this.
#52
@
12 years ago
Tried to fix FF/Win buttons as much as possible without affecting other browsers in: 21598-23.diff.
In 21598.diff, I hacked together a quick patch to replace the existing default buttons with button styles designed by Automattic for the WP.com reader (props @iammattthomas).
This will need some serious testing, as it affects lot's of pages.
Here's a quick comparison:
Have a look, and let me know if you spot anything out of place.