Calcite Design System passe en version 3.0 !

Calcite est le design system d'Esri, qui vous permet de développer facilement des applications belles, intuitives et cohérentes en mettant à disposition des développeurs de nombreux composants d'interface utilisateur. Depuis février 2025, une nouvelle version majeure de Calcite, la 3.0, est disponible. 

 

Les nouvelles fonctionnalités et améliorations comprennent les nouveaux composants Autocomplete et Block Group, une améliorations des fonctionnalités de List, une intégration plus facile avec les frameworks et les importations, une propriété de format 24 heures pour Time Picker, la fonctionnalité de redimensionnement de Sheet, et un support amélioré de l'accessibilité et de l'internationalisation. La version 3.0 a introduit également des breaking changes qui peuvent nécessiter des mises à jour de vos applications. Ces breaking changes sont introduits pour améliorer la stabilité, la fiabilité et la cohérence de Calcite. Dans cet article, je vous propose de découvrir plus en détail ces nouveautés.

Composant Autocomplete

Le nouveau composant Autocomplete (autocomplétion) améliore la saisie de texte en vous permettant d'afficher des suggestions dynamiques au fur et à mesure que les utilisateurs tapent du texte. Le composant offre un moyen structuré de présenter des résultats de recherche prédictifs, tout en prenant en charge la configuration de la manière dont les suggestions sont récupérées, alimentées et gérées.

Le composant fournit des événements qui peuvent déclencher une recherche asynchrone, mettre à jour la liste des suggestions et ouvrir le menu déroulant du composant lorsque des résultats sont disponibles.

Composant Block Group 

Block Group est un nouveau composant qui permet d'organiser et d'utiliser plusieurs éléments Block. Il peut permettre à l'utilisateur de réorganiser les éléments groupés par glisser-déposer, ce qui permet de gérer de manière cohérente les contenus pouvant être triés. 

Token pour la focus color

Un nouveau token global, --calcite-color-focus, est disponible pour les concepteurs et les développeurs afin de personnaliser la couleur focus dans une application.

Apparence du Date Picker

L'UI du composant Date Picker (sélecteur de date) a reçu plusieurs améliorations. Par exemple, lorsque la sélection de date est une plage, le sélecteur affiche 2 calendriers côte à côte pour permettre à l'utilisateur de facilement sélectionner une plage de date chevauchante sur 2 mois. En plus de cela, la sélection des mois peut désormais être modifiée via un menu de sélection natif.

Format 24 heure pour le Time Picker  

Time Picker (sélecteur d'heure) prend désormais en charge le format 24 heures à l'aide de la propriété hourFormat, ce qui offre aux utilisateurs une plus grande souplesse lors de la sélection des heures, et est plus adapté au format horaire plus largement adopté en France. Le format peut afficher également s'adapter au format local par défaut de l'utilisateur, pour correspondre à ses préférences.

Le TimePicker a également un nouvel événement calciteTimePickerChange lorsque l'heure sélectionnée change. Cet événement fournit un moyen fiable de suivre et de répondre aux entrées de l'utilisateur en temps réel, améliorant ainsi l'interactivité.

Fonctionnalité de redimensionnement pour Sheet

Le composant Sheet est maintenant doté d'une propriété de redimensionnement qui permet aux utilisateurs d'ajuster sa hauteur et sa largeur de manière dynamique en fonction de sa position. Le conteneur redimensionnable est accessible à l'aide de la souris, mais également au clavier pour des raisons d'accessibilité. 

Déplacement d'éléments d'une liste à l'autre

Il est maintenant possible de déplacer des éléments d'une liste à l'autre, aussi bien à la souris qu'au clavier. Le composant propose un menu lors de l'interaction avec un élément de liste pour déplacer sa position dans la liste actuelle ou dans d'autres listes contenant la même valeur de groupe.

Breaking changes de la 3.0

Retrait de composants et de propriétés

Un certain nombre de composants dont les fonctionnalités sont désormais directement au composant List ont été retirés :

• Pick List ;
• Pick List Group ;
• Pick List Item ;
• Value List ;
• Value List Group ;
• Value List Item
  

Il est recommandé d'utiliser le composant List à la place.

Pour plus de détails sur les retraits, consultez la section des notes de versions dédiée aux composants retirés et aux propriétés retirées.

Imports

Calcite a apporté des modifications en interne pour garantir la stabilité, la cohérence et la compatibilité avec vos applications. Pour la version en Custom Elements, les imports de certains composants peuvent différer lorsque vous migrez vos applications vers la version 3.0.

// Version 3.0 imports
import "@esri/calcite-components/dist/components/calcite-button";
import "@esri/calcite-components/dist/components/calcite-icon";
import "@esri/calcite-components/dist/components/calcite-slider";

// Version 2.x imports
import "@esri/calcite-components/dist/components/calcite-button.js";
import "@esri/calcite-components/dist/components/calcite-icon.js";
import "@esri/calcite-components/dist/components/calcite-slider.js";

Intégration aux frameworks

Avec la version 3.0, il n'est plus nécessaire d'installer un wrapper Angular : vous pouvez désormais utiliser Calcite directement dans vos applications. De plus, React 19+ prend en charge nativement les Custom Elements, ce qui rend le wrapper inutile. Pour les versions plus anciennes de React, l'utilisation du wrapper reste possible pour une intégration plus fluide.

 

Avant la version 3.0, le passage d’attributs booléens aux composants React de Calcite convertissait les valeurs en chaînes de caractères, en raison de problèmes de compatibilité avec les Web Components. Désormais, en 3.0, les attributs booléens doivent être passés sous forme de true ou false, remplaçant ainsi l’ancienne solution consistant à utiliser true et undefined.

Pour en savoir plus, consultez la section sur les attributs booléens et explorez la page d’intégration aux frameworks pour intégrer vos applications avec différents frameworks et outils de build.

Plus d'infos sur cette version

Pour plus d'informations sur les mises à jour de Calcite, n'hésitez pas à consulter le résumé complet des changements du dernier trimestre ainsi que le changelog de la dernière version, disponibles dans la documentation. Vous pouvez également consulter cette vidéo où les développeurs de Calcite présentent la 3.0 et proposent diverses démonstrations.