[wp-trac] [WordPress Trac] #51863: jQuery UI dialog close button style is broken

[WordPress Trac]

#51863: jQuery UI dialog close button style is broken
-----------------------------------------+----------------------
 Reporter:  marijnkoopman                |       Owner:  (none)
     Type:  defect (bug)                 |      Status:  new
 Priority:  normal                       |   Milestone:  5.6
Component:  External Libraries           |     Version:  5.6
 Severity:  normal                       |  Resolution:
 Keywords:  needs-patch has-screenshots  |     Focuses:  ui, css
-----------------------------------------+----------------------

Comment (by azaozz):

 @marijnkoopman yes, can reproduce, thanks for reporting this :)

 Unfortunately WP doesn't include the UI CSS. It only includes few bits and
 pieces that have been added over the years in 4-5 different places/files.
 Most have been edited to fit/match the rest of the wp-admin CSS. See:
 [31569], [30343], [23515], etc.

 Fortunately the different UI components inherit the wp-admin CSS quite
 well, in most cases.

 As you mention this particular bug is because the button text is not
 wrapped in a span in button.js in UI 1.12.1 (and the `.ui-button-text`
 class is not used any more). However there is a setting for UI Dialog to
 specify the text for that particular close button that also allows empty
 string: https://api.jqueryui.com/dialog/#option-closeText. Ideally plugins
 would use it.

 Don't see a particularly good way to fix this. The styles from UI 1.12.1
 don't work in WP. A possible fix seems to be to add `overflow: hidden;` as
 that button is limited in size to 36x36px.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51863#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform