Bartik has inconsistent .field__label styling, with unique attributes for .field--type-entity-reference and .field--name-field-tags only

I'll look into this work on it.

I have followed the steps to reproduce the issue.

Here are the fields with no CSS changes:

Here are the fields with the CSS changes:
Above label format:

Inline label format:

Fix

Based on the proposed fix to remove all calls to the .field__label class from the Bartik CSS, I though to retain the other styles like the margin and paddings because I thought that this might be Bartik specific and we just want the labels alone to be "Classy-consistent".

Hope this makes sense and the changes are in order.

Thanks!

@kay_v, thank you for checking and your feedback!

For #1, it makes sense where you said that we we would not want to leave the overridden margin and padding in place for just a few field labels so that Bartik treats all field labels the same way as the Classy theme. For #2, I'll double check.

Based on #1 also, I think this would mean almost all of these CSS styles for entity reference fields would be removed but I'll confirm this.

I'm at Nashville sprinting my first time. This looks like something I can pick up and I've reproduced locally, so I'm going to see if I can contribute!

I've done some digging into the history of this to see where the entity reference styling first came in.

Per comment #3, it seemed odd that there is styling specific to field labels on entity references. Looking into the commit history on themes/bartik/css/components/field.css lead me to issue where it was introduced: https://www.drupal.org/project/drupal/issues/2214241 (it is very large, see links below to relevant comments).

Comment #338 points out that "the field type for tags and other taxonomy terms is type-entity-reference and not type-taxonomy-term-reference". That may be the root issue and the styling for type-entity-reference obscured it. The styling looks like it was introduced because of the visual regression failure noted in comment #316.

I think this suggests that the visual regression tests should include an entity reference example, because the updates applied in #2214241 would have broken them. It also seems likely that the taxonomy term label needs to be more specific, either just how an inline label is handled or more specifically how the taxonomy term field type is set.

Locally I set up an article that has an entity reference and tags (setting the entity reference to be rendered and showing labels for fields on the rendered entity, as well). I captured images before and after applying the patch in comment #3. I think that the resolution to this issue should not change the visual presentation of the tags label.

Here is a snapshot of the issue reproduced with tags as well as a rendered entity reference:

Here is the same page with the patch applied, where we can see that tags get broken styling:

I am going to discuss the nature of this issue with others in Nashville today before I decide if I can take this further.

Looking closer, the field.css file has two sections of virtually identical CSS, one being applied against .field--type-entity-reference and another against .field--name-field-tags. If we remove the type-entity-reference styling code in field.css, this appears closer to the intended style.

Adding a patch and a new screenshot with the patch applied which shows both the entity reference labels and the tags showing properly.

@kay_v and @leolando.tan, I'd love to have you take a look and see what you think. Based on the original issue description, I think there needs to be a bit of clarity for what the desired style is for labels for taxonomy terms compared to other entity references, both inline and above.

@woodseowl: when you attach a new patch, you normally set the issue to "Needs Review" (NR) in order to invite others to look at what you have done. The first to accept the invitation is almost always the testbot, which often makes helpful suggestions.

I will set this issue to NR on your behalf.

@benjifisher, thank you for the guidance!

Hi @kay_v, my apologies for the trouble in this delay. I had to attend to something on my end. Thank you very much for looking into the progress of this issue. I'll try to help if I still can. :)

@woodseowl I have applied the patch. Patch is applied successfully and working as mentioned #10 but I have found one more issue. The default reference field "tags" label in not same as other labels. Please see screenshot for reference.

.field--name-field-tags .field__label also has different styling which makes label styling inconsistent.

Added patch in which i have removed bold property from .field--name-field-tags .field__label .

Yes, let's get this in.

Patch looks good to me.

Reroll for 8.8.x.

(Can confirm it applies to 8.7.1 too!)

All looks good so setting back to RTBC! Tests failure is not related (see #3055648: Frequent random fail in \Drupal\Tests\media_library\FunctionalJavascript\MediaLibraryTest).

This could use a review from Bartik maintainer.

Although the patch in #24 does significantly improve the label styling, there's still something very strange about inline label fields in Bartik. Fields -- especially taxonomy fields -- to flow into one another (floating left) instead of each field being on its own line. When using the "inline" style of label display, I would still expect each field to be on its own line, with the label inline to the left.

Before patch:

After patch:

These are just vanilla core taxonomy fields with vanilla Bartik. No custom CSS at all is applied to our site.

Hii I have created one patch for drupal 8.8.x for inheriting the styles from classy. Please review. Also attaching before patch and after patch screenshots as well.

Checked and apply patch #29 working fine but need spacing so i have added margin and create new patch for this issue.
Please review

This issue is causing me trouble in a new site I'm building in Drupal 9.4.5. This issue has been open since 2018. What's the next step for moving this along? Is Bartik still being maintained or should I change to a different theme?

Moving to contrib since Bartik was removed from core in D10.

Hi, for my first contribution I can take this ticket and see what I can do to fix this problem. :)

Hi All,

Created MR request kindly review.

Thanks!