[LIMITATION/FEATURE]: Allow custom modal elements

[enkelmedia]

I have the need for a special type of modal that would basically be similar to a full sidebar but that would cover the full screen width.

I've played with different approaches, one being to register my on "modal context" to the host element in the entry point file but it feels hacky and like it's a lot of work for a small tweak. Since the built in modal context has a lot of valuable features I figured it would be nice to be able to customize the modal appearance.

I do know that we have sidebar and dialog out of the box (that is the UUIModalSidebarElement and UUIModalDialogElement elements from UUI). When reading the docs for UUI I noticed that it would be quite easy to create a custom modal layout.

On this page: https://uui.umbraco.com/?path=/docs/layout-modals-documentation--docs scroll to the bottom to see "Making a custom modal".

A custom modal element would make it very flexible for extensions to adjust the appearance and also behavior, for example to prevent closing the dialog with the ESC key

in a custom modal element this could be added

dialog.addEventListener('cancel', (event) => {
event.preventDefault();
}

When digging in to the source of Bellissima it turns out that it's the UmbModalElement that is creating the sidebar or dialog elements, I also noticed that these two are hardcoded in the element.

I'm wondering if we maybe could find a way to pass a custom element or a factory method that creates the element (or something), my "end game" here is to be able to create a modal where:

• I can freely adjust the size, seems to be possible today with type: dialog and size: full
• I can change the border radius - not possible since it's hardcoded as 12px inside UUIModalDialogElement
• I can change how the modal react to the HTMLDialogElement elements cancel event. Today it's just closing the dialog but since my modal will contain forms I want to user to be able to confirm that they want to close (and/or save) when the press ESC.

I created a PR with an idea on how this could be done.