SmartHR Design System

DropdownMenuButton

DropdownMenuButtonは複数の操作をまとめて提供するためのコンポーネントで、パネル内には操作がリスト形式で表示されます。

使用上の注意

操作の個数

レイアウトの一貫性やユーザーの利便性に応じて適切な個数を設定してください。ひと目で把握できるようにできるだけ少ない個数が望ましいです。

ただし以下の場合には操作が1つの場合でも、あえてドロップダウンパネルの中に配置することがあります。

  • 類似する画面とのレイアウトの一貫性を保ちたいとき

操作の順序

使用頻度が高い順を推奨しますが、破壊的なアクション（例：オブジェクトの削除）に関しては、順序を下げて配置してください。
操作の順序の典型的な例は以下のとおりです。

  • 編集
  • 複製
  • 削除

開かれた操作ドロップダウン。編集・複製・削除の順に操作が並んでいる。

レイアウト

ドロップダウンの引き金となるボタン（トリガー）とドロップダウンパネルをあわせて、「ドロップダウンメニューボタン」と呼びます。

ドロップダウンメニューボタンは、以下の要素で構成されています。

  1. トリガー
  2. ドロップダウンパネル

ドロップダウンメニューボタンの構成図

1. トリガー

複数の操作がまとまっていることを示唆するために、Secondaryボタンのアイコン付き（右）に 展開 アイコン（FaCaretDownIcon）を使っています。

2. ドロップダウンパネル

操作をリスト形式でまとめて表示します。
まとめ方は、デザインパターンから用途にあったものを選択してください。

デザインパターン

用途によって5つのパターンを定義します。

#パターン名用途
A単一のオブジェクトに対する操作オブジェクトに関する複数の操作をまとめるときに使います。
B単一のオブジェクトに対する操作（オブジェクト名省略）特定のオブジェクトの操作であることがレイアウト上自明なとき（例えば「よくあるテーブル」の行の中など）に使います。
C同一の操作同じ種類の操作をまとめるときに使います。
D異なる複数の操作A、B、Cのパターンに該当しないときに、異なる複数の操作をまとめるために使います。
Eラベル省略（非推奨）ボタンを配置するスペースを十分確保できないときの最終手段として検討できますが、基本的に利用を推奨しません。

A. 単一のオブジェクトに対する操作

オブジェクトに関する操作をまとめるときに使います。

要素説明
トリガーラベルは{オブジェクト名}の操作とします。
ドロップダウンパネルオブジェクトに対して行なう操作を入れます。

B. 単一のオブジェクトに対する操作（オブジェクト名省略）

操作の対象になるオブジェクトがレイアウト上、明らかなときに使います。
（例：「よくあるテーブル」の行の中など）

要素説明
トリガー基本的に「A. 単一のオブジェクトに対する操作」のようにオブジェクト名を表示しますが、狭い場所にレイアウトするときにオブジェクト名を省けます。ラベルは操作にします。
ドロップダウンパネルオブジェクトに対して行なう操作を入れます。トリガーのラベルと同様にオブジェクト名を省けます。

C. 同一の操作

同じ種類の操作をまとめるときに使います。

要素説明
トリガー操作をまとめるラベルにします。
ドロップダウンパネル同じ種類の操作を入れます。

D. 異なる複数の操作

A、B、Cのパターンに該当しないときに、異なる複数の操作をまとめるために使います。

要素説明
トリガーラベルはその他の操作とします。
ドロップダウンパネル異なる複数の操作を入れます。

E. ラベル省略（非推奨）

ボタンを配置するスペースを十分確保できないときの最終手段として検討できますが、基本的に利用を推奨しません。

要素説明
トリガーSecondaryボタンのアイコンのみで、主に その他の操作 アイコン（FaEllipsisHIcon）を使います。ラベルは視覚的に省いていますが、必ずlabel属性は設定して何のボタンなのかを伝えます。
ドロップダウンパネル操作を複数入れます。

状態

無効（disabled）

トリガーの無効

DropdownMenuButton自体を無効にすると、ドロップダウンパネルも操作できません。

ドロップダウンパネルの操作の無効

ドロップダウンパネル内の操作を無効にする場合、ButtonのdisabledDetailを使って無効状態の理由を表示します。

Props

label必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

引き金となるボタンラベル

children必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal ReactElement<{ size?: "s" | "default"; disabledDetail?: { icon?: FunctionComponent<{}>; message: ReactNode; }; prefix?: ReactNode; suffix?: ReactNode; square?: boolean; wide?: boolean; variant?: Variant; loading?: boolean; } & { ...; } & ElementProps & Props & RefAttributes<...>, string | JSXElementConstructor<...>> ReactElement<{ size?: "s" | "default"; disabledDetail?: { icon?: FunctionComponent<{}>; message: ReactNode; }; prefix?: ReactNode; suffix?: ReactNode; square?: boolean; wide?: boolean; variant?: Variant; loading?: boolean; } & { ...; } & { ...; } & ElementProps<...> & ElementRefProps<...>, string | JSXElementConstru... ReactElement<Pick<{ size?: "s" | "default"; disabledDetail?: { icon?: FunctionComponent<{}>; message: ReactNode; }; prefix?: ReactNode; suffix?: ReactNode; square?: boolean; wide?: boolean; variant?: Variant; loading?: boolean; } & { ...; } & ElementProps & Props & RefAttributes<...>, "variant"> & { ...; }, string |... ActionItem[]

操作群

triggerSize
"s" "default"

引き金となるボタンの大きさ

onlyIconTrigger
false true

引き金となるボタンをアイコンのみとするかどうか

triggerIcon
ComponentClass<Omit<IconProps & ElementProps, keyof BaseComponentProps> & BaseComponentProps, any> FunctionComponent<Omit<IconProps & ElementProps, keyof BaseComponentProps> & BaseComponentProps>

引き金となるアイコンを差し替えたい場合（onlyIconTrigger=true の場合のみ有効）

ref
(instance: HTMLButtonElement) => void RefObject<HTMLButtonElement>