Make WordPress Core

Opened 11 years ago

Closed 9 years ago

Last modified 9 years ago

#23738 closed enhancement (fixed)

Audit our secondary button uses

Reported by: markjaquith's profile markjaquith Owned by: markjaquith's profile markjaquith
Milestone: 4.4 Priority: normal
Severity: normal Version: 3.6
Component: Administration Keywords: good-first-bug has-patch needs-testing
Focuses: ui Cc:

Description

helen pondered in #wordpress-ui that maybe the "apply" button in the Screen Options dropdown should be a primary button. There's a good argument to be made that when this panel is down, that "apply" button is your new primary.

We should do an audit of our buttons to see if there are any other cases where we could make an action or a temporarily primary action more obvious by using the primary button style.

Attachments (3)

Screen Shot 2014-03-14 at 09.16.34.png (43.4 KB) - added by iseulde 10 years ago.
Screen Shot 2014-03-14 at 09.17.24.png (29.6 KB) - added by iseulde 10 years ago.
enhancement23738.patch (9.2 KB) - added by Dezzy 10 years ago.
Patch for buttons.

Download all attachments as: .zip

Change History (21)

#1 @SergeyBiryukov
11 years ago

  • Component changed from Appearance to Administration
  • Keywords ui-focus added

#2 @ryan
11 years ago

  • Milestone changed from 3.6 to Future Release

#3 @helen
10 years ago

  • Keywords good-first-bug added

#4 follow-up: @alexandec
10 years ago

I've examined the Dashboard and found a number of cases where a primary button is not used, but could be:

  • On the Edit Post page, in the Publish box, after clicking one of the three Edit links, the "OK" button could be a primary button.
  • On the Edit Post page, after clicking "+ Add New Category", the "Add New Category" button could be a primary button.
  • On the Media Library page, the "Add New" button could be a primary button (right now it looks like a primary button on hover only). Adding media is probably the most likely single action for a user to perform on this page, so it makes sense to focus the user on it.
  • On the Media Library -> Add New page, the "Select Files" button could be primary.
  • In the single-file Browser Uploader, the "Upload" button could be primary.
  • On the Pages page, the "Add New" button could be a primary button.
  • On the Users page, the "Add New" button could be a primary button.
  • On Posts, Media, Pages, and Comments pages, when one or more checkboxes are checked next to items, the "Apply" button next to "Bulk Actions" could become a primary button. If a user checks boxes, it's very likely they will perform a bulk action next. The primary button serves as a visual cue showing them how to proceed.
  • On Posts, Media, Pages, and Comments pages, when the user chooses a dropdown option next to the "Filter" button, the "Filter" button could become a primary button, reminding the user they need to click the button to activate the filter.

#5 @Dezzy
10 years ago

I would like to fix this problem.

#6 @iseulde
10 years ago

The "Delete Users" and "Import WordPress" screens both don't have a primary button and should really have one. See screenshots.

#7 follow-up: @tivvit
10 years ago

Hi I want to help with this too.
I chose this ticket for school project so I need to solve it.

thx

#8 @utkarshd_42
10 years ago

I think the apply buttons beside the Bulk actions menu should be a primary button.

#9 in reply to: ↑ 7 @utkarshd_42
10 years ago

Replying to tivvit:

Hi I want to help with this too.
I chose this ticket for school project so I need to solve it.

thx

Hi, I don't think there is any solving required. It's just an audit of their secondary button usage. As far as I can interpret only reporting those buttons (which are secondary and you think are supposed to be primary), is needed. For actually changing such buttons to primary, as almost all buttons have been added using the function submit_button() you could just pass the $type parameter as 'primary'.

@Dezzy
10 years ago

Patch for buttons.

#10 @Dezzy
10 years ago

Hi, I have uploaded patch for few buttons in description. Now I'll start working on Bulk actions menu.

Is this all right? It's my first bug, so I'm not sure in this things.

Thx for reply.

Last edited 10 years ago by Dezzy (previous) (diff)

#11 @nacin
10 years ago

  • Owner set to markjaquith
  • Status changed from new to assigned

Assigning to markjaquith for review (and to take this ticket off the good-first-bugs report).

#12 @ipm-frommen
9 years ago

  • Keywords has-patch needs-testing added

#13 in reply to: ↑ 4 ; follow-up: @helen
9 years ago

  • Milestone changed from Future Release to 4.4

Since this has been sitting for so long, I'm going to handle getting this in rather than prompting for a re-patch, as I usually would.

Replying to alexandec:

  • On the Edit Post page, in the Publish box, after clicking one of the three Edit links, the "OK" button could be a primary button.

This is a bit noisy and too close to the Publish button, and they also stay on-screen.

  • On the Edit Post page, after clicking "+ Add New Category", the "Add New Category" button could be a primary button.

See above.

  • On the Media Library page, the "Add New" button could be a primary button (right now it looks like a primary button on hover only).

The "Add New" links are not buttons and shouldn't be.

  • On the Media Library -> Add New page, the "Select Files" button could be primary.
  • In the single-file Browser Uploader, the "Upload" button could be primary.

Sounds good.

  • On the Pages page, the "Add New" button could be a primary button.
  • On the Users page, the "Add New" button could be a primary button.

Per above, not buttons.

  • On Posts, Media, Pages, and Comments pages, when one or more checkboxes are checked next to items, the "Apply" button next to "Bulk Actions" could become a primary button. If a user checks boxes, it's very likely they will perform a bulk action next. The primary button serves as a visual cue showing them how to proceed.

I wouldn't want to change a button's color this way, but I think there's a ticket about enabling/disabling/hiding things up there when nothing's selected that may already have some commits on it.

  • On Posts, Media, Pages, and Comments pages, when the user chooses a dropdown option next to the "Filter" button, the "Filter" button could become a primary button, reminding the user they need to click the button to activate the filter.

Also wouldn't want to shift a button's color here.

This ticket was mentioned in Slack in #design by helen. View the logs.


9 years ago

#15 @helen
9 years ago

In 35161:

Screen options: Improve the "Apply" button

Previously the button was output as a part of the per-page option rendering, inline with that input. While this was appropriate for core's usage, the screen_settings filter has allowed plugins to place additional items at the bottom of the panel, which a number take advantage of. This leads to confusing situations where plugins that don't save settings via Ajax either have to add their own button or piggyback onto the existing button, which doesn't make any sense in the flow of additional options. It also hinders core from adding any other options that need to be submitted.

Also, when the screen options panel is open, a submit button there is the primary action at that moment. The "Apply" button also does a full page load, which a primary button indicates better.

fixes #34295. see #22222, #23738.

#16 in reply to: ↑ 13 @helen
9 years ago

Replying to helen:

  • On the Media Library -> Add New page, the "Select Files" button could be primary.
  • In the single-file Browser Uploader, the "Upload" button could be primary.

Sounds good.

Upon actually trying this out, it is overbearing and distracts from the drag-and-drop hint in plupload. Seems fine for the browser uploader button though, since it's a similar context to the import file button.

#17 @helen
9 years ago

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

In 35182:

Make some primary action buttons look primary.

  • User deletion/removal
  • Site status change (multisite)
  • Network upgrade
  • Import file upload
  • Media browser upload

props Dezzy for the initial patch.
fixes #23738.

#18 @helen
9 years ago

In 35204:

Make the database update button primary.

see #23738.

Note: See TracTickets for help on using tickets.