Notificación de sistema (toast)

Notificación de sistema (toast) en Storybook

Uso

Descripción general

La notificación del sistema comunica información generada por el sistema en respuesta a la actividad del usuario. Esto puede incluir información sobre una actualización, una confirmación o una acción terminada. Las notificaciones del sistema se superponen al contenido en la esquina superior derecha de la pantalla. Aparecen durante un tiempo predefinido de 5 segundos y el usuario puede desestimarlas.

Para obtener una guía detallada sobre cuándo utilizar las notificaciones del sistema, examine el siguiente árbol de decisiones del componente de la interfaz de usuario.

Cuándo se debe utilizar

• Para mostrar información relacionada con el proceso, como la confirmación de que se envió un mensaje o que se completó una actualización.
• Para mensajes breves y no disruptivos que no requieran la atención inmediata de los usuarios, como “Se guardó la configuración”.

Cuándo no se debe utilizar

• Cuando se muestra información específica del campo. En este caso, considere usar una notificación integrada o un mensaje de estado de campo.
• Para información crítica que requiera la atención y resolución del usuario. En este caso, considere usar una notificación integrada, un mensaje de estado de campo o un modal.
• Cuando sepa que el mensaje superará el límite de caracteres de las notificaciones del sistema (aproximadamente 75 caracteres). En este caso, considere la posibilidad de utilizar un tipo de mensaje diferente que sea adecuado para su caso de uso, como una notificación integrada.
• Para mensajes recurrentes, considere usar una notificación integrada o un modal.

Tipos

Las notificaciones del sistema se basan en la gravedad del mensaje. Incluyen los siguientes tipos:

Tipo	Ícono	Propósito
Información		Informar a los usuarios sobre información general o actualizaciones útiles.
Correcto		Informar a los usuarios que una operación se ha realizado correctamente.
Advertencia		Informar a los usuarios sobre posibles problemas con una operación.
Error		Informar a los usuarios sobre errores no críticos que no requieren atención o acción inmediata del usuario.

Administración de la frecuencia y la relevancia de las notificaciones

Para proporcionar una mejor experiencia y evitar abrumar a los usuarios:

• Agrupe actualizaciones relacionadas. Cuando se producen varios eventos menores relacionados al mismo tiempo, considere la posibilidad de agruparlos en una sola notificación del sistema (por ejemplo, “3 nuevas actualizaciones disponibles”), en lugar de mostrar varias notificaciones del sistema individuales.
• Priorice y sea selectivo. Solo use notificaciones del sistema para la información que proporcione un valor claro. Evite alertas innecesarias.
• Evite notificar en exceso. Enviar demasiadas notificaciones del sistema en sucesión rápida (“spam”) puede ser muy molesto y hacer que los usuarios las ignoren por completo.

Formato

Anatomía

Las notificaciones del sistema constan de los siguientes elementos:

1. Ícono: Proporciona una indicación visual sobre la gravedad del mensaje.
2. Descripción: Describe brevemente la acción realizada, el estado actual o proporciona contexto adicional. La descripción de la notificación del sistema puede contener hasta 2 líneas de texto ajustado.
3. Enlace (opcional): Proporciona medios para ver detalles o dirigir a los usuarios a otro objeto. Los enlaces son independientes cuando se usan en notificaciones del sistema. No pueden aparecer integrados con otro texto.
4. Botón Cerrar: Desestima la notificación. Las notificaciones del sistema siempre se pueden desestimar. Si el usuario no desestima la notificación del sistema, desaparece automáticamente después de 5 segundos.

Tamaño y ubicación

Las notificaciones del sistema tienen un ancho fijo. La altura de los mensajes del sistema aumenta con contenido de hasta 2 líneas de texto ajustado.

Las notificaciones del sistema se deslizan hacia adentro y hacia afuera desde la esquina superior derecha de la pantalla.

Se pueden mostrar varias notificaciones del sistema a la vez. Cuando esto sucede, aparecen apiladas en la esquina superior derecha de la pantalla, y la más reciente aparece en la parte superior.

Contenido

Pautas generales de redacción

• En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
• Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
• Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
• Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
• Las palabras y las oraciones deben ser breves.

Descripción de la notificación del sistema

La descripción de la notificación del sistema resume la acción realizada, el estado actual o el contexto adicional, y puede contener hasta 2 líneas de texto.

Si la descripción de la notificación del sistema es un fragmento de una sola oración (por ejemplo, “Elemento archivado”), no agregue un punto al final.

Redacción de notificaciones del sistema

Lenguaje conciso

Las notificaciones del sistema tienen una cantidad limitada de espacio para el contenido. Use un lenguaje conciso para que los usuarios puedan leer rápidamente el texto y entender la notificación. La longitud ideal para las notificaciones del sistema es de dos líneas o menos.

Para crear notificaciones del sistema claras, concisas y útiles, asegúrese de que el contenido:

• se centre en una sola idea o tema;
• siga siendo mínimo y directo;
• proporcione contexto suficiente que aporte claridad;
• esté limitado a 2 líneas de texto ajustado (aproximadamente de 61 a 75 caracteres, incluidos espacios y signos de puntuación).

La información debe ser concisa y clara.

No supere el límite de 2 líneas de texto ajustado. Esto da como resultado el truncamiento e impide la accesibilidad.

Uso de tono instructivo que sea neutro y directo

Las notificaciones del sistema son breves y temporales. Están pensadas para proporcionar una referencia rápida o contexto sin interrumpir la experiencia del usuario. Utilice un tono instructivo que presente la información de forma neutral y directa.

Utilice un tono instructivo que presente el mensaje de forma concisa y neutra.

No utilice un lenguaje que sea demasiado expresivo, alentador o festivo.

Redacción de notificaciones de error del sistema efectivas

Al usar notificaciones del sistema para errores no críticos:

• Sea específico y claro. Indique claramente el error en términos simples. Evite mensajes vagos como “Algo salió mal” o “Se produjo un error”.
• Sea conciso. Al igual que todo el contenido de las notificaciones del sistema, los mensajes de error deben ser breves y ajustarse a los límites de caracteres o líneas recomendados.
• Céntrese en la información, no en la acción inmediata. Dado que las notificaciones del sistema no se utilizan para errores que requieran una acción inmediata, el mensaje debe informar en lugar de exigir una respuesta instantánea.

Indique claramente la acción específica que falló por un error no crítico.

No utilice términos demasiado amplios o técnicos.

Uso de mayúsculas al igual que en las oraciones

Al igual que todo el contenido de productos en Guidewire, las notificaciones del sistema se escriben con mayúsculas como se usan en las oraciones.

Para obtener más información sobre cómo implementar el uso de mayúsculas y minúsculas en las oraciones, consulte la sección Uso de mayúsculas, en la Guía de estilo de texto de la interfaz de usuario.

Comportamientos

Desestimación

Las notificaciones del sistema siempre se pueden desestimar. Si no se cierran manualmente, las notificaciones del sistema desaparecen automáticamente después de 5 segundos.

Para que sean persistentes, establezca la propiedad autoClose en false. Estas notificaciones del sistema permanecerán visibles hasta que el usuario las cierre manualmente.

Considere la posibilidad de usar notificaciones persistentes en estos casos:

• Cuando haya un enlace dentro de la notificación del sistema.
• Cuando sea necesario más tiempo para leer o procesar el contenido.

Interacciones

Ratón

Las notificaciones del sistema son generadas por el sistema. De forma predeterminada, desaparecen automáticamente después de 5 segundos. El usuario también puede desestimar una notificación del sistema haciendo clic en el botón Cerrar.

Teclado

En el caso de las notificaciones del sistema con un enlace, el enlace recibe primero el foco. El usuario puede moverse entre el enlace y el botón Cerrar usando Tab. Para cerrar la notificación del sistema, el usuario puede presionar Enter o Space mientras el botón Cerrar tiene el foco.

Lector de pantalla

Los lectores de pantalla deben anunciar las notificaciones del sistema a medida que aparecen en pantalla. Para lograr esto, la notificación del sistema debe tener un atributo de región activa de ARIA adecuado, por lo general aria-live="polite". El atributo “polite” permite a los usuarios terminar lo que están haciendo antes de anunciar un cambio de región activa.

Accesibilidad

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

• La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
• El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
• El elemento se puede operar con teclado, así como con mouse.
• Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Siga las instrucciones a continuación cuando utilice este componente en sus aplicaciones:

• Trate de no exceder los 75 caracteres, incluidos los espacios y la puntuación. Este límite ayuda a mantener la legibilidad y evita el truncamiento.
• No use notificaciones del sistema para alertas críticas o mensajes largos. De forma predeterminada, las notificaciones del sistema están cronometradas y desaparecen automáticamente después de 5 segundos. Esto dificulta que las personas entiendan el mensaje completo.

Intente cumplir con el límite de 2 líneas para las notificaciones del sistema, ya que los mensajes más largos ocasionan un truncamiento.

No trunque el texto dentro de una notificación del sistema. El truncamiento impide la accesibilidad.

Código

Instrucción de importación

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

Note:

La dependencia @jutro/router y sus dependencias de pares como history y react-router-dom ahora son opcionales para los paquetes de componentes. Sin embargo, el componente ToastProvider requiere que la dependencia se agregue a las dependencias de su aplicación para poder ser utilizado.

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

autoClose

Tipo

false | number

Descripción

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.

Valor predeterminado

5000

autoFocus

Tipo

boolean

Descripción

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

linkProps

Tipo

Link

Descripción

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

message

Tipo

IntlMessageShape

Descripción

The content displayed within the toast.

onClosed

Tipo

() => void;

Descripción

Callback function that triggers when the toast closes.

toastId

Tipo

string

Descripción

Unique identifier for the toast.

type

Tipo

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

Descripción

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

Valor predeterminado

'info'

Ganchos

No hay ganchos para ToastProvider.

Claves de traducción

El componente ToastProvider define una clave de traducción:

Clave	Se usa para
jutro-components.widgets.Toast.dismiss	El mensaje para el botón Desestimar.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Consulte la sección Uso para obtener más información sobre cómo y cuándo utilizar el componente Toast.

Notificación del sistema básica

La notificación del sistema aparece al hacer clic en el botón y permanece en la pantalla durante 5 segundos.

Esta duración se puede establecer en milisegundos. No hay límite máximo para el tiempo que la notificación del sistema puede permanecer en la pantalla. Sin embargo, el temporizador autoClose se detiene cuando el cursor está sobre la notificación del sistema o cuando la página pierde el foco.

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

Enlace de notificación del sistema

Puede agregar un enlace dentro de una notificación del sistema mediante la propiedad linkProps. Acepta todas las propiedades de componentes de Link. Visite la sección Componente Enlace para obtener más información sobre su uso.

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

Tipos de notificaciones del sistema

La propiedad type determina el estilo visual y la importancia de la notificación del sistema. Puede utilizarla para especificar la categoría del mensaje del sistema. Acepta los siguientes valores:

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

Acciones después de cerrar una notificación del sistema

La propiedad onClosed le permite agregar una función a la que se llama al cerrar la notificación del sistema. En este ejemplo, modifica el texto del botón. Además, utiliza la propiedad autoFocus para cambiar automáticamente el foco al botón de cierre de la notificación del sistema.

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

Registro de cambios

10.9.0

• Se introdujo una nueva característica de opción de participación que desactiva la publicación automática de eventos para el componente Toast. Puede habilitar esta función agregando JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true al archivo .env en la raíz de su aplicación de Jutro. Cuando esta acción está habilitada, los componentes heredados ya no publican eventos de forma predeterminada. Para obtener más información sobre los eventos y cómo configurar nuevos, consulte la documentación sobre eventos.

10.6.0

Se ha revisado y mejorado la accesibilidad del componente ToastProvider, lo que garantiza un uso más sencillo y el cumplimiento de los estándares de accesibilidad.