Découvrez la version 5.0 du Calcite Design System

Le Calcite Design System vous permet d'enrichir vos applications avec des éléments d'UI prêts à l'emploi, cohérents et personnalisables. Pour s'adapter aux usages modernes, Esri ne cesse de le faire évoluer, avec 3 mises à jour par an. Dans cet article, je vous propose de découvrir ensemble la première mise à jour de l'année, avec la version 5.0 de février 2026.

Convention de nommage du CDN 

Calcite et l'ArcGIS Maps SDK for JavaScript adoptent désormais une gestion coordonnée des versions et du nommage du CDN (ce qui explique notamment le saut de version de la 3.3 à la 5.0). Dans cette logique, le point d'entrée CDN a été mis a jour :

<script src="https://js.arcgis.com/calcite-components/5.0" type="module"></script>

Ressources hébergées localement

Si vous préférez un hébergement local des assets, vous pouvez copier les fichiers nécessaires dans le répertoire de votre projet avec la commande suivante :

cp -r node_modules/@esri/calcite-components/dist/cdn/assets/* ./your-asset-directory/

Consultez la documentation pour plus de détails sur l'utilisation du CDN et le chargement des assets selon votre configuration. 

Redesign du composant Action

Le composant Action a été repensé à l'échelle de tout le design system. Sa taille est désormais plus compacte, il propose une apparence transparente par défaut. Les slots où vous pouvez insérer des actions présentent un meilleur alignement sans variation de taille et un espacement par défaut amélioré lors de l'intégration dans des composants parents comme par exemple la barre d'action.Une nouvelle apparence de mise en évidence (highlight) est également disponible.

En haut, l'apparence par défaut. En bas, la nouvelle apparence de mise en évidence.

Désactivation du mode plein écran du composant Dialog

Le composant Dialog intègre désormais une propriété fullscreenDisabled. Cette propriété empêche l’affichage en plein écran du composant (un comportement qui, sur les écrans de petite largeur, occupait tout le viewport et masquait entièrement le reste du contenu). Elle offre ainsi un contrôle de configuration supplémentaire sur la manière dont le composant et le contenu en arrière-plan sont présentés selon la résolution d’écran, en particulier sur mobile et tablette. 

Cohérence UI/UX des composants groupés

Les composants groupés comme Dropdown Group, Combobox Item Group et List Item Group partagent désormais une expérience UI/UX harmonisées sur les variations de graisse des polices, les couleurs et les états interactifs. Cela permet de renforcer la cohérence visuelle et l'expérience utilisateur.

Amélioration de l'affichage des préfixes et de suffixes

Les composants Input, Input Number et Input Text ont amélioré le rendu visuel de leurs propriétés prefixText et suffixText. Cela permet de réduire le risque de les confondre avec des éléments cliquables et de diminuer le bruit visuel et d'offrir des indications plus claires aux utilisateurs.

Meilleure pagination dans le composant Table

Le composant Table introduit une nouvelle propriété currentPage, permettant de lire ou définir la page courante lorsque la pagination est activée. Cette propriété offre au développeur un meilleur contrôle du comportement de pagination au développeur en lui permettant de définir la page initiale au moment du rendu, récupérer la page actuellement affichée et changer de page de manière programmatique.

Amélioration de l'accessibilité 

Mode de sélection dans Action Group

Action Group prend désormais en charge des modes de sélection pour les Actions insérées via slot, offrant la possibilité de sélectionner plusieurs Actions regroupées. Ces modes de sélection améliorent l’usage au clavier et fournissent un contexte renforcé aux technologies d’assistance, permettant de toucher un public plus large dans vos solutions. Les Actions insérées dans Action Bar avec gap et padding sont désormais représentées de manière cohérente dans tout le composant. 

Propriété aria pour Action

Action propose une nouvelle propriété aria, qui permet de surcharger ou d’étendre les attributs ARIA appliqués au bouton du composant. Par exemple, cette propriété peut fournir davantage de contexte aux technologies d’assistance lorsqu’une Action bascule la visibilité d’un autre composant. Reportez-vous à la section accessibilité du composant Action pour les recommandations de configuration. 

 

Support en lecture seule pour Combobox

Combobox améliore l’accessibilité lorsqu’il n’est pas éditable mais que son contenu reste accessible aux utilisateurs. Dans la version 5.0, le composant communique désormais sa valeur aux technologies d’assistance lorsqu’il est en mode lecture seule.

Breaking Changes

Renommage des tokens de couleur

Les tokens sémantiques évoluent avec l'introduction de tokens de couleur basés sur des noms de surface, disponibles en mode clair et sombre. Les anciens tokens background et foreground sont désormais dépréciés.

 

Retrait des API dépréciées

Avec la version 5.0, Calcite a supprimé les composants, propriétés, valeurs, slots et événements dépréciés. Par exemple, le slot tooltip d’Action peut désormais être remplacé par l’utilisation directe du composant Tooltip.

Les composants supprimés en 5.0 incluent : Modal, Shell Center Row, Tile Select, Tile Select Group, Tip, Tip Group et Tip Manager.

Pour consulter la liste complète des éléments supprimés, rendez-vous dans le résumé des composants, propriétés, valeurs, slots et événements retirés, qui détaille les étapes de migration nécessaires pour la version 5.0.

Mises à jour du design de Notice

Notice propose désormais une apparence minimaliste, offrant une meilleure distinction visuelle par rapport au composant Alert. Dans la version 5.0, Notice prend en charge plusieurs styles de messages en ligne, dont une apparence avec un contour et un remplissage pour mettre en évidence certains messages et une apparence transparente pour des messages moins intrusifs. 

Mise à jour de la cartographie des couleurs en mode sombre

La cartographie des couleurs en mode sombre a été révisée pour s’aligner sur le mode clair, en s’assurant que les couleurs de fond restent plus sombres que les couleurs de premier plan. Cela permet une meilleure cohérence visuelle et un contraste approprié.

Intégration au framework

Avec le support des custom elements dans React 19+, le package @esri/calcite-components-react n’est plus nécessaire et est déprécié en 5.0, avec suppression prévue dans une prochaine version majeure. Il est recommandé de passer à React 19+ et d’utiliser directement @esri/calcite-components pour garantir la compatibilité et le support futur.

Pour aller plus loin

Consultez les notes de version de février 2026 pour découvrir la liste complète des changements depuis la version 3.3 : nouvelles fonctionnalités, corrections de bugs et dépréciations.

Le 24 février à 18h, l'équipe de développement de Calcite organiseront un live pour présenter ces nouveautés. N'hésitez pas à y assister pour pouvoir leur poser vos questions en direct.