Badge: Enable usage inside typographic components

[michaeltaranto]

A Badge can now be nested inside typographic components, e.g. Text and Heading, as an inline element alongside text.
Previously a Badge had to be aligned against text using an Inline component, which would result in the Badge dropping below the text when the copy wrapped.

EXAMPLE USAGE:

<Text>
  Lorem ipsum velit in <Badge>amet</Badge>.
</Text>

[changeset-bot]

🦋 Changeset detected

Latest commit: 904da1d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
braid-design-system	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[askoufis]

Is it worth updating the Badge vertical bleed docs, i.e. do we want encourage putting the badge in the heading rather than bleeding?

Also, is the badge meant to be vertically centered at all heading sizes? It doesn't appear to be the case.
EDIT: The screenshot below is of the apac theme. It's perfectly aligned in seekJobs.

[michaeltaranto]

Good shout on the docs example. I have updated with the following

In terms of the position of the badge, because it is being used "inline" we are at the mercy of the line box created by the font itself as we are using vertical-align: middle. I have tweaked the spacing a touch to further improve across the current themes, plus added docs for this.