Background colour of UI widgets get overridden on Ajax load.

I tried reproducing the issue but button is working fine for me. I followed the same steps, please let me know if I am missing something.

Update link to repo with the right correct version of Drupal.

RE: #3

That's interesting. What version of Drupal did you perform the test on?

From the style of your dialog. I can see the jquery.ui/theme.css did not get loaded. It is likely you are using the Drupal 11.x.

This problem happen to the current latest release of Drupal 10.1.2.

Hi
as per the last comment i have reproduce issue on my local & created patch for the issue Background colour of UI widgets get overridden on Ajax load, attached the images for reference
Needs review

Before patch

After patch

Sorry miss the patch in comment #7, adding the in this comment

There a way to replicate this without a contrib module?

I also stumbled into this issue, but not with the module described in the ticket. In my case it was with paragraphs.

When the user tries to add a media in the add/edit form, the modal button shows correctly.
But if the user adds a paragraph, from a different field, to the form, then if the user opens de modal again, the button shows with the gray background.

I managed to track a bit the issue. I found that some js libraries are being loaded again when the paragraph was being added to the form. One of the libraries is jquery.ui/theme.css, and this makes it to take more priority in css causing the button issue.

I attached a screenshot of the css file that gets loaded.

I am not surprised that happens on other modules. That extra reference to jquery.ui/theme.css injected by Ajax is also the cause in my case.

Look at the core/drupal.dialog defined in the info.yml, it extends the claro/claro.jquery.ui library.
https://git.drupalcode.org/project/drupal/-/blob/10.1.2/core/themes/clar...

  core/drupal.dialog:
    - claro/claro.drupal.dialog
    - claro/claro.jquery.ui

As a result, whenever the core Drupal dialog is called, it loads the jquery.ui/theme.css file, which sets all the .ui-widget background to none.
https://git.drupalcode.org/project/drupal/-/blob/10.1.2/core/themes/clar...

claro.jquery.ui:
  version: VERSION
  css:
    component:
      css/components/jquery.ui/theme.css: { weight: -1 }

In css/components/jquery.ui/theme.css
https://git.drupalcode.org/project/drupal/-/blob/10.1.2/core/themes/clar...

.ui-widget {
  background: none;
}

Steps to replicate the issue without involvement of contrib modules

• Set Claro as the default theme, such that both the frontend and admin theme are Claro.
• Create a basic page content with the following content in body field, you may need to switch to Full HTML in text format.
  

  <p>
      <a class="use-ajax" href="/node/add/page" data-dialog-options="{&quot;width&quot;:600}" data-dialog-type="modal">Create basic page in modal dialog.</a>
  </p>
  

After saving the page, try clicking on the "Create basic page in modal dialog" link, and you will see the save button is losing its primary button colour inside the model.

Looking at the file description of jquery.ui/theme.css in the theme, this css file is meant to override the styles in /core/assets/vendor/jquery.ui/themes/base/theme.css.

However, I couldn't find any background set up with .ui-widget in the core css file. My recommendation to fix the problem is to get rid of the background none in the theme style, as the css rule is redundant from my point of view.

jquery.ui/theme.css
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/themes/clar...

/core/assets/vendor/jquery.ui/themes/base/theme.css
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/assets/vend...

I will also recommend pulling in the button styles when jquery ui dialog is used. That will also fix the spacing issues between buttons.

Can the issue summary be updated to include full solution. Current IS talks about pulling in button.css but patch #13 also is removing some css.

Proposed resolution is updated in the ticket to match the patch provided in #13.

I have installed 'drupal/scheduled_transitions:^2.3' this version of the module and i tried to reproduce the issue but i am not facing any problem as mentioned above its working fine

@KelvinWong tried following the step you gave in #11 and still not able to trigger the problem.

On D11.x and standard profile.

This will not happen on Drupal 11.x. It is only an issue on Drupal 10.x. In D11 the library claro/claro.jquery.ui is not included when core/drupal.dialog is used, and the claro/claro.jquery.ui library is what pulling in the css style with background none.

Compare the library extend set up in D10 and D11:

In Drupal 11.x:
https://git.drupalcode.org/project/drupal/-/blob/11.x/core/themes/claro/...

libraries-extend:
...
  core/drupal.dialog:
    - claro/claro.drupal.dialog

In Drupal 10.x:
https://git.drupalcode.org/project/drupal/-/blob/10.1.2/core/themes/clar...

libraries-extend:
...
  core/drupal.dialog:
    - claro/claro.drupal.dialog
    - claro/claro.jquery.ui

So 11.x is just the main branch now. 10.2 will be tagged from that. So sounds like this will be fixed. Should find the issue it was fixed in and see why it wasn’t backported to 10.1

Actually appears the change mentioned in #19 it's on the 10.1.x branch already too. So think this can be closed.

Fixed in 🐛 claro.jquery.ui css assets may be added the page multiple times Fixed

@KelvinWong can you confirm. I can move over credit.

I can confirm the button colour issue is now fixed in core.

Re-opening this as it's still an issue in 10.3. Steps to reproduce are the same but you must have the contextual module uninstalled. I believe it ultimately comes down to the contextual/drupal.contextual-toolbar library which ends up loading claro/claro.jquery.ui but the stylesheets are in a different order, so jquery.ui/theme.css takes precedence over claro's button.css.

Added steps to reproduce and updated screenshots without contrib.

Tested on 11.x and 10.4.x and can reproduce there also.

Added MR for the 11.x version from #27 patch