feat: Please increase character limit on GCDS card badge

[CraigClark]

Prerequisites | Prérequis

• I've read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions.
• I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
• I've searched for existing issues that already report this problem, without success. | J’ai vérifié parmi les tickets (issues) existants que ce sujet n’avait pas déjà été soumis.

Describe the feature request. | Décrivez la fonctionnalité demandée

This feature would allow more than 20 characters in the badge on a card.

Describe the use case. | Décrivez les cas d’utilisation

We are working on using GCDS in a Drupal site. We have cards that summarize the content behind them.
At the top of the rows of cards is a filter users can use to refine the list of available cards by category.

The names of categories is determined by business, not the design system.

If a category has more than 20 characters, nothing appears. This can be confusing to users as other cards do have badges.

Here is an example:

The card "World leading marine safety system" belongs to the category "Oceans protection plan". Since that exceeds the 20 character limit, no category displays.

In some of our tests, the English label appears because it is under 20 characters, however the French label won't appear.

We tried a test where we added another field to the authoring interface where a user could add an abbreviated category. Shortening "Oceans protection plan" to "Oceans protection" works, " plan de protection des océan" doesn't.

Describe the preferred solution. | Décrivez la solution souhaitée

The badge prop will allow for more than 20 characters. The design will support this by allowing the blue bar to expand to more than one line if necessary, pushing down the rest of the content.

Describe all alternatives. | Décrivez toutes les solutions possibles

Write our own component

This would work as we could control what goes in the badge area. However it goes against the purpose of a component based design system.

Don't use the badge prop

We could choose not to use the badge and stick the category in the slot. Ideally though the category is more obvious to the user that that.

Shorten badge text

We tried this, it failed for reasons previously explained.

Programmatically truncate categories so they don't display more that 20 characters

We tried this, there were unpredictable results, especially in French.

Provide related code or examples. | Fournissez du code ou des exemples pertinents

This is what we would like to see

Add other relevant resources. | Ajoutez toute autre ressource utile

I understand the desire to have a concise badge. However the use states:

The badge (optional) is a visual indicator to inform users of the card's status or category. Badge text should be no more than 20 characters.

Many categories for things are going to exceed 20 characters.

[melaniebmn]

@CraigClark Thanks for reaching out and submitting this issue. We have started discussions around this as a team and while we don't have an easy fix for now, it surfaces some of the use cases lacking support around character limits and text overflow. We will look into increasing the character limit and get back to you once we have released a solution.