Claro dropbutton non-link items need solid background

@Nitin Shrivastava,

I try to install 2.0.0-rc6 as the following URL https://www.drupal.org/project/scheduler/releases/2.0.0-rc6 →
But it installing the latest version and This issue has been fixed in the latest version 2.0.0-rc8.

Is this is an issue that's currently happening in core without scheduler?

It would be apparent in core without Scheduler, if we found a place where a dropbutton item is used as a divider/group heading/greyed-out option, and therefore does not have a url associated with it. I don't think I'm breaking any rules by using the dropbuttons this way? The fact that Olivero and Seven both have solid backgrounds for non-urls makes it feel like this was an intended use, and that Claro got missed.

So should this be re-opened.

Yes I've just checked on core 11.1-dev and it is still a problem - see new screenshot.
I have not seen it in a core drop-down, but as I said before, given that the equivalent styling in other themes has a solid background for the non-active menu items it should really be done for Claro too. The fix shown in #2 (without the initial .scheduler-admin-form identifier) could be added to the appropriate core .css file.

Hello, I have checked this on Drupal Version 11.1.6 , Claro theme and the solid background color is there for all the options despite they have been set to use scheduler or not.
I have also checked this on Drupal Version 11.0.dev version for Claro theme.
Added screenshots below for reference.

@snehal-chibde Thanks, but the reason it works is that Scheduler provides the solid background specifically to solve this problem. See my comments in #2 and #4 above. Here is the css override that the project uses. If you edit your scheduler .css and remove those lines you will see that the background colour disappears.

Hi @jonathan1055,
Could you please guide me on how to reproduce this issue? I’ve gone through the comments but wasn’t able to fully understand the steps. So far, I have changed the theme to Claro. Do I have to install the Scheduler module also?

Hi libbna,
One way to replicate this would be to follow my suggestion in #12 above. Install Scheduler then delete the "temporary" fix that is committed to the .css as linked in that comment.

Or you can create a new drop-down form item in any project, but have some items with just text not a url. Those will have the incorrect transparent background in Claro, but will have the required solid background in the other themes. Dropdowns can be identified with #type of 'dropbutton', for example:

    $form['entity_type_links'] = [
      '#type' => 'dropbutton',
      '#links' => $links,
    ];

So you could search any project for one of those, then add another menu item without a url, or remove the urls in existing link definitions.

@jonathan1055 Is it necessary to install the Scheduler module to reproduce this issue? I haven't installed it. Instead, to replicate the issue, I added the dropbutton to the operations column via the browser's inspect tool. Then, I used the following JavaScript code in the console to remove the href attribute from every alternate link:

document.querySelectorAll('.dropbutton a').forEach((link, index) => {
  if (index % 2 === 0) { // Remove href from every other link
    link.removeAttribute('href');
    link.style.cursor = 'default';
    link.textContent = link.textContent + ' (No URL)';
  }
});

The background color for the options without a URL appears to be rendering correctly in my case.

Please let me know if I may have misunderstood the issue or gone in the wrong direction. I have also attached a screenshot for your reference.

Thank you.