Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#34242 closed defect (bug) (fixed)

Buttons styles: audit the button-reset and button-link styles

Reported by: afercia's profile afercia Owned by: helen's profile 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)

34242.diff (9.5 KB) - added by paulwilde 9 years ago.

Download all attachments as: .zip

Change History (12)

#1 @paulwilde
9 years ago

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.

@paulwilde
9 years ago

#2 @paulwilde
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 @helen
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().

#5 @helen
9 years ago

  • Milestone changed from Awaiting Review to 4.4

#6 @Michael Arestad
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.

#7 @wonderboymusic
9 years ago

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

#8 @helen
9 years ago

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

In 35636:

Buttons: Standardize on .button-link for link-like buttons.

This serves as both a reset and some basic styling. The class name also aligns with parallel components in other popular projects.

props paulwilde for the initial patch.
fixes #34242.

#9 @helen
9 years ago

In 35721:

Postbox handle buttons don't need a focus outline.

see #33808, #34242.

#10 @afercia
8 years ago

In 40052:

Buttons: Improve the .button-link CSS class for link-like buttons.

Updates .button-link adding color and underline to make link-like buttons look
like links by default. Introduces .button-link-delete as a modifier, stackable
CSS class for red button-links.

Props Cheffheid, afercia.

See #34242.
Fixes #35126.

#11 @afercia
8 years ago

In 40059:

Buttons: Fix a few .button-link glitches after [40052].

Removes some stray underlines. Explicitly set the button text to be left aligned.

Props Cheffheid, f.staude, Presskopp.

See #34242.
Fixes #35126, #38712.

Note: See TracTickets for help on using tickets.