Add Dialog layout

[philippjfr]

Not yet sure whether we should actually merge this but I wanted to experiment.

Implements #4700

[codecov]

Codecov Report

Merging #4767 (ae77fd6) into main (12e2810) will decrease coverage by 0.09%.
The diff coverage is 50.00%.

@@            Coverage Diff             @@
##             main    #4767      +/-   ##
==========================================
- Coverage   83.29%   83.21%   -0.09%     
==========================================
  Files         268      268              
  Lines       37745    37791      +46     
==========================================
+ Hits        31441    31448       +7     
- Misses       6304     6343      +39     

Flag	Coverage Δ
ui-tests	40.70% <45.83%> (-0.03%)	⬇️
unitexamples-tests	73.14% <50.00%> (-0.05%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
panel/__init__.py	100.00% <ø> (ø)
panel/layout/__init__.py	100.00% <ø> (ø)
panel/layout/base.py	87.25% <40.00%> (-4.06%)	⬇️
panel/reactive.py	81.11% <100.00%> (+0.08%)	⬆️

... and 4 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[MarcSkovMadsen]

I just tried out the notebook. I'm really in favor or a Dialog/ Modal.

Here is my recommendations

• [] consider using the a11y-dialog used by the awesome-panel-modal or the Modal extension by jsPanel. You can find the awesome-panel-modal implementation here.

If the best solution is our own implementation then

• [] Gray out the background when the dialog is open
• [] Make sure you cannot interact with the background app
• [] Add functions to programmatically open() and close() the Dialog.
• [] Add parameter is_open to bind to. (Maybe visible is the parameter? I did not understand that one)
• [] Support closing by clicking outside the Dialog. This is a very common user experience. There should be a parameter close_on_backdrop (or something) to decide if this is enabled.
• [] Support closing by clicking escape. This is a very common user experience. There should be a parameter close_on_escape (or something) to decide if this is enabled.
• [] Make it more clear how to hide/ show the close button. For example via a show_close_button parameter.
• [] Test that it works on server and in Jupyter Notebook.
• [] Style the component.
  • Move the closing "x" a little bit towards the center
  • Show circle around x when hovered. Don't use red color. It signal error/ danger. And you cannot see it in the last example in the notebook. Just use the circle and variations of gray.
  • Make sure it looks nice in Templates including Fast
  • Consider rounded corners
  • Consider using some kind of transition/ animation when opening and closing.
  • Make it minimum as awesome and nice as awesome-panel-modal

[maximlt]

That's a long wishlist :)

To make it longer, I'll add feature I've added to a custom implementation of a modal:

• Allow to pass a callback that is called when the user attempts to close the dialog. The callback returns a boolean, with False meaning that the dialog cannot be closed.