3.4.0

3.4.0 (2025-08-25)

Corrections d'anomalies

• Composants bouton radio et case à cocher lorsque le libellé du champ était sur plus d'une ligne, l'affichage de l'indicateur de champ obligatoire était mal positionné.

• Composant fil d'Ariane, le visuel de lien "visité" a été retiré du fil d'Ariane. Il n'aurait jamais dû s'y appliquer.

• Composant dialogue modal, ne pas considérer les hyperliens lorsqu'on détermine à quel contrôle donner le focus à l'ouverture. Problème accessibilité.

• Composants dialogue modal et message, lorsque l'attribut "id-focus-fermeture" était spécifié et que le contrôle n'était pas visible dans l'écran, ce dernier recevait le focus mais l'écran ne défilait pas automatiquement afin que l'élément soit visible. Aussi pour le composant "message", la promesse est maintenant résolue à la fin de l'animation de fermeture du message (au lieu d'au début).

• Composant tableaux dynamiques, correction d'un effet hover dans la pagination (hover sur la page à droite de la page active cachait la partie droite de la bordure de la page active si elle avait le focus).

• Composant liste déroulante :

  • Valeur erronée dans le aria-description dans certaines situations (accessibilité);
  • Contour rouge absent lors d'une erreur absent dans des Razor pages avec jQuery validate;
  • Recherche de contenu avec des points ne fonctionnait pas (ex. rechercher 1.1.1).
  • Améliorer l'accessibilité au clavier. Donner le focus à la prochaine sélection débutant par la lettre tappée.

• Composant notifications, suite à une mise à jour récente des navigateurs et/ou des lecteurs écrans, les notifications n'étaient plus annoncées au lecteur écran.

Nouveautés

• Implémentation des styles pour les "liens vers un vidéo".

• Champs de formulaire, ajout d'un attribut permettant de retarder l'affichage des messages d'erreurs afin d'éviter la problématique d'événement "click" annulé lorsqu'un message d'erreur s'affiche.

Améliorations

• Composant fil d'Ariane, permet maintenant l'affichage de plus de 5 niveaux.

• Composants avis et accordéon typé, en mode "impression" les icônes sont maintenant imprimées.

  Ajout des nouveaux types d'avis complémentaires "communication" et "notification"

• Composant alerte générale, documentation mise à jour afin d'indiquer que le composant doit être placé sous le menu principal.

• Composant traitement en cours :

  • Lorsqu'un overlay est appliqué au traitement en cours (défaut) l'interaction au clavier dans la page n'est plus possible. L'interaction via la souris était déjà bloquée, maintenant le clavier l'est aussi;
  • Lorsque le traitement en cours était associé à un bouton et que ce dernier n'était plus dans le DOM au moment où on tentait de terminer le traitement en cours, le backdrop restait présent, ce qui bloquait l'utilisateur. Maintenant le backdrop est retiré dans cette situation.

• Composant champs texte et autres, ajout d'une largeur par défaut aux champs de type "datetime-local".

• Composant PIV entête, il est maintenant possible que le titre du site ne soit pas un hyperlien. L'attribut "url-titre-site" a été modifié en ce sens. Attention, il s'agit de situations exceptionnelles.

• Script de gestion automatique des liens externes, ajustement de l'attribut "rel" afin d'y inclure "noopener noreferrer" (bonne pratique).

• Iconographie, ajout de 4 nouvelles icônes : "aide", "checklist", "oeil-barre" et "bulles".

Conformité au système de design gouvernemental du Québec

• Composant accordeon, ajustements suite aux nouvelles directives : padding, couleur fond sur hover de l'entête et visuel au focus.

• Composant avis, ajustements mineurs (padding).

3.3.0

3.3.0 (2025-05-15)

Corrections d'anomalies

• Composant liste déroulante, les libellés trop longs entraînaient un ajustement automatique de la hauteur de la liste pour afficher le texte intégral. Désormais, ces libellés sont tronqués et suivis d'une ellipse, ce qui permet de conserver la hauteur standard de la liste.

Nouveautés

• Ajout du composant alerte générale.

• Ajout du composant étiquettes.

• Ajout du composant consulter aussi.

• Ajout du composant liste de liens blocs.

• Ajout des liens de navigation ("lien de retour" et "lien voir plus").

• Composant boutons, implémentation des styles pour les "zones de boutons".

• Implémentation des styles pour les "liens vers un document" et "liens externes". Ajout d'une page de documentation sur les types de liens.

• Ajout des styles pour les séparateurs.

• Iconographie, ajout de 8 nouvelles icônes : "souris", "telephone", "handicape", "cadenas", "cadeau", "accouchement", "fenetre" et "calendrier-plus".

Améliorations

• Composant avis, les avis utilisent maintenant 100% de la largeur disponible lorsqu'ils sont utilisés dans la colonne principale d'un gabarit 2 colonnes. Dans les autres contextes la largeur maximale de 825px s'applique toujours.

Conformité au système de design gouvernemental du Québec

• Augmentation de la marge du bas des titres de niveau 1 (H1), passe de 16px à 32px.

  Attention! si vous aviez modifié cette valeur ou si vous aviez ajouté un espaceur, il se peut que vous vous retrouviez avec trop d'espacement, auquel cas vous devrez ajuster votre code.

• Composant case à cocher, le libellé d'une case à cocher unique est maintenant affiché avec une graisse normale (changement récent au système de design gouvernemental du Québec).

• Composant menu horizontal, quelques ajustements mineurs, réduction de l'épaisseur du chevron et révision complète de l'affichage mobile (< 576px). Si vous n'aimez pas cette nouvelle version mobile telle que définie au système de design gouvernemental, n'hésitez pas à leur écrire afin de leur en faire part.

• Composants menu vertical et liste déroulante, réduction de l'épaisseur du chevron.

• Réduction de l'épaisseur de l'icône "X" permettant de fermer, annuler une sélection, ou annuler une saisie dans les composants dialogue modal, message, notifications, infobulle, barre de recherche et liste déroulante.

3.2.0

3.2.0 (2025-03-14)

Corrections d'anomalies

• Composant tableaux dynamiques, lorsque la sélection multiple était activée, le texte indiquant qu'il n'y avait aucun élément dans le tableau ne s'affichait pas correctement (mauvaise couleur de fond et mauvais padding).

  Retrait du visuel hover pour la ligne indiquant l'absence de donnée dans le tableau.

Améliorations

• Ajout du composant bouton de sélection. Pour le moment on ne gère que la sélection simple (boutons radio) disposés sur une seule colonne. L'affichage sur une ligne et la sélection multiple seront ajoutés dans une version ultérieure.

• Composant champs texte et autres, pour les champs multilignes (textarea), il est maintenant possible d'avoir une hauteur automatiquement adaptée au contenu, ainsi qu'un compteur de caractères.

  L'attribut "precision" est maintenant dynamique, i.e. si le contrôle est déjà rendu à l'écran et que la valeur de l'attribut change, la précision se met à jour.

• Composant dialogue modal et message, au format mobile (téléphone <425px), le bouton primaire est maintenant affiché en premier afin de se conformer à ce qui est maintenant défini au système de design gouvernemental du Québec.

• Composant infobulle légèrement modifié afin de se conformer à ce qui est maintenant défini au système de design gouvernemental du Québec.

  L'icône "?" à l'intérieur du cercle bleu à été modifiée pour "i" et la bulle bleue est légèrement plus petite.

  Il est aussi maintenant possible de l'utiliser à l'intérieur d'un composant "utd-champ-form".

• Composant tableaux dynamiques. Ajustement des textes par défaut pour la zone "infos" (ex. le pluriel/singulier est géré automatiquement).

• Composants bouton radio et case à cocher légèrement modifiés afin de se conformer à ce qui est maintenant défini au système de design gouvernemental du Québec.

  L'espacement entre les contrôles a été réduit.

• Composant traitement en cours, lorsque le traitement en cours est appliqué sur un bouton et que celui-ci possède une icône, cette dernière est masquée (comme l'était déjà son texte).

• Iconographie, ajout de 12 nouvelles icônes : "homme-femme", "horloge", "i-infobulle", "nouveautes", "points-suspension", "repere-carte", "trombone", "formation", "play", "pause", "fichier-image" et "video".

3.1.0

3.1.0 (2024-12-18)

Corrections d'anomalies

• Effets visuels désagréables (voir des bouts de contrôles non stylés, ex. le PIV d'entête, le menu horizontal/vertical, les accordéons, etc.). Étaient particulièrement perceptibles avec des connexions lentes et lorsque le serveur hébergeant les fichiers ne gèrait pas de cache pour les fichiers UTD. Peu fréquent, mais quand même.

  Les contrôles sont maintenant cachés tant que le css n'est pas chargé ce qui évite ces effets visuels désagréables.

• Composant tableaux dynamiques. Ajustement de la largeur du tableau à 100% du conteneur. Permet d'éviter un tableau étroit lorsque le tableau contient peu de colonnes et que le contenu est de petite largeur.

  Ajustement du visuel hover et focus d'un bouton secondaire dans une ligne sélectionnée (fond trop foncé on ne voyait plus l'icône ou le texte).

  Inversion de le l'affichage de la nouvelle icône "flèche" pour tri ascendant et descendant.

• Composant bouton radio, gère maintenant l'affichage dans un conteneur dont la couleur de fond est différente de blanc. Ex. sur fond gris pâle, on pouvait voir un carré blanc derrière les boutons radio.

• Composant dialogue modal, lorsqu'un des boutons de la slot "pied" contenait une image, l'affichage des boutons était incorrect.

• Composants message et dialogue modal, lorsque contrôle qui avait initié l'affichage du message/dialogue modal était un lien dans le menu vertical (ex. via un garde lors de la navigation dans Angular), le focus n'était pas redonné au lien cliqué et un message d'erreur était affiché dans la console.

• Composant liste déroulante, lorsqu'on modifiait les choix possibles, mais que le nombre de choix ne changeait pas ex. (3 choix possibles, dans la liste "A", "B", "C" et qu'on changeait pour "D", "E", "F"), la liste conservait les anciens choix possibles.

  Était problématique notamment lorsque les choix possibles étaient définis dynamiquement en fonction d'un autre champ, ET que le nombre de choix possibles ne changeait pas. Impact quand même très limité.

Améliorations

• Composant liste déroulante, peut maintenant être utilisé dans des pages Blazor.

• Composants PIV entête et menu vertical, supportent maintenant la navigation par routing dans une SPA (ex. Vue, Angular).

• Ajout du système de grille (comme Bootstrap, mais grille seulement).

• Ajout d'une notion de champs avec bouton permettant de lier un bouton à un champ.

• Ajout des notions de groupe de champs (champs associés à un même sujet groupés visuellement et avec un titre) et de champs combinés (champs liés sur une seule ligne ex. Téléphone et poste).

• Composant section, amélioration de l'accessibilité. Lorsque la section contient au moins un contrôle de saisie, elle est maintenant considérée comme un groupe ayant comme libellé le titre de la section.

• Composant traitement en cours, ajout d'un traitement en cours global, avec possibilité de mettre à jour le texte pendant le traitement.

  Amélioration de l'accessibilité. On redonne maintenant automatiquement le focus au bouton qui a initié le traitement en cours si aucun contrôle n'a le focus lorsque le traitement est complété.

• Iconographie, ajout de plusieurs tailles d'icônes et ajout des icônes "enregistrer" (disquette), "loupe mince", "transmission", "sécurité" et "téléverser".

• Composant PIV pied de page lorsqu'utilisé seul (sans "Pied de page du site"), est maintenant plus espacé du contenu de la page (40px de plus, 120px au lieu de 80px).

3.0.0

3.0.0 (2024-10-28)

Impacts sur les sites/applications existantes (breaking changes)

• Taille de font des entêtes modifiée

  La plupart des entêtes (H1, H2, etc.) sont un peu plus grosses qu'avant afin que notre modèle "applicatif" utilise les tailles de font mobiles définies dans le système de design gouvernemental.

  Nous utilisons les tailles de font mobiles en mode "bureau" car UTD est utilisé essentiellement pour des applications internes. Les tailles de font "bureau" définies dans le système de design sont destinées à des sites publics et ne sont vraiement pas adaptées pour des applications interne. Les tailles mobiles qu'ils ont définit sont beaucoup plus appropriée.

  Le changement est somme toute mineure, mais il aura un petit impact visuel sur vos sites/applications. Si vous jugez que les nouvelles tailles d'entête sont trop grosses, il vous est possible de redéfinir la taille des entêtes dans votre CSS.

• Visuel des libellés de champs modifié

  Le visuel des libellés de champs est maintenant conforme avec ce qui est défini dans le système de design gouvernemental.

  Le texte est plus gras, la graisse du texte est maintenant "bold" au lieu du "semi-bold".

• Visuel des messages d'erreurs modifié

  Le visuel des messages d'erreurs est maintenant conforme avec ce qui est défini dans le système de design gouvernemental.

  Une icône d'avertissement rouge a été ajoutée devant les messages et le texte est plus gras (la font est maintenant semi-bold).

Corrections d'anomalies

• Composant accordeon. Retrait de la bordure du bas dans l'enête de l'accordéon lorsque ce dernier est ouvert. Modifié afin de se conformer au système de design gouvernemental.

• Composant liste déroulante. Lorsque l'attribut disabled ou readonly d'une liste déroulante était modifiée (via le select natif) APRÈS le chargement de la page, le changement d'état n'était pas pris en compte et la liste demeurait dans son état initial. Ex. Si on tentait de désactiver une liste déroulante après le chargement de la page, ça ne fonctionnait pas.

  Lorsque qu'une liste était définie sans option (ce qui ne devrait jamais arriver), le composant plantait. Maintenant la liste est rendue sans option, comme un select natif.

Améliorations

• Ajout du composant onglets. Ne fonctionne qu'en mode "bureau". Aucune gestion de défilement des onglets qui est rarement nécessaire.

• Ajout du composant section filtres recherche.

• Iconographie, ajout de 5 icônes (code, code-fichier, fleche-deux-pointes, oeil et modifier) et léger épaississement du trait de l'icône "télécharger", afin qu'elle soit plus visible.

• Composants tableaux et tableaux dynamiques. Ajout du style minimal pour les pieds de tableaux (tfoot). Comme il y a plusieurs cas de figure, pour le moment on se limite au padding et à la taille de font pour uniformiser avec le reste du tableau.

  Pour le moment libre à vous, au besoin, de styler la couleur de font, la graisse de police de caractères, etc.

  La hauteur de l'entête en mode ultra-compact est maintenant d'un minimum de 40px.

• Composant tableaux dynamiques. Modification des icones de tri en entête de tableau afin de se conformer à la fiche en cours d'évaluation dans le système de design du Gouvernement du Québec.

• Composant champs texte. Ajout d'un attribut permettant de bloquer le collage dans les champs.

  Des modifications aussi été effectuées afin de supporter l'utilisation dans des pages MVC Razor, ainsi que dans Blazor. Des exemples d'utilisation ont été ajoutés.

2.5.0

2.5.0 (2024-09-17)

Correction d'anomalies

• Composant PIV entête. En mode mobile, le titre du site n'était pas cliquable (pas un hyperlien). C'est maintenant un hyperlien comme en mode bureau et tablette.

• Composant infobulle. En mode mobile dans certaines situations le positionnement de la page en arrière plan était altéré. Cela pouvait faire en sorte qu'une fois l'infobulle ouverte il était possible de ne plus voir l'icône d'infobulle cliquée et le contenu qui lui était attaché.

• La langue utilisée pour l'affichage des composants considère maintenant les variantes du français sur la balise "html". Ex. lang="fr-CA".

  Fonctionnait uniquement avec lang="fr".

Améliorations

• Composant infobulle. Ajout d'une notion de mode d'affichage. Il est maintenant possible d'afficher l'infobulle sous forme de bulle au lieu du mode "feuille". À noter que l'affichage mobile (appareil mobile ou largeur d'écran inférieure à 576px) est toujours en mode "feuille".

  Aucun impact sur les éléments existants puisque le mode d'affichage par défaut est "feuille".

• Composant section. Ajout d'un paramètre (padding) permettant d'afficher une section sans padding.

• Ajout de 6 icônes (alarme, bibliotheque, fichiers, instructions, lecture et recu) dans iconographie.

• Composants tableaux et tableaux dynamiques. Ajout de 2 nouveaux styles d'affichages. "compact" (padding de cellules réduit de 12px à 8px) et "ultra-compact" (padding de cellules réduit à 4px et taille de caractères réduite à 14px).

• Composant tableaux dynamiques. Ajustements afin de supporter les versions 2.1.x et +. Certaines informations du tableau étaient mal alignées dans les versions supérieures à 2.0.x.

  De plus, il est maintenant possible d'utiliser la sélection multiple avec un visuel normalisé et un exemple de tableau dynamique avec sélection multiple (cases à cocher) a été ajouté.

2.4.0

2.4.0 (2024-08-08)

Correction d'anomalies

• Composant dialogue modal, lorsque le premier contrôle focusable du dialogue était une liste déroulante utd (utd-liste-deroulante).

  Dans cette situation, le focus demeurait au contrôle qui avait ouvert la fenêtre modale et restait derrière la fenêtre modale au lieu de se retrouver sur la liste déroulante et rester dans la fenêtre modale.

Améliorations

• Ajout du composant fil d'ariane. Il s'agit d'une version simple sans ellipse (sous-menu) uniquement requis si plus de 5 niveaux.

  C'est normalement suffisant pour nos applications. Un site ayant plus de 5 niveaux devrait revoir son découpage et sa navigation.

• Composant pastille. Ajout d'une pastille jaune (style avertissement).

• Composant case à cocher. Amélioration du visuel d'une case à cocher désactivée et cochée.

• Composants barre de recherche simple et PIV entête. Ajout du paramètre "mode" permettant de spécifier le mode de recherche.

  Les valeurs possibles sont "redirection" (redirection vers une url, qui est le mode par défaut, donc aucun impact), et "callback"(nouveau). En mode "callback" il est possible d'attacher un traitement javascript à effectuer lors d'une recherche.

• Ajout de 3 icônes (archiver, copier et rafraichir) dans iconographie.

2.3.0

2.3.0 (2024-05-29)

Correction d'anomalies

• Composant infobulle si utilisé à l'intérieur du label d'un champ "liste déroulante".
  Dans cette situation, si l'infobulle contenait un hyperlien, ce dernier n'était pas cliquable.

Améliorations

• Ajout du composant pastille.

• Composant boutons, ajout des styles pour les boutons tertiaires de navigation, ainsi que pour les boutons tertiaires affichés comme des liens.

• Composant liste déroulante, ajout d'un nouvel attribut "focus", permettant de donner le focus au contrôle.

• Ajout de 2 icônes dans iconographie (utilisateur-plus et utilisateur-moins).

2.2.1

2.2.1 (2024-04-24)

Correctif pour utilisateurs du CDN suite à la version 2.2.0. Le CDN ne fonctionnait plus.

2.2.0

2.2.0 (2024-04-23)

Améliorations

• Ajout du composant tuile cliquable.

• Ajout de 26 icônes dans iconographie, et ajout de la possibilité d'affecter 5 couleurs de base aux icônes.

• Dans tous les gabarits, l'attribut "relative-base-path" n'est plus requis. Vous pouvez le laisser en place, mais il ne change rien. Sa valeur est dorénavant déterminée automatiquement.

• Dans tous les gabarits le conteneur principal passe de 1152px à 1200px. Les zones de contenu principal et secondaire sont aussi modifiées.

  La zone de contenu secondaire (ex. menu vertical) passe de 256px à 268px.

  La zone de contenu principal était limitée à 736px. Elle utilise maintenant tout l'espace restant soit un maximum de 868px.

  Ces changements nous permettent de récupérer de l'espace pour nos contenus tel que maintenant défini dans les règles du système de design du gouvernement du Québec.