Context Navigation

← Previous Ticket
Next Ticket →

#37448 closed defect (bug) (fixed)

Primary and secondary buttons need to reset the outline property

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

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

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 10 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.

10 years ago

#2 @Presskopp
10 years ago

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

#3 @Presskopp
10 years ago

related #27314

@mhowell
10 years ago

Attachment 37448.patch added

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
10 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
10 years ago

Milestone Future Release → 4.7
Owner set to afercia
Status new → assigned

#6 @afercia
10 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.

10 years ago

#8 @afercia
10 years ago

Resolution → fixed
Status assigned → 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.

Download in other formats:

Make WordPress Core

Context Navigation

#37448 closed defect (bug) (fixed)

Primary and secondary buttons need to reset the outline property

Description

Attachments (1)

Change History (9)

This ticket was mentioned in ​Slack in #design by afercia. ​View the logs. 10 years ago

#2 @Presskopp 10 years ago

#3 @Presskopp 10 years ago

@mhowell 10 years ago

#4 @afercia 10 years ago

#5 @afercia 10 years ago

#6 @afercia 10 years ago

This ticket was mentioned in ​Slack in #accessibility by afercia. ​View the logs. 10 years ago

#8 @afercia 10 years ago