Broken Dropdown prevents Save in Claro

Re:

This issue happens because Paragraphs has to 'mimic' dropbutton output. It has to do that because their classic widget operates with <input type="submit"/> elements, and not with Link render elements (that's what the Dropbutton was designed).

Hard-coded markup in Paragraphs:

• Constructing the operations of an existing paragraph item: src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php#L581
• Renderable array of the add new item (on the bottom of the widget): InlineParagraphsWidget.php#L1037

Sadly, Views UI does the same here.

Right now, we have issues with these kind of cases since the modules already hardcoded the same (needed) markup that is shipped by stable / Classy / Seven (pick one) because Dropbutton cannot properly render items that aren't links.

Since the implemented design needs the markup changes that we have in our codebase right now, the best that we can do right now is pushing and fixing #3057577: Provide a way to add Buttons to Dropbutton.

Workarounds

I'd suggest using the Experimental widget, but for first we should ask them about why is / was this needed (that breaks the add item element).

So for now:

1. Keep using the classic widget.
2. The operations of a single item cannot be fixed by choosing an another settings, but it still lifts the items on a higher z-index level if you click on the toggle, so based on my understanding it is functional. (Yes, it is terrible, ugly, and I won't show this to a client.)
3. You have to choose 'Select list' or 'Buttons for the 'Add mode' and not the 'Dropdown button' option.

Could you please confirm that the above works?

Hi, I have made a patch that resolves this issue with the current 'mimiced' dropbutton markup.

I hope it will work for you too fisk.

@lbesenyei's patch in #7 improves Views UI soooo much. Compare the before and after shots.

However, there's a problem with the non-dropdown buttons after the patch — there's a blank space left where the dropdown icon would normally be.

It looks like the "dropbutton--multiple" class is getting applied regardless of whether the "dropbutton--single" class is already there, so I think that's why this is occurring.

Also, is the thing that happens to the active tab in the before shot, where the view display button expands to full width, related to this? It's triggered by the same actions that make the dropbutton go beserk. If it's separate, is it a known issue, or should I file a new one?

#10 is related to #3067085: Views top dropbutton breaks when editing a view.

It is a great improvement! Not even noticing the whitespace.

Just rerolled the patch from #7

The patch in #16 changed the post-processed CSS file, but not the source.

Hi,

I have changed post-processed CSS file as well as source file.

Thanks,
Ren

I believe we are working with the wrong patch here.
Patch #18 is for issue #3083048: Provide a tabledrag-handle that is visible in Windows high-contrast mode.

Yes you are right. I am removing the patch #18.

I have re rolled for #7

I had missed to add

use Drupal\Core\Render\Markup;

I don't think we can come with a sufficient solution in Claro. Using regexp to modify already rendered markup seems like the last resort. Moving to the Paragraphs queue since that's the root cause.

I think it should use the extrasmall variant in the future (analog to /admin/content)

example markup for extrasmall dropbutton

<div class="dropbutton-wrapper dropbutton-multiple">
  <div class="dropbutton-widget">
    <ul class="dropbutton dropbutton--multiple dropbutton--extrasmall">
      <li class="edit dropbutton__item dropbutton__item--extrasmall dropbutton-action">
        <a href="/" hreflang="en">Edit</a>
      </li>
      <li class="dropbutton-toggle">
         <button type="button" class="dropbutton__toggle">
           <span class="visually-hidden">List additional actions</span>
         </button>
      </li>
      <li class="delete dropbutton__item dropbutton__item--extrasmall dropbutton-action secondary-action">
        <a href="/" hreflang="en">Delete</a>
      </li>
      <li class="devel dropbutton__item dropbutton__item--extrasmall dropbutton-action secondary-action">
        <a href="/" hreflang="en">Devel</a>
      </li>
    </ul>
  </div>
</div>

Same type of problem if you have set Paragraphs to use the modal when selecting what type of Paragraph to add.

Settings needed to repeat (in Form display mode settings for the content type the Paragraph is added to):

And if you in the same settings use "Add mode: Dropdown button" you get:

So I needed to do a fix for our current project (customer has seen the Claro admin and there is no turning back) so I did this patch. I don't know if passes any tests, but it is only adding the needed "dropdown__item" classes to the li-tags (not the toggle one, so it wont disappear) and the "dropdown--multiple". Looks quite ok to me. Made the patch with 8.x-1.x-dev but it should work with current stable version also (minor offset only). Can somebody look through it? I don't know the paragraphs module insides very well, but I just looked at the conversation here and the patch that was originally made for Claro.

Here is paragraphs admin UI without patch

And here is with patch (classes added)

This seems like a pragmatic solution to the problem. I would recommend taking the approach proposed in #28 to temporarily solve this problem (I'm not a maintainer of this project so, in the end, it will be up to them to decide). We're working on #1899236: Add new Splitbutton render element to eventually replace Dropbutton to try to come up with a new splitbutton component that would also support adding buttons to the element.

I'm wondering if we should try to make sure this change gets applied to all usages of dropbuttons in Paragraphs? I tested this manually and I found some use cases that this doesn't solve:

This is the add paragraph button on the classic widget:

This is the add paragraph button on the experimental widget:

We should also manually test this in Seven to ensure there are no regressions.

Thanks for all the work on this and useful points!

I agree this solution that @LauraRocks started is the easiest and worked on top of it to fix also the classic widget. The dropdown was also a bit broken because of the (stale?) css definition for style: static. I removed that and double checked, works fine in seven theme. I'm guessing that style was already removed from core and the "fix" is not needed anymore, as the comment pointed above it mentions.

As @lauriii pointed out, this doesn't fix the " add paragraph button" when using dropbutton, because that code is not here in paragraphs, but it is done in buildDropbutton function in ParagraphsWidget.php somewhere around here i think:

foreach (Element::children($elements, TRUE) as $child) {
  // Clone the element as an operation.
    $operations[$child] = ['title' => $elements[$child]];
  // Flag the original element as printed so it doesn't render twice.
    $elements[$child]['#printed'] = TRUE;
}

I don't know how fix that. For now, the Paragraphs & Claro is usable with the patch in #28 and NOT using the add mode "Dropdown button" OR the experimental widget. Would be nice to fix all them but I can't at the moment.

EDIT: I was to slow, yes the patch in #31 fixes the dropdown button also!

@LauraRocks can you check again with my patch (#31) applied, please? It seems to work fine for me on the Dropdown button.

Yes, just edited my answer, I was too slow with answering, didn't check your answer, looks good now!

Great! We still want to make all buttons smaller in order to be consistent and have the view more compact for pages with many paragraphs. Will work on it now.

+1 to #35! I was thinking of opening follow-up for that but I'm happy if it gets done here 👍

Here is a bit of an improved version with "extrasmall" buttons. Our idea was to have the buttons on the right side "extrasmall" and the dropdown selection at the bottom "small", to have a bit of a separation between the importance of the buttons, but there is claro_preprocess_links__dropbutton__operations() which sets all dropdown operations to "extrasmall", so I don't think we should/can alter that?
There is also another issue that I noticed with the text next to the dropdown paragraphs selection - the spaces in the text don't work anymore. Let's create a followup for that.

Thanks for the work here, I can also confirm that the patch in #37 fixes this issue in Claro & doesn't have any regressions in Seven too.

I didn't experience the problem as described in the title or issue summary as I guess this has been fixed in newer versions since it was raised in September.
I did however experience the problem in the screenshots of #30 and was looking to fix that. I'd like to propose that the issue title is renamed to something along the lines of 'Add paragraph button dropdown bug in Claro' so that others experiencing the problem can more easily find this issue. What do you think?

Let's try to push this topic forward. Anyone can test properly? :)

I've just tested this with the patch from #37 and for me it works with Drupal 8.8.2 against Paragraphs 1.10.x

Updated the patch from #37 to include the fix for the text label "to xxx" which is also open according to #3108997: [META] Claro theme UI improvements
Patch attached. (Patch worked against 8.x-1.10 but needs to be re-rolled against dev).

I'm sorry, It seems i accidentally committed #37 here after my review in #3103995-6: Improve visual coherence in Claro in combination with Field group horizontal tabs .

Please consider accordingly. It's a bit late to revert, but i didn't even review the code here, i just test drove them. :-7
This needs a full review and likely improvements to close.

Rerorlled @saschaeggi's #42 patch to 8.x.1.x.

I also removed the stale negative margins around the "add paragraphs" button. Tested also in seven and didn't see any real use of them. They were breaking the display in Claro as they were hardcoded values.

Attaching the before/after screenshots.

@sasanikolic tested on Seven & Claro, does work great.

Claro:

Seven:

I've added one visual improvement to the patch from #44.

Before:

After:

Thanks everyone, if @saschaeggi says this is ready then I'm happy to believe that :)

Lots of people contributed here, thanks everyone.

I rerorlled a patch based on #7 @lbesenyei and it works for me !
paragraph: 8.x-1.x
PHP: 7.3
Core: 8.8.x

I need to apply the #49 patch.

After update paragraph dev, to last version (dev-1.x 203ecf8)

Before apply patch #49:

After apply patch #49: