Modélisez une réservation de capacité avec les primitives de mise en page de Grommet, des champs de formulaire contrôlés et des jauges numériques. Utilisez délibérément l’échelle du thème et distinguez le thème de base Grommet du thème HPE installé séparément.
Interprétation indépendante de HTML/CSS des dimensions et couleurs de Grommet de base, avec la police Arial choisie explicitement ; il ne s’agit pas du thème HPE distinct. · Référence de mise en œuvre
02
Référence de conception du système de design HPE Grommet
Thème de base de Grommet v2 généré avec baseSpacing=24 et scale=6 ; ces valeurs ne sont pas celles de grommet-theme-hpe. Le projet de départ natif définit explicitement Arial ainsi que les couleurs de marque et de focus présentées, comme choix de thème pour l’application.
Système de design HPE Grommet : Grommet de base et thème HPE
Ne présentez pas le violet comme un jeton HPE
Grommet est un framework React associé à HPE, doté de son propre thème de base. Le package distinct grommet-theme-hpe exporte hpe pour les applications qui adoptent les styles de conception HPE. Cette référence présente le framework de base et un exemple configuré explicitement. Le violet de marque et la couleur menthe du focus proviennent du thème de base ; ils ne sont pas présentés comme la palette HPE actuellement utilisée.
La configuration fournit Arial comme choix de police pour l’application et reprend les couleurs de marque et de focus documentées pour le thème de base. Toutes les autres règles des composants héritent de Grommet. Un produit HPE réel peut plutôt utiliser le thème hpe approuvé, puis vérifier l’espacement et la typographie obtenus, car les surcharges du thème peuvent modifier les valeurs de base répertoriées ici.
Système de design HPE Grommet : les échelles du thème peuvent varier selon le point de rupture
Les valeurs nommées correspondent à des choix adaptatifs
Le générateur de base démarre à 24 pixels. L’espacement moyen par défaut des bords est de 24px, mais le point de rupture petit écran ramène l’espacement moyen à 12px. Le padding adaptatif d’un Box peut donc diminuer même si le JSX indique toujours medium. Consultez conjointement l’échelle et la surcharge au point de rupture ; ne promettez pas que medium vaut toujours vingt-quatre pixels.
Le planificateur utilise un Box en colonne comme page, ainsi qu’un Box adaptatif en ligne/colonne pour le formulaire et le récapitulatif de capacité. Le formulaire enfant peut s’agrandir, tandis que le récapitulatif conserve une largeur minimale utile. Sur petit écran, le graphique apparaît après les commandes, conformément à l’ordre du document.
Système de design HPE Grommet : une base lisible spécifiée avec soin
La taille de police et la hauteur de ligne sont des valeurs de thème distinctes
Le générateur de base déduit une police de dix-huit pixels et une hauteur de ligne de vingt-quatre pixels à partir de la valeur d’espacement. L’exemple définit explicitement cette paire avec Arial pour ne pas laisser entendre qu’une police de marque propriétaire a été téléchargée. Les titres utilisent Heading de Grommet et le texte utilise Text, ce qui permet au thème de résoudre leurs rôles sans reproduire l’implémentation interne des composants dans CSS.
Système de design HPE Grommet : un seul objet de réservation contrôlé
Les noms relient les champs au formulaire
Form gère le contrat coordonné du formulaire. Dans le modèle contrôlé, value et onChange appartiennent à l’appelant. Le name de chaque FormField et de son champ enfant identifie la clé correspondante dans value. Notre objet de réservation contient name et pool. Le curseur de capacité est stocké séparément sous forme de nombre, car il pilote un diagramme dynamique avant l’envoi du formulaire.
Système de design HPE Grommet : Select a sa propre structure d’événement
Les chaînes simplifient et fiabilisent le cas de base
Les options d’environnement de l’exemple sont Production et Development. Leur valeur contrôlée est donc une chaîne. Si vous passez à des options objet, définissez labelKey et, facultativement, valueKey avec reduce, puis veillez à ce que la valeur stockée soit cohérente avec ce choix. Le gestionnaire onChange de Select expose un objet value/option, contrairement à l’événement de l’entrée native de type curseur.
La recherche et le chargement des options relèvent de l’application
Select peut afficher un champ de recherche si on lui fournit onSearch. Cette prop ne signifie pas que chaque option est automatiquement filtrée. Conservez séparément la collection source non filtrée afin de pouvoir la restaurer à la fermeture ou à l’effacement de la recherche. Pour les deux listes, l’exemple omet intentionnellement la recherche.
HPE Grommet Système de conception : un Meter a besoin d’unités et d’un dénominateur
Représentez une capacité, pas un pourcentage sans explication
Meter reçoit la quantité utilisée projetée et max=100. Dans cet exemple de planificateur, le pool contient déjà 35 unités utilisées et la réservation proposée varie de 5 à 60. Le pourcentage correspond ici au nombre, car le dénominateur de la démonstration est de cent. Le code transmet tout de même max explicitement afin que le contrat de données reste valable si le total change.
Le cercle, le libellé d’utilisation projetée et les unités restantes sont calculés à partir de la même valeur numérique du curseur. RangeInput natif émet un événement DOM : convertissez donc event.target.value en Number avant d’effectuer des calculs. Sinon, l’addition d’une chaîne à trente-cinq peut produire un total qui semble plausible, mais qui est incorrect.
HPE Grommet Système de conception : défilement du document et composition pour écran étroit
Choisissez full="min" pour cette page
Grommet full=true est prévu pour une application qui gère elle-même la fenêtre d’affichage et le défilement interne. Ce planificateur utilise full="min" pour permettre au document de s’agrandir. Ainsi, le formulaire et son message de validation ne restent pas coincés dans un conteneur à hauteur fixe sur un téléphone.
Un composant enfant consomme le contexte actuel et choisit column pour les petits écrans, row sinon. Le fournisseur doit englober cet enfant pour que son contexte corresponde au thème choisi. Lorsque la largeur disponible est réduite, la disposition de secours reste une colonne naturelle.
Placez les libellés des champs au-dessus de leurs champs de saisie.
Dans l’ordre du document, placez le récapitulatif de capacité après les commandes.
Autorisez le retour à la ligne de la rangée d’actions sans masquer le texte de validation.
HPE Grommet Système de conception : associez libellé, erreur et mesure
Précisez le sens de chaque valeur numérique affichée
Le curseur de plage possède un libellé permanent et une unité visible. Le cercle reçoit un a11yTitle contenant l’utilisation projetée et la capacité totale. Le texte à proximité expose les mêmes nombres afin que l’information ne dépende pas d’un arc coloré. Le texte d’erreur décrit le problème de réservation et reste près du champ concerné.
HPE Grommet Système de conception : monter une composition Grommet complète
Installez le framework et sa dépendance de style
Installez grommet avec styled-components et le runtime React dans un projet client. La configuration monte Grommet, puis un composant enfant qui consomme ResponsiveContext, un Form contrôlé, FormField/TextInput/Select, RangeInput et Meter. Utilisez le libellé de Button plutôt que ses enfants pour expliciter le comportement par défaut du bouton avec libellé.
HPE Grommet Exemples de composants du système de conception
Exemple interactif autonome complet
Enregistrez le document complet sous index.html et ouvrez-le dans un navigateur. Interprétation indépendante HTML/CSS des dimensions et couleurs de base de Grommet, avec une police Arial explicitement choisie ; il ne s’agit pas du thème HPE distinct.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Capacity reservation — Grommet study</title><style>*{box-sizing:border-box}body{margin:0;background:white;color:#444;font:18px/24px Arial,sans-serif}header{padding:24px 36px;border-bottom:1px solid #ddd;display:flex;gap:12px;align-items:center}.mark{width:22px;height:22px;border:4px solid #7d4cdb;border-radius:50%}main{max-width:1050px;margin:auto;padding:36px}h1{font-size:36px;line-height:42px;margin:12px 0 24px;color:#222}h2{font-size:24px;line-height:30px;margin:0 0 12px}.intro{max-width:650px;margin-bottom:36px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:48px}label{display:block;font-weight:600;margin-bottom:12px}input,select,button{font:inherit;max-width:100%}input[type=text],select{width:100%;border:1px solid #888;border-radius:4px;background:transparent;padding:12px;color:#444}input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid #6fffb0;outline-offset:3px}.field{margin-bottom:24px}input[type=range]{width:100%;accent-color:#7d4cdb}.limits{display:flex;justify-content:space-between;font-size:14px;color:#666;margin-top:6px}button{border:2px solid #7d4cdb;border-radius:24px;background:#7d4cdb;color:white;padding:10px 24px;font-weight:600;cursor:pointer}button:hover{background:#6839c0}aside{background:#f2f2f2;padding:24px;border-radius:12px;align-self:start;text-align:center}.ring{width:192px;height:192px;border-radius:50%;background:conic-gradient(#7d4cdb var(--used),#dadada 0);margin:24px auto;display:grid;place-items:center;position:relative}.ring:before{content:'';position:absolute;inset:12px;background:#f2f2f2;border-radius:50%}.ring span{position:relative;font-size:36px;font-weight:bold}.ring small{display:block;font-size:14px;font-weight:400;line-height:20px}.legend{text-align:left;border-top:1px solid #ddd;padding-top:12px;font-size:14px}.legend div{display:flex;justify-content:space-between;margin:8px 0}.error{font-size:14px;color:#b30000;margin-top:6px}#result{background:#f2f2f2;border-left:4px solid #7d4cdb;padding:24px;margin-top:36px}footer{font-size:12px;line-height:18px;color:#666;border-top:1px solid #ddd;padding:24px 36px}@media(max-width:700px){main{padding:24px}.layout{grid-template-columns:1fr;gap:24px}h1{font-size:30px;line-height:36px}header,footer{padding:24px}.intro{margin-bottom:24px}}</style><header><span class="mark" aria-hidden="true"></span><strong>Capacity planner</strong></header><main><h1>Plan a reservation</h1><p class="intro">Explore a proposed allocation before preparing a local plan. This model contains 100 capacity units.</p><div class="layout"><form id="form" novalidate><div class="field"><label for="name">Reservation name</label><input id="name" type="text" required aria-describedby="error"><div class="error" id="error" hidden></div></div><div class="field"><label for="pool">Capacity pool</label><select id="pool"><option>Production</option><option>Development</option></select></div><div class="field"><label for="units">Requested allocation: <output id="requested">20</output> units</label><input id="units" type="range" min="5" max="60" step="5" value="20"><div class="limits"><span>5 units</span><span>60 units</span></div></div><button type="submit">Prepare plan</button><p style="font-size:14px;color:#666">No infrastructure will be provisioned.</p></form><aside><h2>Projected usage</h2><div class="ring" id="ring" style="--used:55%" role="img" aria-label="55 of 100 units projected usage"><span><output id="used">55</output><small>of 100 units</small></span></div><div class="legend"><div><span>Already used</span><strong>35</strong></div><div><span>Proposed reservation</span><strong id="proposed">20</strong></div><div><span>Remaining</span><strong id="remaining">45</strong></div></div></aside></div><section id="result" hidden><h2>Prepared local plan</h2><p id="snapshot" role="status"></p><p style="font-size:14px">This snapshot changes only when you prepare the plan again.</p></section></main><footer>Independent base Grommet HTML/CSS interpretation. Base purple/mint palette and spacing; Arial is an application font choice. This is not the separate HPE branded theme.</footer><script>
const $=id=>document.getElementById(id);$('units').oninput=()=>{const units=Number($('units').value),used=35+units;$('requested').textContent=$('proposed').textContent=units;$('used').textContent=used;$('remaining').textContent=100-used;$('ring').style.setProperty('--used',used+'%');$('ring').setAttribute('aria-label',used+' of 100 units projected usage')};$('form').onsubmit=e=>{e.preventDefault();const name=$('name').value.trim();if(name.length<3){$('error').textContent='Use at least three characters for the reservation name.';$('error').hidden=false;$('name').setAttribute('aria-invalid','true');$('name').focus();return}$('error').hidden=true;$('name').removeAttribute('aria-invalid');$('snapshot').textContent=name+' · '+$('pool').value+' · '+$('units').value+' units. Prepared in this local demonstration.';$('result').hidden=false};
</script></html>
Les calculs de capacité utilisent les valeurs affichées pour l’exemple de pool. La disposition autonome est indépendante HTML ; l’exemple natif utilise le thème de base de Grommet plutôt que le thème HPE distinct.
Entrée complète de l’implémentation native
L’implémentation complète présentée dans la configuration, réunie ici avec les explications ciblées sur API. Suivez les prérequis documentés concernant les packages et la compilation dans la section de configuration.
Client main.jsx pour un projet doté d’un élément racine. Grommet de base, avec une police d’application et une surcharge de marque déclarées explicitement. Aucun thème HPE n’est supposé implicitement. API Vérifié à partir de la documentation officielle ; la compilation native n’a pas été vérifiée ici.
Passez délibérément au thème de marque HPE
N’utilisez le package distinct que si c’est bien la cible de conception prévue ; vérifiez à nouveau les valeurs par rapport à la version installée.
jsx
// npm install grommet-theme-hpe
import { Grommet } from 'grommet';
import { hpe } from 'grommet-theme-hpe';
// Wrap the Planner from the full setup example:
<Grommet theme={hpe} themeMode="light" full="min"><Planner /></Grommet>
Déclarez poolId/setPoolId avec useState dans le composant appelant.
Lorsque reduce est activé, la valeur stockée est l’identifiant, et non l’objet.
04
Système de design HPE Grommet Configuration de l’agent IA
Point de départ de l’implémentation
Client main.jsx pour un projet doté d’un élément racine. Grommet de base, avec une police d’application et une surcharge de marque déclarées explicitement. Aucun thème HPE n’est supposé implicitement. API Vérifié à partir de la documentation officielle ; la compilation native n’a pas été vérifiée ici.
Implémentez le planificateur de réservation fourni, basé sur Grommet de base, avec un Form contrôlé, des FormFields nommés, Select, RangeInput et un Meter avec une valeur max explicite. Distinguez les valeurs du thème de base de celles de grommet-theme-hpe. Convertissez la valeur du curseur en nombre, affichez les unités, validez le nom et produisez uniquement un instantané de plan local.
05
HPE Grommet Sources et périmètre du système de conception
Référence indépendante pour une implémentation avec Grommet de base. L’adoption du thème de marque HPE est présentée séparément. Les chiffres de capacité sont des données locales fictives, et non des mesures d’infrastructure ou des opérations de provisionnement.
