Modela una reserva de capacidad con las primitivas de diseño de Grommet, campos de formulario controlados e indicadores numéricos. Usa deliberadamente la escala del tema y distingue el tema base de Grommet del tema de HPE, que se instala por separado.
Interpretación independiente de HTML/CSS de las dimensiones y los colores de Grommet base, con Arial como fuente elegida explícitamente; no es el tema independiente de HPE. · Referencia de implementación
02
Referencia de diseño del sistema de diseño HPE Grommet
Tema base de Grommet v2 generado con baseSpacing=24 y scale=6; estos no son valores de grommet-theme-hpe. El proyecto inicial nativo establece explícitamente Arial y los colores de marca y de foco mostrados como opciones del tema de la aplicación.
Sistema de diseño HPE Grommet: Grommet base y el tema HPE
No etiquetes el morado como un token de HPE
Grommet es un framework React asociado a HPE que tiene su propio tema base. El paquete independiente grommet-theme-hpe exporta hpe para las aplicaciones que adoptan el estilo de diseño de HPE. Esta referencia explica el framework base y un ejemplo configurado explícitamente. El morado de marca y el color menta de foco proceden del tema base; no se presentan como la paleta actual de marca de HPE.
La configuración establece Arial como fuente elegida para la aplicación y reitera los colores de marca y de foco documentados para el tema base. Todas las demás reglas de los componentes heredan de Grommet. En su lugar, un producto real de HPE puede pasar el tema aprobado hpe; después, debe comprobar el espaciado y la tipografía resultantes, ya que las sobrescrituras del tema pueden modificar los valores base que se indican aquí.
Sistema de diseño HPE Grommet: las escalas del tema pueden cambiar en un punto de ruptura
Los valores con nombre son decisiones adaptables
El generador base comienza en 24 píxeles. El espaciado medio predeterminado de los bordes es 24px, pero el punto de ruptura pequeño cambia el valor medio a 12px. Por lo tanto, un Box que use relleno adaptable puede reducirse aunque el JSX siga indicando medium. Consulta la escala junto con la sobrescritura del punto de ruptura; no des por sentado que medium siempre equivale a veinticuatro píxeles.
El planificador usa un Box en columna como página y un Box adaptable en fila o columna para el formulario y el resumen de capacidad. El formulario hijo puede expandirse mientras el resumen mantiene un ancho mínimo útil. En pantallas pequeñas, el gráfico aparece después de los controles, de acuerdo con el orden del documento.
Sistema de diseño HPE Grommet: una base legible definida deliberadamente
El tamaño de fuente y la altura de línea son valores independientes del tema
El generador base deriva una fuente de dieciocho píxeles y una altura de línea de veinticuatro píxeles a partir de su valor de espaciado. El ejemplo usa explícitamente esa combinación con Arial para no dar a entender que se ha descargado una fuente de marca propietaria. Los encabezados usan Grommet Heading y el texto usa Text, lo que permite que el tema determine sus funciones en lugar de reproducir los detalles internos de los componentes en CSS.
Sistema de diseño HPE Grommet: un único objeto de reserva controlado
Los nombres vinculan los campos con el formulario
Form se encarga del contrato coordinado del formulario. En el patrón controlado, value y onChange corresponden a quien llama al componente. El name de cada FormField y del elemento de entrada hijo identifica la clave de valor correspondiente. Nuestro objeto de reserva contiene name y pool. El control deslizante de capacidad se mantiene como un número independiente porque actualiza un diagrama en directo antes del envío.
Sistema de diseño HPE Grommet: Select tiene su propio formato de evento
Las cadenas mantienen predecible el caso sencillo
Las opciones de grupo de ejemplo son Production y Development. Por tanto, el valor controlado es una cadena. Si pasas a usar opciones de objeto, configura labelKey y, si quieres, valueKey con reduce; después, mantén el valor almacenado coherente con esa elección. onChange de Select expone un objeto value/option, a diferencia del evento del control de rango nativo.
La búsqueda y la carga de opciones son tareas de la aplicación
Select puede mostrar un campo de búsqueda cuando se proporciona onSearch. Esa propiedad no significa que todas las opciones se hayan filtrado automáticamente. Mantén por separado la colección de origen sin filtrar para poder restaurarla al cerrar o borrar la búsqueda. En el ejemplo se omite intencionadamente la búsqueda para los dos grupos.
Sistema de diseño HPE Grommet: un medidor necesita unidades y un denominador
Representa la capacidad, no un porcentaje sin contexto
Meter recibe la cantidad usada proyectada y max=100. En este planificador ilustrativo, el grupo de ejemplo ya tiene 35 unidades en uso y la reserva propuesta oscila entre 5 y 60. El porcentaje coincide por casualidad con la cantidad porque el denominador de la demostración es cien. Aun así, el código pasa max explícitamente para que el contrato de datos siga siendo válido si cambia el total.
El círculo, la etiqueta de uso proyectado y las unidades restantes se derivan del mismo valor numérico del control deslizante. RangeInput nativo emite un evento del DOM, así que convierte event.target.value a Number antes de hacer operaciones aritméticas. De lo contrario, al sumar una cadena a treinta y cinco, el total puede parecer correcto, aunque sea incorrecto.
Sistema de diseño HPE Grommet: desplazamiento del documento y composición para pantallas estrechas
Elige full="min" para esta página
Grommet full=true está pensado para una aplicación que controla su propia ventana gráfica y el desplazamiento interno. Este planificador usa full="min" para que el documento pueda crecer. Así se evita que el formulario y su mensaje de validación queden atrapados en un contenedor de altura fija en un teléfono.
Un componente hijo consume el contexto actual y elige columna para pantallas pequeñas y fila para las demás. El proveedor debe envolver ese componente para que el contexto refleje el tema elegido. Cuando el ancho disponible es reducido, la distribución alternativa sigue siendo una columna natural.
Coloca las etiquetas de los campos encima de sus controles.
Coloca el resumen de capacidad después de los controles en el orden del código fuente.
Permite que la fila de acciones se ajuste a varias líneas sin ocultar el texto de validación.
Conecta la etiqueta, el error y la medición en el sistema de diseño de HPE Grommet
Indica el significado de cada valor numérico
El control de rango tiene una etiqueta persistente y una unidad visible. El círculo recibe un a11yTitle que incluye el uso previsto y la capacidad total. El texto cercano muestra los mismos números para que la información no dependa de un arco de color. El mensaje de error describe el problema con la reserva y permanece junto a su campo.
Monta una composición completa de Grommet en el sistema de diseño de HPE Grommet
Instala el framework y su dependencia de estilos
Instala grommet con styled-components y el entorno de ejecución React en un proyecto de cliente. La configuración monta Grommet y, después, un componente secundario que consume ResponsiveContext, un Form controlado, FormField/TextInput/Select, RangeInput y Meter. Usa la propiedad label de Button en lugar de children para dejar explícito el comportamiento predeterminado del botón con estilo de etiqueta.
Ejemplos de componentes del sistema de diseño de HPE Grommet
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente de HTML/CSS de las dimensiones y los colores base de Grommet, con Arial como fuente elegida explícitamente; no es el tema HPE independiente.
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>
Los cálculos de capacidad usan el grupo de muestra que se muestra. La composición independiente es una interpretación de HTML; el ejemplo nativo selecciona el tema base de Grommet, no el tema HPE independiente.
Entrada de implementación nativa completa
La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración.
Archivo main.jsx de cliente para un proyecto con un elemento raíz. Grommet con el tema base y una fuente de aplicación/anulación de marca declarada explícitamente. No se presupone silenciosamente ningún tema HPE. API contrastado con la documentación oficial; aquí no se ha verificado la compilación nativa.
Cambia deliberadamente al tema de marca HPE
Usa el paquete independiente solo si ese es el objetivo de diseño; vuelve a comprobar los valores con la versión instalada.
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>
Declara poolId/setPoolId con useState en el componente que realiza la llamada.
Con reduce activado, el valor guardado es el id, no el objeto.
04
Configuración del agente del sistema de diseño de HPE Grommet
Punto de partida para la implementación
Archivo main.jsx de cliente para un proyecto con un elemento raíz. Grommet con el tema base y una fuente de aplicación/anulación de marca declarada explícitamente. No se presupone silenciosamente ningún tema HPE. API contrastado con la documentación oficial; aquí no se ha verificado la compilación nativa.
Implementa el planificador de reservas suministrado con Grommet base, un Form controlado, FormFields con nombre, Select, RangeInput y un Meter con max explícito. Mantén separados los valores del tema base y de grommet-theme-hpe. Convierte el valor del control deslizante en un número, muestra las unidades, valida el nombre y genera únicamente una instantánea local del plan.
05
Fuentes y alcance del sistema de diseño de HPE Grommet
Referencia de implementación independiente con Grommet base. La adopción del tema de marca HPE se muestra por separado. Las cifras de capacidad son datos locales ficticios, no métricas de infraestructura ni de aprovisionamiento.
