# HPE Grommet デザインシステム ## HPE Grommet デザインシステムのインターフェースプレビュー 割り当て案を調整し、検証済みのローカルプランを作成します。 ## HPE Grommet デザインシステムのデザインリファレンス baseSpacing=24 と scale=6 を使用して生成した Grommet v2 の基本テーマです。これらは 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 | HPE グリーンではなく、Grommet の標準ブランドカラー。 | | 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 | 制御対象の予約オブジェクトを1つ使用してください。 | | 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 }) => {} | Select では event.target.value を読み取らないでください。 | | 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 | 利用状況の概要には circle を使用します。 | | 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 に変わります。そのため、レスポンシブな padding を使う Box は、JSX に medium と記述されていても縮小することがあります。スケールとブレークポイントの上書きをあわせて確認し、medium が常に 24 ピクセルだと断言しないでください。 関連する仕様を確認する ### 実際のレイアウトには Box を使う このプランナーでは、ページに column の Box を使い、フォームと容量の概要にはレスポンシブな row/column の Box を使います。フォームは伸縮し、概要には実用的な最小幅が保たれます。小さな画面では、ドキュメント上の順序に沿って、グラフがコントロールの後に表示されます。 関連する仕様を確認する ## HPE Grommet デザインシステム：読みやすさを意識した基準値を明示する ### フォントサイズと行の高さは別々のテーマ値 基本ジェネレーターは、間隔の入力値から 18 ピクセルのフォントサイズと 24 ピクセルの行の高さを導きます。この例では、その組み合わせと Arial を明示的に使用し、独自のブランドフォントをダウンロードしたかのような印象を与えないようにしています。見出しには Grommet の Heading、本文には Text を使うことで、CSS 内にコンポーネントの内部実装を再現せずに、テーマにそれぞれの役割を解決させます。 関連する仕様を確認する ## HPE Grommet デザインシステム：予約情報を1つのオブジェクトで管理する ### name でフィールドと値を紐付ける フォーム全体の連携には Form を使います。制御するパターンでは、value と onChange を呼び出し元が管理します。各 FormField と子入力要素に設定する name は、対応する値のキーを指定します。この予約情報オブジェクトには name と pool が含まれています。容量スライダーは、送信前に図をリアルタイムで更新するため、別の数値として保持します。 関連する仕様を確認する ### 予約名を検証する name="name" を指定した必須の FormField で、TextInput id="reservation-name" を囲みます。htmlFor で表示ラベルと入力欄を関連付けます。カスタムバリデーターは、前後の空白を除いた値が3文字未満の場合に、具体的なエラーを返します。入力されていない空のフォームを最初からエラー表示にしないよう、validation は submit に設定します。 関連する仕様を確認する ## HPE Grommet デザインシステム：Select のイベント形式は独自 ### シンプルなケースでは文字列を使う サンプルの pool オプションは Production と Development です。そのため、制御対象の値は文字列になります。オブジェクト形式のオプションに切り替える場合は、labelKey と、必要に応じて reduce を使った valueKey を設定し、その選択に合わせて保存する値を統一してください。Select の onChange が公開するのは value/option オブジェクトで、ネイティブの range input イベントとは異なります。 関連する仕様を確認する ### 検索とオプションの読み込みはアプリケーション側で処理する onSearch が指定されている場合、Select に検索フィールドが表示されます。ただし、この prop を指定しても、すべての option が自動的に絞り込まれるわけではありません。検索を閉じたりクリアしたりしたときに元に戻せるよう、絞り込み前のデータは別に保持してください。2つの候補プールを使うサンプルでは、意図的に検索を省略しています。 関連する仕様を確認する ## HPE Grommet デザインシステム：Meter には単位と分母が必要 ### 意味がわからない割合ではなく、容量を表す Meter には、予測使用量と max=100 を渡します。この例示用プランナーでは、サンプルの pool ですでに35単位が使用されており、新たな予約量は5から60まで指定できます。デモの分母が100であるため、割合と数値が偶然一致します。合計容量が変わってもデータの契約を維持できるよう、コードでは max を明示的に渡しています。 関連する仕様を確認する ### グラフとテキストの値を連動させる 円形グラフ、予測使用量のラベル、残りの容量は、同じスライダー値から算出します。ネイティブの RangeInput は DOM イベントを返すため、計算の前に event.target.value を Number に変換してください。変換しないと、文字列に 35 を加算して、見た目はもっともらしくても誤った合計になることがあります。 関連する仕様を確認する ## HPE Grommet デザインシステム：ドキュメントのスクロールと狭い画面での構成 ### このページには full="min" を使う Grommet の full=true は、ビューポートと内部スクロールをアプリケーション側で管理する場合を想定しています。このプランナーでは full="min" を使い、ドキュメントが伸びるようにします。これにより、スマートフォンでフォームや検証メッセージが固定高さのシェル内に閉じ込められるのを防げます。 関連する仕様を確認する ### Grommet 内で ResponsiveContext を読み取る 子コンポーネントで現在のコンテキストを読み取り、小さい画面では column、それ以外では row を選択します。テーマに応じたコンテキストを取得するには、その子コンポーネントをプロバイダーで囲む必要があります。利用可能な幅が狭い場合、フォールバックのレイアウトは自然な縦並びになります。 - フィールドのラベルは入力欄の上に配置します。 - 容量の概要は、ソース上でコントロールの後に配置します。 - 検証テキストを隠さずに、アクション行を折り返せるようにします。 関連する仕様を確認する ## HPE Grommet デザインシステム：ラベル、エラー、測定値を関連付ける ### 数値表示には必ず意味を添える 範囲コントロールには、常に表示されるラベルと単位を付けます。円形グラフの a11yTitle には、予測使用量と総容量を含めます。色付きの弧だけに情報を頼らないよう、近くのテキストにも同じ数値を表示します。エラーテキストでは予約に関する問題を具体的に示し、該当するフィールドの近くに表示します。 関連する仕様を確認する ### この画面内での結果を明示する 「プランを準備」すると、検証済みフォームと現在の割り当てのスナップショットがローカルに保存されます。インフラストラクチャはプロビジョニングされません。有効な内容を送信した後にのみ結果が変わり、スライダーの変更は提案として扱われます。この違いにより、準備済みのプランと現在編集中の下書きを比較できます。 1. 名前を空のまま送信し、必須項目のエラーが表示されることを確認してください。 2. 名前を入力し、プールを選択して割り当てを調整してください。 3. プランを準備し、ローカルのスナップショットに選択したプールと数値の単位が含まれていることを確認してください。 関連する仕様を確認する ## HPE Grommet デザインシステム Grommetの構成一式をマウントする ### フレームワークとスタイル用ピア依存パッケージをインストールする クライアントプロジェクトに、styled-componentsとReactランタイムとともにgrommetをインストールします。Grommetをマウントし、その後にResponsiveContextを利用する子要素、制御されたForm、FormField/TextInput/Select、RangeInput、Meterを配置します。Buttonではchildrenではなくlabelを使い、デフォルトのラベルスタイル付きボタンの動作を明示してください。 関連する仕様を確認する ## 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に基づきます。ネイティブの例では、別途提供されるHPEテーマではなくベースGrommetを選択しています。 ### 完全なネイティブ実装のエントリ セットアップの完全な実装を、焦点を絞った 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)} /> ``` コードリファレンス - 呼び出し元のコンポーネントでuseStateを使ってpoolId/setPoolIdを宣言します。 - reduceを有効にすると、保存される値はオブジェクトではなくIDになります。 ## 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}>