feat: Step つき FormDialog の実装 #4972

schktjm · 2024-10-02T11:02:18Z

概要

FormDialog に steppable="true" を渡すことで、ステップ付きダイアログを使えるようにします。

イメージ図

<FormDialog hasStep>
  <Step />
  <Step />
  <Step />
</FormDialog>

Step つきダイアログで実現したいこと

次のステップへ移動したときに、フォーカスがダイアログのトップへ戻ること

変更内容

2 step 以降にもう一度 <FocusTrap> にフォーカスが当たるように、 ref のフォワーディングをした
FormDialog に steppable: boolean の props を追加
step つきダイアログ用の useStepDialog.tsx を新規作成

確認方法

storybook の Form Dialog With Steps の動作確認をお願いします！

http://localhost:6006/?path=/story/dialog%EF%BC%88%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%EF%BC%89-dialog--form-dialog-with-step

pkg-pr-new · 2024-10-02T11:03:14Z

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@4972

commit: 846cd41

schktjm · 2024-10-02T11:05:17Z

packages/smarthr-ui/src/components/Dialog/Dialog.stories.tsx

+        onSubmit={(closeDialog, e, step) => {
+          action('executed')()
+          setResponseMessage(undefined)
+          if (step && step === 2) {
+            closeDialog()
+          }
+        }}


もやポイント1

closeDialog の実行は FormDialog の使用する側なので、使用する側で最後のページかのチェックをする必要があります！

schktjm · 2024-10-02T11:06:58Z

packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx

+        title={steppable ? `${title}${titleSuffix}` : title}
        titleId={titleId}
        subtitle={subtitle}
        titleTag={titleTag}
        contentBgColor={contentBgColor}
        contentPadding={contentPadding}
-        actionText={actionText}
+        actionText={steppable ? getActionText(actionText) : actionText}
        actionTheme={actionTheme}
        actionDisabled={actionDisabled}
        closeDisabled={closeDisabled}
-        subActionArea={subActionArea}
+        subActionArea={steppable ? renderSubActionButton() : subActionArea}
        onClickClose={handleClickClose}
        onSubmit={handleSubmitAction}
        responseMessage={responseMessage}
        decorators={decorators}
+        steppable={steppable}
      >
-        {children}
+        {steppable ? childrenSteps[activeStep] : children}


もやポイント2？

props 渡す箇所で三項演算子書き過ぎかもなぁと考えています！

steppable が false のときでも actionText は actionText={getActionText(actionText)} としても動くから、まとめてしまっても良いかも？（stepが1個しか無いとして扱える）

あ、嘘だった。

useStepDialog に hasStep を渡してあげて、hooks 内で同じ条件をかけばいけるんですけど、通常 FormDialog の actionText ロジックをカスタムフックス内で持っちゃうとわかりにくくなっちゃうかな〜と思ってきました！

schktjm · 2024-10-02T11:11:03Z

packages/smarthr-ui/src/components/Dialog/useStepDialog.tsx

+
+import { FocusTrapRef } from './FocusTrap'
+
+const NEXT_BUTTON_LABEL = '次へ'


聞きたいポイント

次へのラベルは変えることがなさそうと思ったのですが、変更している例があれば教えてほしいです 🙏

多言語化などで翻訳する場合に変えるときがあります〜

submit のボタンテキストは props.actionText で定義されているのに対して戻るボタンは props.decorators.closeButtonLabel() で渡せるようになっているので次へテキストをどうわたせるようにするか迷っています

一旦一番実直な方法で書いてみました！

0c6e6ef

masuP9

いくつかコメントしましたが、動作は良さそう！

masuP9 · 2024-10-03T06:46:12Z

packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx

+     */
+    onSubmit: (closeDialog: () => void, e: FormEvent<HTMLFormElement>, activeStep?: number) => void
+    /** Stepつきダイアログか否か */
+    steppable?: boolean


[IMO] Step可能かどうか（steppable）、というより、Stepがあるかどうか（isSteps）、もしくはStepを持っているかどうか（hasSteps）の方が良さそうに思いました（hasSteps推し）

steppable がひと単語で直感的に気に入りつつも、誤字ですか？って怒られ続けたのでたしかに Stepを持っているかとかのようが良い気がしました！

653fd5a

命名変えました！

hiroki0525 · 2024-10-10T10:05:40Z

packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialog.tsx

+    getActionText,
+    handleNextSteps,
+    renderSubActionButton,
+  } = useStepDialog(children)


[nits]
今から根本から作り変えることになってしまいますし、今のコードでもちゃんと動いていそうなのでnits程度にとどめておくのですが、 FormDialog とは別のコンポーネントに切り出すのが良いのかなぁ...と思いました。
理由としては次の感じです。

コンポーネントのインターフェースがちょっと特殊

propsが hasStep:true の場合のみ、次のページ数 のようにステップ付きかどうかで関数に渡される引数が変わる

暗黙的に各ステップとして Dialog の子コンポーネントを下記のように配置されることが利用者側に要求される

<FormDialog> // これは一個目のステップ <Hoge /> // これは二個目のステップ <Fuga /> </FormDialog>

ステップ付きダイアログ専用のロジックが混入する

特に useStepDialog のロジックも hasStep を使わない場合は不要なhooksになってしまう。

レビューありがとうございますー！全然アリだと思います！

定例で相談したとき、簡単に書けそうだったら FormDialog に hasStep 生やす程度でできたら嬉しいということを聞いたんですが、もやポイントに書いた通り onClose の発火タイミングを使用している側で調整したりする必要があったりで複雑そうな雰囲気があったので！

ちょっとPR別で作ってみます！

hiroki0525 · 2024-10-10T10:24:53Z

[Q]
各ステップごとで onSubmit が走るのですがこれは想定通りだったでしょうか？
各ステップごとで onSubmit するのではなく、例えば各ステップを切り替えたときは onStepChange みたいなハンドラが発火して、最後のステップで「保存」ボタンを押すと onSubmit が発火する、という使い方もあるのかなと。

schktjm · 2024-10-11T02:02:47Z

@hiroki0525

Form が数 step 分重なっているという認識だったので各 step ごとに onSubmit でもいいかな〜と思ったのですが、最後に処理を投げるという目線で見ると onSubmit は完了時だけのほうが良さそうですね！
それを考えるとやはり FormDialog に付け足すのはちょっと処理が複雑になってしまいそうです 🤔
それも合わせて考えてみます〜！

schktjm · 2024-10-24T06:55:34Z

#5004 で進めていくことになったため close

schktjm added 3 commits October 2, 2024 19:50

feat: FocusTrap を任意のタイミングで focus できるように ref のフォワーディング追加

afe7048

feat: steppable な FormDialog 用の実装追加

13cda5f

feat: Step つき FormDialog の story 追加

bd4424e

schktjm self-assigned this Oct 2, 2024

schktjm commented Oct 2, 2024

View reviewed changes

refactor: FormDialogInner に必要ない props 拡張を移動

a812f15

schktjm marked this pull request as ready for review October 2, 2024 11:16

schktjm requested a review from a team as a code owner October 2, 2024 11:16

schktjm requested review from s-sasaki-0529, hiroki0525 and masuP9 and removed request for a team October 2, 2024 11:16

masuP9 reviewed Oct 3, 2024

View reviewed changes

schktjm added 3 commits October 7, 2024 14:57

refactor: steppable -> hasStep

653fd5a

refactor: 次へラベルをpropsで渡せるようにした

0c6e6ef

refactor: DecoratorType を使用する

846cd41

schktjm requested a review from masuP9 October 8, 2024 04:33

hiroki0525 reviewed Oct 10, 2024

View reviewed changes

schktjm mentioned this pull request Oct 15, 2024

feat: StepFormDialogコンポーネントの作成 #5004

Open

schktjm closed this Oct 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Step つき FormDialog の実装 #4972

feat: Step つき FormDialog の実装 #4972

schktjm commented Oct 2, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 2, 2024 •

edited

Loading

schktjm Oct 2, 2024

schktjm Oct 2, 2024

masuP9 Oct 3, 2024

masuP9 Oct 3, 2024

schktjm Oct 7, 2024

schktjm Oct 2, 2024

masuP9 Oct 3, 2024

schktjm Oct 7, 2024

schktjm Oct 8, 2024

masuP9 left a comment

masuP9 Oct 3, 2024

schktjm Oct 3, 2024

schktjm Oct 7, 2024

hiroki0525 Oct 10, 2024

schktjm Oct 11, 2024

schktjm Oct 11, 2024

hiroki0525 commented Oct 10, 2024 •

edited

Loading

schktjm commented Oct 11, 2024

schktjm commented Oct 24, 2024


		import { FocusTrapRef } from './FocusTrap'

		const NEXT_BUTTON_LABEL = '次へ'

feat: Step つき FormDialog の実装 #4972

feat: Step つき FormDialog の実装 #4972

Conversation

schktjm commented Oct 2, 2024 • edited Loading

関連URL

概要

Step つきダイアログで実現したいこと

変更内容

確認方法

pkg-pr-new bot commented Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

masuP9 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hiroki0525 commented Oct 10, 2024 • edited Loading

schktjm commented Oct 11, 2024

schktjm commented Oct 24, 2024

schktjm commented Oct 2, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 2, 2024 •

edited

Loading

hiroki0525 commented Oct 10, 2024 •

edited

Loading