# Sistema de diseño Red Hat PatternFly ## Vista previa de la interfaz del sistema de diseño Red Hat PatternFly Busca en la galería de servicios, selecciona servicios individuales o visibles, consulta los totales de réplicas, revisa la selección y confirma un plan local. ## Red Hat PatternFly Referencia del sistema de diseño PatternFly React 6.6.1 y @patternfly/react-tokens 6.6.1. A continuación se muestran algunas resoluciones de tokens publicados para el tema claro. Los componentes nativos y pf-v6-theme-dark resuelven los estilos oscuros; los datos de ejemplo de los servicios y el diseño son decisiones de la aplicación. ### Roles semánticos de superficie y texto | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --pf-t--global--background--color--primary--default | rgb(255, 255, 255, 0.6000) | Usa el rol semántico del tema activo; el rojo de acento de marca no es el color universal para las acciones principales. | | --pf-t--global--background--color--secondary--default | rgb(199, 199, 199, 0.3000) | Usa el rol semántico del tema activo; el rojo de acento de marca no es el color universal para las acciones principales. | | --pf-t--global--text--color--regular | #151515 | Usa el rol semántico del tema activo; el rojo de acento de marca no es el color universal para las acciones principales. | | --pf-t--global--text--color--subtle | #383838 | Usa el rol semántico del tema activo; el rojo de acento de marca no es el color universal para las acciones principales. | | --pf-t--global--text--color--disabled | #a3a3a3 | Usa el rol semántico del tema activo; el rojo de acento de marca no es el color universal para las acciones principales. | | --pf-t--global--color--brand--default | #004d99 | Usa el rol semántico del tema activo; el rojo de acento de marca no es el color universal para las acciones principales. | | --pf-t--global--color--brand--hover | #003366 | Usa el rol semántico del tema activo; el rojo de acento de marca no es el color universal para las acciones principales. | | --pf-t--global--color--brand--accent--default | #ee0000 | Usa el rol semántico del tema activo; el rojo de acento de marca no es el color universal para las acciones principales. | | --pf-t--global--color--brand--subtle--default | #e0f0ff | Usa el rol semántico del tema activo; el rojo de acento de marca no es el color universal para las acciones principales. | ### Roles de estado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --pf-t--global--color--status--success--default | #204d00 | Acompaña la intención del estado con una etiqueta escrita. Estos valores del tema claro no sustituyen las variantes nativas de Label o Alert. | | --pf-t--global--color--status--warning--default | #73480b | Acompaña la intención del estado con una etiqueta escrita. Estos valores del tema claro no sustituyen las variantes nativas de Label o Alert. | | --pf-t--global--color--status--danger--default | #731f00 | Acompaña la intención del estado con una etiqueta escrita. Estos valores del tema claro no sustituyen las variantes nativas de Label o Alert. | | --pf-t--global--color--status--info--default | #3d2785 | Acompaña la intención del estado con una etiqueta escrita. Estos valores del tema claro no sustituyen las variantes nativas de Label o Alert. | | --pf-t--global--color--status--custom--default | #004d4d | Acompaña la intención del estado con una etiqueta escrita. Estos valores del tema claro no sustituyen las variantes nativas de Label o Alert. | | --pf-t--global--color--status--unread--default | #0066cc | Acompaña la intención del estado con una etiqueta escrita. Estos valores del tema claro no sustituyen las variantes nativas de Label o Alert. | ### Tipografía de cuerpo y encabezados | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --pf-t--global--font--size--body--default | 0.875rem | Usa deliberadamente el rol tipográfico y el nivel semántico del encabezado. El tamaño visual no determina la estructura del documento. | | --pf-t--global--font--size--body--lg | 1rem | Usa deliberadamente el rol tipográfico y el nivel semántico del encabezado. El tamaño visual no determina la estructura del documento. | | --pf-t--global--font--size--heading--h1 | 1.5rem | Usa deliberadamente el rol tipográfico y el nivel semántico del encabezado. El tamaño visual no determina la estructura del documento. | | --pf-t--global--font--size--heading--h2 | 1.25rem | Usa deliberadamente el rol tipográfico y el nivel semántico del encabezado. El tamaño visual no determina la estructura del documento. | | --pf-t--global--font--size--heading--h3 | 1.125rem | Usa deliberadamente el rol tipográfico y el nivel semántico del encabezado. El tamaño visual no determina la estructura del documento. | | --pf-t--global--font--size--heading--h4 | 1rem | Usa deliberadamente el rol tipográfico y el nivel semántico del encabezado. El tamaño visual no determina la estructura del documento. | | --pf-t--global--font--size--heading--h5 | 1rem | Usa deliberadamente el rol tipográfico y el nivel semántico del encabezado. El tamaño visual no determina la estructura del documento. | | --pf-t--global--font--size--heading--h6 | 1rem | Usa deliberadamente el rol tipográfico y el nivel semántico del encabezado. El tamaño visual no determina la estructura del documento. | ### Escala de espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --pf-t--global--spacer--xs | 0.25rem | Usa la escala de espaciado con nombre para los grupos y controles; los valores en rem siguen el tamaño de fuente raíz del usuario. | | --pf-t--global--spacer--sm | 0.5rem | Usa la escala de espaciado con nombre para los grupos y controles; los valores en rem siguen el tamaño de fuente raíz del usuario. | | --pf-t--global--spacer--md | 1rem | Usa la escala de espaciado con nombre para los grupos y controles; los valores en rem siguen el tamaño de fuente raíz del usuario. | | --pf-t--global--spacer--lg | 1.5rem | Usa la escala de espaciado con nombre para los grupos y controles; los valores en rem siguen el tamaño de fuente raíz del usuario. | | --pf-t--global--spacer--xl | 2rem | Usa la escala de espaciado con nombre para los grupos y controles; los valores en rem siguen el tamaño de fuente raíz del usuario. | | --pf-t--global--spacer--2xl | 3rem | Usa la escala de espaciado con nombre para los grupos y controles; los valores en rem siguen el tamaño de fuente raíz del usuario. | | --pf-t--global--spacer--3xl | 4rem | Usa la escala de espaciado con nombre para los grupos y controles; los valores en rem siguen el tamaño de fuente raíz del usuario. | | --pf-t--global--spacer--4xl | 5rem | Usa la escala de espaciado con nombre para los grupos y controles; los valores en rem siguen el tamaño de fuente raíz del usuario. | ### Forma y foco | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --pf-t--global--border--radius--tiny | 4px | Usa la forma correspondiente al componente en lugar de aplicar el radio de píldora a todas las superficies. | | --pf-t--global--border--radius--small | 6px | Usa la forma correspondiente al componente en lugar de aplicar el radio de píldora a todas las superficies. | | --pf-t--global--border--radius--medium | 16px | Usa la forma correspondiente al componente en lugar de aplicar el radio de píldora a todas las superficies. | | --pf-t--global--border--radius--large | 24px | Usa la forma correspondiente al componente en lugar de aplicar el radio de píldora a todas las superficies. | | --pf-t--global--border--radius--pill | 999px | Usa la forma correspondiente al componente en lugar de aplicar el radio de píldora a todas las superficies. | | --pf-t--global--border--radius--control--form-element | 6px | Usa la forma correspondiente al componente en lugar de aplicar el radio de píldora a todas las superficies. | | --pf-t--global--border--radius--action--default | 999px | Usa la forma correspondiente al componente en lugar de aplicar el radio de píldora a todas las superficies. | ## Red Hat PatternFly Guía completa del sistema de diseño Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Red Hat PatternFly Diseño operativo del sistema de diseño ### Una colección con contexto operativo persistente > La galería de servicios permite al operador comparar el estado, la ubicación y la utilización, mientras que un panel de alcance independiente registra el conjunto elegido. La selección no es lo mismo que los resultados de búsqueda actuales. Un servicio que se oculta al aplicar un filtro permanece seleccionado hasta que se quite deliberadamente. Esta distinción es esencial para las operaciones masivas que tienen consecuencias más allá de lo que aparece en pantalla. ### Usa la jerarquía nativa de componentes Gallery gestiona las columnas adaptables de tarjetas, Card separa cada servicio, Label indica el estado y Progress muestra un porcentaje de ejemplo con su título. La página no imita una consola de infraestructura mediante rectángulos de colores arbitrarios. El modelo de datos, los controles y el estado de revisión están implementados en el ejemplo completo de React. ## Red Hat PatternFly Roles semánticos de color y tema del sistema de diseño ### La marca principal y el rojo de acento son distintos PatternFly v6 exporta roles independientes para marca, acento, texto, fondo y estado. La instantánea seleccionada del tema claro incluye blue brand-default y red brand-accent-default. Tratar todas las acciones destacadas como rojo de Red Hat confundiría estos roles. Los componentes nativos Button y Label usan los roles del sistema correspondientes a cada variante. ### Resuelve el tema oscuro en el documento El ejemplo alterna pf-v6-theme-dark en el elemento del documento. Las superficies y el texto de la aplicación usan variables semánticas --pf-t--global, lo que permite que el tema también resuelva sus colores. No fijes valores del tema claro en tarjetas personalizadas para luego esperar que una clase de tema en el documento los corrija. ## Red Hat PatternFly Tipografía y metadatos de servicios del sistema de diseño ### Separa el tamaño visual de la semántica de los encabezados Title con headingLevel h1 establece el encabezado de la página, mientras que su tamaño controla el énfasis visual. En esta instantánea del paquete, body-default es 0.875rem. Las etiquetas de tarjetas, los estados y los valores numéricos de utilización siguen siendo legibles sin convertir cada valor en un encabezado. La lista de definiciones de metadatos mantiene explícitos los recuentos de réplicas y los ID de servicio. ### Evita las etiquetas operativas ambiguas La utilización de ejemplo se identifica como datos de ejemplo tanto en el componente como en el pie de página. Una barra de progreso sin contexto puede confundirse con una tarea de implementación o una operación de carga. Su descripción explica qué representa el porcentaje, mientras que la etiqueta de estado Label comunica por separado la capacidad Healthy o Review. ## Red Hat PatternFly Galería y selección masiva del sistema de diseño ### Usa los tres estados de la casilla El control «Seleccionar visibles» es true cuando todos los servicios visibles están seleccionados, false cuando no hay ninguno seleccionado y null cuando solo algunos lo están. PatternFly Checkbox admite el valor indeterminado null. La aplicación calcula este estado a partir de la colección filtrada; no usa un booleano independiente que pueda desincronizarse de las selecciones de las filas. 1. Selecciona un servicio y revisa el estado de selección parcial. 2. Selecciona todos los servicios visibles actualmente. 3. Busca un nombre y confirma que las selecciones ocultas se conserven en el alcance. 4. Revisa el conjunto exacto y el total de réplicas. 5. Confirma el plan local y consulta el resultado. ### Usa el conjunto seleccionado como fuente de verdad Cada servicio tiene un ID estable. Las casillas individuales y «Seleccionar visibles» actualizan el mismo conjunto de ID; el panel de alcance obtiene de ese conjunto los nombres de los servicios y el recuento total de réplicas. La búsqueda solo cambia la visibilidad. Así, el resumen de revisión se mantiene coherente incluso cuando el operador reduce la galería después de seleccionar varios servicios. ## Red Hat PatternFly Espaciado y tarjetas adaptables del sistema de diseño ### Usa tokens semánticos para la estructura de la página El fondo del ejemplo, el texto normal y los metadatos sutiles usan propiedades semánticas de CSS del paquete de tokens publicado. La escala nativa de espaciado va de xs a 4xl, mientras que la aplicación usa 24px entre la colección y el panel de alcance. Este valor explícito de composición es independiente de la referencia de tokens. ### Deja que la galería se reorganice antes de reducir su contenido Gallery recibe un ancho mínimo de elemento de 230px y un espacio entre elementos. En el punto de quiebre de la aplicación, de 850px, el panel de alcance pasa debajo de la colección. A 500px, el relleno de la página pasa a ser de 16px y la búsqueda ocupa todo el ancho de la barra de herramientas. Estas son decisiones de diseño del ejemplo, no una afirmación de que todos los productos de PatternFly usen esos puntos de quiebre. ## Red Hat PatternFly Estados de revisión y selección del sistema de diseño ### No ejecutes la operación al seleccionar Marcar un servicio solo lo añade al alcance. «Revisar selección» muestra una alerta informativa y una acción de confirmación. «Confirmar plan local» informa del total de servicios y réplicas seleccionados sin iniciar un trabajo de mantenimiento. Si cambia la selección, se cierra el estado de revisión para evitar confirmar inadvertidamente un conjunto obsoleto. ### Mantén la recuperación de la búsqueda separada de la selección Una búsqueda sin coincidencias muestra una alerta informativa en línea con la opción «Borrar búsqueda». Esto solo borra la consulta; los servicios seleccionados se conservan. Por eso, el recuento de la selección en la barra de herramientas y el panel de alcance siguen mostrando la misma información. Restablecer la selección como consecuencia de una búsqueda sin resultados sería un comportamiento destructivo oculto. ## Red Hat PatternFly Controles accesibles y estados del sistema de diseño ### Etiqueta la selección y usa controles nativos Cada Checkbox tiene un id estable y una etiqueta de servicio visible. SearchInput tiene un nombre accesible, Switch identifica la configuración de apariencia y Review selection está desactivado mientras no haya elementos seleccionados. Progress nativo comunica su valor y título. La página no depende de una acción que solo aparece al pasar el cursor y que está oculta dentro de una tarjeta. ### Muestra el estado con palabras El recuento de elementos seleccionados usa una región dinámica cortés, el estado del servicio se muestra dentro de un Label y el Alert final describe lo ocurrido. No uses el color como único indicador del alcance seleccionado o del estado. Las pruebas con teclado deben abarcar la selección parcial, filtrar un servicio seleccionado y volver a la colección completa. - Una casilla seleccionada indica una decisión de inclusión, no un estado de éxito. - Un Label de estado describe el servicio, no si está seleccionado. - Progress describe el uso de muestra, no la finalización de una operación. ## Integración del sistema de diseño Red Hat PatternFly React ### Importa los estilos de restablecimiento y de componentes una sola vez El ejemplo importa @patternfly/react-core/dist/styles/base.css en el punto de entrada. Los componentes nativos de React proporcionan sus estilos mediante el paquete. La aplicación CSS está limitada al ámbito de pf-example y hace referencia al espacio de nombres actual --pf-t--global; no sobrescribe los componentes internos. ### Añade la programación real solo detrás de un contrato de servicio El plan local es intencionalmente una vista previa. Una implementación de producción requiere autorización, ventanas de mantenimiento, dependencias afectadas, comentarios pendientes y validación del servidor. Mantén estables los ID seleccionados durante toda la solicitud y concilia el resultado confirmado con la respuesta real del servicio. Los componentes de presentación nativos no proporcionan el backend operativo. ## Ejemplos de componentes del sistema de diseño Red Hat PatternFly ### main.jsx: galería de servicios y revisión en bloque Composición completa y nativa de Gallery/Card/Checkbox/Progress con un alcance de selección derivado y confirmación local. ``` import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import { Alert, Button, Card, CardBody, CardTitle, Checkbox, Gallery, GalleryItem, Label, Progress, SearchInput, Switch, Title, } from "@patternfly/react-core"; import "@patternfly/react-core/dist/styles/base.css"; import "./patternfly.css"; const services = [ { id: "api", name: "Public API", region: "eu-west", replicas: 6, load: 62, status: "Healthy", }, { id: "jobs", name: "Background jobs", region: "eu-west", replicas: 3, load: 81, status: "Review capacity", }, { id: "search", name: "Search index", region: "us-east", replicas: 4, load: 44, status: "Healthy", }, { id: "events", name: "Event stream", region: "us-east", replicas: 8, load: 72, status: "Healthy", }, ]; function App() { const [query, setQuery] = useState(""), [selected, setSelected] = useState([]), [review, setReview] = useState(false), [notice, setNotice] = useState(""), [dark, setDark] = useState(false); const visible = services.filter((x) => x.name.toLowerCase().includes(query.toLowerCase()), ); const picked = services.filter((x) => selected.includes(x.id)); const allVisible = visible.length > 0 && visible.every((x) => selected.includes(x.id)); const someVisible = visible.some((x) => selected.includes(x.id)); function choose(id, checked) { setSelected((v) => checked ? [...new Set([...v, id])] : v.filter((x) => x !== id), ); setReview(false); } function selectVisible(checked) { setSelected((v) => checked ? [...new Set([...v, ...visible.map((x) => x.id)])] : v.filter((id) => !visible.some((x) => x.id === id)), ); setReview(false); } return (
PATTERNFLY · SERVICE OPERATIONS Plan a maintenance review

Select services and inspect the combined scope before creating a local plan.

{ setDark(checked); document.documentElement.classList.toggle( "pf-v6-theme-dark", checked, ); }} />
setQuery(value)} onClear={() => setQuery("")} /> selectVisible(checked)} /> {selected.length} selected
{visible.map((s) => ( choose(s.id, checked)} />
{s.region}
Replicas
{s.replicas}
Service ID
{s.id}
))}
{!visible.length && ( )} {notice && ( {notice} )}
); } createRoot(document.getElementById("root")).render(); ``` Referencia de código - Guárdalo como src/main.jsx. Checkbox onChange recibe el evento y el valor checked; isChecked puede ser null cuando el conjunto es mixto. ### patternfly.css: estructura adaptable para operaciones El diseño personalizado de la página usa tokens semánticos v6 y conserva intactos los estilos de los componentes nativos. ``` body { margin: 0; } .pf-example { padding: 24px; background: var(--pf-t--global--background--color--secondary--default); color: var(--pf-t--global--text--color--regular); font-family: var(--pf-t--global--font--family--body); } .pf-example header { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; } .overline { font-size: 11px; letter-spacing: 0.07em; color: var(--pf-t--global--text--color--subtle); } .pf-example header h1 { margin: 8px 0; } .service-toolbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } .service-toolbar > .pf-v6-c-search-input { width: 280px; } .service-toolbar > span { margin-left: auto; } .service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; } .service-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 24px; } .service-layout dl { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 24px; font-size: 12px; } .service-layout dd { margin: 0; } .service-layout ul { padding: 0; list-style: none; margin: 16px 0; } .service-layout li { padding: 12px 0; border-bottom: 1px solid var(--pf-t--global--border--color--default); } .service-layout li span { display: block; font-size: 12px; color: var(--pf-t--global--text--color--subtle); } .muted { color: var(--pf-t--global--text--color--subtle); margin-top: 16px; } .review > .pf-v6-c-button { margin-top: 16px; } .pf-example > .pf-v6-c-alert { margin-top: 24px; } .pf-example footer { font-size: 12px; color: var(--pf-t--global--text--color--subtle); margin-top: 24px; } @media (max-width: 850px) { .service-layout { grid-template-columns: 1fr; } .pf-example header { align-items: start; } .service-toolbar > span { margin-left: 0; } } @media (max-width: 500px) { .pf-example { padding: 16px; } .pf-example header { flex-direction: column; } .service-toolbar { gap: 16px; } .service-toolbar > .pf-v6-c-search-input { width: 100%; } } ``` Referencia de código - Guárdalo como src/patternfly.css. Los puntos de ruptura de la aplicación forman parte explícita de este ejemplo. ## Configuración del agente de IA del sistema de diseño Red Hat PatternFly ### Punto de partida para la implementación Composición nativa con React 18.3.1 / PatternFly 6.6.1. Vite requiere una versión compatible de Node.js. Los datos y las operaciones reales del servicio API siguen siendo responsabilidad de la aplicación. ``` npm create vite@latest patternfly-services -- --template react cd patternfly-services npm install npm install react@18.3.1 react-dom@18.3.1 @patternfly/react-core@6.6.1 # Replace src/main.jsx and add src/patternfly.css using the complete examples. npm run dev ``` ### Una instrucción para tu proyecto ``` Crea una colección de operaciones con Gallery, Card, Checkbox, Progress, Label y Alert nativos de PatternFly 6.6.1. Usa los tokens semánticos proporcionados y el ejemplo completo. Mantén la visibilidad filtrada separada de los ID seleccionados, calcula la selección parcial en bloque y exige revisar el conjunto exacto de elementos afectados. Si se añade un API real, proporciona respuestas honestas de estado pendiente, error o éxito. Conserva la reorganización adaptable en móviles y la navegación por teclado. ``` ## Fuentes y alcance del sistema de diseño Red Hat PatternFly Guía de aplicación creada por OpenDesign y ejemplo ficticio de planificación de mantenimiento, con PatternFly React 6.6.1 nativo. Las cifras de utilización, región y réplicas son datos de muestra. La confirmación solo actualiza el estado local; no se reinicia ni programa ningún servicio. - Desarrolla con PatternFly Integración de paquetes nativos y hojas de estilos. - Módulos de tokens publicados Nombres de tokens versionados y valores resueltos para el tema claro. - Patrón de selección en bloque Alcance de selección y comportamiento de la colección. - Repositorio de PatternFly React Implementación y licencia de los componentes nativos. ## Recursos relacionados con el sistema de diseño Red Hat PatternFly ### REI Cedar Crea un selector de preparación de pedidos concreto con Cedar, mosaicos nativos de Vue, valores reales de tokens, navegación completa con teclado y una composición adaptable de productos. ### Sainsbury's sistema de diseño Aplica las pautas públicas de diseño de Sainsbury’s a un flujo completo de selección de franja de recogida: paleta y referencias de tamaño reales, opciones de radio accesibles, resumen actualizado y comentarios locales claros. ### Salesforce Lightning Una guía de Lightning para gestionar registros densos: espaciado, tipografía y colores semánticos reales; un espacio de trabajo editable para casos; validación de campos y un historial de actividad que refleja los cambios locales. - [Referencia de implementación](https://www.patternfly.org/patterns/bulk-selection/) - [Fuente](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/) - [Referencia de código](https://www.patternfly.org/components/checkbox/) - [Referencia de código](https://www.patternfly.org/foundations-and-styles/design-tokens/develop/) - [Desarrolla con PatternFly Integración de paquetes nativos y hojas de estilos.](https://www.patternfly.org/get-started/develop/) - [Módulos de tokens publicados Nombres de tokens versionados y valores resueltos para el tema claro.](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/) - [Patrón de selección en bloque Alcance de selección y comportamiento de la colección.](https://www.patternfly.org/patterns/bulk-selection/) - [Repositorio de PatternFly React Implementación y licencia de los componentes nativos.](https://github.com/patternfly/patternfly-react)