feat: add ContextMenu2 component #1699

yomotsu · 2025-01-23T08:00:49Z

この PR は、新規に ContextMenu2 コンポーネントを追加するための PR です。

狭い・広いの画面幅にあわせて、パネル表示位置が変わります
入れ子の多段コンテキストメニューは、hover、タップ、キーボードで展開操作できます

Screen.Recording.2025-01-23.at.16.49.20.mp4

ContextMenu2 の中には、あらかじめ用意した以下を好きなように組み合わせて配置できます。
また、ContextMenu2 の入れ子も可能です。

例

<ContextMenu2Container>
  <ContextMenu2
    trigger={<button type="button">開く</button>}
    width={316}
  >

    <ContextMenu2HeadingItem>
      見出し
    </ContextMenu2HeadingItem>

    <ContextMenu2SeparatorItem />

    <ContextMenu2ButtonItem onClick={() => alert("clicked")}>
      ボタン
    </ContextMenu2ButtonItem>

  </ContextMenu2>
</ContextMenu2Container>

子コンポーネント名	役割	フォーカス対象
`ContextMenu2HeadingItem`	ラベル見出し	🚫
`ContextMenu2HelpTextItem`	ヘルプテキスト	🚫
`ContextMenu2SeparatorItem`	区切り線	🚫
`ContextMenu2ButtonItem`	ボタン（押下時コールバックあり）	✅
`ContextMenu2CheckItem`	チェックボックス（チェック時コールバックあり）	✅
`ContextMenu2SwitchItem`	スイッチ（切り替え時コールバックあり）	✅
`ContextMenu2TextInputItem`	テキスト入力欄（入力時コールバックあり）	✅
`ContextMenu2ButtonControlsItem`	Buttonコンポーネントを並べて利用するためのコンテナ	-
`ContextMenu2TriggerItem`	ContextMenu2を入れ子にしたとき用のトリガー（押下時コールバックあり）	✅

ContextMenu2/index.ts から全て export されています。

Check List (If️ you added new component in this PR)

Export the component in src/components/index.ts
Add example to .storybook/documents/Information/Samples/Samples.stories.tsx
Localize added component

changeset-bot · 2025-01-23T08:00:52Z

🦋 Changeset detected

Latest commit: e4632ae

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
ingred-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2025-01-23T08:01:54Z

✅ Deploy Preview for ingred-ui ready!

Name	Link
🔨 Latest commit	`987d4f0`
🔍 Latest deploy log	https://app.netlify.com/sites/ingred-ui/deploys/6791f733dc51820008b91a3c
😎 Deploy Preview	https://deploy-preview-1699--ingred-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2025-01-23T08:03:15Z

✅ Deploy Preview for ingred-ui ready!

Name	Link
🔨 Latest commit	`e4632ae`
🔍 Latest deploy log	https://app.netlify.com/sites/ingred-ui/deploys/6796f8b814cc56000870859a
😎 Deploy Preview	https://deploy-preview-1699--ingred-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

noronaoki · 2025-01-23T09:00:12Z

@yomotsu
挙動などは特に問題無さそうなので、細かいデザインのレビューをします！

スイッチの高さを揃える

テキストとスイッチの水平ラインがわずかにずれているので align-items: center; などを使って揃えてください。

アイコンの色

アイコンの色は実装サイドで任意のものに変更できるでしょうか？
もしくはコンポーネントで決めておいた方が良ければテキスト同じ黒色にしてください。

水平線のスタイル

hr のデフォルトスタイルが残っていそうなので、一旦リセットを行なった上でシンプルなラインにしてください。

見出しのマージン

もう少し上下に余裕を持たせたいので4pxの上下マージンを 8px に変更してください。

入れ子の子要素の情報

例示されている 100 に当たる情報には、子要素で選択されているメニューの情報が入ることを想定しているため、check形式で複数渡されることがあります。
この時その要素分のエレメントとして渡されるのか、もしくは1つのエレメント内にカンマ区切り等の1つの文字列として渡されるのかどちらになりますか？

inputの横幅

inputの横スペースにもう少し余裕を持たせたいので padding: 6px 8px; として横のpaddingを追加してください。

yomotsu · 2025-01-24T02:48:06Z

@noronaoki

スイッチの高さを揃える

調整しました

アイコンの色

アイコンには好きな色を指定できるようになっています。
（さらに、アイコンではないものも入れられます）

参考になる状態を用意しておきました。

水平線のスタイル

調整しました

見出しのマージン

調整しました

入れ子の子要素の情報

「check形式で複数渡される」はどのような状態か、絵でお知らせいただくことできますでしょうか？
想定に合わせて、それができるように調整しようと思います

inputの横幅

現状で padding: 6px 8px となっていました。
もう少しあけて、padding: 6px 10pxなどにしてみますか？

noronaoki · 2025-01-24T03:49:33Z

@yomotsu

アイコンの件、了解です。

「check形式で複数渡される」はどのような状態か、絵でお知らせいただくことできますでしょうか？

例えばこのような形を想定していまして、横幅の状況によっては3点リーダーで端折りたいケースもあるかもしれません。

現状で padding: 6px 8px となっていました。

あ、input自体のpaddingはそのままでOKです。
大枠との余白を取りたいのでラッパーの方のpaddingでしたね。

あと一点失念してまして、ドラッグ機能は今回のスコープ外となりますでしょうか？

yomotsu · 2025-01-24T04:19:09Z

@noronaoki

例えばこのような形を想定

その形式も問題なさそうです
何でも入れられるようにしてみました

↓

ラッパーの方のpadding

なるほど補足ありがとうございます。
お知らせいただいた数値で対応しました

ドラッグ機能は今回のスコープ外

はい、その通りの想定でした

ドラッグ並べ替え
コンボボックス

の 2 つについては機能が複雑なため、この PR がマージされたあと、それぞれ単体の別の PR として用意しようと考えています。

deatiger

@yomotsu
クライアントで ContextMenu2 を利用する人間としての観点でコメントさせていただきました 🙏

deatiger · 2025-01-24T04:50:31Z

src/components/ContextMenu2/ContextMenu2.tsx

+  /**
+   * コンテキストメニューを開くかどうか。省略時は内部で開閉状態を管理される
+   */
+  open?: boolean;
+  /**
+   * 開閉トリガーとなるボタン要素
+   */
+  trigger: ReactElement<
+    ButtonHTMLAttributes<HTMLButtonElement> & {
+      ref?: React.Ref<HTMLButtonElement>;
+    },
+    "button"
+  >;


@yomotsu FYI @noronaoki
コンテキストメニューの開閉をクライアントから制御したい場合に open と onOpenChange を使うと理解しました。現状は trigger がオプショナルではないものの、trigger となる button 要素が不要なケースもありえるのかな？と思いました。

現状は trigger がオプショナルではないものの、trigger となる button 要素が不要なケースもありえるのかな？と思いました。

新 DataTable を実装する際にもあり得そう
https://www.figma.com/design/fUeoFzCzL4rwRuW7CFW4m0/INGRED-UI?node-id=2622-1783&t=gVX4UAFldWFJp9H1-0

button 要素が不要なケース

具体的なユースケースとしては、OS のコンテキストメニューのように、クリックした箇所がそのままトリガーのような振る舞いをする、ということで認識あっているでしょうか？

@yomotsu

添付画像の箇所は button じゃないかもと思ったのですが、私の勘違いかもしれないです！

@noronaoki
ContextMenu2 のユースケースとして、button クリック以外をトリガーに表示したいことってありえますかね？ 💭

トリガー要素無しでクリックした座標をアンカーにできる機能を追加してみました

Screen.Recording.2025-01-24.at.15.40.36.mp4

const { position, setPosition } = useContextMenu2Anchor(); const [open, setOpen] = useState<boolean>(false); return ( <ContextMenu2Container> <ContextMenu2 open={open} trigger={position} width={316}> ... </ContextMenu2> </ContextMenu2Container> );

なお、ページネーションの場合は、「ボタン」の機能を持つコンポーネントをクリックして表示することを想定していました

素敵です！
これがあればほとんどのユースケースに対応できると思います。

@yomotsu @deatiger

ContextMenu2 のユースケースとして、button クリック以外をトリガーに表示したいことってありえますかね？

はい、ボタン無しで決定するケースもあります！

noronaoki · 2025-01-24T06:52:23Z

@yomotsu
すみません、入れ子メニューなどに用いている矢印アイコンを違うスタイルのものに変更したいのですが、まだ登録されていない新しいアイコンになるのでこれは別で対応いただく方がいいでしょうか？

yomotsu · 2025-01-24T07:01:07Z

@noronaoki
既存から選んだほうがいいかなと思っていたのですが、この PR で Icon に追加するということでも大丈夫です。
ただ、既存のものとほぼ形が同じため、似たものが 2 つある状態になってしまい、デザインの揺れが出てしまうのが心配です。

今後も共存して、運用で使い分けの基準を作ってもらうという認識でいいでしょうか？
あるいは、既存の方角アイコンを完全に入れ替えにしてしまうのがいいでしょうか？

noronaoki · 2025-01-24T07:02:40Z

@yomotsu

既存の方角アイコンを完全に入れ替えにしてしまう

ありがとうございます、ご指摘のとおり、差し替えたいと思ってます！

yomotsu · 2025-01-27T03:12:16Z

@noronaoki

既存の方向アイコンの形状を最新 Figma に合わせて差し替えました。
arrow_bottom だったものは、arrow_down に変更しています
（arrow_bottom は名前として残っていますが、今後、arrow_down への参照となります）

Storybook 上で、Icon コンポーネントの説明に注意書きを出しています

noronaoki · 2025-01-27T03:38:15Z

@yomotsu LGTM!!

deatiger

私からも Approve をば。LGTM 👏

yomotsu · 2025-01-28T02:17:54Z

@deatiger
レビューありがとうございます。
PR のマージはどなたかにお願いするのがいいでしょうか？
または、Approve をいただいたあとは私がしてしまって大丈夫でしょうか？

deatiger · 2025-01-28T02:21:47Z

@yomotsu

PR のマージはどなたかにお願いするのがいいでしょうか？または、Approve をいただいたあとは私がしてしまって大丈夫でしょうか？

なるほど、確認しますね。

@noronaoki
この運用を決めていないようですが、そもそも現状は従来通りの npm package へリリースするフローで良いのでしたっけ？

noronaoki · 2025-01-28T02:34:32Z

@deatiger
はい、既存のリリースフローでお願いしたいです！

deatiger · 2025-01-28T02:39:29Z

@noronaoki

はい、既存のリリースフローでお願いしたいです！

小山田さんにやっていただきますか？それともこちらでやった方が良いでしょうか？

deatiger · 2025-01-28T02:40:32Z

小山田さんにやっていただきますか？それともこちらでやった方が良いでしょうか？

従来は INGRED UI チャンネルに報知したりもしていたので、私の方でやりましょか

yomotsu · 2025-01-28T02:42:38Z

マージしたあとの付随する作業の把握ができていないため、それですと私も大変助かります🙇‍♂️

noronaoki · 2025-01-28T02:43:41Z

@deatiger では稲垣さんにお願いできればと思います 🙇🏻

deatiger · 2025-01-28T02:46:16Z

@yomotsu @noronaoki
では私のほうでマージ・リリースいたします！

deatiger · 2025-01-28T03:34:41Z

FYI @yomotsu 3件まとめてリリースまで完了しております 🙏

yomotsu · 2025-01-28T05:06:55Z

ありがとうございます。助かりました。

yomotsu added 6 commits January 21, 2025 13:30

feat: ContextMenu2

3370902

基本的な test 追加 + 微調整

490df47

add ContextMenu2HelpTextItem

a94ad96

storybook にコメント追加

960a0f1

fix typo

987d4f0

css調整

d352a04

yomotsu requested review from Ryu955, NAKKA-K, deatiger, trailstem and shungenie as code owners January 23, 2025 08:00

yomotsu added 4 commits January 23, 2025 17:23

add changeset

59ff7da

update snapshot

027d6b1

変数宣言順入れ替え

3f4160d

コメント調整

44083e1

デザイン調整

37bf7ec

update snapshot

8c397c7

deatiger reviewed Jan 24, 2025

View reviewed changes

アンカーをトリガーにできる機能追加

9c99043

yomotsu added 3 commits January 27, 2025 10:57

方向アイコン形状差し替え

2e087f6

update snapshots due to new icon shape

66b4ea6

update changeset

e4632ae

deatiger approved these changes Jan 27, 2025

View reviewed changes

deatiger merged commit e24e719 into master Jan 28, 2025
3 checks passed

deatiger deleted the feat/context-menu-2 branch January 28, 2025 03:12

FluctMember mentioned this pull request Jan 28, 2025

Version Packages #1702

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add ContextMenu2 component #1699

feat: add ContextMenu2 component #1699

yomotsu commented Jan 23, 2025 •

edited

Loading

changeset-bot bot commented Jan 23, 2025 •

edited

Loading

netlify bot commented Jan 23, 2025 •

edited

Loading

netlify bot commented Jan 23, 2025 •

edited

Loading

noronaoki commented Jan 23, 2025

yomotsu commented Jan 24, 2025

noronaoki commented Jan 24, 2025

yomotsu commented Jan 24, 2025

deatiger left a comment •

edited

Loading

deatiger Jan 24, 2025 •

edited

Loading

deatiger Jan 24, 2025

yomotsu Jan 24, 2025 •

edited

Loading

deatiger Jan 24, 2025

yomotsu Jan 24, 2025

yomotsu Jan 24, 2025

deatiger Jan 24, 2025 •

edited

Loading

noronaoki Jan 24, 2025

noronaoki commented Jan 24, 2025

yomotsu commented Jan 24, 2025

noronaoki commented Jan 24, 2025 •

edited

Loading

yomotsu commented Jan 27, 2025 •

edited

Loading

noronaoki commented Jan 27, 2025

deatiger left a comment

yomotsu commented Jan 28, 2025

deatiger commented Jan 28, 2025

noronaoki commented Jan 28, 2025

deatiger commented Jan 28, 2025

deatiger commented Jan 28, 2025

yomotsu commented Jan 28, 2025

noronaoki commented Jan 28, 2025

deatiger commented Jan 28, 2025

deatiger commented Jan 28, 2025

yomotsu commented Jan 28, 2025

feat: add ContextMenu2 component #1699

feat: add ContextMenu2 component #1699

Conversation

yomotsu commented Jan 23, 2025 • edited Loading

Check List (If️ you added new component in this PR)

changeset-bot bot commented Jan 23, 2025 • edited Loading

🦋 Changeset detected

netlify bot commented Jan 23, 2025 • edited Loading

✅ Deploy Preview for ingred-ui ready!

netlify bot commented Jan 23, 2025 • edited Loading

✅ Deploy Preview for ingred-ui ready!

noronaoki commented Jan 23, 2025

スイッチの高さを揃える

アイコンの色

水平線のスタイル

見出しのマージン

入れ子の子要素の情報

inputの横幅

yomotsu commented Jan 24, 2025

noronaoki commented Jan 24, 2025

yomotsu commented Jan 24, 2025

deatiger left a comment • edited Loading

Choose a reason for hiding this comment

deatiger Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

deatiger Jan 24, 2025

Choose a reason for hiding this comment

yomotsu Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

deatiger Jan 24, 2025

Choose a reason for hiding this comment

yomotsu Jan 24, 2025

Choose a reason for hiding this comment

yomotsu Jan 24, 2025

Choose a reason for hiding this comment

deatiger Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

noronaoki Jan 24, 2025

Choose a reason for hiding this comment

noronaoki commented Jan 24, 2025

yomotsu commented Jan 24, 2025

noronaoki commented Jan 24, 2025 • edited Loading

yomotsu commented Jan 27, 2025 • edited Loading

noronaoki commented Jan 27, 2025

deatiger left a comment

Choose a reason for hiding this comment

yomotsu commented Jan 28, 2025

deatiger commented Jan 28, 2025

noronaoki commented Jan 28, 2025

deatiger commented Jan 28, 2025

deatiger commented Jan 28, 2025

yomotsu commented Jan 28, 2025

noronaoki commented Jan 28, 2025

deatiger commented Jan 28, 2025

deatiger commented Jan 28, 2025

yomotsu commented Jan 28, 2025

yomotsu commented Jan 23, 2025 •

edited

Loading

changeset-bot bot commented Jan 23, 2025 •

edited

Loading

netlify bot commented Jan 23, 2025 •

edited

Loading

netlify bot commented Jan 23, 2025 •

edited

Loading

deatiger left a comment •

edited

Loading

deatiger Jan 24, 2025 •

edited

Loading

yomotsu Jan 24, 2025 •

edited

Loading

deatiger Jan 24, 2025 •

edited

Loading

noronaoki commented Jan 24, 2025 •

edited

Loading

yomotsu commented Jan 27, 2025 •

edited

Loading