Skip to content

Presence of icon in GlBadge changes baseline alignment

As discovered in gitlab#344389 (comment 803507757) and gitlab!77851 (merged), the presense of an icon in a GlBadge changes the baseline alignment of the badges.

Here's a screenshot demonstrating the problem:

bad_badge_alignment

The only difference between those two badges is that one has an icon, while the other doesn't. The source for that example is simply:

<div>
  Some text
  <gl-badge>TestBadge</gl-badge>
  more text
  <gl-badge icon="branch">TestBadge</gl-badge>
  the last text.
</div>

I would argue this is a typebug in GlBadge's styling, as the presence of an icon shouldn't change the baseline of the badge itself.

I think the cause is a combination of:

  • svg elements being display: inline by default
  • icons in GlBadge have a height of 16px, whereas the font has a line-height of 14px
  • GlBadge being display: flex; align-items: center