Looks like layout_builder_restrictions is not the only module with the problem. There's also these modules, the version of the module is not compatible with Drupal 11.
"drupal/field_group": "^3.4",
"drupal/focal_point": "^2.0",
"drupal/layout_builder_restrictions": "^2.19",
"drupal/linkit": "^6.1",
"drupal/menu_block": "^1.10",
"drupal/paragraphs": "^1.16",
"drupal/pathauto": "^1.12",
"drupal/redirect": "^1.9",
"drupal/simple_sitemap": "^4.1",
"drupal/webform": "^6.2"
The Drupal 11 compatible version of field_group and linkit are still in alpha, and webform doesn't have D11 compatible version yet.
Perhaps the CivicTheme cannot be installed in Drupal 11 at this stage until other modules are D11 ready.
Only layout_builder_restrictions 3.x supports Drupal 11. I've created a patch for that.
kelvinwong → made their first commit to this issue’s fork.
Kristen Pol → credited KelvinWong → .
fubarhouse → credited KelvinWong → .
smustgrave → credited KelvinWong → .
I can confirm the button colour issue is now fixed in core.
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
Patch provided to lock psr/http-message to version v1.1.
KelvinWong → created an issue.
Sorry this is indeed an issue of the modifier pack module.
KelvinWong → created an issue.
Proposed resolution is updated in the ticket to match the patch provided in #13.
I will also recommend pulling in the button styles when jquery ui dialog is used. That will also fix the spacing issues between buttons.
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 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="{"width":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.
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.
RE: #3
That's interesting. What version of Drupal did you perform the test on?
Update link to repo with the right correct version of Drupal.
KelvinWong → created an issue.