Дизайн-система HPE Grommet.

Название / правило	Значение / конфигурация	Применение
`global.edgeSize.hair`	`1px`	Размер по умолчанию, кроме адаптивного переопределения для малого экрана.
`global.edgeSize.xxsmall`	`3px`	Размер по умолчанию, кроме адаптивного переопределения для малого экрана.
`global.edgeSize.xsmall`	`6px`	Размер по умолчанию, кроме адаптивного переопределения для малого экрана.
`global.edgeSize.small`	`12px`	Размер по умолчанию, кроме адаптивного переопределения для малого экрана.
`global.edgeSize.medium`	`24px`	Размер по умолчанию, кроме адаптивного переопределения для малого экрана.
`global.edgeSize.large`	`48px`	Размер по умолчанию, кроме адаптивного переопределения для малого экрана.
`global.edgeSize.xlarge`	`96px`	Размер по умолчанию, кроме адаптивного переопределения для малого экрана.

Адаптивные переопределения для малых экранов

Название / правило	Значение / конфигурация	Применение
`global.breakpoints.small.value`	`768`	Граница малого экрана в базовой теме.
`small.edgeSize.xxsmall`	`2px`	Малый шаг для узких экранов.
`small.edgeSize.xsmall`	`3px`	Очень малый шаг для узких экранов.
`small.edgeSize.small`	`6px`	Адаптивный малый внутренний отступ.
`small.edgeSize.medium`	`12px`	Адаптивный средний внутренний отступ.
`small.edgeSize.large`	`24px`	Адаптивный большой внутренний отступ.
`global.breakpoints.medium.value`	`1536`	Следующая граница базовой точки перелома.

Базовые цвета и элементы управления

Название / правило	Значение / конфигурация	Применение
`global.colors.brand`	`#7D4CDB`	Стандартный цвет бренда Grommet, не зелёный цвет HPE.
`global.colors.focus`	`#6FFFB0`	Стандартный акцент фокуса.
`global.colors.text.light`	`#444444`	Цвет текста основного содержимого в светлой теме.
`global.colors.text.dark`	`#f8f8f8`	Цвет текста основного содержимого в тёмной теме.
`global.colors.background-front.light`	`#FFFFFF`	Светлая передняя поверхность.
`global.colors.background-front.dark`	`#444444`	Тёмная передняя поверхность.
`global.control.border.radius`	`4px`	Базовый радиус углов элементов управления.
`global.control.border.width`	`1px`	Базовая граница элементов управления.

Требования к формам и полям

Название / правило	Значение / конфигурация	Применение
`Form.value`	`Object keyed by field name`	Используйте один управляемый объект резервирования.
`Form.onChange`	`(value) => {}`	Получает обновлённый объект, а не событие DOM.
`Form.onSubmit`	`({ value, touched }) => {}`	Читайте принятое текущее значение формы.
`Form.validate`	`blur \| submit \| change`	Выберите момент запуска проверки.
`Form.errors`	`Object keyed like value`	Привязывайте удалённые ошибки или ошибки приложения к полям.

Интеграция Select и диапазона значений

Название / правило	Значение / конфигурация	Применение
`Select.options`	`String array or object array`	В примере используются строки, чтобы упростить структуру значения.
`Select.onChange`	`({ value, option }) => {}`	Не читайте event.target.value у Select.
`Select.valueKey`	`{ key, reduce } for object options`	reduce возвращает значение по ключу, а не весь объект.
`Select.labelKey`	`Property name or function`	Видимая подпись для вариантов-объектов.
`Select.onSearch`	`Function; enables search input`	При необходимости добавьте фильтрацию на стороне приложения.

Структура Meter

Название / правило	Значение / конфигурация	Применение
`value`	`number`	Отображаемая величина; не используется, если задан параметр values.
`max`	`number or numeric string`	Доступная ёмкость целиком; не путайте её со значением в процентах.
`type`	`bar \| circle \| pie \| semicircle`	Для обзора использования используйте круговую форму.
`color`	`Color identifier`	Допустимо одно значение.
`a11yTitle`	`string`	Укажите показатель и знаменатель.
`size`	`Named size or CSS dimension`	Разместите кольцевую диаграмму в пределах доступной ширины.

Дизайн-система HPE Grommet: полное руководство

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

DESIGN-hpe-grommet.md

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

Скачать руководство

Дизайн-система HPE Grommet: базовая Grommet и тема HPE

Не называйте фиолетовый цвет токеном HPE

Grommet — связанная с HPE среда React со своей базовой темой. Отдельный пакет grommet-theme-hpe экспортирует hpe для приложений, использующих оформление HPE. В этом справочнике рассматриваются базовая среда и явно настроенный пример. Фиолетовый цвет бренда и мятный цвет фокуса взяты из базовой темы; они не выдаются за актуальную палитру бренда HPE.
Из этого руководства OpenDesign

Небольшая явно заданная тема приложения

В настройке указан Arial как выбранный для приложения шрифт и повторены документированные базовые цвета бренда и фокуса. Все остальные правила оформления компонентов наследуются от Grommet. В настоящем продукте HPE вместо этого можно передать тему hpe, а затем проверить получившиеся интервалы и типографику, поскольку переопределения темы могут изменить приведённые здесь базовые значения.

Дизайн-система HPE Grommet: шкалы темы могут меняться на точке перелома

Именованные значения зависят от адаптивных настроек

Генератор базовой темы начинает с 24 пикселей. Стандартный средний интервал по краю равен 24px, но на точке перелома для малых экранов средний интервал меняется на 12px. Поэтому адаптивный внутренний отступ Box может уменьшиться, даже если в JSX по-прежнему указан medium. Учитывайте шкалу и переопределение на точке перелома вместе; не утверждайте, что medium всегда равен двадцати четырём пикселям.

Используйте Box для реальной разметки

В планировщике Box с направлением column используется как контейнер страницы, а для формы и сводки по ёмкости — адаптивный Box с направлением row/column. Форма может растягиваться, а для сводки сохраняется удобная минимальная ширина. На малых экранах диаграмма следует за элементами управления, что соответствует порядку документа.

Дизайн-система HPE Grommet: продуманная, заданная явно и удобная для чтения основа

Размер шрифта и высота строки — отдельные значения темы

Базовый генератор на основе заданного интервала создаёт шрифт размером восемнадцать пикселей с высотой строки двадцать четыре пикселя. В примере эта пара указана явно вместе со шрифтом Arial, чтобы не создавать впечатление, будто был загружен фирменный шрифт. Для заголовков используется Heading из Grommet, а для текста — Text: тема сама определяет их роли, поэтому не нужно воспроизводить внутреннюю реализацию компонентов в CSS.

Дизайн-система HPE Grommet: единый управляемый объект резервирования

Имена связывают поля с формой

Form управляет согласованной работой формы. В управляемом варианте value и onChange принадлежат вызывающему коду. name у каждого FormField и вложенного элемента ввода указывает ключ соответствующего значения. Объект резервирования содержит name и pool. Значение ползунка ёмкости хранится отдельно, поскольку оно обновляет диаграмму в реальном времени ещё до отправки формы.

Проверьте имя резервирования

У Select из дизайн-система HPE Grommet собственный формат событий

Строковые значения делают простой сценарий предсказуемым

Варианты пулов в примере — Production и Development. Поэтому управляемое значение является строкой. Если вы переходите на варианты-объекты, задайте labelKey и при необходимости valueKey с reduce, а затем храните значение в соответствии с этим выбором. В отличие от события нативного RangeInput, onChange у Select передаёт объект value/option.

Поиск и загрузка вариантов — задача приложения

Select может отображать поле поиска, если передан onSearch. Этот проп не означает, что каждый вариант автоматически фильтруется. Храните исходную коллекцию отдельно, чтобы при закрытии или очистке поиска можно было восстановить её. В примере с двумя пулами поиск намеренно не используется.

Измерителю в дизайн-система HPE Grommet нужны единицы и знаменатель

Показывайте ёмкость, а не непонятный процент

Meter получает рассчитанное использованное значение и max=100. В этом иллюстративном планировщике в выбранном пуле уже использовано 35 единиц, а предлагаемое резервирование составляет от 5 до 60 единиц. Процент совпадает с числом лишь потому, что знаменатель в демонстрации равен ста. В коде max всё равно передаётся явно, чтобы контракт данных сохранялся при изменении общей ёмкости.

Синхронизируйте диаграмму и текст

Значения для круга, подписи прогнозируемого использования и оставшихся единиц рассчитываются по одному и тому же числу на ползунке. Нативный RangeInput передаёт событие DOM, поэтому перед вычислениями преобразуйте event.target.value в Number. Иначе сложение строки с числом тридцать пять может дать визуально правдоподобный, но неверный итог.

Прокрутка документа и композиция для узкого экрана в дизайн-система HPE Grommet

Для этой страницы выберите full="min"

В Grommet значение full=true предназначено для приложения, которое самостоятельно управляет областью просмотра и внутренней прокруткой. В этом планировщике используется full="min", чтобы документ мог увеличиваться по высоте. Благодаря этому форма и сообщение проверки не оказываются зажатыми в оболочке фиксированной высоты на экране телефона.

Читайте ResponsiveContext внутри Grommet

Дочерний компонент читает текущее значение контекста и выбирает column для узких экранов, а row — для остальных. Провайдер должен оборачивать этот компонент, чтобы контекст соответствовал выбранной теме. При недостаточной ширине резервная компоновка естественным образом становится колонкой.

Размещайте метки полей над полями ввода.
Размещайте сводку по ёмкости после элементов управления в порядке исходного кода.
Позвольте ряду кнопок переноситься, не скрывая текст проверки.

Свяжите метку, ошибку и измерение в дизайн-система HPE Grommet

Укажите значение каждого числового показателя

У ползунка есть постоянная метка и видимые единицы измерения. Для круга задаётся a11yTitle с прогнозируемым использованием и общей ёмкостью. Соседний текст повторяет те же числа, поэтому информация не зависит от цветной дуги. Текст ошибки описывает проблему с резервированием и остаётся рядом с соответствующим полем.

Ясно обозначьте локальный результат

Отправьте пустое имя и проверьте, что появилась ошибка об обязательном поле.
Введите имя, выберите пул и измените распределение.
Подготовьте план и убедитесь, что локальный снимок содержит выбранный пул и числовое значение в единицах.

Соберите полную композицию Grommet в дизайн-система HPE Grommet

Установите фреймворк и зависимость для стилизации

Установите grommet, styled-components и среду выполнения React в клиентский проект. Настройка монтирует Grommet, а затем дочерний компонент, использующий ResponsiveContext, управляемую Form, FormField/TextInput/Select, RangeInput и Meter. Используйте свойство label у Button, а не дочерние элементы, чтобы поведение кнопки со стилизованной меткой оставалось явным.

Примеры компонентов дизайн-система HPE Grommet

Полноценный автономный интерактивный пример

Сохраните весь документ как index.html и откройте его в браузере. Независимая интерпретация базовых размеров и цветов Grommet для HTML/CSS, с явно выбранным шрифтом Arial; это не отдельная тема HPE.

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>

Расчёты ёмкости используют показанный пул-пример. Автономная компоновка — независимая реализация HTML; в нативном примере выбрана базовая тема Grommet, а не отдельная тема HPE.

Полный пример нативной реализации

Полная реализация из раздела настройки собрана здесь вместе с пояснениями к отдельным частям API. Следуйте документированным требованиям к пакетам и сборке из раздела настройки.

jsx

// 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 <Box pad="medium" gap="medium" width={{max:'large'}} margin="auto">
 <Heading level={1} margin="none">Plan a reservation</Heading>
 <Text>Local capacity model. No infrastructure is provisioned.</Text>
 <Box direction={size==='small'?'column':'row'} gap="large">
 <Box flex><Form value={value} onChange={setValue} validate="submit" onSubmit={({value:accepted})=>setPlan({...accepted,units})}>
 <FormField name="name" htmlFor="reservation-name" label="Reservation name" required validate={name=>String(name || '').trim().length<3?'Use at least three characters':undefined}>
 <TextInput name="name" id="reservation-name"/></FormField>
 <FormField name="pool" htmlFor="pool" label="Capacity pool"><Select name="pool" id="pool" options={['Production','Development']}/></FormField>
 <Box gap="small" margin={{vertical:'medium'}}><label htmlFor="units">Requested allocation: {units} units</label>
 <RangeInput id="units" min={5} max={60} step={5} value={units} onChange={event=>setUnits(Number(event.target.value))}/></Box>
 <Button type="submit" primary label="Prepare plan"/>
 </Form></Box>
 <Box align="center" gap="small" pad="medium" background="light-2" round="small">
 <Meter type="circle" value={used} max={100} size="small" thickness="small" color="brand" a11yTitle={`${used} of 100 units projected usage`}/>
 <Text weight="bold">{used} / 100 units used</Text><Text>{100-used} units remaining</Text>
 </Box></Box>
 {plan&&<Box background="light-2" pad="medium" role="status"><Text>Local plan: {plan.name} · {plan.pool} · {plan.units} units</Text></Box>}
 </Box>
}
createRoot(document.getElementById('root')).render(<Grommet theme={theme} themeMode="light" full="min"><Planner/></Grommet>);

Клиентский main.jsx для проекта с корневым элементом. Базовая тема Grommet и явно заданное переопределение шрифта/бренда приложения. Тема HPE не подразумевается автоматически. Сверено с официальной документацией API; нативная компиляция здесь не проверялась.

Переключитесь на фирменную тему HPE намеренно

Используйте отдельный пакет только в том случае, если это целевая дизайн-система; сверьте значения с установленной версией.

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>

Приведённая выше справочная таблица описывает базовую тему, а не это необязательное переопределение.

Значения Select в виде объектов

Храните идентификатор пула, отображая его название.

jsx

<Select options={[{id:'prod',label:'Production'},{id:'dev',label:'Development'}]}
 labelKey="label" valueKey={{key:'id',reduce:true}}
 value={poolId} onChange={({value})=>setPoolId(value)} />