[Bug]: Badges notes

[gselderslaghs]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

• Badges should not include textual content in psuedo selector (multilingual transliteration)
  Currently it's possible to add classes to badges like "new", this results in textual content being rendered over CSS
  This makes this feature incompatible with multilingual transliteration

• Badges do not always adjust in size when textual content increases
  This results textual overflow out of the badge
  

Current Behavior

• Textual content rendered by CSS
• Textual overflow

Expected behavior

• All textual content should be rendered in the HTML DOM, as a result it should be renderable in all possible languages
• Text overflow should not be allowed

Possible Solutions or Causes

Textual content in psuedo
Remove textual content in CSS and update documentation

Textual overflow
Removing the width specifiers and adding a white-space: nowrap; seem to fix this issue
Since badges are used over multiple components, it should be tested in all possible scenario's

Your Environment

• Version used: 2.1.1

[gselderslaghs]

Looks like it's fixed in v2.2.1 since pr #544, closing for now

[gselderslaghs]

Closed a bit to early, as layout fix seems to be addressed still need to take a look into multilingual transliteration in css pseudo classes
Any ideas? Should we just remove the content: ' new' property from the "new" selector and only allow the data attribute?