WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 5 months ago

Last modified 3 months ago

#39983 closed defect (bug) (fixed)

Consider to stop using the CSS class button-link for controls that don't look like links

Reported by: afercia Owned by: afercia
Milestone: 4.7.4 Priority: normal
Severity: normal Version: 4.7
Component: Administration Keywords: has-screenshots has-patch commit fixed-major
Focuses: ui Cc:

Description

After [40059] the CSS class button-link uses text-align: left by default. This makes sense, since this class should be used to make buttons look like links. Browsers default stylesheets make text within buttons centered, so there's the need to make the text explicitly left aligned to prevent some edge cases, see for example #38712.

However, now the media modal "X" close button text is misplaced. Worth checking if the same thing happens for other buttons too. In these cases, text should be centered:

https://cldup.com/pmFlhBxwZV.png

It's a minor visual glitch and can be easily fixed. Ideally, these buttons shouldn't use the button-link class at all. They'd need just some reset of the default buttons CSS properties.

Attachments (2)

39983.diff (2.1 KB) - added by afercia 6 months ago.
39983.2.diff (3.2 KB) - added by afercia 6 months ago.

Download all attachments as: .zip

Change History (9)

@afercia
6 months ago

#1 @afercia
6 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.8
  • Owner set to afercia
  • Status changed from new to assigned
  • Version set to 4.7

39983.diff removes the button-link CSS class from the media modal close button and adjusts the styles accordingly. Pending investigation about other edge cases.

@afercia
6 months ago

#2 @afercia
6 months ago

39983.2.diff adds a few adjustments for the button text alignment in the Customizer and in the auth-check modal.

#3 @swissspidy
5 months ago

  • Keywords commit added
  • Milestone changed from 4.8 to 4.7.4

Patch works as expected.

#4 @afercia
5 months ago

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

In 40358:

Administration: Fix minor misalignments caused by the button-link CSS class.

After [40059] the CSS class button-link uses text-align: left by default.
This change now requires to limit as much as possible the use of button-link
to controls that should really look like links and to explicitly set
text-align: center in a few other cases.

Fixes #39983.

#5 @afercia
5 months ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Re-opening for 4.7.4 consideration.

#6 @swissspidy
5 months ago

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

In 40367:

Administration: Fix minor misalignments caused by the button-link CSS class.

After [40059] the CSS class button-link uses text-align: left by default.
This change now requires to limit as much as possible the use of button-link
to controls that should really look like links and to explicitly set
text-align: center in a few other cases.

Fixes #39983.

Merges [40358] to the 4.7 branch.

#7 @julix91
3 months ago

  • Summary changed from Consider to don't use the CSS class button-link for controls that don't look like links to Consider to stop using the CSS class button-link for controls that don't look like links
Note: See TracTickets for help on using tickets.