Les nouveautés du Calcite Design System (récap de juin 2025)

Depuis la sortie de la version 3.0, de nombreuses améliorations ont été apportées au Calcite Design System : renforcement de la cohérence visuelle entre composants, nouveaux comportements interactifs, et introduction de nouvelles fonctionnalités. Les versions 3.1 et 3.2 poursuivent cet élan avec plusieurs évolutions notables.Voici un aperçu des principales nouveautés depuis février :

• Option « Tout sélectionner » dans le composant Combobox
• Masquage de saisie dans le Input Time Picker
• Amélioration des états interactifs des composants
• Meilleure ergonomie pour le redimensionnement
• Nouvelle propriété expanded pour les composants Block et List Item
• Nouvelle propriété floating pour la Action Bar
• Amélioration des contrastes de couleur

Option « Tout sélectionner » dans le Combobox

Le composant Combobox prend désormais en charge une case à cocher « Tout sélectionner » lorsqu’il est configuré en mode multi-sélection. Cette case permet de sélectionner ou désélectionner l’ensemble des éléments enfants (Combobox Items). Lorsqu’une sélection partielle est effectuée, l’état de la case passe à un mode mixte, indiquant visuellement une sélection incomplète.

Cette fonctionnalité est activée via la propriété selectAllEnabled. 

Masque de saisie dans le Input Time Picker

Le composant Input Time Picker intègre désormais un masque de saisie permettant de naviguer au clavier entre les heures, minutes, secondes et indicateur AM/PM. Cette évolution améliore son accessibilité pour les utilisateurs au clavier. En parallèle, l’interaction à la souris a également été optimisée : cliquer sur le chevron ouvre désormais directement le sélecteur.

Amélioration des états interactifs des composants 

Le design system poursuit l’harmonisation de ses états interactifs (survol, clic, focus, etc.) pour garantir une expérience cohérente, prévisible et accessible. Chaque composant bénéficie ainsi de retours visuels clairs qui facilitent l’interaction pour tous les utilisateurs.

Amélioration de l’ergonomie pour le redimensionnement

Le composant Shell Panel dispose désormais d’une poignée de redimensionnement plus visible et plus facile à utiliser. Le redimensionnement est possible à la souris comme au clavier, avec une zone d’interaction élargie pour améliorer l’accessibilité.

Autre nouveauté : les panneaux peuvent aussi être redimensionnés lorsqu’ils sont affichés en mode float, offrant plus de flexibilité dans la gestion de l’interface.

Nouvelle propriété expanded pour Block et List Item

Les composants Block et List Item adoptent une nouvelle propriété expanded (en remplacement de open) pour plus de clarté et d’uniformité au sein de la bibliothèque.

 

Nouvelle propriété floating pour Action Bar

Le composant Action Bar prend désormais en charge une propriété floating qui lui confère la même apparence flottante et le même comportement de menu contextuel que le composant Action Pad. Ce dernier est désormais déprécié au profit d’une simplification via Action Bar.

Amélioration des contrastes de couleur

Le composant Switch bénéficie d’un meilleur contraste de couleurs, en conformité avec le critère d’accessibilité WCAG 1.4.1 (Utilisation de la couleur). D’autres composants affichant une couleur d’alerte (kind="warning") profitent aussi de ces améliorations, aussi bien en mode clair qu’en mode sombre.

Lorsqu’une moyenne est spécifiée, le composant Rating, affiche désormais une couleur de fond mieux contrastée pour une lisibilité renforcée.

Pour plus d'infos

Pour découvrir l'ensemble des nouveautés, consultez les notes de mise à jour de mai 2025 qui incluent tous les changements depuis la version 3.0 dont les correctifs et les améliorations.