# Sistema di progettazione Red Hat PatternFly ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Red Hat PatternFly Cerca nella galleria dei servizi, seleziona singoli servizi o quelli visibili, controlla il totale delle repliche, rivedi la selezione e conferma un piano locale. ## Riferimento di progettazione del sistema sistema di design Red Hat PatternFly PatternFly React 6.6.1 e @patternfly/react-tokens 6.6.1. Di seguito sono mostrati i valori risolti di alcuni token pubblicati del tema chiaro. I componenti nativi e pf-v6-theme-dark risolvono gli stili scuri; i dati di esempio dei servizi e il layout sono scelte dell’applicazione. ### Ruoli semantici per superfici e testo | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --pf-t--global--background--color--primary--default | rgb(255, 255, 255, 0.6000) | Usa il ruolo semantico del tema attivo; il rosso di accento del brand non è il colore universale delle azioni principali. | | --pf-t--global--background--color--secondary--default | rgb(199, 199, 199, 0.3000) | Usa il ruolo semantico del tema attivo; il rosso di accento del brand non è il colore universale delle azioni principali. | | --pf-t--global--text--color--regular | #151515 | Usa il ruolo semantico del tema attivo; il rosso di accento del brand non è il colore universale delle azioni principali. | | --pf-t--global--text--color--subtle | #383838 | Usa il ruolo semantico del tema attivo; il rosso di accento del brand non è il colore universale delle azioni principali. | | --pf-t--global--text--color--disabled | #a3a3a3 | Usa il ruolo semantico del tema attivo; il rosso di accento del brand non è il colore universale delle azioni principali. | | --pf-t--global--color--brand--default | #004d99 | Usa il ruolo semantico del tema attivo; il rosso di accento del brand non è il colore universale delle azioni principali. | | --pf-t--global--color--brand--hover | #003366 | Usa il ruolo semantico del tema attivo; il rosso di accento del brand non è il colore universale delle azioni principali. | | --pf-t--global--color--brand--accent--default | #ee0000 | Usa il ruolo semantico del tema attivo; il rosso di accento del brand non è il colore universale delle azioni principali. | | --pf-t--global--color--brand--subtle--default | #e0f0ff | Usa il ruolo semantico del tema attivo; il rosso di accento del brand non è il colore universale delle azioni principali. | ### Ruoli di stato | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --pf-t--global--color--status--success--default | #204d00 | Abbina l’intento dello stato a un’etichetta testuale. Questi valori del tema chiaro non sostituiscono le varianti native di Label o Alert. | | --pf-t--global--color--status--warning--default | #73480b | Abbina l’intento dello stato a un’etichetta testuale. Questi valori del tema chiaro non sostituiscono le varianti native di Label o Alert. | | --pf-t--global--color--status--danger--default | #731f00 | Abbina l’intento dello stato a un’etichetta testuale. Questi valori del tema chiaro non sostituiscono le varianti native di Label o Alert. | | --pf-t--global--color--status--info--default | #3d2785 | Abbina l’intento dello stato a un’etichetta testuale. Questi valori del tema chiaro non sostituiscono le varianti native di Label o Alert. | | --pf-t--global--color--status--custom--default | #004d4d | Abbina l’intento dello stato a un’etichetta testuale. Questi valori del tema chiaro non sostituiscono le varianti native di Label o Alert. | | --pf-t--global--color--status--unread--default | #0066cc | Abbina l’intento dello stato a un’etichetta testuale. Questi valori del tema chiaro non sostituiscono le varianti native di Label o Alert. | ### Caratteri per il testo e i titoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --pf-t--global--font--size--body--default | 0.875rem | Scegli con criterio il ruolo tipografico e il livello semantico del titolo. La dimensione visiva non determina la struttura del documento. | | --pf-t--global--font--size--body--lg | 1rem | Scegli con criterio il ruolo tipografico e il livello semantico del titolo. La dimensione visiva non determina la struttura del documento. | | --pf-t--global--font--size--heading--h1 | 1.5rem | Scegli con criterio il ruolo tipografico e il livello semantico del titolo. La dimensione visiva non determina la struttura del documento. | | --pf-t--global--font--size--heading--h2 | 1.25rem | Scegli con criterio il ruolo tipografico e il livello semantico del titolo. La dimensione visiva non determina la struttura del documento. | | --pf-t--global--font--size--heading--h3 | 1.125rem | Scegli con criterio il ruolo tipografico e il livello semantico del titolo. La dimensione visiva non determina la struttura del documento. | | --pf-t--global--font--size--heading--h4 | 1rem | Scegli con criterio il ruolo tipografico e il livello semantico del titolo. La dimensione visiva non determina la struttura del documento. | | --pf-t--global--font--size--heading--h5 | 1rem | Scegli con criterio il ruolo tipografico e il livello semantico del titolo. La dimensione visiva non determina la struttura del documento. | | --pf-t--global--font--size--heading--h6 | 1rem | Scegli con criterio il ruolo tipografico e il livello semantico del titolo. La dimensione visiva non determina la struttura del documento. | ### Scala di spaziatura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --pf-t--global--spacer--xs | 0.25rem | Usa la scala di spaziatura indicata per gruppi e controlli; i valori in rem seguono la dimensione del font radice impostata dall’utente. | | --pf-t--global--spacer--sm | 0.5rem | Usa la scala di spaziatura indicata per gruppi e controlli; i valori in rem seguono la dimensione del font radice impostata dall’utente. | | --pf-t--global--spacer--md | 1rem | Usa la scala di spaziatura indicata per gruppi e controlli; i valori in rem seguono la dimensione del font radice impostata dall’utente. | | --pf-t--global--spacer--lg | 1.5rem | Usa la scala di spaziatura indicata per gruppi e controlli; i valori in rem seguono la dimensione del font radice impostata dall’utente. | | --pf-t--global--spacer--xl | 2rem | Usa la scala di spaziatura indicata per gruppi e controlli; i valori in rem seguono la dimensione del font radice impostata dall’utente. | | --pf-t--global--spacer--2xl | 3rem | Usa la scala di spaziatura indicata per gruppi e controlli; i valori in rem seguono la dimensione del font radice impostata dall’utente. | | --pf-t--global--spacer--3xl | 4rem | Usa la scala di spaziatura indicata per gruppi e controlli; i valori in rem seguono la dimensione del font radice impostata dall’utente. | | --pf-t--global--spacer--4xl | 5rem | Usa la scala di spaziatura indicata per gruppi e controlli; i valori in rem seguono la dimensione del font radice impostata dall’utente. | ### Forma e stato attivo | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --pf-t--global--border--radius--tiny | 4px | Usa la forma prevista per il componente pertinente, invece di applicare il raggio arrotondato a pillola a tutte le superfici. | | --pf-t--global--border--radius--small | 6px | Usa la forma prevista per il componente pertinente, invece di applicare il raggio arrotondato a pillola a tutte le superfici. | | --pf-t--global--border--radius--medium | 16px | Usa la forma prevista per il componente pertinente, invece di applicare il raggio arrotondato a pillola a tutte le superfici. | | --pf-t--global--border--radius--large | 24px | Usa la forma prevista per il componente pertinente, invece di applicare il raggio arrotondato a pillola a tutte le superfici. | | --pf-t--global--border--radius--pill | 999px | Usa la forma prevista per il componente pertinente, invece di applicare il raggio arrotondato a pillola a tutte le superfici. | | --pf-t--global--border--radius--control--form-element | 6px | Usa la forma prevista per il componente pertinente, invece di applicare il raggio arrotondato a pillola a tutte le superfici. | | --pf-t--global--border--radius--action--default | 999px | Usa la forma prevista per il componente pertinente, invece di applicare il raggio arrotondato a pillola a tutte le superfici. | ## Guida completa al sistema di progettazione sistema di design Red Hat PatternFly Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Layout operativo del sistema di progettazione sistema di design Red Hat PatternFly ### Una raccolta con contesto operativo persistente > La galleria dei servizi consente a un operatore di confrontare integrità, posizione e utilizzo, mentre un pannello separato registra l’insieme scelto. La selezione non coincide con i risultati della ricerca corrente. Un servizio escluso dai filtri resta selezionato finché non viene rimosso esplicitamente. Questa distinzione è essenziale per le operazioni in blocco che hanno conseguenze anche al di fuori della schermata visibile. ### Usa la gerarchia dei componenti nativi Gallery gestisce le colonne adattabili delle schede, Card distingue ciascun servizio, Label ne identifica lo stato e Progress mostra una percentuale di esempio con il relativo titolo. La pagina non imita una console di infrastruttura con rettangoli colorati arbitrari. Il modello dei dati, i controlli e lo stato di revisione sono implementati nell’esempio completo di React. ## Ruoli semantici di colori e temi nel sistema di progettazione sistema di design Red Hat PatternFly ### Il colore primario del brand e il rosso di accento sono distinti PatternFly v6 esporta ruoli separati per brand, accento, testo, sfondo e stato. L’istantanea selezionata del tema chiaro include il blu brand-default e il rosso brand-accent-default. Trattare ogni azione in evidenza come rosso Red Hat confonderebbe questi ruoli. I componenti nativi Button e Label usano i ruoli del sistema appropriati alla rispettiva variante. ### Risolvi il tema scuro a livello del documento L’esempio attiva pf-v6-theme-dark sull’elemento document. Le superfici e il testo dell’applicazione usano le variabili semantiche --pf-t--global, che consentono al tema di risolverne anche i colori. Non fissare i valori chiari in schede personalizzate aspettandosi poi che una classe del tema sul documento li corregga. ## Tipografia e metadati dei servizi nel sistema di progettazione sistema di design Red Hat PatternFly ### Distingui la dimensione visiva dalla semantica dei titoli L’intestazione con title e headingLevel h1 definisce il titolo della pagina, mentre size ne controlla l’enfasi visiva. In questa versione del pacchetto, body-default è 0.875rem. Le etichette delle schede, lo stato e i valori numerici di utilizzo restano leggibili senza trasformare ogni valore in un’intestazione. L’elenco di definizioni dei metadati rende espliciti il numero di repliche e gli ID dei servizi. ### Evita etichette operative ambigue L’utilizzo di esempio è contrassegnato come dato di esempio sia nel componente sia nel piè di pagina. Una barra di avanzamento senza contesto può essere scambiata per un’attività di distribuzione o un’operazione di caricamento. La didascalia spiega a cosa si riferisce la percentuale, mentre l’etichetta di stato comunica separatamente se la capacità è Healthy o Review. ## Sistema di design Red Hat PatternFly Galleria del sistema di progettazione e selezione multipla ### Usa i tre stati della casella di selezione Il controllo Select visible è true quando sono selezionati tutti i servizi visibili, false quando non ne è selezionato nessuno e null quando ne è selezionata solo una parte. La casella di selezione di PatternFly supporta il valore indeterminato null. L’applicazione calcola questo stato dalla raccolta filtrata; non usa un booleano separato che potrebbe divergere dalle selezioni delle righe. 1. Seleziona un servizio e controlla lo stato di selezione parziale. 2. Seleziona tutti i servizi attualmente visibili. 3. Cerca un nome e verifica che le selezioni nascoste restino selezionate. 4. Verifica l’insieme esatto e il numero totale di repliche. 5. Conferma il piano locale e leggi l’esito. ### Usa l’insieme selezionato come fonte di verità Ogni servizio ha un ID stabile. Le caselle di selezione individuali e Select visible aggiornano lo stesso insieme di ID; il pannello dell’ambito ricava da quell’insieme i nomi dei servizi e il numero totale di repliche. La ricerca modifica solo la visibilità. In questo modo il riepilogo da verificare resta coerente anche quando l’operatore restringe la galleria dopo aver selezionato più servizi. ## Sistema di design Red Hat PatternFly Spaziatura del sistema di progettazione e schede adattive ### Usa token semantici per la struttura della pagina Lo sfondo di esempio, il testo normale e i metadati discreti usano proprietà semantiche CSS del pacchetto di token pubblicato. La scala di spaziatura nativa va da xs a 4xl, mentre l’applicazione usa 24px tra la raccolta e il pannello dell’ambito. Questo valore esplicito di composizione è distinto dal riferimento al token. ### Lascia che la galleria si ridisponga prima di ridurre i suoi contenuti Gallery usa una larghezza minima di 230px per elemento e un gutter. Al breakpoint dell’applicazione di 850px, il pannello dell’ambito si sposta sotto la raccolta. A 500px, il padding della pagina diventa 16px e la ricerca occupa tutta la larghezza della barra degli strumenti. Sono scelte di layout di esempio, non un’affermazione secondo cui tutti i prodotti PatternFly usino questi breakpoint. ## Sistema di design Red Hat PatternFly Revisione del sistema di progettazione e stati di selezione ### Non associare un’operazione alla selezione Selezionare un servizio lo aggiunge solo all’ambito. Review selection mostra un avviso informativo e un’azione di conferma. Confirm local plan riporta il totale dei servizi selezionati e delle relative repliche, senza avviare un’attività di manutenzione. La modifica della selezione chiude lo stato di revisione, così non può confermare silenziosamente un insieme non più aggiornato. ### Tieni separato il recupero dalla ricerca dalla selezione Una ricerca senza risultati mostra un avviso informativo in linea con l’azione Cancella ricerca. Questa cancella solo la query, mantenendo i servizi selezionati. Il conteggio delle selezioni nella barra degli strumenti e il pannello dell’ambito continuano quindi a essere coerenti. Reimpostare la selezione come effetto collaterale di una ricerca vuota sarebbe un comportamento distruttivo non esplicito. ## Sistema di design Red Hat PatternFly Controlli accessibili e stato del sistema di progettazione ### Etichetta la selezione e usa controlli nativi Ogni casella di selezione ha un ID stabile e un’etichetta di servizio visibile. SearchInput ha un nome accessibile, Switch identifica l’impostazione dell’aspetto e Review selection è disabilitato quando l’insieme è vuoto. Progress nativo comunica il proprio valore e titolo. La pagina non dipende da un’azione disponibile solo al passaggio del puntatore e nascosta all’interno di una scheda. ### Rendi visibile lo stato anche tramite testo Il conteggio delle selezioni usa un’area live con annunci cortesi, lo stato del servizio è scritto all’interno di un’etichetta e l’avviso finale descrive l’esito. Non usare il colore come unico indicatore dell’ambito selezionato o dello stato del servizio. I test da tastiera dovrebbero includere la selezione parziale, il filtraggio di un servizio selezionato e il ritorno alla raccolta completa. - Una casella di selezione selezionata indica un’inclusione, non uno stato di successo. - Un’etichetta di stato descrive il servizio, non il fatto che sia selezionato. - L’avanzamento descrive l’utilizzo di esempio, non il completamento di un’operazione. ## Sistema di design Red Hat PatternFly Integrazione del sistema di progettazione React ### Importa una sola volta gli stili di reset e dei componenti L’esempio importa @patternfly/react-core/dist/styles/base.css nel punto di ingresso. I componenti nativi React forniscono i propri stili tramite il pacchetto. Il CSS dell’applicazione CSS è limitato a pf-example e fa riferimento allo spazio dei nomi corrente --pf-t--global; non sovrascrive gli elementi interni dei componenti. ### Aggiungi una pianificazione reale solo dietro un contratto di servizio Il piano locale è volutamente solo un’anteprima. Un’implementazione di produzione richiede autorizzazioni, finestre di manutenzione, dipendenze interessate, feedback durante l’attesa e convalida lato server. Mantieni stabili gli ID selezionati per tutta la richiesta e riconcilia il risultato confermato con la risposta effettiva del servizio. I componenti nativi di presentazione non forniscono il backend operativo. ## Sistema di design Red Hat PatternFly Esempi di componenti del sistema di progettazione ### main.jsx — galleria dei servizi e revisione multipla Composizione completa nativa di Gallery/Card/Checkbox/Progress con ambito di selezione derivato e conferma locale. ``` 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(); ``` Riferimento del codice - Salva come src/main.jsx. Checkbox onChange riceve l’evento e il valore checked; isChecked può essere null per un insieme misto. ### patternfly.css — struttura operativa adattiva Il layout personalizzato della pagina usa i token semantici v6 e mantiene intatti gli stili nativi dei componenti. ``` 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%; } } ``` Riferimento del codice - Salva come src/patternfly.css. I breakpoint dell’applicazione sono esplicitamente parte di questo esempio. ## Sistema di design Red Hat PatternFly Configurazione dell’agente del sistema di progettazione ### Punto di partenza per l’implementazione Composizione nativa React 18.3.1 / PatternFly 6.6.1. Vite richiede una versione supportata di Node.js. I dati effettivi dei servizi e le operazioni API restano responsabilità dell’applicazione. ``` 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 ``` ### Un prompt per il tuo progetto ``` Crea una raccolta operativa usando i componenti nativi Gallery, Card, Checkbox, Progress, Label e Alert di PatternFly 6.6.1. Usa i token semantici forniti e l’esempio completo. Tieni distinta la visibilità filtrata dagli ID selezionati, calcola la selezione multipla parziale e richiedi la revisione dell’insieme esatto interessato. Quando viene aggiunto un API reale, usa risposte attendibili per gli stati in attesa, di errore e di successo. Mantieni la ridisposizione su dispositivi mobili e l’accessibilità da tastiera. ``` ## Sistema di design Red Hat PatternFly Fonti e ambito del sistema di progettazione Guida applicativa redatta da OpenDesign ed esempio fittizio di pianificazione della manutenzione, basati su PatternFly React 6.6.1 nativo. I valori di utilizzo, area geografica e numero di repliche sono dati di esempio. La conferma aggiorna solo lo stato locale; nessun servizio viene riavviato o pianificato. - Sviluppa con PatternFly Integrazione nativa del pacchetto e del foglio di stile. - Moduli di token pubblicati Nomi dei token con versione e valori chiari risolti. - Schema di selezione multipla Ambito della selezione e comportamento della raccolta. - Repository di PatternFly React Implementazione nativa dei componenti e licenza. ## Sistema di design Red Hat PatternFly Risorse correlate sul sistema di progettazione ### REI Cedar Crea un selettore concreto per l’evasione degli ordini Cedar con riquadri Vue nativi, valori reali dei token, navigazione completa da tastiera e composizione responsive dei prodotti. ### Sainsbury's sistema di design Applica le linee guida pubbliche di design di Sainsbury a un flusso completo di scelta di una fascia oraria per il ritiro: riferimenti reali a palette e dimensioni, opzioni radio accessibili, riepilogo aggiornato e riscontro locale trasparente. ### Salesforce Lightning Una guida Lightning per attività con record ad alta densità: spaziature, tipografia e colori semantici reali, un’area di lavoro modificabile per i casi, convalida dei campi e cronologia delle attività che riflette le modifiche locali. - [Riferimento per l’implementazione](https://www.patternfly.org/patterns/bulk-selection/) - [Fonte](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/) - [Riferimento del codice](https://www.patternfly.org/components/checkbox/) - [Riferimento del codice](https://www.patternfly.org/foundations-and-styles/design-tokens/develop/) - [Sviluppa con PatternFly Integrazione nativa del pacchetto e del foglio di stile.](https://www.patternfly.org/get-started/develop/) - [Moduli di token pubblicati Nomi dei token con versione e valori chiari risolti.](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/) - [Schema di selezione multipla Ambito della selezione e comportamento della raccolta.](https://www.patternfly.org/patterns/bulk-selection/) - [Repository di PatternFly React Implementazione nativa dei componenti e licenza.](https://github.com/patternfly/patternfly-react)