[feat]: badges variants

[Adzouz]

A clear and concise description of what the feature is

The actual Badge component in the design system is not ideal and is used confused with the Status component sometimes.

Today the Status component only have three variants and is used at the following places:

• Settings > Administration panel > Users (User status => Active / Inactive)
• Content Manager > Edit view (Document status => Draft / Published)
• Content Manager > Edit view > Three dots icon button next to Publish > Publish multiple locales (the status of each locale in the modal)
  But they all look like badges 😅

The actual Badge component is a bit too permissive and basically we can put the color and the background color that we want and it could cause some very weird unexpected effects (like green text on red background).

After discussing with @lucasboilly and @annakudelska, we should revamp the Badge component to limit its customization (removing the effect of textColor and backgroundColor - but keeping them to avoid regression and fails), provide all variants required in the CMS based on the following attributes :

• size
  • L (24)
  • M (20)
  • S (16)
• color
  • success (green)
  • primary (blue)
  • danger (red)
  • (orange)
  • neutral (grey)
  • secondary (light blue)
  • alternative (purple)

The Status should also be deprecated (but still part of the design system just in case and for retrograde support).

Why should this feature be included?

Today there's some inconsistencies in the CMS and misunderstanding between the Status and Badge component. We need to clarify the purpose of the Badge and stop creating too many variants in the interface because it can confuse the user.
It's also easier to maintain to have a component designed for that.

Please provide an example for how this would work

All items in the CMS that have the look and feel of a Badge component should migrate to this new revamped component.
The list of all their locations will be defined here later.

[HichamELBSI]

Agree with that decision. Friendly reminder regarding component changes (if it hasn't been done) to check the Cloud codebase as well and mention it in the description. By reading the issue description, it sounds like this component is used in the CMS only. Although you mentioned making sure to avoid regressions 👍🏽

[lucasboilly]

@HichamELBSI it seems the badges in the Cloud are custom, we could maybe use the ones from the DS if @annakudelska thinks it's a good idea.

[HichamELBSI]

We are always using the Badge component but indeed as it has been mentioned by @Adzouz, since all the variants hasn't been added to this component, we are customising it for the color 👍🏽

[lucasboilly]

Oh okay, I didn't think it was the same component with a different style 👍

[HoldenFolk]

Hey @Adzouz, Looking into this feature. Would be interested to take this up as my first contribution to this repo. As I am new here, this would be my step by step plan to implement this. Apologies for any mistakes in advance. Please let me know where I should make adjustments or if I am missing anything:

1. Change the badge component to take a 'color' property (Uses default theme variants) while deprecating the textColor and backgroundColor props and removing their effect (They would do nothing now).
2. Add the new size option
   • Add a new story for the size option, and add that to the docs as well for badge
3. Remove the textColor and backgroundColor props from the Badge story. Add the new 'color' prop to the story.
4. Add the deprecation notice to the Status component
5. Replace all instances of the status component being used in the CMS (Have not yet seen a list of all the locations but can take a look myself if needed)

Hope that covers things!

[HichamELBSI]

Hello @HoldenFolk,

Thanks for the contribution you want to make. here is the correct way to proceed:

1. Change the badge component to take a variant property as it is done in the other components (you can check the Alert, Button or Status component).
2. ⚠️ Do not change anything to the existing props (textColor and backgroundColor to avoid breaking changes). The design system is used in many products. Cloud, CMS and community member plugins, we don't want to introduce any breaking changes.
3. Add a deprecation notice to the Status component
4. ⚠️ Do not create any changes in the CMS related to the Status component.

I'll assign the issue to you so you can already start working on it.