Une UI toujours plus riche pour vos applications : version 3.3 du Calcite Design System

La version 3.3 de Calcite Design System apporte de nombreuses améliorations : de nouveaux composants, davantage de tokens pour la personnalisation visuelle, des événements étendus, et plusieurs mises à jour d’accessibilité et d’internationalisation.

Depuis la version 3.2, Esri a ajouté des design tokens pour personnaliser les composants via des variables CSS, renforcé la cohérence entre les composants, introduit de nouvelles fonctionnalités et amélioré de nombreux détails du framework.

Swatch et Swatch Group

Les nouveaux composants Swatch et Swatch Group permettent d’afficher des collections d’éléments graphiques, idéales pour des workflows de sélection de couleur.
Ils prennent en charge les couleurs, images et motifs, dans des modes de sélection simples ou multiples.

Voici leurs principales caractéristiques :

Support de la navigation au clavier pour une meilleure accessibilité.

États visuels : actif, sélectionné et désactivé.

Intégration directe avec le Color Picker, garantissant la cohérence dans tout le design system.

Component tokens

Tous les composants du design system disposent désormais de component tokens. Avec la version 3.3, des tokens ont été ajoutés pour : Color Picker, Dialog, Popover et Table.
Ces tokens offrent un contrôle plus précis de l’apparence visuelle. Ils permettent, par exemple, de modifier la couleur de fond, la bordure ou le rayon d’un Color Picker directement via des variables CSS, sans avoir à surcharger le style global.

Les design tokens servent de référentiel unique pour la cohérence visuelle : ils centralisent les couleurs, espacements, tailles et ombres utilisés dans Calcite. En les exploitant, vous garantissez une apparence homogène entre vos applications, tout en facilitant la création et l’évolution de vos thèmes personnalisés. 

Pour plus d'informations, consultez la documentation sur l'utilisation des tokens et le guide de référence des design tokens.

<style>
  #themed {
    --calcite-color-picker-background-color: #fff5fb;
    --calcite-color-picker-border-color: #eda1c6;
    --calcite-color-picker-corner-radius: 12px;
  }
</style>

<calcite-color-picker id="themed" alpha-channel></calcite-color-picker>

Étiquettes intégrées dans les formulaires

Les composants basés sur des formulaires, comme par exemple Input Date Picker et Input Number, disposent désormais d’étiquettes intégrées.
Elles peuvent inclure un indicateur visuel et une infobulle pour les champs obligatoires, ainsi qu’un attribut aria-required pour les technologies d’assistance.

Le composant Label introduit également un nouvel emplacement "label-content" permettant d’ajouter des icônes personnalisées. 

Nouveaux événements expanded et collapsed

Les composants Accordion Item, Action Bar, Block et List Item émettent désormais des événements expanded et collapsed, tels que calciteActionBarExpand et calciteActionBarCollapse. 

Ces événements de cycle de vie permettent de suivre les changements d’état et d’y réagir — par exemple pour synchroniser des animations, gérer le focus ou coordonner l’état d’autres composants dans l’interface. 

Vue à un mois pour le Date Picker

Le Date Picker et Input Date Picker disposent désormais d’une propriété calendars pour afficher une vue à un mois ou deux mois (1 ou 2).

Lorsqu’un intervalle de dates (range) est défini, la vue par défaut reste à deux mois, mais la nouvelle vue à un mois est idéale pour les interfaces mobiles ou les espaces restreints, tout en conservant la sélection de plages de dates.

Amélioration du filtrage dans le Combobox

Le Combobox affiche désormais un message “aucune correspondance” lorsqu’aucun élément ne correspond à la recherche.
Si la propriété allowCustomValues est activée, l’utilisateur peut ajouter une nouvelle entrée personnalisée.

Cela renforce la clarté du retour utilisateur et améliore la saisie dans des listes longues ou dynamiques.

Nouvelle propriété fieldDisabled du Color Picker

Le Color Picker inclut désormais une propriété booléenne fieldDisabled permettant de désactiver la partie supérieure de la zone de couleur.
Cette option est utile sur mobile, dans des interfaces compactes ou lorsque le graphique n’est pas nécessaire. 

Améliorations des Accordion Item

Le composant Accordion Item ajoute deux nouveaux emplacements de contenu : "content-start" et "content-end".
Ils permettent d’ajouter des éléments comme des Chips ou des icônes de part et d’autre du titre et de la description.

Une nouvelle propriété headingLevel permet aussi de définir le niveau de titre (h1–h6) sans affecter le style visuel — un atout pour la structuration sémantique et l’accessibilité des pages.

Accessibilité et internationalisation renforcées

Esri continue d’améliorer l’accessibilité et la compatibilité internationale de Calcite afin de rendre les applications accessibles au plus grand nombre.
Pour aller plus loin, consultez la page Designing for Individuals sur la documentation Calcite.

Voici quelques améliorations apportées par la 3.3 :

 

Propriété label du composant Input Time Picker 

Le composant Input Time Picker inclut désormais une propriété label, qui permet d’ajouter une étiquette décrivant plus précisément le champ pour les technologies d’assistance (comme les lecteurs d’écran).
Lorsqu’elle est renseignée, cette étiquette est annoncée à l’utilisateur, apportant un meilleur contexte dans les formulaires et lors de l’interaction avec le composant. 

<calcite-input-time-picker
  label="2025 5k fall leaf run start time">
</calcite-input-time-picker>

Amélioration du contraste du Date Picker

Le composant Date Picker bénéficie d’un meilleur contraste de couleurs pour les mois et jours précédents ou suivants.
Les différentes interactions (survol à la souris, sélection d’une date, etc.) offrent désormais un contraste renforcé, améliorant la lisibilité et l’accessibilité du composant pour un public plus large.

Propriétés icon et iconFlipRtl

Les composants Dialog, Flow Item et Panel prennent désormais en charge les propriétés icon et iconFlipRtl, permettant d’ajouter des icônes adaptées à différents usages.
Cette évolution garantit une meilleure cohérence visuelle entre composants (par exemple avec Block ou Accordion) et des icônes plus homogènes à travers le design system.

La propriété iconFlipRtl permet également d’inverser les icônes dans les interfaces bidirectionnelles (droite-à-gauche, RTL), comme les flèches de navigation.
Certaines icônes, comme les logos, ne doivent toutefois pas être inversées. La documentation de Calcite explique comment gérer ces cas spécifiques.

Pour aller plus loin

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

Et après ?

Calcite passera à une nouvelle version majeure début 2026, avec des changements potentiellement incompatibles. Esri organisera un live YouTube à cette occasion, consacré à :

• l’analyse des changements majeurs,
• les stratégies de migration,
• et les bonnes pratiques pour une mise à jour fluide.