# Sistema di design HPE Grommet ## HPE Grommet Anteprima dell’interfaccia del sistema di design Modifica l’allocazione proposta e prepara un piano locale convalidato. ## HPE Grommet Riferimento di progettazione del sistema di design Tema base di Grommet v2 generato con baseSpacing=24 e scale=6; questi non sono valori di grommet-theme-hpe. Lo starter nativo imposta esplicitamente Arial e i colori dimostrativi del brand e del focus come scelte del tema dell’applicazione. ### Scala predefinita delle dimensioni dei bordi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | global.edgeSize.hair | 1px | Dimensione predefinita al di fuori della variante adattiva small. | | global.edgeSize.xxsmall | 3px | Dimensione predefinita al di fuori della variante adattiva small. | | global.edgeSize.xsmall | 6px | Dimensione predefinita al di fuori della variante adattiva small. | | global.edgeSize.small | 12px | Dimensione predefinita al di fuori della variante adattiva small. | | global.edgeSize.medium | 24px | Dimensione predefinita al di fuori della variante adattiva small. | | global.edgeSize.large | 48px | Dimensione predefinita al di fuori della variante adattiva small. | | global.edgeSize.xlarge | 96px | Dimensione predefinita al di fuori della variante adattiva small. | ### Override adattivi per small | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | global.breakpoints.small.value | 768 | Limite del breakpoint small nel tema base. | | small.edgeSize.xxsmall | 2px | Spaziatura fine per schermi piccoli. | | small.edgeSize.xsmall | 3px | Spaziatura xsmall per schermi piccoli. | | small.edgeSize.small | 6px | Spaziatura interna small adattiva. | | small.edgeSize.medium | 12px | Spaziatura interna medium adattiva. | | small.edgeSize.large | 24px | Spaziatura interna ampia e adattiva. | | global.breakpoints.medium.value | 1536 | Limite del breakpoint successivo del tema base. | ### Colori e controlli di base | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | global.colors.brand | #7D4CDB | Colore del brand Grommet predefinito, non il verde HPE. | | global.colors.focus | #6FFFB0 | Colore di accento predefinito per il focus. | | global.colors.text.light | #444444 | Testo del corpo nel tema chiaro. | | global.colors.text.dark | #f8f8f8 | Testo del corpo nel tema scuro. | | global.colors.background-front.light | #FFFFFF | Superficie chiara in primo piano. | | global.colors.background-front.dark | #444444 | Superficie scura in primo piano. | | global.control.border.radius | 4px | Angolo predefinito dei controlli. | | global.control.border.width | 1px | Bordo di base dei controlli. | ### Contratto per moduli e campi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Form.value | Object keyed by field name | Usa un unico oggetto controllato per la prenotazione. | | Form.onChange | (value) => {} | Riceve l’oggetto aggiornato, non un evento DOM. | | Form.onSubmit | ({ value, touched }) => {} | Legge il valore corrente del modulo accettato. | | Form.validate | blur \| submit \| change | Scegli quando eseguire la convalida. | | Form.errors | Object keyed like value | Associa gli errori remoti o dell’applicazione ai campi. | ### Integrazione di Select e degli intervalli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Select.options | String array or object array | L’esempio usa stringhe per mantenere semplice la struttura dei valori. | | Select.onChange | ({ value, option }) => {} | Non leggere event.target.value per Select. | | Select.valueKey | { key, reduce } for object options | reduce restituisce il valore indicizzato per chiave, non l’oggetto completo. | | Select.labelKey | Property name or function | Etichetta visibile per le opzioni a oggetto. | | Select.onSearch | Function; enables search input | Se necessario, fornisci il filtraggio dell’applicazione. | ### Struttura del meter | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | value | number | Quantità rappresentata; ignorata se viene fornito values. | | max | number or numeric string | Capacità totale disponibile; non confonderla con una percentuale. | | type | bar \| circle \| pie \| semicircle | Usa circle per la panoramica sull’utilizzo. | | color | Color identifier | Valido con un singolo valore. | | a11yTitle | string | Descrivi la misura e il denominatore. | | size | Named size or CSS dimension | Mantieni l’anello entro la larghezza disponibile. | ## HPE Grommet Guida completa al sistema di design 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. ## Sistema di design HPE Grommet: Grommet di base e tema HPE ### Non presentare il viola come token HPE > Grommet è un framework React associato a HPE, con un proprio tema base. Il pacchetto separato grommet-theme-hpe esporta hpe per le applicazioni che adottano lo stile di design HPE. Questo riferimento illustra il framework di base e un esempio configurato in modo esplicito. Il viola del brand e il colore menta del focus provengono dal tema base; non vengono presentati come la palette attuale del brand HPE. Leggi la specifica di supporto ### Un tema applicativo esplicito e compatto La configurazione imposta Arial come scelta tipografica dell’applicazione e riprende i colori documentati per il brand e il focus del tema base. Tutte le altre regole dei componenti ereditano da Grommet. Un prodotto HPE reale può invece passare il tema hpe approvato; in tal caso, verifica la spaziatura e la tipografia risultanti, perché le sostituzioni del tema possono modificare i valori base elencati qui. Leggi la specifica di supporto ## Sistema di design HPE Grommet: le scale del tema possono cambiare a un breakpoint ### I valori nominali sono decisioni adattive Il generatore di base parte da 24 pixel. La spaziatura medium predefinita dei bordi è 24px, ma al breakpoint small medium passa a 12px. Un Box con padding adattivo può quindi restringersi anche se nel JSX è ancora indicato medium. Esamina insieme la scala e la modifica al breakpoint; non garantire che medium corrisponda sempre a ventiquattro pixel. Leggi la specifica di supporto ### Usa Box per il layout effettivo Il pianificatore usa un Box a colonna come pagina e un Box a riga/colonna adattivo per il modulo e il riepilogo della capacità. Il modulo figlio può espandersi, mentre il riepilogo mantiene una larghezza minima adeguata. Sugli schermi piccoli, il grafico segue i controlli, rispettando l’ordine del documento. Leggi la specifica di supporto ## Sistema di design HPE Grommet: una base leggibile definita con cura ### La dimensione del font e l’interlinea sono valori distinti del tema Il generatore di base ricava un font di diciotto pixel e un’interlinea di ventiquattro pixel dal proprio valore di spaziatura. L’esempio usa esplicitamente questa coppia con Arial, per non suggerire che sia stato scaricato un font proprietario del brand. Le intestazioni usano Grommet Heading e il testo usa Text, così il tema può risolverne i ruoli senza riprodurre gli elementi interni dei componenti in CSS. Leggi la specifica di supporto ## Sistema di design HPE Grommet: un unico oggetto controllato per la prenotazione ### I nomi collegano i campi al modulo Form gestisce il contratto coordinato del modulo. Nel modello controllato, value e onChange appartengono al chiamante. Il name di ogni FormField e del relativo input figlio identifica la chiave corrispondente nel valore. Il nostro oggetto di prenotazione contiene name e pool. Lo slider della capacità è mantenuto come numero separato perché aggiorna un diagramma in tempo reale prima dell’invio. Leggi la specifica di supporto ### Convalida il nome della prenotazione Un FormField obbligatorio con name="name" racchiude TextInput id="reservation-name". htmlFor collega l’etichetta visibile. Il validatore personalizzato restituisce un errore esplicito se il valore, dopo aver rimosso gli spazi iniziali e finali, è più corto di tre caratteri. Imposta la convalida su submit, così un modulo vuoto non ancora toccato non mostrerà subito un errore. Leggi la specifica di supporto ## Sistema di design HPE Grommet Select del sistema di progettazione ha una propria struttura degli eventi ### Le stringhe rendono prevedibile il caso più semplice Le opzioni dei pool di esempio sono Production e Development. Il valore controllato è quindi una stringa. Se passi a opzioni oggetto, imposta labelKey e, facoltativamente, valueKey con reduce, quindi mantieni il valore memorizzato coerente con questa scelta. onChange di Select espone un oggetto valore/opzione, a differenza dell’evento dell’input range nativo. Leggi la specifica di supporto ### Ricerca e caricamento delle opzioni sono responsabilità dell’applicazione Select può mostrare un campo di ricerca quando viene fornita la proprietà onSearch. Questa proprietà non implica che tutte le opzioni vengano filtrate automaticamente. Mantieni separata la raccolta di origine non filtrata, così da poterla ripristinare quando la ricerca viene chiusa o cancellata. Per i due pool, l’esempio omette intenzionalmente la ricerca. Leggi la specifica di supporto ## Sistema di design HPE Grommet Un indicatore del sistema di progettazione richiede unità e un denominatore ### Rappresenta la capacità, non una percentuale senza spiegazione Meter riceve la quantità utilizzata prevista e max=100. In questo pianificatore illustrativo, il pool di esempio ha già 35 unità utilizzate e la prenotazione proposta varia da 5 a 60. La percentuale coincide per caso con il numero, perché il denominatore della dimostrazione è cento. Il codice passa comunque max in modo esplicito, così il contratto dei dati resta valido anche con un totale diverso. Leggi la specifica di supporto ### Mantieni sincronizzati grafico e testo Il cerchio, l’etichetta dell’utilizzo previsto e le unità rimanenti derivano dallo stesso valore numerico del cursore. RangeInput nativo genera un evento DOM, quindi converti event.target.value in Number prima di eseguire calcoli. Altrimenti, sommare una stringa a trentacinque può produrre un totale visivamente plausibile ma errato. Leggi la specifica di supporto ## Sistema di design HPE Grommet Scorrimento del documento e composizione per schermi stretti nel sistema di progettazione ### Scegli full="min" per questa pagina Grommet full=true è pensato per un’applicazione che gestisce la propria viewport e lo scorrimento interno. Questo pianificatore usa full="min" per consentire al documento di estendersi. In questo modo, su un telefono il modulo e il relativo messaggio di convalida non restano intrappolati in un contenitore ad altezza fissa. Leggi la specifica di supporto ### Leggi ResponsiveContext all’interno di Grommet Un componente figlio usa il contesto corrente e sceglie column sugli schermi piccoli e row negli altri casi. Il provider deve racchiudere il componente figlio, affinché il contesto rifletta il tema scelto. Quando lo spazio disponibile è ridotto, il layout predefinito resta una colonna naturale. - Mantieni le etichette dei campi sopra i relativi input. - Inserisci il riepilogo della capacità dopo i controlli nell’ordine del sorgente. - Consenti alla riga delle azioni di andare a capo senza nascondere il testo di convalida. Leggi la specifica di supporto ## Sistema di design HPE Grommet Collega etichette, errori e misurazioni nel sistema di progettazione ### Attribuisci un significato a ogni valore numerico Il controllo dell’intervallo ha un’etichetta persistente e un’unità visibile. Il cerchio riceve un a11yTitle che include l’utilizzo previsto e la capacità totale. Il testo vicino espone gli stessi numeri, così l’informazione non dipende da un arco colorato. Il testo dell’errore descrive il problema della prenotazione e rimane accanto al relativo campo. Leggi la specifica di supporto ### Rendi esplicito l’esito locale Prepara piano memorizza un’istantanea locale del modulo convalidato e dell’allocazione corrente. Non effettua il provisioning dell’infrastruttura. Il risultato cambia solo dopo l’invio valido, mentre le modifiche al cursore restano una proposta. Questa distinzione è utile per confrontare un piano preparato con la bozza attualmente in modifica. 1. Invia un nome vuoto e verifica l’errore del campo obbligatorio. 2. Inserisci un nome, scegli un pool e modifica l’allocazione. 3. Prepara il piano e verifica che l’istantanea locale contenga il pool selezionato e il valore numerico in unità. Leggi la specifica di supporto ## Sistema di design HPE Grommet Crea una composizione Grommet completa ### Installa il framework e la libreria peer per gli stili Installa grommet con styled-components e il runtime React in un progetto client. La configurazione monta Grommet, poi un componente figlio che usa ResponsiveContext, un Form controllato, FormField/TextInput/Select, RangeInput e Meter. Usa la proprietà label di Button anziché i children, così il comportamento predefinito del pulsante con stile di etichetta rimane esplicito. Leggi la specifica di supporto ## Sistema di design HPE Grommet Esempi di componenti del sistema di progettazione ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS delle dimensioni e dei colori di Grommet base, con font Arial scelto esplicitamente; non è il tema HPE separato. ``` Capacity reservation — Grommet study
Capacity planner

Plan a reservation

Explore a proposed allocation before preparing a local plan. This model contains 100 capacity units.

5 units60 units

No infrastructure will be provisioned.

``` Riferimento del codice - I calcoli della capacità usano il pool di esempio visualizzato. Il layout autonomo è indipendente HTML; l’esempio nativo seleziona Grommet base anziché il tema HPE separato. ### Implementazione nativa completa L’implementazione completa descritta nella configurazione, raccolta qui insieme alle spiegazioni specifiche di API. Segui i prerequisiti documentati per pacchetti e build nella configurazione. ``` // npm install react react-dom grommet styled-components import React, { useContext, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Grommet, Box, Heading, Text, Form, FormField, TextInput, Select, RangeInput, Meter, Button, ResponsiveContext } from 'grommet'; const theme={global:{font:{family:'Arial, sans-serif',size:'18px',height:'24px'},colors:{brand:'#7D4CDB',focus:'#6FFFB0'}}}; function Planner(){ const size=useContext(ResponsiveContext); const [value,setValue]=useState({name:'',pool:'Production'}); const [units,setUnits]=useState(20),[plan,setPlan]=useState(null); const used=35+units; return Plan a reservation Local capacity model. No infrastructure is provisioned.
setPlan({...accepted,units})}> String(name || '').trim().length<3?'Use at least three characters':undefined}> setPoolId(value)} /> ``` Riferimento del codice - Dichiara poolId/setPoolId con useState nel componente chiamante. - Con reduce abilitato, il valore memorizzato è l’ID, non l’oggetto. ## Sistema di design HPE Grommet Configurazione dell’agente IA per il sistema di progettazione ### Punto di partenza per l’implementazione main.jsx client per un progetto con un elemento root. Grommet base con override del font e del brand dell’applicazione dichiarati esplicitamente. Non si presume implicitamente l’uso del tema HPE. API verificato rispetto alla documentazione ufficiale; la compilazione nativa non è stata verificata qui. ``` // npm install react react-dom grommet styled-components import React, { useContext, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Grommet, Box, Heading, Text, Form, FormField, TextInput, Select, RangeInput, Meter, Button, ResponsiveContext } from 'grommet'; const theme={global:{font:{family:'Arial, sans-serif',size:'18px',height:'24px'},colors:{brand:'#7D4CDB',focus:'#6FFFB0'}}}; function Planner(){ const size=useContext(ResponsiveContext); const [value,setValue]=useState({name:'',pool:'Production'}); const [units,setUnits]=useState(20),[plan,setPlan]=useState(null); const used=35+units; return Plan a reservation Local capacity model. No infrastructure is provisioned. setPlan({...accepted,units})}> String(name || '').trim().length<3?'Use at least three characters':undefined}>