GC Design System Components is a monorepo managing the web components of the GC Design System. | « GC Design System Components » (Composants de Système de design GC) est un référentiel unique qui gère les composants Web de Système de design GC.
[X] 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.
Prerequisites | Prérequis
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:
Many categories for things are going to exceed 20 characters.