# Дизайн-система HPE Grommet ## Предпросмотр интерфейса дизайн-системы HPE Grommet Измените предлагаемое распределение ресурсов и подготовьте проверенный локальный план. ## Дизайн-система HPE Grommet: справочник по оформлению Базовая тема Grommet v2, созданная с параметрами baseSpacing=24 и scale=6; это не значения grommet-theme-hpe. В нативном стартовом примере явно заданы Arial и показанные цвета бренда и фокуса — это решения для темы приложения. ### Базовая шкала размеров краёв | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | 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: полное руководство Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система HPE Grommet: базовая Grommet и тема HPE ### Не называйте фиолетовый цвет токеном HPE > Grommet — связанная с HPE среда React со своей базовой темой. Отдельный пакет grommet-theme-hpe экспортирует hpe для приложений, использующих оформление HPE. В этом справочнике рассматриваются базовая среда и явно настроенный пример. Фиолетовый цвет бренда и мятный цвет фокуса взяты из базовой темы; они не выдаются за актуальную палитру бренда HPE. Прочитать вспомогательную спецификацию ### Небольшая явно заданная тема приложения В настройке указан 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. Значение ползунка ёмкости хранится отдельно, поскольку оно обновляет диаграмму в реальном времени ещё до отправки формы. Прочитать вспомогательную спецификацию ### Проверьте имя резервирования Обязательное поле FormField с name="name" оборачивает TextInput id="reservation-name". htmlFor связывает видимую метку с полем. Пользовательский валидатор возвращает конкретную ошибку, если длина значения после удаления пробелов меньше трёх символов. Установите для validation значение submit, чтобы пустая нетронутая форма не встречала пользователя сообщением об ошибке. Прочитать вспомогательную спецификацию ## У 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 с прогнозируемым использованием и общей ёмкостью. Соседний текст повторяет те же числа, поэтому информация не зависит от цветной дуги. Текст ошибки описывает проблему с резервированием и остаётся рядом с соответствующим полем. Прочитать вспомогательную спецификацию ### Ясно обозначьте локальный результат Кнопка Prepare plan сохраняет локальный снимок проверенной формы и текущего распределения. Инфраструктура при этом не создаётся. Результат меняется только после успешной отправки формы, а изменения ползунка остаются предложением. Это различие полезно, когда нужно сравнить подготовленный план с редактируемым черновиком. 1. Отправьте пустое имя и проверьте, что появилась ошибка об обязательном поле. 2. Введите имя, выберите пул и измените распределение. 3. Подготовьте план и убедитесь, что локальный снимок содержит выбранный пул и числовое значение в единицах. Прочитать вспомогательную спецификацию ## Соберите полную композицию 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. ``` 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.

``` Справочник по коду - Расчёты ёмкости используют показанный пул-пример. Автономная компоновка — независимая реализация HTML; в нативном примере выбрана базовая тема Grommet, а не отдельная тема HPE. ### Полный пример нативной реализации Полная реализация из раздела настройки собрана здесь вместе с пояснениями к отдельным частям API. Следуйте документированным требованиям к пакетам и сборке из раздела настройки. ``` // 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)} /> ``` Справочник по коду - Объявите poolId/setPoolId с помощью useState в вызывающем компоненте. - При включённом reduce сохраняется идентификатор, а не объект. ## Настройка агента дизайн-система HPE Grommet ### Отправная точка для реализации Клиентский main.jsx для проекта с корневым элементом. Базовая тема Grommet и явно заданное переопределение шрифта/бренда приложения. Тема HPE не подразумевается автоматически. Сверено с официальной документацией API; нативная компиляция здесь не проверялась. ``` // 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}>