Problem/Motivation

I have https://www.drupal.org/project/media_library_edit module enabled on my site which adds a modal edit form for media.
When I hover over the close button, focus probably affected as well, I see an image sprite zoomed too far out.
Close icon using the wrong image on hover.

Upon investigation there doesn't appear to be any rules in the dialog.css file that comes with claro for hover state on the close button
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/themes/clar...

In the included theme.css file from jquery.ui there is an image sprite reference for hover state
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/themes/clar...

I fixed this within my inspector by editing an .ui-dialog .ui-icon.ui-icon-closethick existing class

.ui-dialog .ui-button:hover .ui-icon.ui-icon-closethick,
.ui-dialog .ui-icon.ui-icon-closethick,

However, I am not sure if this is what the theme maintainer would want here.

Proposed resolution

Somehow override the image selection from jquery.ui with claro theme images for the close button with a hover state applied.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#18 Screenshot from 2025-07-21 15-54-25.png124.58 KBsandip
#16 3335935-16-fix-close-button-display.patch481 bytes_renify_
#15 Screenshot 2025-07-09 at 7.48.54 AM.png146.76 KB_renify_
#14 Screenshot-of-working-media-library-edit-modal-in-claro-theme.png57.49 KBniranjan_panem
#9 interdiff_5-9.txt1.07 KBtrackleft2
#9 3335935-9.patch393 bytestrackleft2
#5 interdiff_3-5.txt1.08 KBtrackleft2
#5 3335935-claro-close-hover-5.patch1.04 KBtrackleft2
#3 3335935-claro-close-hover.patch852 bytestrackleft2
#2 211622620-1cb1908d-2205-422a-a5a6-6ea4c197020c.png24.01 KBtrackleft2

Issue fork drupal-3335935

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

trackleft2 created an issue. See original summary.

trackleft2’s picture

trackleft2
Primary language English
Location Tucson, AZ 🇺🇸
commented
Issue summary: View changes
StatusFileSize
new 211622620-1cb1908d-2205-422a-a5a6-6ea4c197020c.png24.01 KB
trackleft2’s picture

trackleft2
Primary language English
Location Tucson, AZ 🇺🇸
commented
StatusFileSize
new 3335935-claro-close-hover.patch852 bytes
trackleft2’s picture

trackleft2
Primary language English
Location Tucson, AZ 🇺🇸
commented

Additional reference https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/assets/vend...

trackleft2’s picture

trackleft2
Primary language English
Location Tucson, AZ 🇺🇸
commented
StatusFileSize
new 3335935-claro-close-hover-5.patch1.04 KB
new interdiff_3-5.txt1.08 KB
joegraduate’s picture

joegraduate
Primary language English
Location Arizona, USA
commented
Component: theme system » Claro theme
gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
j_s’s picture

j_s commented

Please provide step-by-step instructions to reproduce this issue.

trackleft2’s picture

trackleft2
Primary language English
Location Tucson, AZ 🇺🇸
commented
StatusFileSize
new 3335935-9.patch393 bytes
new interdiff_5-9.txt1.07 KB

Upon further testing, it appears that this is just a load order issue.

claro.drupal.dialog should not be loadable without its dependency claro.jquery.ui

Status: Needs review » Needs work

The last submitted patch, 9: 3335935-9.patch, failed testing. View results

joegraduate’s picture

joegraduate
Primary language English
Location Arizona, USA
commented 
+++ b/core/themes/claro/claro.libraries.yml
@@ -137,6 +137,8 @@ claro.drupal.dialog:
+    - claro.jquery.ui

I think this needs to be - claro/claro.jquery.ui

trackleft2’s picture

trackleft2
Primary language English
Location Tucson, AZ 🇺🇸
commented

The patches do not work for me to resolve the issue, even with @joegraduate' s suggestion.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

niranjan_panem’s picture

niranjan_panem commented
StatusFileSize
new Screenshot-of-working-media-library-edit-modal-in-claro-theme.png57.49 KB

Checked in drupal 11 claro theme, not able to reproduce the issue.
Below is the screen shot of edit-media library working as expected.
screen shot of working media edit library

_renify_’s picture

_renify_ commented
StatusFileSize
new Screenshot 2025-07-09 at 7.48.54 AM.png146.76 KB

Close button does not display when background:none apply . I think we should remove this
aa

_renify_’s picture

_renify_ commented
StatusFileSize
new 3335935-16-fix-close-button-display.patch481 bytes
sandip’s picture

sandip commented

I am looking into it.

sandip’s picture

sandip commented
StatusFileSize
new Screenshot from 2025-07-21 15-54-25.png124.58 KB

I tried to reproduce the issue by following the steps mentioned in Media Library Edit module's homepage. But the issue is not reproduceable After clicking the Edit Menu button the Modal appears and hovering on the close button of the modal no regression is occuring. I am attaching an image for better understanding.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

mohit_aghera made their first commit to this issue’s fork.

mohit_aghera opened merge request !15483

sivaji_ganesh_jojodae’s picture

sivaji_ganesh_jojodae commented
Status: Needs work » Postponed

See #3576668: [meta] Tasks to deprecate Claro.