Les nouveautés du Design System d'Esri (mise à jour de mai 2023)

Calcite, le Design System d'Esri, vous permet de créer facilement des expériences utilisateurs cohérentes et esthétiques en mettant à votre disposition des ressources de conception et de développement.

Depuis sa première mise à disposition en version de production en janvier, de nombreuses améliorations et de nouveaux composants y ont été ajoutés. Explorons ensemble ces nouveautés.

Composants de navigation

Calcite propose maintenant quatre nouveaux composants qui offrent une structure et un comportement cohérents pour faciliter la navigation dans votre application.

 

Navigation : 

• Sert de composant primaire pour naviguer dans une application ou une expérience ;
• Contient la hiérarchie des informations d'une application dans les composants de menu ;
• Est généralement placé dans l'en-tête afin d'assurer un emplacement cohérent pour les contrôles interactif
  

Navigation Logo : 

• Permet d'afficher le logo, le nom et la description de votre application ;
• Vous pouvez utiliser a propriété "active" pour indiquer à l'utilisateur qu'il se trouve à la racine de l'application ;

Navigation User :

•  Sert à afficher les informations d'un utilisateur connecté, comme par exemple son nom, son nom d'utilisateur, une image de profil...

Menu et Menu Item :

• Fournissent une structure de menu permettant à vos utilisateurs d'accéder et de naviguer dans les pages ou les fonctionnalités de votre application.
• Sont le plus souvent insérés dans un composant Navigation, mais peuvent également être placés dans d'autres composants de mise en page, tels que Shell Panel, Panel et Flow.

Voici un exemple de la façon dont ces différents composants sont réunis dans le composant Navigation :

Composant de groupe de puces (Chip Group)

Vous pouvez utiliser ce nouveau composant Chip Group dans votre application pour les workflows de sélection, les modèles de filtrage et le basculement entre des données de catégories. Le groupe de puces offre un espacement cohérent, une navigation au clavier accessible et des modes de sélection pour plusieurs puces.

Zone de Texte (Text Area)

La zone de texte est un contrôle de saisie de texte sur plusieurs lignes, qui permet aux utilisateurs de saisir une quantité importante de contenu sous forme de texte libre. Le composant peut collecter les entrées des utilisateurs, comme par exemple des commentaires ou des évaluations dans des formulaires. Vous pouvez limiter le nombre de caractères saisis par l'utilisateur et intégrer d'autres composants comme un bouton dans les emplacements de début et de fin du pied de page.

Transparence du sélecteur de couleurs 

Le sélecteur de couleurs peut désormais être configuré pour inclure un canal alpha afin d'activer la transparence des couleurs.

Amélioration des listes

Persistance d'une sélection : les listes disposent de plusieurs modes de sélection, dont l'absence de sélection, la sélection unique, la section multiple et, désormais, la persistance unique, qui vous permet d'imposer un élément de liste toujours sélectionné. La seule exception est le cas où vous décidez de ne pas présélectionner l'un des éléments au départ. Cette option de sélection est également disponible avec d'autres composants offrant une sélection, tels que le composant Dropdown (liste déroulante).

Fermer les éléments de la liste : si vous activez la propriété de fermeture, vous pouvez permettre à vos utilisateurs de fermer ou de supprimer des éléments de la liste.

Événement de changement de sélection : vous pouvez écouter le nouvel événement calciteListChange lorsque la sélection change et accéder à tous les éléments sélectionnés de la liste.

Organiser vos contenus avec les emplacements des composants Shell

Avant de parler des améliorations, revenons rapidement sur ce que sont les composants Shell. Shell est un composant de mise en page fondamental dans Calcite, car il organise la mise en page globale de votre application. Il peut être utilisé pour une expérience pleine page, ou avoir une largeur et une hauteur définies. Shell peut également être intégré à d'autres expériences ou contenus narratifs, et comprend un certain nombre d'emplacements où vous pouvez choisir de placer votre contenu dans la mise en page.

Dans cette version, Calcite inclut des emplacements supplémentaires pour placer le contenu. 

 

Emplacements des panneaux supérieur et inférieur : Au centre de la mise en page, il y a maintenant un "panel-top", un "panel-bottom" et un emplacement par défaut.

Emplacement des alertes : Les alertes sont des messages contextuels de type pop-up qui peuvent contenir des actions sans gêner l'application. Par défaut, elles sont placées au-dessus de la fenêtre du navigateur. Avec cette mise à jour, vous pouvez choisir de les placer dans un nouvel emplacement "alertes" dans le Shell qui est dédié aux alertes. Lorsqu'elle est placée dans cet emplacement, l'alerte est positionnée au-dessus du Shell plutôt que de la page entière. C'est utile lorsque votre Shell est intégré à d'autres contenus sur une page et que vous souhaitez afficher des informations sur le Shell plutôt que sur la page entière.

Emplacement des modales : Les modales (Modals) sont des conteneurs flottants qui peuvent contenir des messages simples ou des interfaces personnalisées déclenchées de manière contextuelle. Par défaut, elles sont centrées sur la fenêtre du navigateur. De la même manière que pour l'emplacement des alertes, l'emplacement des modales vous permet de centrer la fenêtre modale sur le Shell plutôt que sur la page entière.

Contenu figé dans les modales

Le composant Modal inclus désormais deux emplacements pour le contenu figé (non déroulant) :

• Haut : ajoute du contenu à l'en-tête figée du composant ;
• Bas : ajoute du contenu au pied de page figé du composant.

Redimensionnement du panneau Shell et variables CSS

Redimensionnement des panneaux : le panneau Shell (Shell Panel) dispose désormais d'une option permettant d'activer le redimensionnement interactif du panneau lorsqu'il est placé en "haut" ou en "bas". Lorsque cette option est activée, les utilisateurs peuvent faire glisser le bord du panneau pour étendre ou réduire la hauteur du composant et interagir avec le contenu.

Variables CSS pour le dimensionnement :  vous pouvez contrôler le dimensionnement des panneaux Shell en utilisant les variables CSS suivantes :

• --calcite-shell-panel-detached-max-height,
• --calcite-shell-panel-height,
• --calcite-shell-panel-max-height,
• --calcite-shell-panel-max-width,
• --calcite-shell-panel-min-height,
• --calcite-shell-panel-min-width,
• --calcite-shell-panel-width,
• --calcite-shell-panel-z-index

Barres d'action sur les panneaux et les éléments de flux

La barre d'action est composée d'actions qui sont généralement utilisées pour les opérations de base dans l'interface, et sont souvent visibles sur le bord gauche ou droit des applications. Avec cette mise à jour, vous aurez désormais accès à un emplacement "action-bar", qui sert d'emplacement spécifique pour une barre d'action, en haut des panneaux et des éléments de flux. Vous pouvez l'utiliser pour positionner une barre d'action contenant des fonctionnalités correspondant au contenu du panneau ou de l'élément de flux.

Style du focus

Couleur du focus : par défaut, la couleur du focus correspond à la couleur de la marque configurée. Vous pouvez remplacer la couleur du focus en utilisant une nouvelle variable CSS globale disponible pour tous les composants, ou la définir directement sur un composant individuel.

 

Placement du focus : Par défaut, le focus du composant est affiché sous la forme d'un contour autour du composant. Au lieu de cela, le focus peut être dessiné à l'intérieur du composant à l'aide d'une nouvelle variable CSS.

Accessibilité

La création de logiciels accessibles reste une priorité forte pour Esri. Les composants Calcite s'appuient sur les normes d'accessibilité du W3C pour garantir que les applications et les expériences que vous créez sont utilisables par un large éventail d'utilisateurs. Calcite a récemment publié un rapport de conformité, qui inclut le support du US Access Board (Section 508), les directives d'accessibilité au contenu Web (WCAG), et le format actuel du Voluntary Product Accessibility Template (VPAT®).

Chaque version comprend des améliorations des composants Calcite axées sur l'accessibilité. Pour en savoir plus sur certaines des récentes mises à jour liées à l'accessibilité, veuillez consulter la section Accessibilité du résumé des notes la version de mai de Calcite.

Pour aller plus loin

Cet article couvre quelques-uns des points forts de Calcite publiés au cours des quatre derniers mois. Il y a encore beaucoup à découvrir, et je vous invite à consulter les notes de version du mois de mai pour un aperçu complet des mises à jour. Envie d'apprendre à utiliser un composant du design system ? Vous pouvez retrouver ce tutoriel où nous apprenons à implémenter un bouton.