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

Vous avez envie de créer de belles applications, avec un style cohérent mais sans passer trop de temps à développer chacun des éléments d'interface utilisateur ? Ce dont vous avez besoin, c'est d'un Design System, qui vous permet d'intégrer de manière très simple de nombreux composants dont le style et le comportement sont déjà développés, mais qui restent personnalisables pour s'adapter à votre charte graphique. Si vous ne savez pas du tout ce qu'est un Design System, je vous propose de découvrir cette vidéo pour en apprendre plus.

Esri met à disposition des développeurs son propre Design System, Calcite, qui est utilisé dans le développement des logiciels et applications du système ArcGIS, et vous pouvez très facilement en tirer parti pour intégrer des éléments d'UI à votre application comme nous l'avions fait dans ce tutoriel. 

Il est régulièrement mis à jour avec de nouveaux composants et de nouvelles fonctionnalités, et je vous propose ici de faire le bilan trimestriel de toutes les nouveautés introduites depuis mars 2024.

Nouveaux composants Carousel et Carousel Item

Les nouveaux composants Carousel et Carousel Item permettent l'affichage et la navigation dans un ensemble d'éléments. 

Les carrousels peuvent être utilisés pour afficher des conseils lors de l'ouverture de l'application, des messages, des médias ou d'autres contenus similaires. Ils peuvent être présentés dans une modale ou un popover pour un affichage temporaire, ou dans un bloc ou un panneau pour un affichage statique.

Carousel et Carousel Item supportent également la lecture automatique grâce à la propriété autoplay. Lorsqu'il est initialisé, le carrousel effectue une rotation automatique de ses éléments. Vous pouvez retrouver dans la doc les ressources sur la lecture automatique du Carousel, ainsi que les meilleures pratiques et recommandations pour l'intégration de ce composant.

Redesign du composant Tile

Le composant Tile est utile pour présenter des informations dans un format compact et cohérent. Esri l'a récemment redisgné pour rationaliser les flux de travail, permettre le support de la sélection et y ajouter deux nouveaux emplacements (slots), où le contenu non actionnable peut être placé en haut et en bas du composant (content-top slot et content-bottom slot).

Vous pouvez afficher plusieurs Tiles en utilisant le nouveau composant Tile Group. Tile Group permet un design responsive en donnant accès à plusieurs échelles pour le composants, auxquelles vous pouvez accéder via la propriété scale.

Amélioration de la validation des formulaires

En mars dernier, Esri a annoncé le support de la validation des formulaires. Depuis, les capacités de validation ont été améliorées.

Les composants de formulaires peuvent désormais fournir un retour d'information indiquant pourquoi la valeur d'une entrée de l'utilisateur n'est pas valide.

Personnalisation du Slider

Le composant Slider a été enrichi d'une nouvelle propriété labelFormatter, qui permet au texte affiché au-dessus du curseur d'évoluer dynamiquement en fonction de changements de le composant. Le texte du curseur peut par exemple être mis à jour lorsque la valeur du composant dépasse un certain seuil.

L'ajout d'une deuxième propriété fillPlacement permet de spécifier quelle partie du rail du composant doit être mise en évidence par rapport à la poignée (soit du début jusqu'à la valeur actuelle, soit de la valeur jusqu'à la fin). Notez que cette propriété n'a aucun effet lorsque le composant est configuré pour afficher une plage de valeurs.

Support des propriétés readOnly et download

Les composants Input Time Zone et Combobox ont été améliorés pour supporter la fonctionnalité readOnly. Lorsque la valeur de celle-ci est égale à True, les valeurs peuvent être sélectionnées mais ne pas être modifiées, évitant ainsi les modifications non désirées. 

Le composant Button supporte maintenant la propriété download, qui permet d'accéder et télécharger automatiquement les ressources indiquées dans la propriété href.

Génération de couleurs d'arrière plan des Avatars

Le composant Avatar s'assure désormais que des arrière-plans différents sont générés pour des valeurs similaires spécifiées dans les propriétés username, fullName et userId en utilisant une couleur d'arrière-plan accessible générée de manière aléatoire.

Amélioration de l'accessibilité

Lorsque la propriété dragEnable du composant List est égale à True, le composant supporte les technologies d'assitance et les utilisateurs de clavier pour déplacer les éléments enfants de la liste List Items.Pour déplacer un élément de la liste, cliquez sur le bouton de déplacement ou la poignée du composant et appuyez sur la touche espace pour activer le tri. Pour déplacer l'élément vers une nouvelle position dans la liste, utilisez les flèches de votre clavier pour le placement.

Le composant Combobox prend également désormais en charge la novigation au clavier VoiceOver afin que les utilisateurs puissent naviguer dans les entrées du composant et saisir manuellement des valeurs.

En savoir plus sur ces améliorations

Les mises à jour de Calcite contiennent d'autres nouvelles capacités, résolution de bug et breaking changes que nous n'avons pas exploré en détail dans cet article. Découvrez tous les détails et des extraits de code montrant comment mettre en place ces nouveautés dans les notes de version.