[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
-----------------------------------------+----------------------
Changes (by SergeyBiryukov):

 * component:  General => External Libraries
 * milestone:  Awaiting Review => 5.6


Old description:

> 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.

New description:

 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.

--

Comment:

 Hi there, welcome to WordPress Trac!

 Thanks for the report, this appears to be a result of updating jQuery UI
 in [49101] / #50564.

 Moving to the milestone for visibility.

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