feat(NcDialog): New component (moved from @nextcloud/dialogs)

[susnux]

☑️ Resolves

• Fix Filepicker/dialogs component #631
• Fix AppSettingsDialog does scroll the section list when clicking on entry #4348 (fixed by migrating AppSettingsDialog to NcDialog base)
• Replace feat(NcDialog): New component (moved from @nextcloud/dialogs) #4415 (without Typescript and fancy <script setup>).

Introduces NcDialog as a generic base Dialog component, while NcModal is simply a base for modals like the viewer, NcDialog provides a convenient interface to define dialogs (see example).
The new FilePicker of the @nextcloud/dialogs package is based on top of it.

🖼️ Screenshots

One example dialog:

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[szaimen]

Just tested and there are some issues on mobile:

[susnux]

Seems to be browser related as your browser overlays the bar with the content?

[szaimen]

Still the buttons should not appear at the very bottom. Is this possible?

[susnux]

Still the buttons should not appear at the very bottom. Is this possible?

Are you sure? I think it is more intuitive to have them on the bottom on mobile.

Firefox	Chrome

[susnux]

@szaimen would you mind if we do a design review session later (maybe schedule it with the design team) and for the beginning just merge it as is?
Because there are quite a lot of other task depending on the dialog component.

BTW on material dialogs look like this on mobile:

[susnux]

@szaimen reworked the small dialogs, now it looks like normal dialogs:

[szaimen]

This looks good now from design perspective :)

However I guess the a11y team should look over it as it might not be 100% accessible?
cc @JuliaKirschenheuter @ShGKme @Pytal

See e.g.

[susnux]

See e.g.

I think this is a regression of the double outline of the button focus-visible. We probably should add a margin of 4px to all buttons to ensure there is space for showing the outline.

[susnux]

Nevertheless fixed this for now here by adding a 4px margin to the actions (while still keeping the padding consistent):