Toast

Toast in Storybook

Verwendung

Überblick

Eine Toast-Benachrichtigung vermittelt systemgenerierte Informationen als Reaktion auf Benutzeraktivität. Dies kann Informationen über eine Aktualisierung, Bestätigung oder eine abgeschlossene Aktion umfassen. Toasts überlagern Inhalte in der rechten oberen Ecke des Bildschirms. Sie erscheinen für eine vordefinierte Zeit von 5 Sekunden und können vom Benutzer quittiert werden.

Eine ausführliche Orientierungshilfe zur Verwendung von Toast-Benachrichtigungen finden Sie im folgenden Entscheidungsbaum für UI-Komponenten.

Zu verwenden

• Zum Anzeigen prozessbezogener Informationen, z. B. der Bestätigung, dass eine Nachricht gesendet oder eine Aktualisierung abgeschlossen wurde.
• Für kurze, nicht störende Meldungen, die nicht die sofortige Aufmerksamkeit der Benutzer erfordern, z. B. „Einstellungen gespeichert“.

Nicht zu verwenden

• Bei der Anzeige feldspezifischer Informationen. In diesem Fall sollten Sie eine Inline-Benachrichtigung oder eine Feldstatusmeldung verwenden.
• Für wichtige Informationen, die die Aufmerksamkeit und Lösung durch den Benutzer erfordern. In diesem Fall sollten Sie eine Inline-Benachrichtigung, eine Feldstatusmeldung oder ein modales Fenster verwenden.
• Wenn Sie wissen, dass Ihre Meldung die Zeichenbeschränkung für Toasts (ca. 75 Zeichen) überschreitet. In diesem Fall sollten Sie einen anderen Meldungstyp verwenden, der für Ihren Anwendungsfall geeignet ist, z. B. eine Inline-Benachrichtigung.
• Bei persistenten Meldungen sollten Sie eine Inline-Benachrichtigung oder ein modales Fenster verwenden.

Typen

Toast-Benachrichtigungen basieren auf dem Schweregrad der Meldung. Dazu gehören die folgenden Typen:

Typ	Symbol	Zweck
Info		Benutzer über allgemeine Informationen oder hilfreiche Aktualisierungen informieren.
Erfolg		Benutzer darüber informieren, dass ein Vorgang erfolgreich war.
Warnung		Benutzer über mögliche Probleme bei einem Vorgang informieren.
Fehler		Benutzer über nicht kritische Fehler informieren, die keine sofortige Aufmerksamkeit oder Aktion des Benutzers erfordern.

Verwalten der Häufigkeit und Relevanz von Benachrichtigungen

Zur Verbesserung des Benutzererlebnisses und zur Vermeidung einer Überlastung der Benutzer:

• Zusammengehörige Updates gruppieren: Wenn mehrere kleinere, zusammengehörige Ereignisse ungefähr zur gleichen Zeit eintreten, können Sie sie in einer einzigen Toast-Benachrichtigung zusammenfassen (z. B. „3 neue Updates verfügbar“), anstatt mehrere einzelne Toast-Benachrichtigungen anzuzeigen.
• Priorisieren und selektiv vorgehen: Verwenden Sie Toasts nur für Informationen, die einen klaren Mehrwert bieten. Vermeiden Sie unnötige Warnungen.
• Übermäßige Benachrichtigungen vermeiden: Das Senden zu vieler Toasts in schneller Folge („Spamming“) kann sehr störend sein und dazu führen, dass Benutzer sie vollständig ignorieren.

Formatierung

Aufbau

Toast-Benachrichtigungen bestehen aus den folgenden Elementen:

1. Symbol: Bietet einen visuellen Hinweis auf den Schweregrad der Meldung.
2. Beschreibung: Beschreibt kurz die ausgeführte Aktion, den aktuellen Status oder liefert zusätzlichen Kontext. Die Toast-Beschreibung kann bis zu 2 Zeilen umbrochenen Text enthalten.
3. Link (optional): Bietet die Möglichkeit, Details anzuzeigen oder Benutzer zu einem anderen Objekt weiterzuleiten. Links sind eigenständig, wenn sie in Toast-Benachrichtigungen verwendet werden. Sie können nicht in der Zeile mit anderem Text erscheinen.
4. Schaltfläche „Schließen“: Schließt die Benachrichtigung. Toast-Benachrichtigungen können immer verworfen werden. Wenn der Benutzer das Toast nicht verwirft, verschwindet es automatisch nach 5 Sekunden.

Größe und Platzierung

Toast-Benachrichtigungen haben eine feste Breite. Die Höhe von Toasts vergrößert sich mit dem Inhalt auf bis zu 2 Zeilen umbrochenen Text.

Toast-Benachrichtigungen gleiten in der oberen rechten Ecke des Bildschirms ein und aus.

Es können mehrere Toasts gleichzeitig angezeigt werden. In diesem Fall werden die Toasts in der rechten oberen Ecke des Bildschirms gestapelt angezeigt, wobei das neueste Toast ganz oben angezeigt wird.

Inhalt

Allgemeine Richtlinien fürs Schreiben

• Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
• Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
• Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
• Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
• Halten Sie Wörter und Sätze kurz.

Beschreibung der Toast-Benachrichtigung

Die Beschreibung der Toast-Benachrichtigung fasst die ausgeführte Aktion, den aktuellen Status oder zusätzlichen Kontext zusammen und kann bis zu 2 Zeilen Text enthalten.

Wenn es sich bei der Beschreibung des Toasts um ein einzelnes Satzfragment handelt (z. B. „Element archiviert“), setzen Sie keinen Punkt am Ende.

Schreiben von Toast-Benachrichtigungen

Verwenden Sie eine prägnante Sprache

Toast-Benachrichtigungen bieten nur begrenzten Platz für Inhalt. Verwenden Sie eine prägnante Sprache, damit die Benutzer den Text schnell überfliegen und die Benachrichtigung verstehen können. Die ideale Länge für Toasts beträgt zwei Zeilen oder weniger.

Um klare, prägnante und nützliche Toast-Benachrichtigungen zu erstellen, stellen Sie sicher, dass der Inhalt

• sich auf eine einzelne Idee oder ein einzelnes Thema konzentriert
• minimal und direkt bleibt
• zur Eindeutigkeit ausreichend Kontext bietet
• auf 2 Zeilen umbrochenen Text begrenzt ist (ca. 61 bis 75 Zeichen einschließlich Leer- und Satzzeichen)

Halten Sie die Informationen kurz und eindeutig.

Überschreiten Sie nicht den Höchstwert von 2 Zeilen umbrochenem Text. Dies führt zu einer Kürzung und stört die Barrierefreiheit.

Verwenden Sie einen instruktiven Ton, der neutral und direkt ist.

Toasts sind kurze, temporäre Benachrichtigungen. Sie sollen eine schnelle Referenz oder Kontext bieten, ohne die Benutzererfahrung zu stören. Verwenden Sie einen instruktiven Ton, der die Informationen neutral und direkt präsentiert.

Verwenden Sie einen instruktiven Ton, der die Botschaft prägnant und neutral vermittelt.

Verwenden Sie keine Sprache, die übermäßig verspielt, auffordernd oder feierlich ist.

Schreiben effektiver Toast-Fehlermeldungen

Bei Verwendung von Toasts für nicht kritische Fehler:

• Seien Sie konkret und klar: Beschreiben Sie den Fehler klar in einfachen Worten. Vermeiden Sie unklare Meldungen wie „Etwas ist schiefgelaufen“ oder „Es ist ein Fehler aufgetreten“.
• Halten Sie sich kurz: Wie alle Inhalte von Toast-Benachrichtigungen müssen auch Fehlermeldungen kurz sein und innerhalb der empfohlenen Zeichen- oder Zeilengrenzen liegen.
• Konzentrieren Sie sich auf Informationen, nicht auf sofortige Aktionen: Da Toasts nicht für Fehler gedacht sind, die eine sofortige Aktion erfordern, muss die Meldung informieren und nicht eine sofortige Antwort fordern.

Geben Sie bei einem nicht kritischen Fehler klar an, welche konkrete Aktion fehlgeschlagen ist.

Verwenden Sie keine zu weit gefassten und keine zu technischen Begriffe.

Groß- und Kleinschreibung verwenden

Wie alle produktinternen Inhalte bei Guidewire werden Toasts in der üblichen Groß- und Kleinschreibung geschrieben.

Weitere Informationen zum Implementieren der Groß-und Kleinschreibung finden Sie im Abschnitt zur Groß- und Kleinschreibung im UI-Textstyleguide.

Verhalten

Verwerfen

Toast-Benachrichtigungen können immer verworfen werden. Wenn sie nicht manuell geschlossen werden, verschwinden Toasts automatisch nach 5 Sekunden.

Um Toast-Benachrichtigungen persistent zu machen, legen Sie die autoClose-Eigenschaft auf false fest. Diese Toasts bleiben sichtbar, bis sie vom Benutzer manuell geschlossen werden.

Erwägen Sie die Verwendung von persistenten Toasts, wenn:

• Es einen Link im Toast gibt
• Der Inhalt mehr Zeit zum Lesen oder Verarbeiten benötigt

Interaktionen

Maus

Toast-Benachrichtigungen werden vom System generiert. Standardmäßig werden Toasts nach 5 Sekunden automatisch ausgeblendet. Ein Benutzer kann ein Toast auch verwerfen, indem er auf die Schaltfläche „Schließen“ klickt.

Tastatur

Bei Toasts mit einem Link liegt der Fokus zunächst auf dem Link. Ein Benutzer kann mit Tab zwischen dem Link und der Schaltfläche „Schließen“ wechseln. Um die Toast-Benachrichtigung zu schließen, kann ein Benutzer Enter oder Space drücken, während der Fokus auf der Schaltfläche „Schließen“ liegt.

Screenreader

Screenreader müssen Toast-Benachrichtigungen ankündigen, sobald sie auf dem Bildschirm angezeigt werden. Dazu muss das Toast über ein geeignetes ARIA-Attribut für Live-Regionen verfügen, in der Regel aria-live="polite". Das Attribut „polite“ ermöglicht es Benutzern, vor der Ankündigung der Änderung einer Live-Region ihre Arbeit zu beenden.

Barrierefreiheit

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Beachten Sie bei der Verwendung dieser Komponente in Ihren Anwendungen die folgenden Anweisungen:

• Versuchen Sie, 75 Zeichen einschließlich Leer- und Satzzeichen nicht zu überschreiten. Diese Begrenzung trägt dazu bei, dass der Text lesbar bleibt und nicht gekürzt wird.
• Verwenden Sie keine Toast-Benachrichtigungen für kritische Warnungen oder lange Meldungen. Standardmäßig sind Toasts zeitlich begrenzt und werden nach 5 Sekunden automatisch ausgeblendet. Dies macht es für die Menschen schwierig, die gesamte Meldung zu verstehen.

Versuchen Sie, den Höchstwert von 2 Zeilen für Toasts einzuhalten, da längere Meldungen zu einer Kürzung führen.

Achten Sie darauf, dass der Text in einem Toast nicht abgeschnitten wird. Durch das Abschneiden wird die Barrierefreiheit gestört.

Code

Importanweisung

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

Note:

Die @jutro/router Abhängigkeit und ihre Peer-Abhängigkeiten wie history und react-router-dom sind jetzt optional für Komponentenpakete. Allerdings erfordert die ToastProvider die Komponente, dass die Abhängigkeit zu Ihren App-Abhängigkeiten hinzugefügt wird, um verwendet werden zu können.

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

autoClose

Typ

false | number

Beschreibung

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.

Standardwert

5000

autoFocus

Typ

boolean

Beschreibung

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

linkProps

Typ

Link

Beschreibung

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

message

Typ

IntlMessageShape

Beschreibung

The content displayed within the toast.

onClosed

Typ

() => void;

Beschreibung

Callback function that triggers when the toast closes.

toastId

Typ

string

Beschreibung

Unique identifier for the toast.

type

Typ

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

Beschreibung

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

Standardwert

'info'

Hooks

Für ToastProvider sind keine Hooks verfügbar.

Übersetzungsschlüssel

Die ToastProvider-Komponente definiert einen Übersetzungsschlüssel:

Schlüssel	Verwendet für
jutro-components.widgets.Toast.dismiss	Meldung für die Schaltfläche „Verwerfen“

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponente Toast verwenden können.

Einfaches Toast

Das Toast wird angezeigt, wenn Sie auf die Schaltfläche klicken, und bleibt 5 Sekunden lang auf dem Bildschirm.

Sie können diese Dauer in Millisekunden festlegen. Es gibt keine Obergrenze, wie lange das Toast auf dem Bildschirm verbleiben kann. Der autoClose-Timer wird jedoch angehalten, wenn Sie den Mauszeiger über das Toast bewegen oder wenn die Seite den Fokus verliert.

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>
  );
};

Toast-Link

Sie können einen Link in ein Toast einfügen, indem Sie die Eigenschaft linkProps verwenden. Er akzeptiert alle Link-Komponenteneigenschaften. Lesen Sie den Abschnitt Link-Komponente, um mehr über seine Verwendung zu erfahren.

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>
  );
};

Toast-Typen

Die type-Eigenschaft bestimmt den visuellen Stil und die Bedeutung der Toast-Benachrichtigung. Sie können sie verwenden, um die Kategorie der Toast-Meldung anzugeben. Sie akzeptiert die folgenden Werte:

• 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>
  );
};

Aktionen nach dem Schließen des Toasts

Mit der onClosed-Eigenschaft können Sie eine Funktion hinzufügen, die beim Schließen des Toasts aufgerufen wird. In diesem Beispiel wird der Text der Schaltfläche geändert. Darüber hinaus wird die autoFocus-Eigenschaft verwendet, um den Fokus automatisch auf die Schaltfläche zum Schließen des Toasts zu ändern.

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>
  );
};

Änderungsprotokoll

10.9.0

• Es wurde eine neue Opt-in-Funktion eingeführt, die die automatische Ereignisveröffentlichung für die Komponente Toast deaktiviert. Sie können diese Funktion aktivieren, indem Sie der .env-Datei im Stammverzeichnis Ihrer Jutro-Anwendung JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true hinzufügen. Wenn diese Option aktiviert ist, veröffentlichen ältere Komponenten standardmäßig keine Ereignisse mehr. Weitere Informationen zu Ereignissen und zum Einrichten neuer Ereignisse finden Sie in der Dokumentation zu Ereignissen.

10.6.0

Die Barrierefreiheit der ToastProvider-Komponente wurde überarbeitet und verbessert, um eine höhere Benutzerfreundlichkeit und die Einhaltung der Barrierefreiheitsstandards zu gewährleisten.