Skip to content
fandhe-frontendcore v0.4.3
GitHub

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

大サイズの例補足説明も大きくなります。

引数表

引数型既定値説明
severitySeveritySeverity::Info重要度(info/warning/error)。修飾 class として表す。
title&str-必須。常に出力するタイトル文言。
descriptionOption<&str>None省略可能な説明文。None のときはパート要素自体を出力しない。
iconOption<Node>None省略可能なアイコンスロット。icon::bell 等の戻り値をそのまま渡す。None のときはアイコンのパート要素自体を出力しない。
sizeSizeSize::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 には依存しません。