# Système de conception Red Hat PatternFly ## Aperçu de l’interface du système de conception Red Hat PatternFly Recherchez dans la galerie de services, sélectionnez des services individuellement ou parmi ceux qui sont visibles, consultez le total des réplicas, examinez votre sélection et confirmez un plan local. ## Référence de conception du système de conception Red Hat PatternFly PatternFly React 6.6.1 et @patternfly/react-tokens 6.6.1. Les résolutions de jetons sélectionnées du thème clair sont présentées ci-dessous. Les composants natifs et pf-v6-theme-dark appliquent le style sombre ; les données d’exemple des services et la mise en page relèvent des choix de l’application. ### Rôles sémantiques des surfaces et du texte | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pf-t--global--background--color--primary--default | rgb(255, 255, 255, 0.6000) | Utilisez le rôle sémantique du thème actif ; le rouge de la couleur d’accentuation de la marque n’est pas la couleur universelle des actions principales. | | --pf-t--global--background--color--secondary--default | rgb(199, 199, 199, 0.3000) | Utilisez le rôle sémantique du thème actif ; le rouge de la couleur d’accentuation de la marque n’est pas la couleur universelle des actions principales. | | --pf-t--global--text--color--regular | #151515 | Utilisez le rôle sémantique du thème actif ; le rouge de la couleur d’accentuation de la marque n’est pas la couleur universelle des actions principales. | | --pf-t--global--text--color--subtle | #383838 | Utilisez le rôle sémantique du thème actif ; le rouge de la couleur d’accentuation de la marque n’est pas la couleur universelle des actions principales. | | --pf-t--global--text--color--disabled | #a3a3a3 | Utilisez le rôle sémantique du thème actif ; le rouge de la couleur d’accentuation de la marque n’est pas la couleur universelle des actions principales. | | --pf-t--global--color--brand--default | #004d99 | Utilisez le rôle sémantique du thème actif ; le rouge de la couleur d’accentuation de la marque n’est pas la couleur universelle des actions principales. | | --pf-t--global--color--brand--hover | #003366 | Utilisez le rôle sémantique du thème actif ; le rouge de la couleur d’accentuation de la marque n’est pas la couleur universelle des actions principales. | | --pf-t--global--color--brand--accent--default | #ee0000 | Utilisez le rôle sémantique du thème actif ; le rouge de la couleur d’accentuation de la marque n’est pas la couleur universelle des actions principales. | | --pf-t--global--color--brand--subtle--default | #e0f0ff | Utilisez le rôle sémantique du thème actif ; le rouge de la couleur d’accentuation de la marque n’est pas la couleur universelle des actions principales. | ### Rôles d’état | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pf-t--global--color--status--success--default | #204d00 | Associez l’intention de l’état à un libellé explicite. Ces valeurs du thème clair ne remplacent pas les variantes natives de Label ou Alert. | | --pf-t--global--color--status--warning--default | #73480b | Associez l’intention de l’état à un libellé explicite. Ces valeurs du thème clair ne remplacent pas les variantes natives de Label ou Alert. | | --pf-t--global--color--status--danger--default | #731f00 | Associez l’intention de l’état à un libellé explicite. Ces valeurs du thème clair ne remplacent pas les variantes natives de Label ou Alert. | | --pf-t--global--color--status--info--default | #3d2785 | Associez l’intention de l’état à un libellé explicite. Ces valeurs du thème clair ne remplacent pas les variantes natives de Label ou Alert. | | --pf-t--global--color--status--custom--default | #004d4d | Associez l’intention de l’état à un libellé explicite. Ces valeurs du thème clair ne remplacent pas les variantes natives de Label ou Alert. | | --pf-t--global--color--status--unread--default | #0066cc | Associez l’intention de l’état à un libellé explicite. Ces valeurs du thème clair ne remplacent pas les variantes natives de Label ou Alert. | ### Typographie du corps et des titres | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pf-t--global--font--size--body--default | 0.875rem | Choisissez délibérément le rôle typographique et le niveau de titre sémantique. La taille visuelle ne détermine pas la hiérarchie du document. | | --pf-t--global--font--size--body--lg | 1rem | Choisissez délibérément le rôle typographique et le niveau de titre sémantique. La taille visuelle ne détermine pas la hiérarchie du document. | | --pf-t--global--font--size--heading--h1 | 1.5rem | Choisissez délibérément le rôle typographique et le niveau de titre sémantique. La taille visuelle ne détermine pas la hiérarchie du document. | | --pf-t--global--font--size--heading--h2 | 1.25rem | Choisissez délibérément le rôle typographique et le niveau de titre sémantique. La taille visuelle ne détermine pas la hiérarchie du document. | | --pf-t--global--font--size--heading--h3 | 1.125rem | Choisissez délibérément le rôle typographique et le niveau de titre sémantique. La taille visuelle ne détermine pas la hiérarchie du document. | | --pf-t--global--font--size--heading--h4 | 1rem | Choisissez délibérément le rôle typographique et le niveau de titre sémantique. La taille visuelle ne détermine pas la hiérarchie du document. | | --pf-t--global--font--size--heading--h5 | 1rem | Choisissez délibérément le rôle typographique et le niveau de titre sémantique. La taille visuelle ne détermine pas la hiérarchie du document. | | --pf-t--global--font--size--heading--h6 | 1rem | Choisissez délibérément le rôle typographique et le niveau de titre sémantique. La taille visuelle ne détermine pas la hiérarchie du document. | ### Échelle d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pf-t--global--spacer--xs | 0.25rem | Utilisez l’échelle d’espacement nommée pour les groupes et les contrôles ; les valeurs en rem suivent la taille de police racine définie par l’utilisateur. | | --pf-t--global--spacer--sm | 0.5rem | Utilisez l’échelle d’espacement nommée pour les groupes et les contrôles ; les valeurs en rem suivent la taille de police racine définie par l’utilisateur. | | --pf-t--global--spacer--md | 1rem | Utilisez l’échelle d’espacement nommée pour les groupes et les contrôles ; les valeurs en rem suivent la taille de police racine définie par l’utilisateur. | | --pf-t--global--spacer--lg | 1.5rem | Utilisez l’échelle d’espacement nommée pour les groupes et les contrôles ; les valeurs en rem suivent la taille de police racine définie par l’utilisateur. | | --pf-t--global--spacer--xl | 2rem | Utilisez l’échelle d’espacement nommée pour les groupes et les contrôles ; les valeurs en rem suivent la taille de police racine définie par l’utilisateur. | | --pf-t--global--spacer--2xl | 3rem | Utilisez l’échelle d’espacement nommée pour les groupes et les contrôles ; les valeurs en rem suivent la taille de police racine définie par l’utilisateur. | | --pf-t--global--spacer--3xl | 4rem | Utilisez l’échelle d’espacement nommée pour les groupes et les contrôles ; les valeurs en rem suivent la taille de police racine définie par l’utilisateur. | | --pf-t--global--spacer--4xl | 5rem | Utilisez l’échelle d’espacement nommée pour les groupes et les contrôles ; les valeurs en rem suivent la taille de police racine définie par l’utilisateur. | ### Forme et focus | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pf-t--global--border--radius--tiny | 4px | Utilisez la forme adaptée au composant au lieu d’appliquer un rayon en forme de pilule à toutes les surfaces. | | --pf-t--global--border--radius--small | 6px | Utilisez la forme adaptée au composant au lieu d’appliquer un rayon en forme de pilule à toutes les surfaces. | | --pf-t--global--border--radius--medium | 16px | Utilisez la forme adaptée au composant au lieu d’appliquer un rayon en forme de pilule à toutes les surfaces. | | --pf-t--global--border--radius--large | 24px | Utilisez la forme adaptée au composant au lieu d’appliquer un rayon en forme de pilule à toutes les surfaces. | | --pf-t--global--border--radius--pill | 999px | Utilisez la forme adaptée au composant au lieu d’appliquer un rayon en forme de pilule à toutes les surfaces. | | --pf-t--global--border--radius--control--form-element | 6px | Utilisez la forme adaptée au composant au lieu d’appliquer un rayon en forme de pilule à toutes les surfaces. | | --pf-t--global--border--radius--action--default | 999px | Utilisez la forme adaptée au composant au lieu d’appliquer un rayon en forme de pilule à toutes les surfaces. | ## Guide complet du système de conception Red Hat PatternFly Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Mise en page opérationnelle du système de conception Red Hat PatternFly ### Une collection avec un contexte opérationnel persistant > La galerie de services permet à l’opérateur de comparer l’état de santé, l’emplacement et l’utilisation, tandis qu’un panneau de périmètre distinct récapitule les éléments sélectionnés. La sélection ne correspond pas aux résultats de recherche affichés. Un service masqué par un filtre reste sélectionné jusqu’à ce qu’il soit retiré délibérément. Cette distinction est essentielle pour une opération groupée dont les conséquences dépassent le contenu visible à l’écran. ### Utilisez la hiérarchie native des composants Gallery gère les colonnes de cartes adaptatives, Card distingue chaque service, Label indique l’état et Progress affiche un pourcentage d’exemple avec son titre. La page ne cherche pas à imiter une console d’infrastructure avec des rectangles colorés arbitraires. Son modèle de données, ses contrôles et son état de révision sont implémentés dans l’exemple complet React. ## Couleurs sémantiques et rôles de thème du système de conception Red Hat PatternFly ### La couleur principale de la marque et le rouge d’accentuation sont distincts PatternFly v6 expose des rôles distincts pour la marque, l’accentuation, le texte, l’arrière-plan et les états. L’instantané sélectionné du thème clair comprend le bleu brand-default et le rouge brand-accent-default. Traiter toutes les actions mises en évidence comme étant en rouge Red Hat confondrait ces rôles. Les composants natifs Button et Label utilisent les rôles du système adaptés à leur variante. ### Appliquez le thème sombre au niveau du document L’exemple active pf-v6-theme-dark sur l’élément du document. Les surfaces et le texte de l’application utilisent les variables sémantiques --pf-t--global, ce qui permet aussi au thème de résoudre leurs couleurs. Ne figez pas les valeurs claires dans des cartes personnalisées en supposant qu’une classe de thème sur le document les corrigera ensuite. ## Typographie et métadonnées des services du système de conception Red Hat PatternFly ### Distinguez la taille visuelle de la sémantique des titres Title avec headingLevel h1 définit le titre de la page, tandis que sa taille règle l’emphase visuelle. Dans cet instantané du package, body-default vaut 0.875rem. Les libellés des cartes, les états et les valeurs d’utilisation numériques restent lisibles sans transformer chaque valeur en titre. La liste de définitions des métadonnées présente clairement le nombre de réplicas et les identifiants de service. ### Évitez les libellés opérationnels ambigus L’utilisation présentée en exemple est indiquée comme donnée d’exemple dans le composant et dans le pied de page. Une barre de progression sans libellé peut être confondue avec une tâche de déploiement ou un indicateur de chargement. Sa légende explique ce que représente le pourcentage, tandis que le composant Label indique séparément si la capacité est Healthy ou Review. ## Galerie et sélection multiple du système de conception Red Hat PatternFly ### Utilisez les trois états de la case à cocher Le contrôle Select visible vaut true lorsque tous les services visibles sont sélectionnés, false lorsqu’aucun ne l’est et null lorsqu’une partie seulement l’est. PatternFly Checkbox prend en charge la valeur indéterminée null. L’application calcule cet état à partir de la collection filtrée ; elle n’utilise pas de booléen distinct susceptible de diverger des sélections des lignes. 1. Sélectionnez un service et examinez l’état de sélection partielle. 2. Sélectionnez tous les services actuellement visibles. 3. Recherchez un nom et vérifiez que les éléments masqués restent dans le périmètre. 4. Examinez la liste exacte et le nombre total de réplicas. 5. Confirmez le plan local et prenez connaissance du résultat. ### Faites de l’ensemble sélectionné la source de vérité Chaque service possède un identifiant stable. Les cases à cocher individuelles et Select visible mettent à jour le même ensemble d’identifiants ; le panneau de périmètre en déduit les noms des services et le nombre total de réplicas. La recherche ne modifie que la visibilité. Le récapitulatif reste ainsi cohérent, même lorsque l’opérateur réduit le contenu de la galerie après avoir sélectionné plusieurs services. ## Red Hat PatternFly Espacement du système de design et cartes adaptatives ### Utiliser des jetons sémantiques pour la structure de la page L’arrière-plan de l’exemple, le texte courant et les métadonnées discrètes utilisent les propriétés sémantiques CSS du package de jetons publié. L’échelle d’espacement native va de xs à 4xl, tandis que l’application prévoit 24px entre la collection et le panneau de périmètre. Cette valeur de composition explicite est distincte de la référence au jeton. ### Laisser la galerie se réorganiser avant de réduire son contenu Gallery reçoit une largeur minimale de 230px par élément ainsi qu’une gouttière. Au point de rupture de l’application, fixé à 850px, le panneau de périmètre passe sous la collection. À 500px, la marge intérieure de la page passe à 16px et la recherche occupe toute la largeur de la barre d’outils. Il s’agit de choix de mise en page propres à cet exemple, et non d’une affirmation selon laquelle tous les produits PatternFly utilisent ces points de rupture. ## Red Hat PatternFly Révision et états de sélection du système de design ### Ne pas déclencher l’opération lors de la sélection Cocher un service l’ajoute uniquement au périmètre. L’action « Réviser la sélection » affiche une alerte informative et une action de confirmation. « Confirmer le plan local » indique le nombre de services et de réplicas sélectionnés, sans lancer de tâche de maintenance. Toute modification de la sélection ferme l’état de révision afin d’éviter de confirmer silencieusement un ensemble devenu obsolète. ### Dissocier la reprise de la recherche de la sélection Une recherche sans résultat affiche une alerte informative intégrée avec l’action « Effacer la recherche ». Celle-ci efface uniquement la requête et conserve les services sélectionnés. Le nombre de sélections dans la barre d’outils et le panneau de périmètre restent donc cohérents. Réinitialiser la sélection à la suite d’une recherche vide constituerait un comportement destructif invisible. ## Red Hat PatternFly Contrôles accessibles et états du système de design ### Étiqueter la sélection et utiliser des contrôles natifs Chaque Checkbox possède un id stable et une étiquette de service visible. SearchInput a un nom accessible, Switch identifie le réglage d’apparence et « Réviser la sélection » est désactivé lorsqu’aucun élément n’est sélectionné. Progress natif communique sa valeur et son titre. La page ne dépend pas d’une action accessible uniquement au survol et masquée dans une carte. ### Afficher les états sous forme de texte Le nombre d’éléments sélectionnés utilise une région dynamique polie, l’état du service est indiqué dans un Label et l’alerte finale décrit ce qui s’est passé. Ne faites pas de la couleur le seul indicateur du périmètre sélectionné ou de l’état de santé. Les tests au clavier doivent couvrir la sélection partielle, le filtrage d’un service sélectionné et le retour à la collection complète. - Une case cochée indique une décision d’inclusion, pas un état de réussite. - Un Label d’état décrit le service, pas son état de sélection. - Progress décrit l’utilisation de l’exemple, pas l’achèvement d’une opération. ## Red Hat PatternFly Intégration au système de design React ### Importer les styles de réinitialisation et des composants une seule fois L’exemple importe @patternfly/react-core/dist/styles/base.css à son point d’entrée. Les composants natifs React fournissent leurs styles via le package. L’application CSS est limitée à pf-example et fait référence à l’espace de noms actuel --pf-t--global ; elle ne remplace pas les styles internes des composants. ### N’ajouter une véritable planification qu’avec un contrat de service Le plan local est volontairement une prévisualisation. Une implémentation en production nécessite une autorisation, des fenêtres de maintenance, les dépendances concernées, un retour en attente et une validation côté serveur. Conservez les identifiants sélectionnés pendant toute la requête et rapprochez le résultat confirmé de la réponse réelle du service. Les composants de présentation natifs ne fournissent pas le backend opérationnel. ## Red Hat PatternFly Exemples de composants du système de design ### main.jsx — galerie de services et révision groupée Composition complète native Gallery/Card/Checkbox/Progress, avec périmètre de sélection calculé et confirmation 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(); ``` Référence du code - Enregistrer sous src/main.jsx. Checkbox onChange reçoit l’événement et la valeur checked ; isChecked peut être null pour un ensemble mixte. ### patternfly.css — structure adaptative des opérations La mise en page personnalisée de la page utilise les jetons sémantiques v6 et préserve les styles natifs des composants. ``` 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%; } } ``` Référence du code - Enregistrer sous src/patternfly.css. Les points de rupture de l’application font explicitement partie de cet exemple. ## Red Hat PatternFly Configuration de l’agent pour le système de design ### Point de départ de l’implémentation Composition native React 18.3.1 / PatternFly 6.6.1. Vite nécessite une version prise en charge de Node.js. Les données et opérations réelles du service API restent sous la responsabilité de l’application. ``` 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 pour votre projet ``` Créer une collection d’opérations avec les composants natifs Gallery, Card, Checkbox, Progress, Label et Alert de PatternFly 6.6.1. Utiliser les jetons sémantiques fournis et l’exemple complet. Distinguer les éléments visibles après filtrage des identifiants sélectionnés, calculer la sélection groupée partielle et exiger la révision de l’ensemble exact des éléments concernés. Utiliser des réponses honnêtes indiquant une opération en attente, un échec ou une réussite lorsqu’un véritable API sera ajouté. Préserver la réorganisation sur mobile et l’accessibilité au clavier. ``` ## Red Hat PatternFly Sources et périmètre du système de design Guide d’application rédigé par OpenDesign et exemple fictif de planification de maintenance, avec PatternFly React 6.6.1 natif. Les taux d’utilisation, les régions et le nombre de réplicas sont des données d’exemple. La confirmation ne met à jour que l’état local ; aucun service n’est redémarré ni planifié. - Développer avec PatternFly Intégration du package natif et de sa feuille de style. - Modules de jetons publiés Noms de jetons versionnés et valeurs résolues pour le thème clair. - Modèle de sélection groupée Périmètre de sélection et comportement de la collection. - Dépôt PatternFly React Implémentation des composants natifs et licence. ## Red Hat PatternFly Ressources associées au système de design ### REI Cedar Créez un sélecteur de commandes Cedar concret avec des vignettes Vue natives, les véritables valeurs des tokens, une navigation complète au clavier et une composition de produits adaptative. ### Sainsbury's système de design Appliquez les recommandations publiques de Sainsbury’s en matière de design à un parcours complet de réservation d’un créneau de collecte : références réelles de palette et de tailles, choix par boutons radio accessibles, récapitulatif actualisé et retour local fidèle à la réalité. ### Salesforce Lightning Un guide Lightning pour les tâches exigeant une forte densité d’informations : valeurs réelles d’espacement, de typographie et de couleurs sémantiques, espace de travail modifiable pour les dossiers, validation des champs et historique des activités reflétant les changements locaux. - [Référence de mise en œuvre](https://www.patternfly.org/patterns/bulk-selection/) - [Source](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/) - [Référence du code](https://www.patternfly.org/components/checkbox/) - [Référence du code](https://www.patternfly.org/foundations-and-styles/design-tokens/develop/) - [Développer avec PatternFly Intégration du package natif et de sa feuille de style.](https://www.patternfly.org/get-started/develop/) - [Modules de jetons publiés Noms de jetons versionnés et valeurs résolues pour le thème clair.](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/) - [Modèle de sélection groupée Périmètre de sélection et comportement de la collection.](https://www.patternfly.org/patterns/bulk-selection/) - [Dépôt PatternFly React Implémentation des composants natifs et licence.](https://github.com/patternfly/patternfly-react)