Make WordPress Core

Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#21598 closed task (blessed) (fixed)

Update default button styles in core

Reported by: lessbloat's profile lessbloat Owned by: azaozz's profile 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)

21598.diff (25.2 KB) - added by lessbloat 12 years ago.
postscreen.png (247.5 KB) - added by ocean90 12 years ago.
zoom.png (47.8 KB) - added by ocean90 12 years ago.
21598-v2.diff (24.0 KB) - added by lessbloat 12 years ago.
buttons-radius-3px.png (4.2 KB) - added by azaozz 12 years ago.
21598.3.diff (24.0 KB) - added by koopersmith 12 years ago.
21598.4.diff (27.7 KB) - added by helenyhou 12 years ago.
Screen Shot 2012-08-30 at 1.09.51 AM.png (58.7 KB) - added by helenyhou 12 years ago.
21598.5.diff (31.4 KB) - added by lessbloat 12 years ago.
21598.5b.diff (30.2 KB) - added by lessbloat 12 years ago.
Small button tweaks: text-shadow on top for primary button, hover style for focus, slightly darker border on focus
wp-style-guide.php (1.2 KB) - added by bootsz 12 years ago.
First draft of a "style guide" plugin. Adds a new admin page with all button styles.
wp-button-styles.php (1.4 KB) - added by bootsz 12 years ago.
Err.. wrong file. Here it is!
21598.5c.diff (30.2 KB) - added by lessbloat 12 years ago.
Slight tweak to box-shadow - bring it down a notch.
21598.6.diff (32.2 KB) - added by trepmal 12 years ago.
adds .focus, .active, and .hover styles (and adds some missing .button-highlighted styles)
buttons.php (3.3 KB) - added by trepmal 12 years ago.
(plugin) 5 buttons times 5 states
buttons.2.php (3.1 KB) - added by trepmal 12 years ago.
same plugin, less yelling
buttons.3.php (3.6 KB) - added by trepmal 12 years ago.
add missing 'short' style
buttons.4.php (1.6 KB) - added by kadamwhite 12 years ago.
Would it be preferable to create a re-usable function to render all the button variants?
21598.7.diff (39.4 KB) - added by trepmal 12 years ago.
buttons.5.php (3.9 KB) - added by trepmal 12 years ago.
21598.8.diff (41.2 KB) - added by koopersmith 12 years ago.
buttons.6.php (2.0 KB) - added by koopersmith 12 years ago.
21598.upgrade-small-button.patch (848 bytes) - added by ocean90 12 years ago.
beforeafter.png (89.1 KB) - added by ocean90 12 years ago.
21598.theme-search-buttons.patch (1.3 KB) - added by ocean90 12 years ago.
21598.remove-small-style.patch (2.7 KB) - added by ocean90 12 years ago.
1.png (10.1 KB) - added by azaozz 12 years ago.
2.png (9.0 KB) - added by azaozz 12 years ago.
3.png (9.0 KB) - added by azaozz 12 years ago.
4.png (6.4 KB) - added by azaozz 12 years ago.
5.png (6.2 KB) - added by azaozz 12 years ago.
21598.9.diff (7.4 KB) - added by lessbloat 12 years ago.
21598.10.diff (8.9 KB) - added by lessbloat 12 years ago.
21598.11.diff (19.6 KB) - added by lessbloat 12 years ago.
21598.12.diff (29.1 KB) - added by lessbloat 12 years ago.
21598.ie7.png (6.8 KB) - added by SergeyBiryukov 12 years ago.
21598.13.diff (5.1 KB) - added by lessbloat 12 years ago.
21598.13b.diff (6.9 KB) - added by lessbloat 12 years ago.
21598.14.diff (14.7 KB) - added by koopersmith 12 years ago.
21598-tushie.diff (337 bytes) - added by lessbloat 12 years ago.
21598-edit-post-box-height.diff (346 bytes) - added by lessbloat 12 years ago.
21598.ie7.2.png (8.8 KB) - added by SergeyBiryukov 12 years ago.
21598.ie7.3.png (8.9 KB) - added by SergeyBiryukov 12 years ago.
21598.ie7.4.png (7.1 KB) - added by SergeyBiryukov 12 years ago.
21598-15.patch (2.7 KB) - added by azaozz 12 years ago.
log-in.png (10.3 KB) - added by azaozz 12 years ago.
21598-16.patch (3.6 KB) - added by lessbloat 12 years ago.
21598-17.patch (3.8 KB) - added by lessbloat 12 years ago.
21598-18.patch (2.0 KB) - added by lessbloat 12 years ago.
buttons-and-links.php (2.4 KB) - added by azaozz 12 years ago.
Tweaked test plugin to show input.button and a.button
21598-19.patch (788 bytes) - added by lessbloat 12 years ago.
21598-20-install+errors.diff (6.0 KB) - added by DrewAPicture 12 years ago.
Install screens plus 'create configuration' & 'no db'
21598-20.2.diff (6.6 KB) - added by DrewAPicture 12 years ago.
21598-20.3.diff (12.0 KB) - added by DrewAPicture 12 years ago.
21598-20.4.diff (13.5 KB) - added by DrewAPicture 12 years ago.
+ repair.php
21598-21.diff (14.8 KB) - added by lessbloat 12 years ago.
21598-21b.diff (14.8 KB) - added by lessbloat 12 years ago.
21598-21c.diff (14.8 KB) - added by lessbloat 12 years ago.
21598-22.diff (14.8 KB) - added by lessbloat 12 years ago.
21598-23.diff (14.9 KB) - added by lessbloat 12 years ago.

Download all attachments as: .zip

Change History (184)

@lessbloat
12 years ago

#1 @lessbloat
12 years ago

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:

http://f.cl.ly/items/3U3v2P1m1q0K2m3n1a3w/21598-preview.jpg

Have a look, and let me know if you spot anything out of place.

#2 @SergeyBiryukov
12 years ago

  • Component changed from General to UI

#3 follow-up: @ocean90
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 @lessbloat
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? :-)

@ocean90
12 years ago

@ocean90
12 years ago

#5 @ocean90
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.

@lessbloat
12 years ago

#6 @lessbloat
12 years ago

Replying to ocean90:

I appreciate the feedback, thanks.

I took another pass at these in 21598-v2.diff

http://f.cl.ly/items/3B3T3r2N0N2v0p3z3u3K/core-buttons-v2.jpg

#7 @DrewAPicture
12 years ago

  • Cc xoodrew@… added

#8 @azaozz
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.

#9 @meliko
12 years ago

  • Cc melissachoyce@… added

#10 follow-up: @koopersmith
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].

@koopersmith
12 years ago

#11 in reply to: ↑ 10 ; follow-up: @lessbloat
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 @koopersmith
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 @koopersmith
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 @helenyhou
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.

@helenyhou
12 years ago

#15 @helenyhou
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 @helenyhou
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.

@lessbloat
12 years ago

#17 @lessbloat
12 years ago

In 21598.5.diff:

  • Added :focus styles
  • Played with a few highlights
  • Played with :active styles

http://f.cl.ly/items/1p0G0C1u1V2f3I280Q2u/new-buttons.jpg

Have a look, and let me know what you think.

@lessbloat
12 years ago

Small button tweaks: text-shadow on top for primary button, hover style for focus, slightly darker border on focus

#18 @helenyhou
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.

@bootsz
12 years ago

First draft of a "style guide" plugin. Adds a new admin page with all button styles.

@bootsz
12 years ago

Err.. wrong file. Here it is!

#19 @ocean90
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: @travisnorthcutt
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.

@lessbloat
12 years ago

Slight tweak to box-shadow - bring it down a notch.

@trepmal
12 years ago

adds .focus, .active, and .hover styles (and adds some missing .button-highlighted styles)

@trepmal
12 years ago

(plugin) 5 buttons times 5 states

@trepmal
12 years ago

same plugin, less yelling

@trepmal
12 years ago

add missing 'short' style

#21 @trepmal
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)

@kadamwhite
12 years ago

Would it be preferable to create a re-usable function to render all the button variants?

#22 @lessbloat
12 years ago

Preview of buttons.3.php with 21598.6.diff applied:

http://f.cl.ly/items/211T2H3F0f1D3R1p0A3M/button-styles.jpg

#23 @ocean90
12 years ago

Disabled buttons shouldn't have any :hover styles assigned.

#24 in reply to: ↑ 20 ; follow-up: @helenyhou
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 @johnjamesjacoby
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.

Last edited 12 years ago by johnjamesjacoby (previous) (diff)

#26 in reply to: ↑ 24 @JerrySarcastic
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.

@trepmal
12 years ago

@trepmal
12 years ago

#27 @trepmal
12 years ago

21598.7.diff

  • 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

buttons.5.php

  • incorrectly had 'active' applied to the disabled buttons
  • incorrectly used null
  • adds 'big' button style

Together:

http://cl.ly/JGUR/2012-09-05_2305.png

@koopersmith
12 years ago

#28 @koopersmith
12 years ago

In [21789]:

New button styles.

Using the new buttons:

  • Button classes are now stackable.
  • All buttons should use a base class of "button".
  • Buttons default to the gray style (formerly "button-secondary"). Buttons can add a style by adding additional classes. To make a primary button, add the "button-primary" class.
  • Buttons can be rendered in various sizes. In addition to the default size, you can add "button-large", "button-small", or "button-tiny".

For backwards compatibility reasons, "button-primary" and "button-secondary" both work as standalone classes.

get_submit_button() has been adjusted to handle shorthand button classes (i.e. button classes can be passed without the "button-" prefix).

props lessbloat, helenyhou, trepmal, nacin. see #21598.

@ocean90
12 years ago

#29 follow-up: @ocean90
12 years ago

IMO the link/button on Update Network screen should be a small button.

http://core.trac.wordpress.org/raw-attachment/ticket/21598/beforeafter.png

#30 @ocean90
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.

Last edited 12 years ago by ocean90 (previous) (diff)

#31 @ocean90
12 years ago

Small buttons for custom fields: #21847

#32 @TobiasBg
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?

I take that back. secondary is removed on purpose, as .button as a base class is sufficient.

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?

Last edited 12 years ago by TobiasBg (previous) (diff)

#33 @johnbillion
12 years ago

  1. Looks like disabled primary buttons still have a hover style (text-shadow).
  2. There is a size difference between button and button-primary which is noticable on the Updates screen: (Firefox 15.0.1 on Win7)

http://i.imgur.com/5uaXD.png

Last edited 12 years ago by johnbillion (previous) (diff)

#34 follow-up: @johnbillion
12 years ago

Some wonkiness on the Customize screen. Firefox 15 on Win7 the buttons are different sizes:

http://i.imgur.com/sySYe.png

Chrome 21 on Win7 the buttons aren't vertically aligned:

http://i.imgur.com/y7myX.png

#35 @johnbillion
12 years ago

Safari on iPad, button text isn't cetered vertically. Trunk compared to 3.4:

http://i.imgur.com/74wIE.png

#36 @johnbillion
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?

#37 @sabreuse
12 years ago

  • Cc sabreuse added

#38 in reply to: ↑ 29 @SergeyBiryukov
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".

#39 @SergeyBiryukov
12 years ago

[21789] broke AJAX in custom fields: #21852.

#40 @jaredatch
12 years ago

  • Cc jared@… added

#41 @scribu
12 years ago

The secondary buttons are too bulky.

Old:

http://i.imgur.com/OPhDo.png

New:

http://i.imgur.com/gtMrH.png

Note how the new buttons are several pixels taller than the dropdowns.

#42 follow-up: @scribu
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: @scribu
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: @TobiasBg
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 @ocean90
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 @TobiasBg
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 @helenyhou
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 given button-large and button-largest classes which have the size of the current default buttons and button-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.

#48 follow-up: @travisnorthcutt
12 years ago

  • Cc travis@… removed

#49 @nacin
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 @SergeyBiryukov
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: @tar.gz
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.

#52 in reply to: ↑ 51 @helenyhou
12 years ago

Replying to tar.gz:

I would see it as a big UI improvement to have that link styled as a button.

You are probably looking for #19956.

@azaozz
12 years ago

@azaozz
12 years ago

@azaozz
12 years ago

@azaozz
12 years ago

@azaozz
12 years ago

#53 @azaozz
12 years ago

Seeing some inconsistencies in Firefox:


The buttons seem a bit too large there? Save and Reset are too close?


Looks like these should be the same size.


Again, the 3 buttons are different size.


This Save is huge there?


All 3 are quite different size :)

#54 follow-up: @azaozz
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: @lessbloat
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.

@lessbloat
12 years ago

#56 @lessbloat
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?).
Last edited 12 years ago by lessbloat (previous) (diff)

#57 in reply to: ↑ 55 @azaozz
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 :)

#58 @SergeyBiryukov
12 years ago

#21889 was marked as a duplicate.

@lessbloat
12 years ago

#59 @lessbloat
12 years ago

21598.10.diff adds a bit bolder :focus styles:

http://f.cl.ly/items/3k030p1m3U2k3t1d0r0g/button-focus.jpg

#60 @Ipstenu
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.

@lessbloat
12 years ago

#61 @lessbloat
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.

Last edited 12 years ago by lessbloat (previous) (diff)

@lessbloat
12 years ago

#62 @lessbloat
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)
Last edited 12 years ago by lessbloat (previous) (diff)

#63 @nacin
12 years ago

In [21944]:

Updates and fixes to the new button styles. By default, buttons are now the same size as they were in 3.4. Then there is a smaller button (designed for minor elements) and a larger button (designed for things like Publish and Save Changes). Better focus styles. props lessbloat. see #21598.

#64 @helenyhou
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 @helenyhou
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.

Last edited 12 years ago by helenyhou (previous) (diff)

#66 follow-up: @SergeyBiryukov
12 years ago

IE 7 doesn't apply button height properly: 21598.ie7.png.

@lessbloat
12 years ago

#67 @lessbloat
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

#68 follow-up: @TobiasBg
12 years ago

In [21944]: .button-large, .button-small, but .button.regular?

#69 in reply to: ↑ 68 ; follow-up: @lessbloat
12 years ago

Replying to TobiasBg:

In [21944]: .button-large, .button-small, but .button.regular?

.regular just overrides a primary buttons padding to act more like a regular .button (it's a bit of a hack).

@lessbloat
12 years ago

#70 @lessbloat
12 years ago

Changed .button 2px inset box-shadow to 1px in 21598.13b.diff

#71 in reply to: ↑ 69 @TobiasBg
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 @grapplerulrich
12 years ago

Has anyone thought of the "Move to Trash"? I think a button for that would look great too.

#73 @koopersmith
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.

#74 @koopersmith
12 years ago

In [22099]:

Refine button styles, notably the gray buttons.

  • Crisper edges, fewer outer shadows.
  • Higher contrast borders on the gray buttons.
  • Separates button-large from button-primary, and removes the regular override class.

props hugobaeta, helenyhou, lessbloat. see #21598.

#75 @koopersmith
12 years ago

Next steps:

  • Refresh 21598.13.diff. Keep the IE changes, cursor: default; on disabled buttons, and the changes to wp-admin.css.
  • Audit core for usage of submit_button( $text, 'primary', $etc ); and update primary to primary large.
  • Finally, since the buttons CSS in colors-fresh and colors-classic is identical (not to mention a substantial amount of CSS), I propose we move the button CSS to a section in wp-admin.css.

#76 @TobiasBg
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?

Last edited 12 years ago by TobiasBg (previous) (diff)

#77 follow-up: @Ipstenu
12 years ago

Empty spam on the bottom row is missing it's tushie.

http://cl.ly/image/070s0n0Q2b0e

#78 @nacin
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.

Last edited 12 years ago by nacin (previous) (diff)

#79 in reply to: ↑ 77 @lessbloat
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?

Last edited 12 years ago by lessbloat (previous) (diff)

#80 @lessbloat
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: @SergeyBiryukov
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: @lessbloat
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.

Last edited 12 years ago by lessbloat (previous) (diff)

#83 in reply to: ↑ 82 @SergeyBiryukov
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.

#86 @nacin
12 years ago

The sample permalink spacing issue has been broken out into #22184.

#87 @SergeyBiryukov
12 years ago

#22136 was marked as a duplicate.

#9 @koopersmith
12 years ago

In [22236]:

Consolidate buttons CSS into a single file.

Adds wp-includes/css/buttons.css to consolidate buttons files and make them available in a modular fashion. Buttons are included automatically with the colors styles, and can be included independently by running:

wp_enqueue_style('buttons');

fixes #22197, see #21598.

#2 @koopersmith
12 years ago

In [22237]:

Make <button> elements inherit font settings. fixes #22201, see #21598.

#2 @koopersmith
12 years ago

In [22239]:

Revise and combine button selectors.

  • Simplifies button selectors. Maintains backwards compatibility for several classes and makes creating new button styles considerably easier.
  • Adds buttons documentation.
  • Raw input submit/reset/button types now use default browser styles (instead of half-styled borders that did not look like buttons).
  • Moves basic button color standardization to the beginning of wp-admin.

see #21598, #22197.

#3 follow-up: @koopersmith
12 years ago

In [22242]:

Add button groups. see #21598, #21390.

#4 @koopersmith
12 years ago

In [22245]:

Add a down arrow button. see #21598, #21390, #21813.

#28 @koopersmith
12 years ago

In [22247]:

Add attachment display settings to the media modal.

  • Add a media view for button groups.
  • Add button dropdown containers.
  • Add a dropdown property to the button media model.

fixes #22206, #21814, see #21390, #21813, #21598.

#29 follow-up: @azaozz
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?

@azaozz
12 years ago

@azaozz
12 years ago

#30 @azaozz
12 years ago

The login screen with 21598-15.patch applied in Firefox and Chrome on Win:

@lessbloat
12 years ago

#31 @lessbloat
12 years ago

Added slightly bolder :focus styles back in 21598-16.patch. In my mind it's okay to have slightly bolder box-shadows for :focus, since users will only see them when tabbing.

Here's what it looks like:

http://f.cl.ly/items/0S3f3N0V043p341R3S0Q/button-focus.jpg

@lessbloat
12 years ago

#32 @lessbloat
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.

#33 @azaozz
12 years ago

In [22288]:

Buttons: slightly bolder :focus styles, make the "Log In" button '.button-large', props lessbloat, see #21598

#34 follow-up: @azaozz
12 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [22289]:

Fix the buttons in IE, make them better in IE7, remove the default padding in Firefox, make all .button <a> and <input> look the same, fixes #21598

#35 @lessbloat
12 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

The primary buttons are 2px smaller than the secondary buttons in FF (Mac):

http://f.cl.ly/items/1c2S1V1K0z0s2x3j2Y28/primary-smaller.jpg

#36 @lessbloat
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:

http://f.cl.ly/items/2Q1g0F0F0p1P380I0m0y/button-heights.jpg

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.

@lessbloat
12 years ago

#37 @azaozz
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.

@azaozz
12 years ago

Tweaked test plugin to show input.button and a.button

@lessbloat
12 years ago

#38 @lessbloat
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 @helenyhou
12 years ago

21598-19.patch does something funky to the welcome panel button:

http://f.cl.ly/items/333V200S3m1U2y100W0s/Screen%20Shot%202012-10-24%20at%204.37.17%20PM.png

And doesn't look very good for some of the buttons (not necessarily all of them) in FF/OSX:

http://f.cl.ly/items/2z050Z3j2a1x3j1Z3I2i/Screen%20Shot%202012-10-24%20at%204.36.42%20PM.png

@DrewAPicture
12 years ago

Install screens plus 'create configuration' & 'no db'

#40 @DrewAPicture
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:

After:

#41 @DrewAPicture
12 years ago

21598-20.2.diff uses wp_admin_css() in install.php

And ugh, here are the remaining Install screenshots:

Before:

After:

#42 follow-up: @helenyhou
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: @DrewAPicture
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:

http://f.cl.ly/items/221t1g3w3J350x2e1p2W/install_before-after.png

@DrewAPicture
12 years ago

+ repair.php

#44 follow-up: @DrewAPicture
12 years ago

21598-20.4.diff adds updated styles to repair.php

Updated before/afters: http://cl.ly/image/073u0h361C2y

@lessbloat
12 years ago

#45 @lessbloat
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)

@lessbloat
12 years ago

#46 @lessbloat
12 years ago

@DrewAPicture pointed out that the button styles in function.php used 14px font. Updated in 21598-21b.diff.

@lessbloat
12 years ago

#47 @lessbloat
12 years ago

Version of 21598-21b.diff without !important.

#48 follow-up: @DrewAPicture
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 @DrewAPicture
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 @DrewAPicture
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.

@lessbloat
12 years ago

#51 in reply to: ↑ 48 ; follow-up: @lessbloat
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.

@lessbloat
12 years ago

#52 @lessbloat
12 years ago

Tried to fix FF/Win buttons as much as possible without affecting other browsers in: 21598-23.diff.

#53 @azaozz
12 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [22314]:

Buttons:

  • Update the install/initial configuration/repair screens buttons, props DrewAPicture
  • Fix the welcome screen buttons and fine-tune the buttons css, props lessbloat

fixes #21598

#54 follow-up: @azaozz
12 years ago

As far as I see all buttons look good in all browsers. If specific places still need fixing, lets handle them in new tickets.

#55 follow-up: @azaozz
12 years ago

In 22327:

Buttons: make install.css depend on buttons.css (so button styles are always loaded), see #21598

#56 @nacin
12 years ago

In 22424:

Larger buttons for the DB upgrade screens. see #21598.

#58 @koopersmith
12 years ago

In 22707:

Buttons: Remove unused button arrows and dropdowns. see #21598, #21390.

#59 @nacin
12 years ago

In 23044:

Use correct button class hierarchy to ensure the 'Update' button is button-large. see #21598.

Note: See TracTickets for help on using tickets.