fix: Change Badge component to bold + set explicit line height

[engfragui]

Short description

This PR tweaks our (existing) Badge component:

1. Content of the Badge is now bold (as per this request on Twist). We should be able to see this very clearly via our visual regression tests, but here's some screenshots:

Before	After

2. The appropriate line-height is enforced. No line-height set was causing the background of the badge to expand vertically when inside flex containers:

Although this can be easily set in the client, I figured we would want to enforce this in Reactist _once and for all_.

I'm also taking this chance to fix a couple of typos in the Banner stories (25 instead of 24 px -- I was probably drunk, who knows 🤷‍♀️).

PR Checklist

• Added tests for bugs / new features
• Updated docs (storybooks, readme)
• Executed npm run validate and made sure no errors / warnings were shown
• Described changes in CHANGELOG.md
• Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
• Updated all static build artifacts (npm run build-all)
• Reviewed and approved Chromatic visual regression tests in CI

Versioning

I think this is a minor fix, so I'm just bumping the patch.

[engfragui]

We should be able to see this very clearly via our visual regression tests

Errr not true (see this build -- you can see that there's no side by side comparison of all the badges). Looking into it now 👀

Edit: I think the

{PlaygroundTemplate.bind({})}

inside the main storybook demo prevents the tests from working correctly 🤔

[gnapse]

I think it would be a bit simpler if instead of applying a vertical padding, we just apply a line height and that's it. That alone would enforce the height and the vertical spacing around the text, even if it's not padding, right?

With that in mind, I would also hard-code the line-height to be font-size + 2px, instead of doing all this calculation. Something along these lines:

.badge {
  padding: 0 var(--reactist-spacing-xsmall);
  line-height: calc(var(--reactist-badge-font-size) + 2);
}

I also feel that offering badge-specific CSS variables for the padding of the badge may be unnecessary. I'd rather add that API later if needed, than committing to it today. Any new CSS variables we add becomes public Reactist API that we later need to support or deprecate if we want to remove it or change it.

[engfragui]

That makes a lot of sense, thank you, I will test this now.

[engfragui]

Err actually it seems like I still need to set the padding value to what I actually want the padding to be.

padding: 0 var(--reactist-spacing-xsmall);

vs.

padding: 3px var(--reactist-spacing-xsmall);

[gnapse]

@engfragui upon inspecting the Chromatic snapshots:

I find it odd that in there the vertical padding looks almost non-existent. Could it be that 1px is too little?

[engfragui]

Could it be that 1px is too little?

@gnapse Errr the Figma mocks say the padding should be 3px 😅

I think it still looked good because the background was anyway expanding vertically to fill the entire vertical height, so we never noticed this. I will change to 3px.