"Add another" buttons could use vertical margin

Attached patch adds a margin of 0.5rem to the top and bottom of these buttons. This is computed from the --space-xs variable which equates to 8px.

@johandenhollander I simply chose the smallest defined variable for margins already available.

The buttons have no left margin but have a right margin of 12px (0.75rem). Adding the 8px (0.5rem) to the top and bottom margin makes a 16px gap. I've attached another patch that reduces the new vertical margin to match the horizontal margin.

FWIW the fact this was previously set to 0 margin suggests there may have been a reason for it.

The 0 margin seems to have been introduced here: https://www.drupal.org/project/claro/issues/3023326#comment-13244734

This issue is not exists and fixed

RTBC +1

There are proper alignment and proper padding available

Could not find any issue proper vertical margins are available for button

From #9, #11, and #12, it doesn't seem like this is reproducible.

@Johan den Hollander Would you check this is still an issue? And, if so, for what version.

For those testing, it's useful to know what Drupal version you tested with.

Thank you for reproducing the issue again @johandenhollander. Reopening this.

1. Patch is straight forward though not sure it is the approach the Claro team would approve.

2. Changing issue to version 9.4. The patch applies cleanly to 9.3 and 9.4 and with offsets for 10:

[drupal-10.0.x-dev/10.0.x] [drupal-10.0.x-dev]$ patch -p1 < 3198236-5-add-another-vertical-margin.patch 
patching file core/themes/claro/css/components/form--field-multiple.css
patching file core/themes/claro/css/components/form--field-multiple.pcss.css
Hunk #1 succeeded at 9 (offset -2 lines).

3. Tagging for testing for 9.4. The steps to reproduce could be more clear but, for those who know how to use paragraphs, they should be able to reproduce. It would be good to add more explicit testing steps for those who are not familiar.

Verified and tested patch #5. Patch applied successfully on 9.5.x-dev.
Updated steps to reproduce in issue summary.

Test Steps:
1. Install paragraph module
2. Create multiple paragraph types
3. Create a content type and add paragraph as reference field with 'Add mode' as buttons
4. Save the changes
5. Goto create content and check 'Add paragraphs' buttons have vertical margin

Test Results:
Seven theme: Ok

Claro theme: Ok

Olivero theme: Ok

Gin theme: Ok

RTBC +1

@sonam.chaturvedi Thanks for testing!

It looks like the code was reviewed previously and this has been tested.

It would be good to do a double check of core gates before marking RTBC.

No more manual testing is needed, thanks!

Reviewed the patch and looks good.
Still applies to 9.5

This will need a 10.x patch because we no longer support IE so the result of yarn run build:css is different after applying this patch.

D10 patch

Hello @smustgrave,
I have reviewed by applying your patch and it's working fine.
I am adding screenshot for reference, The screenshot is of before patch, i renamed it wrong so don't get confused.

Applied Patch #22 successfully. It is working as expected.

Patch #22 applied successfully on on Drupal 10.0.x-dev,The patch work properly
but not working in Drupal 10.1.x-dev for me.
Refer to screenshots.

Thank you for the interest @gaurav-mathur but screenshots were added in the comments before.

Patch #22 applied successfully and it's working as expected

This adds some inconsistency to the spacing. This is quite visible on the top of the button. Ideally we would adjust the container margin to take this into account, but the form-action class is used elsewhere and I'm not sure how easy it would be for us to add additional classes there. It's important that the spacing on top of the button remains somewhat where it is now because that way we make sure that users associate it to the right element, and it doesn't look too separate.

Alternative solution we could try out is to handle this with margin-bottom, but that's likely not going to work because it will probably make the spacing on the bottom of the button inconsistent.

I've created a patch that applies to D10.2, it's kinda the same as #22, except it uses the margin-block instead of margin-top and bottom.

Hello @Arantxio,
Patch #33 applied successfully,The patch work properly.
please refer to screenshots.

This needs to be made against 11.x as the development branch. And need to make sure #31 is addressed.

Addressed #31 & #35.

Reviewing this current MR/commit.

I am trying to review this commit on 11.x branch but I'm not able to reproduce the main issue.

Verified and tested after taking pull from this branch- 3198236-add-another-buttons. (#38) on the Drupal version 11.x. Its working as expected for the various themes.
Followed the below Testing Steps:
1. Install paragraph module
2. Create multiple paragraph types
3. Create a content type and add paragraph as reference field with 'Add mode' as buttons
4. Save the changes
5. Goto create content and check 'Add paragraphs' buttons have vertical margin
Attaching the screenshot for reference.
Hence moving it to RTBC
Thanks!

Committed e16d8e0 and pushed to 11.x. Cherry-picked to 10.2.x as a non-disruptive bug fix to Claro. Thanks!