Alert
fandhe-frontend-wireframe-ui の横長の警告・通知バナーのプレースホルダーです。アイコン + タイトル + 任意の説明文からなる、画面設計図で「ここに警告・通知が出る」という配置を示すための部品です。API は alert(severity, title, description, icon, size) の 5 引数です(詳細は下の引数表を参照)。props 構造体はありません。
原案の参考: blocks.pm のカタログ(ライセンス上の理由でスクリーンショットは掲載しません)が、Alert は blocks.pm に対応部品を持たない wireframe-ui 独自追加の部品です。
本部品は表示専用のため、role="alert"・aria-live は出力せず、閉じるボタンも持ちません。実際にアクセシブルな alert が必要な場合は Alert(Themes) を検討してください。
Demo
3 段の重要度(アイコン + タイトル + 説明文)
Info
新しい機能が利用できます設定画面から有効化できます。
Warning
ストレージ容量が残りわずかです空き容量が 10% を下回りました。
Error
保存に失敗しましたネットワーク接続を確認してください。
タイトルのみ(説明文省略)
更新を確認しています
アイコンなし
確認が必要な項目があります入力内容を見直してください。
Sm
小サイズの例補足説明も小さくなります。
Lg
大サイズの例補足説明も大きくなります。
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| severity | Severity | Severity::Info | 重要度(info/warning/error)。修飾 class として表す。 |
| title | &str | - | 必須。常に出力するタイトル文言。 |
| description | Option<&str> | None | 省略可能な説明文。None のときはパート要素自体を出力しない。 |
| icon | Option<Node> | None | 省略可能なアイコンスロット。icon::bell 等の戻り値をそのまま渡す。None のときはアイコンのパート要素自体を出力しない。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。 |
原案差分メモ
- 独自追加部品: blocks.pm に対応部品がないため、Figma プロパティの転写対象がなく、
docs/design/wireframe-ui-architecture.md§6 の汎用変換規約から独立設計しました。 - 重要度はモノクロの 3 段差で表す:
Severity(info/warning/error)は色ではなく、地色・枠の太さ・反転配色の組み合わせで区別します。Error は背景・枠・文字を反転させ、Warning は開始辺の枠を太くします。 Severityは部品ローカルの型:crate::propsへは昇格しません。Phase 6 の兄弟イシューが並行して触る共有ファイルであるため、他部品での需要が見えるまではalert.rs内に留めています(tooltip::TooltipSideと同じ判断)。- アイコンは
Option<Node>スロット: 重要度から自動でアイコンを選ばず、呼び出し側が任意の既存アイコン(例:icon::bell)を渡します。link・file_dropと同じ規約です。 size引数を追加: イシュー本文の想定引数は重要度・タイトル・説明文の 3 つでしたが、既存の全部品がSize引数を受け取る規約に合わせて追加しました。- 対話セマンティクスは一切出力しない:
role="alert"・aria-live・aria-*・tabindex・閉じるボタン(<button>)を出力しません。 - スクリーンショットは載せていません(イシュー #2602)。
- 配色はグレースケールのトークンのみで、
ColorPaletteには依存しません。