Modele uma reserva de capacidade com os primitivos de layout do Grommet, campos de formulário controlados e medidores numéricos. Use deliberadamente a escala do tema e mantenha o tema base do Grommet separado do tema HPE instalado à parte.
Interpretação independente de HTML/CSS das dimensões e cores do Grommet Base, com a fonte Arial escolhida explicitamente; não é o tema HPE separado. · Referência de implementação
02
Referência de design do sistema de design HPE Grommet
Tema Base do Grommet v2 gerado com baseSpacing=24 e scale=6; esses não são valores de grommet-theme-hpe. O projeto inicial nativo define explicitamente Arial e as cores de marca/foco demonstradas como escolhas de tema do aplicativo.
Sistema de design HPE Grommet: o sistema de design básico do Grommet e o tema HPE
Não rotule o roxo como um token da HPE
O Grommet é um framework associado à HPE React, com tema básico próprio. O pacote separado grommet-theme-hpe exporta hpe para aplicações que adotam o estilo de design da HPE. Esta referência apresenta o framework básico e um exemplo com configuração explícita. O roxo da marca e a cor menta de foco vêm do tema básico; eles não são apresentados como a paleta atual da marca HPE.
A configuração define Arial como fonte escolhida pela aplicação e repete as cores documentadas de marca e foco do tema básico. Todas as demais regras dos componentes são herdadas do Grommet. Um produto real da HPE pode, em vez disso, passar o tema hpe aprovado e, em seguida, verificar o espaçamento e a tipografia resultantes, pois as substituições do tema podem alterar os valores básicos listados aqui.
Sistema de design HPE Grommet: as escalas do tema podem mudar em um breakpoint
Valores nomeados são decisões responsivas
O gerador básico começa em 24 pixels. O espaçamento médio padrão das bordas é 24px, mas no breakpoint pequeno o valor médio muda para 12px. Portanto, um Box com padding responsivo pode encolher mesmo que o JSX ainda especifique medium. Consulte a escala e a substituição do breakpoint em conjunto; não garanta que medium sempre corresponda a vinte e quatro pixels.
O planejador usa um Box em coluna como página e um Box responsivo em linha/coluna para o formulário e o resumo da capacidade. O formulário filho pode crescer, enquanto o resumo mantém uma largura mínima adequada. Em telas pequenas, o gráfico vem depois dos controles, de acordo com a ordem do documento.
Sistema de design HPE Grommet: uma base legível especificada intencionalmente
Tamanho e altura da linha são valores separados no tema
O gerador básico deriva uma fonte de dezoito pixels com altura de linha de vinte e quatro pixels a partir do valor de espaçamento. O exemplo especifica esse par explicitamente com Arial para não sugerir que uma fonte de marca proprietária tenha sido baixada. Os títulos usam Heading do Grommet e o texto usa Text, permitindo que o tema determine suas funções sem reproduzir os detalhes internos dos componentes em CSS.
Sistema de design HPE Grommet: um único objeto de reserva controlado
Os nomes associam os campos ao formulário
Form é responsável pelo contrato coordenado do formulário. No padrão controlado, value e onChange ficam a cargo do chamador. O name de cada FormField e do campo de entrada filho identifica a chave correspondente no valor. Nosso objeto de reserva contém name e pool. O controle deslizante de capacidade é mantido como um número separado, pois alimenta um diagrama atualizado em tempo real antes do envio.
Sistema de design HPE Grommet: Select tem um formato de evento próprio
Strings tornam previsível o caso mais simples
As opções de pool do exemplo são Production e Development. Portanto, o valor controlado é uma string. Se passar a usar opções de objeto, defina labelKey e, opcionalmente, valueKey com reduce, mantendo o valor armazenado coerente com essa escolha. O onChange de Select expõe um objeto value/option, ao contrário do evento do controle de intervalo nativo.
A pesquisa e o carregamento de opções são responsabilidade da aplicação
Select pode exibir um campo de pesquisa quando onSearch é fornecido. Essa prop não significa que todas as opções tenham sido filtradas automaticamente. Mantenha a coleção de origem sem filtros separada para poder restaurá-la ao fechar ou limpar a pesquisa. No caso de dois conjuntos de opções, o exemplo omite intencionalmente a pesquisa.
Sistema de design HPE Grommet: um Meter precisa de unidades e denominador
Represente a capacidade, não uma porcentagem sem explicação
Meter recebe a quantidade projetada em uso e max=100. Neste planejador ilustrativo, o pool de exemplo já tem 35 unidades em uso, e a reserva proposta varia de 5 a 60. A porcentagem coincide com o número porque o denominador da demonstração é cem. Ainda assim, o código passa max explicitamente para que o contrato dos dados continue válido caso o total seja diferente.
O círculo, o rótulo de uso projetado e as unidades restantes são derivados do mesmo valor numérico do controle deslizante. O RangeInput nativo emite um evento do DOM; portanto, converta event.target.value em Number antes de fazer cálculos. Caso contrário, somar uma string a trinta e cinco pode produzir um total visualmente plausível, mas incorreto.
Sistema de design HPE Grommet: rolagem do documento e composição para telas estreitas
Escolha full="min" para esta página
Grommet full=true foi pensado para uma aplicação que controla a própria área de visualização e a rolagem interna. Este planejador usa full="min" para permitir que o documento cresça. Isso evita que o formulário e sua mensagem de validação fiquem presos em um contêiner de altura fixa no celular.
Um componente filho consome o contexto atual e escolhe column em telas pequenas e row nas demais. O provedor deve envolver esse componente para que o contexto corresponda ao tema escolhido. Quando a largura disponível é estreita, o layout alternativo permanece naturalmente em coluna.
Mantenha os rótulos dos campos acima dos respectivos campos de entrada.
Coloque o resumo da capacidade depois dos controles na ordem do código-fonte.
Permita que a linha de ações quebre para a linha seguinte sem ocultar o texto de validação.
Sistema de design HPE Grommet: associe rótulo, erro e medida
Dê significado a cada valor numérico exibido
O controle deslizante tem um rótulo persistente e uma unidade visível. O círculo recebe um a11yTitle com o uso projetado e a capacidade total. O texto próximo exibe os mesmos números, para que a informação não dependa de um arco colorido. A mensagem de erro identifica o problema com a reserva e permanece junto ao campo correspondente.
Sistema de design HPE Grommet: monte uma composição completa do Grommet
Instale o framework e sua dependência de estilização
Instale grommet com styled-components e o ambiente de execução React em um projeto cliente. A configuração monta o Grommet e, em seguida, um componente filho que consome ResponsiveContext, um Form controlado, FormField/TextInput/Select, RangeInput e Meter. Use a propriedade label de Button em vez de children para deixar explícito o comportamento padrão de botão com estilo de rótulo.
Exemplos de componentes do sistema de design HPE Grommet
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente de HTML/CSS das dimensões e cores básicas do Grommet, com Arial escolhida explicitamente como fonte; não é o tema HPE separado.
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>
Os cálculos de capacidade usam o pool de exemplo exibido. O layout independente HTML; o exemplo nativo seleciona o tema básico do Grommet, não o tema HPE separado.
Entrada da implementação nativa completa
A implementação completa, desde a configuração, reunida aqui com as explicações específicas de API. Siga os pré-requisitos documentados de pacote e compilação na configuração.
main.jsx para cliente em um projeto com um elemento raiz. Grommet básico com uma substituição de fonte/marca da aplicação declarada explicitamente. Não se pressupõe silenciosamente o tema HPE. API conferido com a documentação oficial; a compilação nativa não foi verificada aqui.
Alterne intencionalmente para o tema da marca HPE
Use o pacote separado apenas se esse for o objetivo de design; confira novamente os valores na versão 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>
Declare poolId/setPoolId com useState no componente que faz a chamada.
Com reduce habilitado, o valor armazenado é o ID, não o objeto.
04
Configuração do agente do sistema de design HPE Grommet
Ponto de partida para implementação
main.jsx para cliente em um projeto com um elemento raiz. Grommet básico com uma substituição de fonte/marca da aplicação declarada explicitamente. Não se pressupõe silenciosamente o tema HPE. API conferido com a documentação oficial; a compilação nativa não foi verificada aqui.
Implemente o planejador de reservas fornecido com Grommet básico, usando um Form controlado, FormFields nomeados, Select, RangeInput e um Meter com max explícito. Mantenha os valores do tema básico separados de grommet-theme-hpe. Converta o valor do controle deslizante em número, exiba as unidades, valide o nome e gere apenas um instantâneo local do plano.
05
Fontes e escopo do sistema de design HPE Grommet
Referência independente de implementação com Grommet básico. A adoção do tema da marca HPE é apresentada separadamente. Os números de capacidade são dados locais fictícios, não métricas de infraestrutura nem dados de provisionamento.
