Des interfaces toujours plus riche avec le Calcite Design System 3.3
Je l'évoque régulièrement car c'est très important pour les développeurs web, le Calcite Design System est la base de conception commune à toutes les interfaces des applications web développées par Esri. Il regroupe des ressources normalisées (design tokens, composants, icônes et thèmes,... pour construire des expériences utilisateurs cohérentes, accessibles et adaptables à tout type d’application web. Basé sur des Web Components agnostiques, Calcite s’intègre facilement dans les environnements React, Vue, Angular ou même JavaScript natif.
Le système met l’accent sur l’accessibilité (support ARIA, navigation clavier), la localisation dans différentes langues (prise en charge RTL et traduction) et la conformité aux bonnes pratiques UX/UI. Les design tokens garantissent la cohérence visuelle (couleurs, espacements, typographies) et permettent une personnalisation contrôlée via des variables CSS.
Déjà utilisé dans tout l’écosystème ArcGIS, des widgets de l’API JavaScript aux applications prêtes à l’emploi, Calcite assure une identité visuelle homogène à l’ensemble des solutions Esri.
Une nouvelle version 3.3 pour une interface toujours plus efficace
Depuis quelques jours, une nouvelle version de Calcite est disponible et voici les principaux apports de cette version :
- Nouveaux composants “Swatch” et “Swatch Group”, conçus pour améliorer la sélection de couleurs ou motifs directement dans l’interface.
- Extension des component tokens (Color Picker, Dialog, Popover, Table) offrant un contrôle CSS encore plus précis.
- Introduction d’étiquettes intégrées dans les composants de formulaire, avec gestion des champs obligatoires et du support aria-required.
- Ajout d’événements expanded / collapsed sur plusieurs composants (Accordion, List Item, Block…) pour mieux synchroniser les états UI.
- L’élément "Date Picker" propose désormais une vue sur un seul mois, idéale pour les écrans compacts.
- L’élément "Combobox" affiche un message “aucune correspondance” et autorise la saisie de valeurs personnalisées (allowCustomValues).
- L’élément "Color Picker" intègre la propriété fieldDisabled, utile pour désactiver partiellement l’interface.
- L’élément "Accordion"" offre de nouveaux emplacements “content-start” / “content-end” pour y placer des puces ou icônes, et une propriété headingLevel pour une structure sémantique plus claire.
- Plusieurs améliorations d’accessibilité et d’internationalisation sont intégrées : contraste renforcé, meilleure étiquetage, support RTL et icônes inversibles.
- Enfin, Esri annonce une version majeure en 2026, avec des changements introduisant potentiellement des incompatibilités. Une session YouTube est prévue pour accompagner les migrations.
Pour en savoir plus, je vous recommande la lecture de cet article publié sur CodeTheMap.fr. Ce dernier détaille les nouveautés de la version 3.3 du Calcite Design System, qui continue d’enrichir la palette d’outils mise à disposition des développeurs.
Modifier
0 comments :
Enregistrer un commentaire