Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#37448 closed defect (bug) (fixed)

Primary and secondary buttons need to reset the outline property

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-patch good-first-bug
Focuses: ui Cc:

Description

Seems that only the main CSS class .button resets the outline property while .button-primary and .button-secondary don't. And there are cases where button elements use just .button-primary and .button-secondary without the main CSS class. This is particularly evident on webkit-based browsers on OS X, see screenshot below (the thick blue "border" is the native webkit outline):

https://cldup.com/rrcsfsa5kP.png

Maybe the intended usage is to always set the main class together with the other ones, e.g. class="button button-secondary" and this would fix it, on the other hand an easier solution would be resetting outline also for .button-primary and .button-secondary.

Attachments (1)

37448.patch (15.6 KB) - added by mhowell 8 years ago.
As suggested, this patch adds the 'button' class to all elements with the class 'button-primary' or 'button-secondary'. This includes files both in wp-admin and wp-includes. The patch does NOT affect any calls to PHP functions where individual class names are used as parameters.

Download all attachments as: .zip

Change History (9)

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


8 years ago

#2 @Presskopp
8 years ago

I would go adding the class button.
Would this only be necessary for primary/secondary, or also for link/group etc.?

@mhowell
8 years ago

As suggested, this patch adds the 'button' class to all elements with the class 'button-primary' or 'button-secondary'. This includes files both in wp-admin and wp-includes. The patch does NOT affect any calls to PHP functions where individual class names are used as parameters.

#4 @afercia
8 years ago

Turns out I was partially wrong, because the .button-secondary is there just for backward compatibility reasons and should not be used. From wp-includes/css/buttons.css:

WordPress-style Buttons
=======================
Create a button by adding the `.button` class to an element. For backward
compatibility, we support several other classes (such as `.button-secondary`),
but these will *not* work with the stackable classes described below.

Related: #37138

#5 @afercia
8 years ago

  • Milestone changed from Future Release to 4.7
  • Owner set to afercia
  • Status changed from new to assigned

#6 @afercia
8 years ago

In 38616:

Accessibility: Standardize the remove/delete/cancel links in the Menus screen and Publish meta boxes.

The submitdelete CSS class is used in various places across the admin for some
"red" action links. It is worth simplifying this rule for further improvements
related to color contrast.

  • simplifies a non-standard styling for the "Remove/Cancel" links in the Menus screen
  • underlines all the "Move to trash/Delete" red links in all the Publish meta boxes
  • fixes CSS classes usage for all the Publish meta boxes primary buttons
  • fixes broken layout for the old Link Manager publish meta box

Props karmatosed, hugobaeta, monikarao, afercia.
Fixes #37969, #37018. See #37448, #37138, #27314.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 years ago

#8 @afercia
8 years ago

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

In 38672:

Administration: Improve the usage of the button CSS classes.

Introduces some consistency in the usage of the button CSS classes, fixes the
focus style for accessibility and responsiveness of the buttons.

  • Adds the button class to all primary buttons make them responsive
  • Removes all secondary-button classes and replaces it with button when needed. button-secondary shouldn't be used and exists just for backward compatibility reasons
  • Replaces classes inside submit_button() with a shorthand for some buttons, and use an empty string for the default button class. Passing button is unnecessary
  • Adjusts get_submit_button() to remove empty items

Props iseulde, dimchik, chris_d2d, mhowell, afercia.
Fixes #27314, #37138, #37448.

Note: See TracTickets for help on using tickets.