# HPE Grommet Design System — OpenDesign Application Guide Model a capacity reservation with Grommet’s layout primitives, controlled form fields and numeric meters. Use its theme scale deliberately, and keep the base Grommet theme distinct from the separately installed HPE theme. Independent base Grommet implementation reference. HPE branded theme adoption is shown separately. Capacity numbers are fictional local data, not infrastructure metrics or provisioning. ## Source Reference - **Theme boundary:** Base Grommet and grommet-theme-hpe are distinct ([source](https://github.com/grommet/grommet-theme-hpe)) - **Default scale:** Generated from 24px base spacing ([source](https://raw.githubusercontent.com/grommet/grommet/master/src/js/themes/base.js)) - **Form state:** Controlled value object with onChange ([source](https://v2.grommet.io/form)) - **Select callback:** Destructured value and option ([source](https://v2.grommet.io/select)) - **Meter denominator:** Explicit max property ([source](https://v2.grommet.io/meter)) - **Page sizing:** full="min" allows document scrolling ([source](https://v2.grommet.io/grommet)) - **Responsive layout:** ResponsiveContext exposes theme breakpoint names ([source](https://v2.grommet.io/responsivecontext)) ## Design Reference Grommet v2 base theme generated with baseSpacing=24 and scale=6; these are not grommet-theme-hpe values. The native starter explicitly sets Arial and the demonstrated brand/focus colors as application theme choices. ### Default edge-size scale [Official reference](https://raw.githubusercontent.com/grommet/grommet/master/src/js/themes/base.js) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | global.edgeSize.hair | 1px | Default size outside the small responsive override. | | global.edgeSize.xxsmall | 3px | Default size outside the small responsive override. | | global.edgeSize.xsmall | 6px | Default size outside the small responsive override. | | global.edgeSize.small | 12px | Default size outside the small responsive override. | | global.edgeSize.medium | 24px | Default size outside the small responsive override. | | global.edgeSize.large | 48px | Default size outside the small responsive override. | | global.edgeSize.xlarge | 96px | Default size outside the small responsive override. | ### Small responsive overrides [Official reference](https://raw.githubusercontent.com/grommet/grommet/master/src/js/themes/base.js) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | global.breakpoints.small.value | 768 | Small breakpoint boundary in the base theme. | | small.edgeSize.xxsmall | 2px | Small-screen fine spacing. | | small.edgeSize.xsmall | 3px | Small-screen xsmall spacing. | | small.edgeSize.small | 6px | Responsive small padding. | | small.edgeSize.medium | 12px | Responsive medium padding. | | small.edgeSize.large | 24px | Responsive large padding. | | global.breakpoints.medium.value | 1536 | Next base breakpoint boundary. | ### Base colors and controls [Official reference](https://raw.githubusercontent.com/grommet/grommet/master/src/js/themes/base.js) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | global.colors.brand | #7D4CDB | Default Grommet brand, not HPE green. | | global.colors.focus | #6FFFB0 | Default focus accent. | | global.colors.text.light | #444444 | Light-theme body text. | | global.colors.text.dark | #f8f8f8 | Dark-theme body text. | | global.colors.background-front.light | #FFFFFF | Front light surface. | | global.colors.background-front.dark | #444444 | Front dark surface. | | global.control.border.radius | 4px | Base control corner. | | global.control.border.width | 1px | Base control border. | ### Form and field contract [Official reference](https://v2.grommet.io/form) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | Form.value | Object keyed by field name | Use a single controlled reservation object. | | Form.onChange | (value) => {} | Receives the updated object, not a DOM event. | | Form.onSubmit | ({ value, touched }) => {} | Read the accepted current form value. | | Form.validate | blur \| submit \| change | Choose when validation runs. | | Form.errors | Object keyed like value | Attach remote or application errors to fields. | ### Select and range integration [Official reference](https://v2.grommet.io/select) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | Select.options | String array or object array | The example uses strings to keep the value shape simple. | | Select.onChange | ({ value, option }) => {} | Do not read event.target.value for Select. | | Select.valueKey | { key, reduce } for object options | reduce returns the keyed value instead of the full object. | | Select.labelKey | Property name or function | Visible label for object options. | | Select.onSearch | Function; enables search input | Provide application filtering when needed. | ### Meter anatomy [Official reference](https://v2.grommet.io/meter) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | value | number | Amount represented; ignored when values is supplied. | | max | number or numeric string | Total available capacity; do not mistake value for percentage. | | type | bar \| circle \| pie \| semicircle | Use circle for the utilization overview. | | color | Color identifier | Valid with a single value. | | a11yTitle | string | Describe the measure and denominator. | | size | Named size or CSS dimension | Keep ring inside available width. | ## HPE Grommet Design System Base Grommet and the HPE theme ### Do not label purple as an HPE token Grommet is an HPE-associated React framework with its own base theme. The separate grommet-theme-hpe package exports hpe for applications adopting HPE design styling. This reference teaches the base framework and explicitly configured example. Its purple brand and mint focus color come from the base theme; they are not presented as the current HPE branded palette. [Supporting specification](https://github.com/grommet/grommet-theme-hpe) ### A small explicit application theme The setup supplies Arial as an application font choice and repeats the documented base brand and focus colors. All other component rules inherit from Grommet. A real HPE product can instead pass the approved hpe theme, then verify the resulting spacing and typography because theme overrides can change the base values listed here. [Supporting specification](https://v2.grommet.io/grommet) ## HPE Grommet Design System Theme scales can change at a breakpoint ### Named values are responsive decisions The base generator starts at 24 pixels. Default medium edge spacing is 24px, but the small breakpoint changes medium to 12px. A Box using responsive padding can therefore shrink even when the JSX still says medium. Read the scale and breakpoint override together; do not promise that medium is always twenty-four pixels. [Supporting specification](https://raw.githubusercontent.com/grommet/grommet/master/src/js/themes/base.js) ### Use Box for the actual layout The planner uses a column Box as its page and a responsive row/column Box for the form and capacity summary. The child form can grow while the summary keeps a useful minimum width. On small screens the chart follows the controls, matching the document order. [Supporting specification](https://v2.grommet.io/box) ## HPE Grommet Design System A deliberately specified readable baseline ### Font size and line height are separate theme values The base generator derives an eighteen-pixel font with a twenty-four-pixel line height from its spacing input. The example explicitly uses that pair with Arial to avoid implying that a proprietary brand font was downloaded. Headings use Grommet Heading and text uses Text, allowing the theme to resolve their roles instead of reproducing component internals in CSS. [Supporting specification](https://raw.githubusercontent.com/grommet/grommet/master/src/js/themes/base.js) ## HPE Grommet Design System One controlled reservation object ### Names join fields to the form Form owns the coordinated form contract. In the controlled pattern, value and onChange belong to the caller. The name on each FormField and child input identifies the corresponding value key. Our reservation object contains name and pool. The capacity slider is held as a separate number because it drives a live diagram before submission. [Supporting specification](https://v2.grommet.io/form) ### Validate the reservation name A required FormField with name="name" surrounds TextInput id="reservation-name". htmlFor connects the visible label. The custom validator returns a concrete error if the trimmed value is shorter than three characters. Set validation to submit so an untouched empty form does not greet the reader with an error. [Supporting specification](https://v2.grommet.io/formfield) ## HPE Grommet Design System Select has its own event shape ### Strings keep the simple case predictable The sample pool options are Production and Development. Their controlled value is therefore a string. If moving to object options, set labelKey and optionally valueKey with reduce, then keep the stored value consistent with that choice. Select onChange exposes a value/option object, unlike the native range input event. [Supporting specification](https://v2.grommet.io/select) ### Search and option loading are application work Select can display a search field when onSearch is supplied. That prop does not mean every option has automatically been filtered. Maintain the unfiltered source collection separately so closing or clearing a search can restore it. For two pools the sample intentionally omits search. [Supporting specification](https://v2.grommet.io/select) ## HPE Grommet Design System A meter needs units and a denominator ### Represent capacity, not an unexplained percentage Meter receives the projected used amount and max=100. In this illustrative planner the sample pool has 35 units already used and the proposed reservation ranges from 5 to 60. The percentage happens to match the number because the demonstration denominator is one hundred. The code still passes max explicitly so the data contract survives a different total. [Supporting specification](https://v2.grommet.io/meter) ### Keep the chart and text synchronized The circle, projected usage label and remaining units are derived from the same numeric slider value. Native RangeInput emits a DOM event, so convert event.target.value to Number before arithmetic. Otherwise adding a string to thirty-five can produce a visually plausible but incorrect total. [Supporting specification](https://v2.grommet.io/rangeinput) ## HPE Grommet Design System Document scrolling and a narrow-screen composition ### Choose full="min" for this page Grommet full=true is intended for an application that controls its own viewport and inner scrolling. This planner uses full="min" so the document can grow. That prevents the form and its validation message being trapped under a fixed-height shell on a phone. [Supporting specification](https://v2.grommet.io/grommet) ### Read ResponsiveContext inside Grommet A child component consumes the current context and chooses column for small, row otherwise. The provider must wrap that child so its context represents the chosen theme. The fallback layout remains a natural column when the available width is narrow. - Keep the field labels above their inputs. - Place the capacity summary after the controls in source order. - Allow the action row to wrap without hiding validation text. [Supporting specification](https://v2.grommet.io/responsivecontext) ## HPE Grommet Design System Connect label, error and measurement ### Give every numeric display its meaning The range control has a persistent label and a visible unit. The circle receives an a11yTitle containing projected usage and total capacity. Nearby text exposes the same numbers so information does not depend on a colored arc. Error copy names the reservation problem and remains next to its field. [Supporting specification](https://v2.grommet.io/formfield) ### Make the local outcome explicit Prepare plan stores a local snapshot of the validated form and the current allocation. It does not provision infrastructure. The result changes only after valid submission, while slider changes remain a proposal. This distinction is useful for comparing a prepared plan with the currently edited draft. 1. Submit an empty name and verify the required-field error. 2. Enter a name, choose a pool and adjust the allocation. 3. Prepare the plan and verify that the local snapshot contains the selected pool and numeric units. [Supporting specification](https://v2.grommet.io/form) ## HPE Grommet Design System Mount a complete Grommet composition ### Install the framework and its styling peer Install grommet with styled-components and the React runtime in a client project. The setup mounts Grommet, then a child consuming ResponsiveContext, a controlled Form, FormField/TextInput/Select, RangeInput and Meter. Use Button label rather than children so the default label-styled button behavior remains explicit. [Supporting specification](https://github.com/grommet/grommet) ## Component Examples ### Complete standalone interactive specimen Save the complete document as index.html and open it in a browser. Independent HTML/CSS interpretation of base Grommet dimensions and colors, with an explicitly chosen Arial font; not the separate HPE theme. ```html 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.

``` [Code reference](https://v2.grommet.io/grommet) - Capacity calculations use the displayed sample pool. The standalone layout is independent HTML; the native example selects base Grommet rather than the separate HPE theme. ### Complete native implementation entry The complete implementation from setup, collected here alongside the focused API explanations. Follow the documented package and build prerequisites in setup. ```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 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)} /> ``` [Code reference](https://v2.grommet.io/select) - Declare poolId/setPoolId with useState in the calling component. - With reduce enabled the stored value is the id, not the object. ## Implementation Starting Point Client main.jsx for a project with a root element. Base Grommet plus an explicitly declared application font/brand override. No HPE theme is silently assumed. API checked against official documentation; native compilation has not been verified here. ```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 Plan a reservation Local capacity model. No infrastructure is provisioned. setPlan({...accepted,units})}> String(name || '').trim().length<3?'Use at least three characters':undefined}>