#34242 closed defect (bug) (fixed)
Buttons styles: audit the button-reset and button-link styles
Reported by: | afercia | Owned by: | helen |
---|---|---|---|
Milestone: | 4.4 | Priority: | normal |
Severity: | normal | Version: | 4.3 |
Component: | Administration | Keywords: | has-patch |
Focuses: | ui | Cc: |
Description
With recent developments, for example the new Press This and some new features in the Customizer, some new buttons CSS classes were introduced in core. They basically serve the same two purposes:
- a general "reset" class for the buttons background, margin, padding, etc.
- a class to make a button look like a link
Each component introduced its own class, so there's some duplication and potential confusion in the use of these classes. The ones I've found are:
/wp-admin/css/press-this.css `.button-link` `.button-reset` /wp-admin/css/customize-nav-menus.css `.not-a-button` /wp-includes/css/buttons.css `.button-link` /wp-includes/css/media-views.css `.button-link`
I'd propose to consider to move all these classes in buttons.css
. Also, .button-reset
and .not-a-button
should probably be merged in just one class since they serve the same purpose.
Finally, .button-link
would need a review now that the new buttons style introduced in #31459 added a default box-shadow that should be reset for buttons intended to look like links.
cc @helen @hugobaeta
Any thoughts and patches more than welcome :)
Attachments (1)
Change History (12)
#2
@
9 years ago
- Keywords has-patch added
Tested every instance of .button-reset
and .button-link
in core, and this patch shouldn't introduce any regressions.
I changed the button-link
reference to button-reset
in wp-admin/includes/template-functions.php
as this shouldn't inherit the hover state colour as visually it's not a link.
This ticket was mentioned in Slack in #core by helen. View the logs.
9 years ago
#4
@
9 years ago
Did some "market research" on some fairly popular UI/front-end frameworks, .*-link
was the only naming convention I saw in the frameworks that included a text-looking button. I think it's reasonable to just have that one class do both the reset and the basic styling. It would make more sense to me as a dev to "reset" a button to look like a link (because that's the element I would probably be using otherwise) and then do any further styling I might need on top of that, just as I would do for a link.
Let's not add this as shorthand in get_submit_button()
.
#6
@
9 years ago
@helen I agree. It should probably just be *-link
. Reset is handy for when you have buttons that aren't particularly link-like and aren't standard form-y buttons. (an example would be a menu toggle or back button, etc) There's a use case for it, but it's not that much more to reset when overriding the *-link
styles.
I've found another couple of inconsistencies whilst working on a patch for this ticket. See #34246 and #34244.
#34246 in particular would work alongside this ticket.