Space missing between the word "to" and the emphasis tag near the add button

Created on 29 February 2024, 10 months ago
Updated 6 August 2024, 5 months ago

Problem/Motivation

The wording after the add button has incorrect spacing by default. There needs to be a space added between the word "to" and the emphasis tag. While there is such a space in the underlying code, it does not appear to be rendered properly as a visible space in Chrome, Safari or Firefox.

Steps to reproduce

1. Go to https://simplytest.me
2. In the field, type "Core" (without the quotes)
3. Choose Drupal core
4. Click the add project button
5. In the project field, type "Paragraphs"
6. Choose Paragraphs
7. Click the button to create the site
8. Once the site has been created, log in as admin
9. In the admin menu, choose Manage, then Structure, then Paragraphs types
10. Click Add paragraph type
11. Type label "Single contact"
12. Click Save and manage fields
13. Click Create a new field
14. Choose Plain text
15. Click Continue
16. Type label "Contact name"
17. Choose text
18. Click Continue
19. Change Allowed number of values to unlimited
20. Click Save settings
19. Choose Structure, then Content types, then, on the row for Basic page, choose Manage fields
20. Click Create a new field
21. Choose Paragraphs
22. Click Continue
23. Type label "Contact information"
24. Click Continue
25. Under paragraph types, check Single contact
26. Click Save settings
27. In the admin menu, choose Manage, then Content, then Add content, then Basic page

Expected result:
The Contact info field uses the wording "Add Single contact" on the button, followed by "to Contact information" with a space between "to" and "Contact".

Actual result:
The Contact info field uses the wording "Add Single contact" on the button, followed by "toContact information" with no apparent space between "to" and "Contact". While the underlying code reads:

<div class="field-actions"><div class="paragraphs-dropbutton-wrapper paragraphs-add-wrapper button--small js-form-wrapper form-wrapper" data-drupal-selector="edit-field-contact-information-add-more" id="edit-field-contact-information-add-more"><input class="field-add-more-submit button--small button js-form-submit form-submit" data-drupal-selector="field-contact-information-single-contact-add-more" formnovalidate="formnovalidate" type="submit" id="field-contact-information-single-contact-add-more" name="field_contact_information_single_contact_add_more" value="Add Single contact"/><input class="paragraph-type-add-delta dropdown" data-drupal-selector="edit-field-contact-information-add-more-add-more-delta" type="hidden" name="field_contact_information[add_more][add_more_delta]" value=""/></div>
to <em class="placeholder">Contact information</em></div>

with a space, that's space does not appear to be rendered by Firefox, Safari, or Chrome (all Mac).

Proposed resolution

The easiest solution might be to remove the emphasis. Alternatively, choose some more appropriate class than "placeholder".

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Needs review

Version

1.0

Component

User interface

Created by

🇺🇸United States charles belov San Francisco, CA, US

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024