コントロールと状態

sm、md、lg を選択

標準的で密度の高い画面には md、タッチ操作やタスクの強調に大きなターゲットが必要なら lg を使います。タイトルバーやツールバーのように、タスクそのものではなくウィンドウの構造に付く高密度なアプリケーションクロムには sm を使います。視覚的な階層を表すためだけに一つの操作行でサイズを混在させず、intent と appearance を使ってください。

完全なサイズレシピ

サイズは高さ、左右の内側余白、間隔、文字サイズ、行間をまとめて変更します。

タスク内でコンポーネントを整列

隣接するコンポーネントには同じ uiSize を設定します。フィールド系コントロールは TRField.Root にサイズを設定し、ラベル、説明、エラー、コントロールのレシピを揃えてください。

操作状態を保つ

• ホバーは利用可能な操作を予告しますが、唯一の手がかりにはしません。
• 押下は即時の入力フィードバック、選択は入力後も残る決定です。
• 無効化は利用できない操作を止めます。理由が明らかでない場合は見える説明を加えてください。
• フォーカスはキーボード操作中も見え、切り取られないようにします。

状態を独自の色だけで表さず、コンポーネントのプロパティと状態属性を使ってください。

タッチターゲットを保つ

大きなレシピを配置できるタッチ中心のタスクには lg を選びます。sm のレシピは快適なタッチターゲットより小さいため、ポインタで操作するクロムに限って使ってください。他の場所で小さな見た目が必要でも、操作領域を縮めたりターゲット同士を近づけたりせず、周囲のレイアウト間隔を広げてください。

実装

ボタンとフィールドが同じスケールを共有できるよう、ファウンデーショントークンとコンポーネントのスタイルをグローバルスタイルシートに追加してください。

@import "@tinyrack/ui/core.css";
@import "@tinyrack/ui/components/button.css";
@import "@tinyrack/ui/components/field.css";

その後でコンポーネントをレンダリングします。

import { TRButton } from '@tinyrack/ui/components/button';
import { TRField } from '@tinyrack/ui/components/field';

<TRField.Root uiSize="md"><TRField.Label>ラック名</TRField.Label><TRField.Control /></TRField.Root>
<TRButton appearance="solid" intent="primary" uiSize="md">ラックを保存</TRButton>

プロダクト全体の密度を変える場合だけ、グローバルな --tinyrack-control-* 寸法を上書きします。意図的な局所例外には、文書化されたコンポーネントの --tr-* 変数を使い、高さだけを変更しないでください。