Skip to content

[feat]: badges variants #1935

@Adzouz

Description

@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)

Image

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.

Metadata

Metadata

Labels

issue: enhancementIssue suggesting an enhancement to an existing featuresource: design-systemrelates to design-system package

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions