Toast

Toast dans Storybook

Utilisation

Présentation

Une notification toast communique des informations générées par le système en réponse à l'activité de l'utilisateur. Il peut s'agir d'informations sur une mise à jour, une confirmation ou une action terminée. Les toasts superposent le contenu dans le coin supérieur droit de l'écran. Ils apparaissent pendant une durée prédéfinie de 5 secondes et peuvent être rejetés par l'utilisateur.

Pour savoir quand utiliser les notifications toast, explorez l’arbre de décision suivant pour les composants de l’interface utilisateur.

Quand l'utiliser

• Pour afficher des informations liées au processus, comme la confirmation qu'un message a été envoyé ou qu'une mise à jour a été effectuée.
• Pour les messages brefs et non perturbateurs qui ne nécessitent pas l'attention immédiate des utilisateurs; tels que « Paramètres enregistrés ».

Quand ne pas l'utiliser

• Lors de l'affichage d'informations spécifiques à un champ. Dans ce cas, envisagez d'utiliser une notification intégrée ou un message d'état du champ.
• Pour les informations critiques qui nécessitent l'attention de l'utilisateur et une résolution. Dans ce cas, envisagez d'utiliser une notification intégrée, un message d'état du champ ou une fenêtre modale.
• Lorsque vous savez que votre message dépassera la limite de caractères pour les toasts (environ 75 caractères). Dans ce cas, envisagez d'utiliser un autre type de message approprié à votre cas d'utilisation, par exemple une notification intégrée.
• Pour les messages permanents, envisagez d’utiliser une notification intégrée ou une fenêtre modale.

Types

Les notifications toast sont classées en fonction de la gravité du message. On distingue les types suivants :

Type	Icône	Finalité
Informations		Transmettre aux utilisateurs des informations générales ou des mises à jour utiles.
Réussite		Informer les utilisateurs qu’une opération a réussi.
Avertissement		Informer les utilisateurs des éventuels problèmes liés à une opération.
Erreur		Informer les utilisateurs des erreurs non critiques qui ne nécessitent pas une attention ou une action immédiate de leur part.

Gestion de la fréquence et de la pertinence des notifications

Pour offrir une meilleure expérience utilisateur et éviter de submerger les utilisateurs :

• Regrouper les mises à jour connexes : lorsque plusieurs événements mineurs liés se produisent à peu près au même moment, envisagez de les regrouper dans une seule notification toast (par exemple, « 3 nouvelles mises à jour disponibles ») plutôt que d’afficher plusieurs toasts individuels.
• Prioriser et sélectionner : n’utilisez les toasts que pour les informations qui sont vraiment utiles. Évitez les alertes inutiles.
• Éviter d'envoyer trop de notifications : l’envoi d’un trop grand nombre de toasts les uns à la suite des autres (« spams ») peut être très perturbateur et conduire les utilisateurs à les ignorer complètement.

Formatage

Structure

Les notifications toast comprennent les éléments suivants :

1. Icône : fournit une indication visuelle de la gravité du message.
2. Description : décrit brièvement l'action entreprise, le statut actuel ou fournit un contexte supplémentaire. La description toast peut contenir jusqu'à 2 lignes de texte renvoyé à la ligne.
3. Lien (facultatif) : permet d'afficher des détails ou de diriger les utilisateurs vers un autre objet. Les liens sont autonomes lorsqu'ils sont utilisés dans les notifications toast. Ils ne peuvent pas être intégrés à un autre texte.
4. Bouton Fermer : ignore la notification. Les notifications toast peuvent toujours être ignorées. Si l'utilisateur n'ignore pas le toast, il disparaît automatiquement après 5 secondes.

Dimensionnement et placement

Les notifications toast ont une largeur fixe. La hauteur des toasts augmente avec le contenu jusqu'à 2 lignes de texte renvoyé à la ligne.

Les notifications toast apparaissent et disparaissent du coin supérieur droit de l'écran.

Plusieurs toasts peuvent être affichés en même temps. Dans ce cas, les toasts sont empilés dans le coin supérieur droit de l'écran, le plus récent apparaissant au dessus.

Contenu

Directives générales relatives à la rédaction

• Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
• Utilisez des verbes au présent et la forme active dans la plupart des cas.
• Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
• Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
• Utilisez des termes et des phrases concis.

Description des notifications toast

La description de la notification toast récapitule l'action effectuée, le statut actuel ou un contexte supplémentaire, et peut contenir jusqu'à 2 lignes de texte.

Si la description du toast est un fragment d'une seule phrase (par exemple, « Élément archivé »), n'ajoutez pas de point à la fin.

Rédaction des notifications toast

Utiliser un langage concis

Les notifications toast offrent un espace de contenu limité. Utilisez un langage concis afin que les utilisateurs puissent parcourir rapidement le texte et comprendre la notification. La longueur idéale des toasts est de deux lignes ou moins.

Pour créer des notifications toast claires, concises et utiles, assurez-vous que le contenu :

• Se concentre sur une seule idée ou un seul sujet
• S'en tient au minimum et est direct
• Fournit un contexte suffisant pour plus de clarté
• Est limité à 2 lignes de texte renvoyé à la ligne (environ 61 à 75 caractères, espaces et ponctuation comprises)

Faites en sorte que les informations soient concises et claires.

Ne dépassez pas la limite de 2 lignes de texte renvoyé à la ligne. Cela entraîne une troncature et rompt l'accessibilité.

Utiliser un ton instructif, neutre et direct

Les toasts sont des notifications brèves et temporaires. Ils servent à fournir une référence rapide ou un contexte sans interrompre l'expérience de l'utilisateur. Utilisez un ton instructif qui présente les informations de manière neutre et directe.

Utilisez un ton instructif qui présente le message de manière concise et neutre.

N'utilisez pas un langage excessivement ludique, encourageant ou festif.

Rédaction de toasts d’erreur efficaces

Lors de l’utilisation de toasts pour des erreurs non critiques :

• Soyez précis et clair : énoncez clairement l’erreur en termes simples. Évitez les messages vagues tels que « Une erreur s’est produite » ou « Une erreur est survenue ».
• Soyez concis : comme pour l'ensemble du contenu des toasts, les messages d’erreur doivent être brefs et respecter les limites recommandées en termes de caractères ou de lignes.
• Concentrez-vous sur l’information et non sur l’action immédiate : comme les toasts ne concernent pas les erreurs nécessitant une action immédiate, le message doit informer plutôt qu’exiger une réponse instantanée.

Indiquez clairement l’action spécifique qui a échoué dans le cas d'une erreur non critique.

N’utilisez pas de termes trop généraux ou techniques.

Mettre la 1re lettre du 1er mot en majuscule

Comme tout le contenu de produit chez Guidewire, les toasts sont écrits avec une majuscule en début de phrase.

Pour en savoir plus sur l'implémentation des majuscules en début de phrase, reportez-vous à la section Capitalisation dans le guide de style des textes d'interface utilisateur.

Comportements

Révocation

Les notifications toast peuvent toujours être ignorées. S'ils ne sont pas fermés manuellement, les toasts disparaissent automatiquement après 5 secondes.

Pour que les notifications toast restent permanentes, définissez la propriété autoClose sur false. Ces toasts resteront visibles jusqu'à ce qu'ils soient fermés manuellement par l'utilisateur.

Envisagez d'utiliser des toasts permanents dans les cas suivants :

• Il y a un lien dans le toast
• Le contenu nécessite plus de temps pour être lu ou traité

Interactions

Souris

Les notifications toast sont générées par le système. Par défaut, les toasts disparaissent automatiquement au bout de 5 secondes. Un utilisateur peut également ignorer un toast en cliquant sur le bouton Fermer.

Clavier

Pour les toasts avec un lien, le lien est mis en évidence en premier. Un utilisateur peut naviguer entre le lien et le bouton Fermer à l'aide de Tab. Pour fermer la notification toast, un utilisateur peut appuyer sur Enter ou Space pendant que le bouton Fermer est activé.

Lecteur d'écran

Les lecteurs d'écran doivent annoncer les notifications toast au fur et à mesure qu'elles apparaissent à l'écran. Pour cela, le toast doit avoir un attribut de région active ARIA approprié, généralement aria-live="polite". L'attribut « polite » permet aux utilisateurs de terminer ce qu'ils sont en train de faire avant d'annoncer un changement de région en active.

Accessibilité

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

• Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
• Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
• Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
• Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Suivez les conseils ci-dessous lors de l'utilisation de ce composant dans vos applications :

• Essayez de ne pas dépasser 75 caractères, y compris les espaces et la ponctuation. Cette limite permet de maintenir la lisibilité et empêche la troncature.
• N'utilisez pas de notifications toast pour les alertes critiques ou les messages longs. Par défaut, les toasts sont minutés et disparaissent automatiquement au bout de 5 secondes. Il est donc difficile pour les utilisateurs de lire l'intégralité du message.

Essayez de respecter la limite de 2 lignes pour les toasts, car des messages plus longs entraînent une troncature.

Ne tronquez pas le texte d'un toast. La troncature rompt l'accessibilité.

Code

Instruction d'importation

import { ToastProvider } from '@jutro/components/';

Note:

La dépendance @jutro/router et ses dépendances homologues telles que history et les packages react-router-dom sont désormais facultatives pour les packages de composants. Pour le composant ToastProvider , il est toutefois nécessaire d'ajouter la dépendance à vos dépendances d'application afin de pouvoir l'utiliser.

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

autoClose

Type

false | number

Description

Controls the automatic closure of the toast. Set a numeric value to define the delay in milliseconds. If set to false, the toast remains open until manually closed.

Valeur par défaut

5000

autoFocus

Type

boolean

Description

When set to true, the dismiss button receives focus upon toast opening.

linkProps

Type

Link

Description

Link prop used to navigate the user to an internal or external link. It integrates all the props from the Link component.

message

Type

IntlMessageShape

Description

The content displayed within the toast.

onClosed

Type

() => void;

Description

Callback function that triggers when the toast closes.

toastId

Type

string

Description

Unique identifier for the toast.

type

Type

'info' | 'success' | 'warning' | 'error'

Description

Defines the visual style and intent of the toast. The available options are: info, success, warning, and error.

Valeur par défaut

'info'

Crochets

Aucun crochet n'est disponible pour ToastProvider.

Clés de traduction

Le composant ToastProvider définit une clé de traduction :

Clé	Utilisée pour
jutro-components.widgets.Toast.dismiss	le message du bouton Ignorer

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Exemples

Consultez la section Utilisation pour en savoir plus sur la façon d'utiliser le composant Toast et quand l'utiliser.

Toast de base

Le toast apparaît lorsque vous cliquez sur le bouton et reste à l'écran pendant 5 secondes.

Vous pouvez définir cette durée en millisecondes. Il n'y a pas de limite supérieure à la durée pendant laquelle le toast peut rester à l'écran. Toutefois, le minuteur autoClose s'interrompt lorsque vous passez la souris sur le toast ou lorsque la page n'est plus active.

import React from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const BasicToast = () => {
  
  const handleClick = () => {
    ToastProvider.toast({
      message: 'This is a toast message!',
      autoClose: 5000,
    });
  };

  return (
    <div>
      <ToastProvider />
      <Button
        label="Show toast"
        onClick={handleClick}
      />
    </div>
  );
};

Lien de toast

Vous pouvez ajouter un lien à l'intérieur d'un toast à l'aide de la propriété linkProps. Il accepte toutes les propriétés du composant Link. Consultez la section Composant Lien pour en savoir plus sur son utilisation.

import React from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const ToastLink = () => {
  
  const handleClick = () => {
    ToastProvider.toast({
      message: 'This is a toast message',
      linkProps: {
        children: 'This is a link inside a toast',
        href: 'https://docs.guidewire.com/jutro/documentation/latest/', 
        target: '_blank'
    },
    });
  };

  return (
    <div>
      <Button
        label="Show toast with a link"
        onClick={handleClick}
      />
    </div>
  );
};

Types de toasts

La propriété type détermine le style visuel et l'importance de la notification toast. Vous pouvez l'utiliser pour spécifier la catégorie du message toast. Elle accepte les valeurs suivantes :

• info
• success
• warning
• error

import React from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const ToastTypes = () => {
  
  const showToast = (type, message) => {
    ToastProvider.toast({
      message,
      autoClose: 5000,
      type
    });
  };

  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap'}}>
      <Button
        label="Info toast"
        onClick={() => showToast('info', 'This is an info toast message!')}
      />
      <Button
        label="Success toast"
        onClick={() => showToast('success', 'This is a success toast message!')}
      />
      <Button
        label="Warning toast"
        onClick={() => showToast('warning', 'This is a warning toast message!')}
      />
      <Button
        label="Error toast"
        onClick={() => showToast('error', 'This is an error toast message!')}
      />
    </div>
  );
};

Actions après la fermeture du toast

La propriété onClosed vous permet d'ajouter une fonction qui est appelée à la fermeture du toast. Dans cet exemple, cela modifie le texte du bouton. En outre, il utilise la propriété autoFocus pour modifier automatiquement le focus sur le bouton de fermeture du toast.

import React, { useState } from 'react';
import { Button, ToastProvider } from '@jutro/components/';

export const CloseToast = () => {
  const [buttonLabel, setButtonLabel] = useState('Show toast');

  const handleClick = () => {
    ToastProvider.toast({
      message: 'Close this toast to change the button text',
      autoFocus: true,
      autoClose: false,
      toastId: 'errorToast',
      onClosed: () => {
        setButtonLabel('Toast closed');
        setTimeout(() => {
          setButtonLabel('Show toast');
        }, 5000); // 5 seconds delay
      }
    });
  };

  return (
    <div>
      <Button
        label={buttonLabel}
        onClick={handleClick}
      />
    </div>
  );
};

Journal des modifications

10.9.0

• Une nouvelle fonctionnalité d'opt-in a été introduite pour désactiver la publication automatique des événements pour le composant Toast. Vous pouvez activer cette fonctionnalité en ajoutant JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true au fichier .env dans la racine de votre application Jutro. Lorsque cette option est activée, les composants hérités ne publient plus d'événements par défaut. Pour en savoir plus sur les événements et sur la façon d'en créer de nouveaux, reportez-vous à la documentation relative aux événements.

10.6.0

L'accessibilité du composant ToastProvider a été revue et améliorée, assurant une meilleure convivialité et le respect des normes d'accessibilité.