WordPress.org

Make WordPress Core

Opened 20 months ago

Closed 18 months ago

Last modified 17 months ago

#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)

21598.diff (25.2 KB) - added by lessbloat 20 months ago.
postscreen.png (247.5 KB) - added by ocean90 20 months ago.
zoom.png (47.8 KB) - added by ocean90 20 months ago.
21598-v2.diff (24.0 KB) - added by lessbloat 20 months ago.
buttons-radius-3px.png (4.2 KB) - added by azaozz 20 months ago.
21598.3.diff (24.0 KB) - added by koopersmith 20 months ago.
21598.4.diff (27.7 KB) - added by helenyhou 20 months ago.
Screen Shot 2012-08-30 at 1.09.51 AM.png (58.7 KB) - added by helenyhou 20 months ago.
21598.5.diff (31.4 KB) - added by lessbloat 20 months ago.
21598.5b.diff (30.2 KB) - added by lessbloat 20 months 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 20 months 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 20 months ago.
Err.. wrong file. Here it is!
21598.5c.diff (30.2 KB) - added by lessbloat 20 months ago.
Slight tweak to box-shadow - bring it down a notch.
21598.6.diff (32.2 KB) - added by trepmal 20 months ago.
adds .focus, .active, and .hover styles (and adds some missing .button-highlighted styles)
buttons.php (3.3 KB) - added by trepmal 20 months ago.
(plugin) 5 buttons times 5 states
buttons.2.php (3.1 KB) - added by trepmal 20 months ago.
same plugin, less yelling
buttons.3.php (3.6 KB) - added by trepmal 20 months ago.
add missing 'short' style
buttons.4.php (1.6 KB) - added by kadamwhite 20 months 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 20 months ago.
buttons.5.php (3.9 KB) - added by trepmal 20 months ago.
21598.8.diff (41.2 KB) - added by koopersmith 20 months ago.
buttons.6.php (2.0 KB) - added by koopersmith 20 months ago.
21598.upgrade-small-button.patch (848 bytes) - added by ocean90 20 months ago.
beforeafter.png (89.1 KB) - added by ocean90 20 months ago.
21598.theme-search-buttons.patch (1.3 KB) - added by ocean90 20 months ago.
21598.remove-small-style.patch (2.7 KB) - added by ocean90 20 months ago.
1.png (10.1 KB) - added by azaozz 19 months ago.
2.png (9.0 KB) - added by azaozz 19 months ago.
3.png (9.0 KB) - added by azaozz 19 months ago.
4.png (6.4 KB) - added by azaozz 19 months ago.
5.png (6.2 KB) - added by azaozz 19 months ago.
21598.9.diff (7.4 KB) - added by lessbloat 19 months ago.
21598.10.diff (8.9 KB) - added by lessbloat 19 months ago.
21598.11.diff (19.6 KB) - added by lessbloat 19 months ago.
21598.12.diff (29.1 KB) - added by lessbloat 19 months ago.
21598.ie7.png (6.8 KB) - added by SergeyBiryukov 19 months ago.
21598.13.diff (5.1 KB) - added by lessbloat 19 months ago.
21598.13b.diff (6.9 KB) - added by lessbloat 19 months ago.
21598.14.diff (14.7 KB) - added by koopersmith 19 months ago.
21598-tushie.diff (337 bytes) - added by lessbloat 19 months ago.
21598-edit-post-box-height.diff (346 bytes) - added by lessbloat 19 months ago.
21598.ie7.2.png (8.8 KB) - added by SergeyBiryukov 19 months ago.
21598.ie7.3.png (8.9 KB) - added by SergeyBiryukov 19 months ago.
21598.ie7.4.png (7.1 KB) - added by SergeyBiryukov 19 months ago.
21598-15.patch (2.7 KB) - added by azaozz 18 months ago.
log-in.png (10.3 KB) - added by azaozz 18 months ago.
21598-16.patch (3.6 KB) - added by lessbloat 18 months ago.
21598-17.patch (3.8 KB) - added by lessbloat 18 months ago.
21598-18.patch (2.0 KB) - added by lessbloat 18 months ago.
buttons-and-links.php (2.4 KB) - added by azaozz 18 months ago.
Tweaked test plugin to show input.button and a.button
21598-19.patch (788 bytes) - added by lessbloat 18 months ago.
21598-20-install+errors.diff (6.0 KB) - added by DrewAPicture 18 months ago.
Install screens plus 'create configuration' & 'no db'
21598-20.2.diff (6.6 KB) - added by DrewAPicture 18 months ago.
21598-20.3.diff (12.0 KB) - added by DrewAPicture 18 months ago.
21598-20.4.diff (13.5 KB) - added by DrewAPicture 18 months ago.
+ repair.php
21598-21.diff (14.8 KB) - added by lessbloat 18 months ago.
21598-21b.diff (14.8 KB) - added by lessbloat 18 months ago.
21598-21c.diff (14.8 KB) - added by lessbloat 18 months ago.
21598-22.diff (14.8 KB) - added by lessbloat 18 months ago.
21598-23.diff (14.9 KB) - added by lessbloat 18 months ago.

Download all attachments as: .zip

Change History (184)

lessbloat20 months ago

comment:1 lessbloat20 months 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.

comment:2 SergeyBiryukov20 months ago

  • Component changed from General to UI

comment:3 follow-up: ocean9020 months ago

From the screenshot they doesn't look quite pretty.

But please no -o-box-shadow, -ms-box-shadow and -moz-box-shadow.

comment:4 in reply to: ↑ 3 lessbloat20 months 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? :-)

ocean9020 months ago

ocean9020 months ago

comment:5 ocean9020 months 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.

lessbloat20 months ago

comment:6 lessbloat20 months 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

comment:7 DrewAPicture20 months ago

  • Cc xoodrew@… added

azaozz20 months ago

comment:8 azaozz20 months 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.

comment:9 meliko20 months ago

  • Cc melissachoyce@… added

comment:10 follow-up: koopersmith20 months 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].

koopersmith20 months ago

comment:11 in reply to: ↑ 10 ; follow-up: lessbloat20 months 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.

comment:12 in reply to: ↑ 11 koopersmith20 months 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.

comment:13 koopersmith20 months 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.

comment:14 helenyhou20 months 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.

helenyhou20 months ago

comment:15 helenyhou20 months 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

comment:16 helenyhou20 months 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.

lessbloat20 months ago

comment:17 lessbloat20 months 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.

lessbloat20 months ago

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

comment:18 helenyhou20 months 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.

bootsz20 months ago

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

bootsz20 months ago

Err.. wrong file. Here it is!

comment:19 ocean9020 months ago

21598.5b.diff: The outer shadow on mouse over should be reduced. 0 0 1px looks good in my eyes.

comment:20 follow-up: travisnorthcutt20 months 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.

lessbloat20 months ago

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

trepmal20 months ago

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

trepmal20 months ago

(plugin) 5 buttons times 5 states

trepmal20 months ago

same plugin, less yelling

trepmal20 months ago

add missing 'short' style

comment:21 trepmal20 months 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)

kadamwhite20 months ago

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

comment:22 lessbloat20 months ago

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

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

comment:23 ocean9020 months ago

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

comment:24 in reply to: ↑ 20 ; follow-up: helenyhou20 months 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.

comment:25 johnjamesjacoby20 months 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 20 months ago by johnjamesjacoby (previous) (diff)

comment:26 in reply to: ↑ 24 JerrySarcastic20 months 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.

trepmal20 months ago

trepmal20 months ago

comment:27 trepmal20 months 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

koopersmith20 months ago

koopersmith20 months ago

comment:28 koopersmith20 months 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.

ocean9020 months ago

comment:29 follow-up: ocean9020 months 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

comment:30 ocean9020 months 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 20 months ago by ocean90 (previous) (diff)

comment:31 ocean9020 months ago

Small buttons for custom fields: #21847

comment:32 TobiasBg20 months 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 20 months ago by TobiasBg (previous) (diff)

comment:33 johnbillion20 months 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 20 months ago by johnbillion (previous) (diff)

comment:34 follow-up: johnbillion20 months 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

comment:35 johnbillion20 months ago

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

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

comment:36 johnbillion20 months 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?

comment:37 sabreuse20 months ago

  • Cc sabreuse added

comment:38 in reply to: ↑ 29 SergeyBiryukov20 months 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".

comment:39 SergeyBiryukov20 months ago

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

comment:40 jaredatch19 months ago

  • Cc jared@… added

comment:41 scribu19 months 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.

comment:42 follow-up: scribu19 months 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.

comment:43 follow-up: scribu19 months ago

  • Keywords needs-patch added; has-patch removed

Current size names:

.button-tiny
.button-small
.button        (default)

Proposed:

.button-small
.button        (default)
.button-big

comment:44 follow-up: TobiasBg19 months 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!

comment:45 in reply to: ↑ 44 ocean9019 months 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.

comment:46 TobiasBg19 months 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?

comment:47 in reply to: ↑ 43 helenyhou19 months 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.

comment:48 follow-up: travisnorthcutt19 months ago

  • Cc travis@… removed

comment:49 nacin19 months 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.

comment:50 in reply to: ↑ 34 SergeyBiryukov19 months ago

Replying to johnbillion:

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

Related: #21889

comment:51 follow-up: tar.gz19 months 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.

comment:52 in reply to: ↑ 51 helenyhou19 months 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.

azaozz19 months ago

azaozz19 months ago

azaozz19 months ago

azaozz19 months ago

azaozz19 months ago

comment:53 azaozz19 months 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 :)

comment:54 follow-up: azaozz19 months 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.

comment:55 in reply to: ↑ 54 ; follow-up: lessbloat19 months 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.

lessbloat19 months ago

comment:56 lessbloat19 months 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 19 months ago by lessbloat (previous) (diff)

comment:57 in reply to: ↑ 55 azaozz19 months 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 :)

comment:58 SergeyBiryukov19 months ago

#21889 was marked as a duplicate.

lessbloat19 months ago

comment:59 lessbloat19 months ago

21598.10.diff adds a bit bolder :focus styles:

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

comment:60 Ipstenu19 months 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.

lessbloat19 months ago

comment:61 lessbloat19 months 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 19 months ago by lessbloat (previous) (diff)

lessbloat19 months ago

comment:62 lessbloat19 months 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 19 months ago by lessbloat (previous) (diff)

comment:63 nacin19 months 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.

comment:64 helenyhou19 months 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.

comment:65 helenyhou19 months 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 19 months ago by helenyhou (previous) (diff)

SergeyBiryukov19 months ago

comment:66 follow-up: SergeyBiryukov19 months ago

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

lessbloat19 months ago

comment:67 lessbloat19 months 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

comment:68 follow-up: TobiasBg19 months ago

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

comment:69 in reply to: ↑ 68 ; follow-up: lessbloat19 months 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).

lessbloat19 months ago

comment:70 lessbloat19 months ago

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

comment:71 in reply to: ↑ 69 TobiasBg19 months 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.

comment:72 grapplerulrich19 months ago

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

koopersmith19 months ago

comment:73 koopersmith19 months 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.

comment:74 koopersmith19 months 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.

comment:75 koopersmith19 months 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.

comment:76 TobiasBg19 months 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 19 months ago by TobiasBg (previous) (diff)

comment:77 follow-up: Ipstenu19 months ago

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

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

comment:78 nacin19 months 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.

Version 0, edited 19 months ago by nacin (next)

lessbloat19 months ago

comment:79 in reply to: ↑ 77 lessbloat19 months 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 19 months ago by lessbloat (previous) (diff)

comment:80 lessbloat19 months 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.

comment:81 in reply to: ↑ 66 ; follow-up: SergeyBiryukov19 months ago

Replying to SergeyBiryukov:

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

Also reported in #22136.

comment:82 in reply to: ↑ 81 ; follow-up: lessbloat19 months 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 19 months ago by lessbloat (previous) (diff)

SergeyBiryukov19 months ago

SergeyBiryukov19 months ago

SergeyBiryukov19 months ago

comment:83 in reply to: ↑ 82 SergeyBiryukov19 months 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.

comment:86 nacin18 months ago

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

comment:87 SergeyBiryukov18 months ago

#22136 was marked as a duplicate.

comment:9 koopersmith18 months 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.

comment:2 koopersmith18 months ago

In [22237]:

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

comment:2 koopersmith18 months 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.

comment:3 follow-up: koopersmith18 months ago

In [22242]:

Add button groups. see #21598, #21390.

comment:4 koopersmith18 months ago

In [22245]:

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

comment:28 koopersmith18 months 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.

comment:29 follow-up: azaozz18 months 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?

azaozz18 months ago

azaozz18 months ago

comment:30 azaozz18 months ago

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

lessbloat18 months ago

comment:31 lessbloat18 months 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

lessbloat18 months ago

comment:32 lessbloat18 months 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.

comment:33 azaozz18 months ago

In [22288]:

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

comment:34 follow-up: azaozz18 months 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

comment:35 lessbloat18 months 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

comment:36 lessbloat18 months 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.

lessbloat18 months ago

comment:37 azaozz18 months 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.

azaozz18 months ago

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

lessbloat18 months ago

comment:38 lessbloat18 months 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.

comment:39 helenyhou18 months 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

DrewAPicture18 months ago

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

comment:40 DrewAPicture18 months 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:

DrewAPicture18 months ago

comment:41 DrewAPicture18 months ago

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

And ugh, here are the remaining Install screenshots:

Before:

After:

comment:42 follow-up: helenyhou18 months ago

I think those need to be bigger buttons / larger text, since it's what the screens currently have and makes sense to retain.

DrewAPicture18 months ago

comment:43 in reply to: ↑ 42 ; follow-up: DrewAPicture18 months 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

DrewAPicture18 months ago

+ repair.php

comment:44 follow-up: DrewAPicture18 months ago

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

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

lessbloat18 months ago

comment:45 lessbloat18 months 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)

lessbloat18 months ago

comment:46 lessbloat18 months ago

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

lessbloat18 months ago

comment:47 lessbloat18 months ago

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

comment:48 follow-up: DrewAPicture18 months 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.

comment:49 DrewAPicture18 months 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.

comment:50 DrewAPicture18 months 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.

lessbloat18 months ago

comment:51 in reply to: ↑ 48 ; follow-up: lessbloat18 months 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.

lessbloat18 months ago

comment:52 lessbloat18 months ago

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

comment:53 azaozz18 months 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

comment:54 follow-up: azaozz18 months 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.

comment:55 follow-up: azaozz18 months ago

In 22327:

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

comment:56 nacin18 months ago

In 22424:

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

comment:58 koopersmith17 months ago

In 22707:

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

comment:59 nacin17 months 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.