Single dropbutton missing styling

I'll look into this isssue.

Hi @very_random_man,

I tried replicating the issue on my end, but I wasn't able to reproduce it. Could you please share more details about the issue, including the steps to replicate it? If possible, screenshots or any other relevant information would be very helpful.

Thanks!

Thanks for looking into it. These are the versions:

D10.3.14
Gin 4.0.6
Workbench Moderation 1.7.0

I have a moderation state of 'archived' where there is only one option to 'unarchive'. Below is the markup that is created for the drop button. I have left the theme debug in so you can see which templates are getting used.

<div class="gin-sticky-form-actions form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-actions" id="edit-actions--3">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'dropbutton_wrapper' -->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/dropbutton-wrapper.html.twig' -->
  <div class="dropbutton-wrapper dropbutton-single" data-drupal-ajax-container="" data-once="dropbutton">
  <div class="dropbutton-widget">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'links__dropbutton' -->
<!-- FILE NAME SUGGESTIONS:
   ✅ links--dropbutton.html.twig
   ✅ links--dropbutton.html.twig
   ▪️ links.html.twig
-->
<!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'themes/contrib/gin/templates/form/links--dropbutton.html.twig' -->
<ul data-drupal-selector="edit-save" class="dropbutton dropbutton--single dropbutton--gin">
<li class="moderation-state-draft dropbutton__item dropbutton-action">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'input__submit' -->
<!-- FILE NAME SUGGESTIONS:
   ▪️ input--submit.html.twig
   ✅ input.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/claro/templates/form/input.html.twig' -->
<input form="node-section-lead-edit-form" type="submit" name="op" value="Save and Un-archive" class="button button--primary js-form-submit form-submit">
<!-- END OUTPUT from 'core/themes/claro/templates/form/input.html.twig' -->
</li>
</ul>
<!-- END CUSTOM TEMPLATE OUTPUT from 'themes/contrib/gin/templates/form/links--dropbutton.html.twig' -->
</div></div>
<!-- END OUTPUT from 'core/modules/system/templates/dropbutton-wrapper.html.twig' -->
</div>

I've added screenshots that show the default and hover state of the button with and without the fix I added in the issue description.

If you look in `styles/base/_dropdown.scss`, you'll see a few mentions of `dropbutton--multiple` but no mention of `dropbutton--single` so I'm guessing it just got overlooked as it's a bit of an edge case.

What i'd suggest is trying something along these lines, where you replace this bit:

  // Offset for select button on first item
  &--multiple > .dropbutton__item:first-of-type {
    height: 100%;
    margin-inline-end: var(--gin-spacing-xxl);
    border-inline-end: 1px solid var(--gin-color-primary-light-active);

    input {
      color: var(--gin-color-primary);
      height: 100%;
      background-color: transparent;
      border: 0 none !important;
      border-radius: 0 !important;
    }
  }

... with this ...

  // Offset for select button on first item
  > .dropbutton__item:first-of-type {
    height: 100%;

    input {
      color: var(--gin-color-primary);
      height: 100%;
      background-color: transparent;
      border: 0 none !important;
      border-radius: 0 !important;
    }
  }

  &--multiple > .dropbutton__item:first-of-type {
    margin-inline-end: var(--gin-spacing-xxl);
    border-inline-end: 1px solid var(--gin-color-primary-light-active);
  }

i.e. remove the &--multiple selector so it applies to any kind of dropbutton and move the bit specific to multiple dropbuttons into a separate section below. I've not tested this sass btw as I'm not set up for Gin development but i think it is probably a reasonable starting point. :-)

Hi @very_random_man,

While debugging the issue, I found that the Actions button was not showing when using the Gin Admin theme. As a result, I was initially unable to replicate the issue on my local environment. Upon further analysis, I found that this problem had already been reported here: [Workbench Moderation] Submit Button Disappeared, Create New Revision Checkbox Disabled, and Only Preview Button Appears after Applying Drupal GIN Theme 🐛 [Workbench Moderation] Submit Button Disappeared, Create New Revision Checkbox Disabled, and Only Preview Button Appears after Applying Drupal GIN Theme Closed: works as designed . However, the issue was closed by the maintainer with the status "Closed (works as designed)" and no merge request was provided.

Since the issue still exists in the latest version, I’ve raised a merge request with a fix for the missing Actions button for workbench_moderation module.

After resolving the Actions button issue, I was then able to replicate the original problem locally. It turns out that the dropbutton with only a single option was not rendering correctly when not in focus. I've resolved this by updating the styling for dropbutton so that single-option dropbuttons now match the design of multi-option dropbuttons.

I've attached before-and-after screenshots for reference. Please review the MR and let me know if any further changes are needed.

Thanks!

Oh yes, sorry about that; I had completely forgotten that i'd applied a patch from this Workbench Moderation issue: https://www.drupal.org/project/workbench_moderation/issues/3384278 🐛 Not working with Gin theme Active

I can confirm that your MR fixes the single item dropdown problem. Thanks!