Use a dialog for custom date form instead of including it in the action menu

[marcoambrosini]

Including baby forms within action menus is a recurring pattern in Nextcloud and it's one that I think we should break. We shouldn't include forms, especially if they involve multi-selects and pickers, into tiny action menus. When there's the need of a form we can add an action button that brings up a dialog or opens the form somewhere else. Having a text input with an inline submit button is probably ok but still not ideal IMO.

In this particular case we have a baby form with a submit button that looks exactly like an action buttons above, creating visual confusion and usability issues. For example here there's no way to guarantee that the picker itself won't block the button to submit the form itself once you've chosen the date. (see screenshot)

This came up in a recent design call and there was some consensus on that we should probably even deprecate these complex action input elements. What do you think @nextcloud/designers ??

Originally posted by @marcoambrosini in https://github.com/nextcloud/spreed/issues/10105#issuecomment-1670928740

[nickvergessen]

This solution already existed in the mail app with the send later functionality and is planned to keep aligned between:

• Reminder / Send later in Mail - https://github.com/nextcloud/mail/issues/2048 cc @ChristophWurst @JohannesGGE
• Reminder in Files - https://github.com/nextcloud/server/issues/39181 cc @Pytal
• Reminder in Talk - https://github.com/nextcloud/spreed/issues/10075 cc @Antreesy

[marcoambrosini]

I agree we should be consistent, but we should break this pattern and adopt a better one. This is another instance in mail:

--

To provide a counter example. In the files reminders issue, Gmail was used as inspiration, but there clicking "pick date and time" in the action menu brings up a nice and tidy dialog where everything is clearly laid out.

[jancborchardt]

This seems to be an issue for the components library though, not only for Talk?

[marcoambrosini]

The issue in the component library is that we have an actioninput type date.

[skjnldsv]

Raising a question here because it's been brought to my attention. With the amount of work we've put through going for the native datetime picker, we wanna step away from it again and use another library to render it in a modal?

[nickvergessen]

No, just not use kt in NcActions directly, but basically it should open a modal and there we use the native datetime picker iirc

[skjnldsv]

Exactly what I'm saying, you cannot render the native picker as is. The picker is always bound to an <input type="date">.

[nickvergessen]

No, one level more 😅

NcModal will contain the input field of type date and the save button, instead of 2 Action components interacting with each other 🙃

[skjnldsv]

NcModal will contain the input field of type date and the save button, instead of 2 Action components interacting with each other 🙃

I don't think this is the request.

See latest Marco mockup, I think the idea was to have the layout rendered inline in the modal

[nickvergessen]

I thought that is the native look on MacOS 😅

[skjnldsv]

Please clarify @marcoambrosini @nextcloud/designers

[marcoambrosini]

@skjnldsv I mean putting the native date picker in a modal with confirmation button, so yes what Joas said above

[skjnldsv]

[marcoambrosini]

Beautiful @skjnldsv :)