[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:  Awaiting Review
Component:  General        |    Version:  5.6
 Severity:  normal         |   Keywords:  needs-patch has-screenshots
  Focuses:  ui, css        |
---------------------------+-----------------------------------------
 In 5.6RC1 and 5.6 Nightly the styling of the Close button from a jQuery
 UI-dialog is different, giving another view of Dialogs. Instead of showing
 only a cross, like expected, it shows the cross as well as the text
 “Close”, see attached screenshot.

 In 5.5 this text was wrapped in a `span` element that was hidden using
 `display: none;`. In 5.6 with upgraded jQuery this text is in the `button`
 element itself, rendering that solution useless. jQuery UI solves that by
 putting the text away from the screen by use of a gigantic negative text-
 indent. In WordPress’ [https://github.com/WordPress/wordpress-
 develop/blob/5.6/src/wp-includes/css/jquery-ui-dialog.css Jquery UI Dialog
 stylesheet] there is no CSS at all for `.ui-button-icon-only`, as there is
 on jQueryUI.com. I swiftly tried copying
 [https://jqueryui.com/dialog/#default the CSS used by jQueryUI] but that
 doesn’t work in WordPress, since Wordpress seems to rely on `position:
 absolute;` in the dialog header.

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