Actions y Backgrounds en Storybook

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:42

Actions y Backgrounds en Storybook

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 15 de 21

Clase 15 / 21

Recursos

Cuando construyes un componente en Storybook, no basta con verlo: necesitas probar cómo reacciona y cómo se ve en distintos escenarios. Aquí entran dos add-ons clave, Actions y Backgrounds, que te permiten capturar eventos como el clic y simular fondos como una landing de Black Friday sin tocar tu producto real.

¿Qué son los Actions en Storybook y para qué sirven?

Los Actions son el add-on que escucha eventos del DOM y los muestra en el panel inferior de Storybook. Sirven para confirmar, de forma visual, que tu componente está disparando lo que debería disparar.

Para capturar un clic en un botón, primero te vas a tu componente y agregas un event listener. Algo como button.addEventListener('onclick', onclick), donde ese onclick es el que vas a recibir desde la historia.

¿Qué hace addEventListener en un componente de Storybook? Engancha tu botón a un evento del navegador (por ejemplo, click o mouseover) y ejecuta la función que le pases. Esa función es la que Storybook intercepta para mostrarla en el panel de Actions.

¿Cómo registro un onclick desde la historia?

En tu archivo de historia, dentro de argTypes, ocultas temporalmente lo que ya tenías (label, style, size) y agregas el onclick. Le pones una descripción tipo "evento de JavaScript" y una acción tipo "está cliqueado".

Al guardar y volver a Storybook, la pestaña Actions aparece vacía. Es normal: necesita capturar el evento. Le das clic al botón y ahí mismo verás el log con todo lo que conlleva ese evento [03:10].

¿Cómo detecto el mouseover además del clic?

Dentro de parameters, debajo de docs, agregas un bloque actions y dentro defines handles: ['mouseover']. Guardas, pasas el cursor por encima del botón y Storybook empieza a registrar cada vez que el mouse lo sobrevuela [04:05].

Esto es útil cuando quieres validar interacciones más sutiles, no solo clics directos.

¿Por qué necesitas el add-on de Backgrounds?

Imagina que tu producto siempre vive sobre fondo blanco. Tu botón se ve perfecto. Pero llega Black Friday y el equipo necesita una landing page con UI distinta, fondo oscuro y otra vibra. ¿Tu botón sigue funcionando visualmente ahí?

El add-on Backgrounds te deja simular esos escenarios sin salir de Storybook. Cambias el fondo del canvas y validas si los estilos actuales aguantan o si necesitas ajustar bordes, colores y contrastes.

¿Qué es el add-on Backgrounds en Storybook? Es una herramienta que cambia el color de fondo del lienzo donde se renderiza tu componente, para probarlo en distintos contextos visuales sin modificar el componente.

¿Cómo configuro varios fondos personalizados?

Dentro de parameters, dejas los bloques de docs y actions, y agregas uno nuevo llamado backgrounds. Ahí defines:

default: el tema que quieres activo al abrir la historia, por ejemplo 'Black Friday'.
values: un arreglo de objetos donde cada uno tiene name y value.
Un objeto con name: 'Black Friday' y value: '#123123' (negro).
Otro con name: 'default' y value: '#123123' (blanco).

Al guardar, Storybook renderiza tu botón sobre el fondo Black Friday [06:30]. Y aquí viene lo interesante: si tu botón tenía bordes negros, sobre fondo negro desaparecen visualmente. Justo ese tipo de hallazgo es lo que hace valioso este add-on.

¿Cómo cambio el fondo por defecto?

En la propiedad default cambias el nombre del tema. Si pones default: 'default', tu historia abre con fondo blanco. Si pones default: 'Black Friday', abre con fondo negro. Es un toggle rápido para alternar contextos según lo que estés probando.

¿Qué conceptos clave debes dominar de esta práctica?

Hay varias piezas que conviene tener claras antes de avanzar al siguiente add-on.

addEventListener [01:15]: método de JavaScript que registra una función para que se ejecute cuando ocurre un evento específico en un elemento del DOM.
argTypes [02:20]: bloque en la historia donde defines los controles, descripciones y acciones de cada prop del componente.
handles [04:00]: arreglo dentro de parameters.actions que indica qué eventos del DOM debe interceptar Storybook automáticamente.
parameters.backgrounds [05:25]: configuración que declara los fondos disponibles y cuál es el activo por defecto.
values [05:50]: lista de fondos con su name y su value en formato hexadecimal.

Con Actions y Backgrounds, tu Storybook deja de ser una galería estática y empieza a comportarse como un laboratorio donde puedes ver, tocar y romper tus componentes antes de que lleguen a producción.

Muéstrame en los comentarios cómo te quedó tu configuración y qué backgrounds decidiste agregar para tus propios escenarios.

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Actions y Backgrounds en Storybook

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos