Les nouveautés du Calcite Design System (récap de Mars 2024)

Calcite est le Design System utilisé par Esri qui met à disposition des composants d'interface utilisateur réutilisables, permettant de créer des applications esthétiques et cohérentes en réduisant les efforts de développement.

Ce Design System est très régulièrement mis à jour et amélioré pour proposer des fonctionnalités plus complètes et des composants plus nombreux. Dans cet article, je vous propose un récap' de toutes les nouveautés sorties depuis la dernière fois que nous en avons parlé, en octobre 2023.

Version 2.x : une expérience développeur améliorée

En novembre 2023, Esri a publié la version 2.0 de Calcite, une version avec des modifications majeures. Cette nouvelle version a pour but d'améliorer la cohérence de Calcite, qui comprend des mises à jour des noms, des états et des modèles du composant. Les propriétés du CSS ont également été mises à jour pour représenter plus précisément leur utilité. Par exemple, --calcite-ui-brand a été remplacé par --calcite-color-brand pour indiquer qu'il s'agit d'une propriété de couleur. Vous pouvez retrouver la liste complètes des changements de noms des propriétés dans les tableaux de comparaison des variables CSS.

Responsive design

Le responsive web design garanti à l'utilisateur une expérience agréable, quelle que soit la taille d'écran, le périphérique utilisé ou encore l'orientation de ce dernier. Depuis octobre, des améliorations significatives ont été apportées aux composants afin d'assurer un support pour davantage de workflows, d'appareils et de cas d'usage. Tous les composants ont fait l'objet d'une révision de leur conception, et beaucoup d'entre eux ont été dotés de nouvelles fonctionnalités permettant d'adapter de manière fluide leur présentation et/ou leur expérience en fonction de la taille de l'écran.

Groupe de cartes

Le nouveau composant Card Group (Groupe de cartes) permet de créer une interface composée de plus d'une carte (Card), pour par exemple représenter différents éléments de contenu au sein d'un groupe. Les options de filtrage et de sélection disponibles avec ce composant permettant de créer des interactions avec l'utilisateur. Le composant gère l'espacement des différentes cartes du groupe et permet une navigation au clavier.

Wrapper Angular

Les composants web encapsulent des fonctionnalités dans des packages réutilisables, permettant une grande interopérabilité entre les frameworks.

Lorsque vous intégrez des composants web dans des applications construites avec Angular, un wrapper vous permet de travailler avec les composants en utilisant les modèles de programmation natifs d'Angular. Essentiellement, les composants web sont enveloppés en tant que composants Angular.

Le nouveau wrapper Angular pour les composants Calcite prend en charge :

la conversion des événements des composants web en observables RxJS
L'intégration du contrôle de formulaire avec des formulaires réactifs ou ngModel
Détachement des wrappers de composants Angular de la détection des changements

Explorez le wrapper Angular avec le repo calcite-components-examples, ou le modèle CodeSandbox pour un environnement basé sur le cloud.

Si vous êtes un utilisateur React, sachez que vous pouvez utiliser le wrapper React qui prend en charge le système d'événements synthétiques de React.

Validation des formulaires

Les messages de validation des formulaires sont affichés via le composant Input Message, ce qui garantit l'uniformité entre les différents navigateurs et la cohérence avec les modèles de conception de Calcite. Des propriétés supplémentaires de validation des contraintes ont été mises en place pour empêcher les soumissions de formulaires mal complétés, et améliorer l'interface utilisateur/UX. Lorsque la validation est activée, les composants affichent soit :

un message de validation "Veuillez remplir ce champ" et l'icône "attention", ou
Un message et une icône de validation personnalisés

Les contraintes de validation sont stockées sous la forme d'une liste d'objets qui définissent les contraintes pour les champs du composant. Par exemple, la définition de messages et d'icônes de validation personnalisés pour les champs de formulaire se fait en fonction de la saisie attendue. Si la valeur d'un champ correspond à un modèle ou se situe en dehors d'une plage spécifiée, comme un "min" ou un "max", un message et une icône personnalisés s'affichent.

Emplacement pour l'absence de résultat d'un filtre

Dans le composant Liste (List), un nouvel emplacement est disponible permettant d'indiquer une absence de résultat lorsqu'un filtre est mis en place et qu'aucun résultat correspondant n'est trouvé. Par exemple, une notice peut afficher un message indiquant qu'il n'y a pas de résultats et donner potentiellement des indications pour aider l'utilisateur à trouver un résultat.

En savoir +

Consultez les notes de synthèse de février, et en particulier les modifications apportées depuis octobre 2023, pour obtenir une liste complète des nouvelles fonctionnalités offertes par Calcite depuis octobre, notamment pour en apprendre plus sur les corrections de bugs et les breaking changes.

Calcite pendant le Dev Summit 2024

Le Dev Summit organisé par Esri a lieu la semaine prochaine ! Au cours de celui-ci, vous pourrez retrouver de nombreuses sessions traitant de Calcite :