Calcite
vous permet de créer des applications belles et cohérentes tout en réduisant
votre effort de développement en mettant à votre disposition des éléments
d'interface utilisateur encapsulés dans des balises HTML appelés
composants. Depuis
notre récap de juin, de nouveaux composants et de nombreuses améliorations sont venus enrichir
le Design System. Je vous propose de découvrir cela ensemble dans cet article.
Nouveau composant Dialog
Le nouveau composant
Dialog
présente à l'utilisateur des interactions, des tâches ou des flux de travail
ciblés. Les dialogues peuvent être configurés pour répondre à une variété de
cas d'utilisation et de besoins d'interface, allant de brefs messages
d'information à des flux de travail complexes en plusieurs étapes. Il peut
s'agir, par exemple, de proposer aux utilisateurs un contenu d'accueil ou
d'instruction, ou d'interrompre un flux de travail pour présenter un choix
ou fournir des conseils.
Certains cas d'utilisation de Dialog peuvent prendre la forme d'interactions
bloquant la page, où la
propriété
modale
doit être utilisée, et un
Scrim
sera positionné derrière le dialogue pour empêcher l'interaction avec le
contenu principal. La création de Dialog rend obsolète le composant
Modal, déprécié en version 2.11 et dont la suppression est prévue dans une prochaine version majeure.
L'emplacement du composant peut être spécifié via la propriété
placement, et propose des
styles
permettant de personnaliser davantage son emplacement.
Dialog propose également une
propriété
widthScale
pour spécifier sa taille,
dragEnabled
et
resizable
pour respectivement faire glisser et redimensionner le composant, des
emplacements de contenu, et fournit des
fonctionnalités d'accessibilité
telles que la navigation au clavier.
Version de Calcite et logs
La nouvelle variable globale
calciteConfig permet de détecter
et communiquer la version actuelle de Calcite et fournit un contexte sur les
dépréciations et suppressions de composants. Cela peut s'avérer utile lors
du dépannage d'une application et pour rester informé de l'état des
composants utilisés par l'application.
window.addEventListener("load", () => console.log(window.calciteConfig.version));calciteConfig peut également être utilisée pour supprimer les
messages dans les environnements de production et les builds, qui
apparaissent par défaut dans les logs de la console depuis la
2.11.
var calciteConfig = {
logLevel: "off"
};Variables CSS des composants
Calcite travaille à la prise en charge des
jetons de composants, qui permettent de personnaliser les composants par le biais de
variables CSS Certains composants offrent déjà une personnalisation pour
les concepteurs et les développeurs, et une configuration supplémentaire
via des variables CSS sera prise en charge dans les prochaines versions
Parmi les nouvelles variables CSS disponibles, citons les variables
--calcite-text-area-min-height et
--calcite-text-area-max-height
de Text Area, qui spécifient respectivement la hauteur minimale et maximale du
composant.
<style>
#feedback-comments {
--calcite-text-area-min-height: 5rem;
--calcite-text-area-max-height: 10rem;
}
</style>
<calcite-text-area id="feedback-comments" max-length="500"></calcite-text-area>
Améliorations du composant List
Le composant
List
prend désormais en charge une propriété
filterProps qui
permet de spécifier les propriétés à filtrer lors de l'utilisation de
filterEnabled, où une ou plusieurs valeurs de propriété
peuvent être utilisées pour filtrer. Si cette propriété n'est pas
définie, toutes les propriétés seront prises en compte, y compris
label, la description,
metadata et value.
List Item
comprend une nouvelle propriété
unavailable qui,
lorsqu'elle est activée, fait apparaître le contenu du composant comme
désactivé, tout en permettant aux utilisateurs de naviguer jusqu'à
l'élément de la liste. Les concepteurs et les développeurs peuvent
également fournir un contexte supplémentaire, comme la raison pour
laquelle l'interaction est limitée sur le composant. Cela diffère de la
propriété « disabled » du composant, où l'interaction est
complètement empêchée.
Mise à jour de Combobox
Le Combobox Item
a été amélioré avec les propriétés
En plus de cela, il est désormas possible de filtrer les valeurs de
texte des Combobox grâce à la nouvelle propriété
description et
shortHeading. La description fournit un
contexte supplémentaire à un élément et le
shortHeading peut représenter l'élément dans un format
compact lorsque la
Combobox
est fermée. Un nouvel emplacement de content-end a
également été introduit pour ajouter des éléments non actionnables
après le contenu du composant, tels qu'un
Avatar.
filterText.
Amélioration du Slider
Slider
garantit désormais que seuls les nombres entiers peuvent être
sélectionnés lorsque la propriété
snap est
true et que la propriété step est définie
sur un nombre entier.
Amélioration de l'utilisation de l'Input Time Zone
Input Time Zone
comprend de nombreuses améliorations qui rendent son utilisation
plus facile, comme la possibilité d'afficher la région lorsque le
mode est défini sur "region" ainsi que
l'ajout d'une nouvelle icône de recherche dans le texte de
remplacement du composant.
Accessibilité et localisation
Afin de correspondre à des audience plus large, Calcite a inclus de
nouvelles capacités afin d'augmenter l'accessibilité et
l'internationalisation.
Par exemple, il est possible de déplacer le focus entre les
différents
Accordion Item
d'un composant
Accordion
de manière programmatique grâce à la nouvelle méthode
setFocus.
Toujours pour augmenter l'accessibilité, le contexte du message
d'erreur pour les composants basés sur la saisie, notamment
Combobox,
Input,
Select
et
Text Area, est désormais fourni aux technologies d'assistance (Assistive
Technology, AT) lorsque le 
status du composant est
signalé comme "invalid". Ce contexte
supplémentaire permet aux utilisateurs souffrant de déficiences
visuelles ou cognitives de s'appuyer sur les technologies
d'assistance pour signaler qu'une erreur s'est produite et qu'une
action supplémentaire est nécessaire avant la soumission du
formulaire. Côté localisation, l'Input Date Picker inclut un support supplémentaire pour les locales bosniaque (bs) et italienne - Suisse (it-CH).
Vous retrouverez l'ensemble des nouveautés d'accessibilité et de localisation dans cette section des notes de version.
Changements visuels
Calcite continue d'évoluer pour s'adapter aux tendances en matière de design, tout en améliorant la cohérence et la facilité d'utilisation. Des modifications visuelles sont donc régulièrement introduites et peuvent avoir un impact sur l'aspect visuel de vos applications.
Par exemple, l'une des récentes améliorations apportées à Combobox a introduit un changement visuel : lors d'une recherche, les termes correspondants sont mis en évidence pour faciliter l'identification. Les valeurs personnalisées sont ajoutées en haut de la liste déroulante et l'ordre de la navigation au clavier a été affiné lorsque le 
Le Loader comprend également une nouvelle option d'affichage 
Vous retrouverez l'ensemble des changements visuels dans cette section des notes de version.
selectionMode est défini sur « multiple », ce qui améliore l'expérience de l'utilisateur.
"determinate-value". Ce type d'affichage présente un signe de pourcentage à côté de la valeur, ce qui permet de fournir à l'utilisateur un pourcentage de chargement.
Dépréciations
Comme mentionné plus tôt dans cet article, dépréciations sont désormais documentées dans les changelogs afin d'aider les concepteurs et les développeurs avant les versions majeures et les futures suppressions. Explorez la configuration globale de Calcite pour faciliter le dépannage et en savoir plus sur les dépréciations.
Dans la version
2.11, les composants Modal et Shell Center Row ont été dépréciés. Avec la dépréciation de Modal, il est recommandé de le remplacer par Dialog. À la place de Shell Center Row, utilisez la propriété displayMode de Shell Panel définie sur « float-content “ ou ”float-all ».Vous retrouverez l'ensemble des dépréciations dans cette section des notes de version.
Bientôt la 3.0 !
La version 3.0, sera lancée au début de l'année 2025. Il s'agira d'une version majeure introduisant des breaking change. Peu après la sortie de la version 3.0, les membres de l'équipe Calcite organiseront un événement en direct sur YouTube au début de l'année 2025, qui détaillera les changements, ce à quoi il faut s'attendre lors de la migration de la version 2 à la version 3, et bien plus encore. Restez à l'écoute pour plus d'informations dans les semaines à venir !
Aucun commentaire:
Enregistrer un commentaire