Remove default colon behind inline labels

Patch applied successfully. Attaching screenshot for reference.

This is a massive change for existing themes that are using classy. I don't disagree that adding a colon everywhere causes issues but a change like this is likely to "break" many existing sites in the eyes of the users. This issue needs a way to solve both the existing use-case and the broken use case.

As per my understanding we need colon only for specific languages and not all. So I thought of providing an option in manage display under label options along with "inline, Hidden" as "Label with colon " which will be theming only in classy theme and this is how it looks. Please refer following screenshots and let me know you view on it.

In that case if we need the configuration on the basis of language then we can have this under the language add form or we can keep this under configuration in content translation. But not sure how user friendly it would be. Please let me know your take on this.

This was a bugsmash target yesterday. In the discussion were pameeela, catch, lendude, Gábor Hojtsy, smustgrave and myself. To summarize:

Create another issue to remove the colon in starterkit - this is doable without a break for existing sites since that's how starterkit works. I have added the tag 'needs followup' for this and added it to the remaining tasks.

Keep this issue for Olivero/Claro/Umami and move it to the 'CSS' component. I am doing that now. As for a solution the agreement was to do something like add it in PHP/twig as a translatable string + context then let people translate it to empty string.

I have updated it for all the themes expect starterkit theme. I have attached a patch for same. please review

Saw the removal which addressed the first part but didn't see "As for a solution the agreement was to do something like add it in PHP/twig as a translatable string + context then let people translate it to empty string"

I have added the colon ':' as a translatable string in twig template core/themes/claro/templates/classy/field/field.html.twig and created an MR against 11.x branch. Attaching before and after screenshots of a Greek page after translating ':' to an empty string in UI translation for reference.

Before:

After:

Please review.

Per the proposed solution I actually think this should be done in php somehow to the title attributes

As per feedback comment, I have done the changes using php. Please check if this is fine. Changes in the UI are same as shown in previous screenshots. So not attaching them again.

Opened #3482212: Remove the colon in starterkit to address follow up. Though I do wonder if that could be rolled up into this now that it's not a twig change. Will let committer decide that but current scope of this issue looks addressed.

I read the IS, comments and the MR. I see that the follow up has been made, there are no unanswered questions and the core gates are addressed.

I updated credit, hid files, and unassigned.

Leaving at RTBC

We need more context in the translated string, whitespace rules around colons are different in english and french at least so we need to know a bit more than just ":".

Believe feedback from @nod_ has been addressed.

I think it is great to remove colons after label by default as it causes issues.

However using translations to manage it implies that we'll need to translate all labels if we want to remove colon (e.g. for Greek), add a space before (e.g. French)...etc. This seem to be less convenient than the current implementation in CSS - as of now, if it is easy to customize this with a one line CSS such as:
:lang(el) .field--label-inline .field__label::after { content: ""; }
:lang(fr) .field--label-inline .field__label::after { content: " :"; }

Marking as need review because I suggest we better provide custom CSS rules for the most languages possible in core + add example and documentation for developers to customize this colon for their sites' languages.

Hi,
Issue is reproduceable before applying patch.

But after patch is showing an error. Hence unable to retest.
Steps to reproduce-
- Create a new field eg., Date in any of the content type.
- In the Manage Display, change label to inline.
- Create a node with that content type.
- Add Greek language in /admin/config/regional/language
- Open the newly created node in Greek /el/, there will be a colon ':' after the label.

Please refer the attachments.

@Matthieuscarset, je me dis que ça mériterait même de générer ça avec une variable css

Just opened a MR to fix formatting of inline field label suffix per language with CSS only.

I just made two commits. I dont know why the MR show 450+ commits 🤷... something's wrong.

Need review.

@Eric good idea! I used a CSS variable:

:root {
  --drupal-field-label-inline-suffix: ":";
}

Test status-Pass
Verified on Drupal 11.X version

Test steps -
- Create a new field eg., Date in any of the content type.
- In the Manage Display, change label to inline.
- Create a node with that content type.
- Add Greek language in /admin/config/regional/language
- Open the newly created node in Greek /el/, there will be a colon ':' after the label.

Patch applied successfully. Issue looks fixed. Moving the ticket to RTBC state.
Please refer the attached screenshots.

The translation approach has been validated in #22, so we won't go with the CSS method. The string translation workflow is well oiled and adding a different way to do this doesn't provide significant benefits.

Here we need to add a context to the string, I suggest: "Field label"

If I understood correctly, using translation means users will need to translate each field labels for every language of a site?

This is a serious amount of work. It makes the current situation worst IMO.

it's one string that needs translating, it'll handle all inline fields. No visible changes to users after this patch

Closed #3482212: Remove the colon in starterkit as a duplicate, moving over credit