[javascript] Split form and non-form modals and support custom modal footers

[MaximeBICMTL]

Description

This PR refactors the LORIS modal to make two major changes:

• Separate form and non-form general modals into separate reusable components.
• Make modal footers optional and allow consumers to provide their own footer for the generic modal.

Architecture

• The Modal component from jsx/Modals.tsx is split into three components:
  • Modal: The general non-form modal, which allows the consumer to provide the body and optionally the footer.
  • FormModal: The form modal, which is similar to the current modal and provides form and submit logic/controls.
  • ModalFrame: common architecture between the two modals, technically FormModal could also be made to depend directly upon Modal but this would require some higher-order component machinery because the form body and content should both be wrapper in a form element, and this wrapper is undesirable in the general case.
• The styling relies less on bootstrap and more on flexbox for layout.
• The modals can be scrollable, not sure if that was the case before or not.

Examples

Showcase of existing modal behavior: (added artificial delay to showcase animations)

2026-06-29.18-08-33.mp4

Showcase of new non-form modals with custom footers:

2026-06-29.18-13-40.mp4

[HenriRabalais]

By splitting it into a specific FormModal I think we should require an onSubmit function to be passed. I can't think of a case where we would want a form with no submit function.

[MaximeBICMTL]

Hhhhm, I initially kept FormModalProps the exact same to not break backwards compatibility, but I just checked and it does appear that all call sites provide an onSubmit prop, so I think your call is right.

I pushed a new commit that makes onSubmit mandatory and also improves the typing of onSubmit and onSuccess by using a generic type rather than any.

[HenriRabalais]

I'm a little hesitant to accept any ReactNode as a footer, but I do see the need for flexibility based on your examples... can you think of something more structured that we could implement? For example to make sure buttons stay bottom right, things are properly spaced, etc.

Now that I look at it, the same would apply for title. What do you think?

[MaximeBICMTL]

Hhhhm, I think I disagree here. Even though most modals would use buttons as the footer, that may not always be the case, and I actually have one such footer in my examples. I think using ReactNode is fine, no need to be too restrictive for UI IMO.