レイヤー
現行コードでは、重なりを持つ6コンポーネントがそれぞれ個別の z-index 数値を CSS に直接書いています。
| コンポーネント | 現在の z-index | ファイル |
|---|---|---|
| Dropdown | 20 | src/components/atoms/Dropdown/Dropdown.tsx |
| SearchDropDown | 50 | src/components/atoms/SearchDropDown/SearchDropDown.tsx |
| DatePicker | 50 | src/components/atoms/DatePicker/DatePicker.tsx |
| PopupMenu | 50 | src/components/atoms/PopupMenu/PopupMenu.tsx |
| Dialog | 1000 | src/components/atoms/Dialog/Dialog.tsx |
| Toast | 1100 | src/components/atoms/Toast/Toast.tsx |
数値が各コンポーネントに閉じているため、「Dialog の上に Toast を出したい」「Dropdown を開いたまま Dialog を開くとどちらが手前か」といった組み合わせを、共有された規則なしに数値の大小だけで判断しています。実際、Toast(1100) が Dialog(1000) より高い値になっているのは意図した設計ではなく、各コンポーネントが独立に決めた結果の偶然です。
一覧（計画中のトークン）
Section titled “一覧（計画中のトークン）”Discussion #63 で決めた6つの用途別カテゴリです。値は他システム（Carbon 等）を参考にした暫定案で、実装時に確定します。
| トークン | 用途 | 現行の対応コンポーネント |
|---|---|---|
zIndex.dropdown |
インライン展開する選択系 | Dropdown |
zIndex.sticky |
スクロールに追従する固定要素 | （未実装） |
zIndex.overlay |
モーダルの背景幕 | Dialog の背景オーバーレイ |
zIndex.popover |
クリックで開く浮遊パネル | SearchDropDown / DatePicker / PopupMenu |
zIndex.dialog |
操作をブロックする最前面の面 | Dialog |
zIndex.toast |
通知（dialog より前面） | Toast |
順序は dropdown < sticky < overlay < popover < dialog < toast を想定しています。Toast を最前面にするのは、Dialog 操作中でも通知が隠れてはいけないためです。
- 新しい重なりを持つ部品を作るときは、独自の数値を書かず、6カテゴリのどれに該当するか判断してから割り当てます。どれにも当てはまらない場合はカテゴリの追加を検討します（安易に増やさない）。
- エレベーション の段階と対応させます。
zIndex.dialogを使う部品はelevation.highを、zIndex.popoverを使う部品はelevation.floatingを使うのが基本です。
やってはいけないこと
Section titled “やってはいけないこと”z-index: 50のようにコンポーネント側で数値を直接書かない（実装後はtheme.zIndex.*を参照します）。- 見た目の都合で数値を大きくして解決しない（例: 「重なりがおかしいので9999にする」）。カテゴリの割り当てが誤っている可能性を疑います。
- 1つのコンポーネントで複数のカテゴリを跨ぐ重なりを作らない。