承認ステップApprovalStepsBeta
Approval-route timeline: each step's state (pending / current / approved / rejected / skipped) maps to a tone, icon, and accessible label, with actor, timestamp, and comment. For expense, ringi, and review approval workflows. Built on Timeline.
プレビュー
状態とバリエーション
経路の見え方は steps の各段の state と variant で決まります。state は印の色・アイコン・文字ラベルの3つを同時に切り替えるので、色が見えない人にも段の意味が伝わります。stateLabels は段の文字を差し替える口で、読み上げの文にも同じ文字が入ります。
まだ誰も動いていない経路
全部の段が pending のときは、これから誰の手を通るかだけが並びます。申請ボタンを押す前に経路を見せる画面がこれです。actor も timestamp も無いので、段の名前だけが残ります。
- 申請これから
- 一次承認（上長）これから
- 経理確認これから
- 支払これから
飛ばした段
金額が小さいなどの理由で承認が要らなかった段は skipped にします。消さずに残すのは、あとから経路を読む人に「省いた」と「まだ来ていない」を見分けてもらうためです。理由は actor に書けます。
- 申請承認
- 一次承認（上長）省略
- 経理確認確認中
- 支払待ち
密度を上げる
variant="compact" は文字を一段小さくします。経路が主役ではなく、明細の脇や一覧の行の中に添えるときに使います。段の数が多い経路でも縦に伸びすぎません。
- 申請承認
- 一次承認（上長）承認
- 経理確認確認中
- 支払待ち
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| steps | ApprovalStep[] | - | Each step: { label, state, actor?, timestamp?, comment? }. |
| state (per step) | "pending" | "current" | "approved" | "rejected" | "skipped" | - | Maps to a marker tone, icon, and text label (state is never colour-only). |
| stateLabels | Partial<Record<state, string>> | - | Localizable state text (also used in each step's aria-label). |
| variant | "default" | "compact" | "default" | Density. |
| className | string | - | Additional CSS class names. |
Usage
import { ApprovalSteps, type ApprovalStep } from "@gunjo/ui"
const steps: ApprovalStep[] = [
{ label: "申請", state: "approved", actor: "山田 太郎", timestamp: "5/20 10:12" },
{ label: "一次承認（上長）", state: "rejected", actor: "佐藤 部長",
timestamp: "5/20 14:40", comment: "勘定科目を会議費に修正のうえ再申請してください。" },
{ label: "経理確認", state: "current", actor: "経理部" },
{ label: "支払", state: "pending" },
]
export function Example() {
return (
<ApprovalSteps steps={steps}
stateLabels={{ approved: "承認", rejected: "差戻し", current: "確認中", pending: "待ち" }} />
)
}