Add a basic modal implementation

[nyanzebra]

What It Does

This adds a basic modal implementation, below are images that show what the example looks like. Will update examples with a gif after getting initial feedback.

What is not included:

• callbacks for when modal opens/closes
• examples with forms (common usage?)
• should maybe consider making a more fundamental component that modal can be built off of, for example, the same logic might help with other types of pop-ups?

Related Issues

[ccbrown]

Thanks for the PR! I like the idea, but as-is it doesn't seem to add much utility. This achieves the same effect:

diff --git a/examples/modal.rs b/examples/modal.rs
index c8c23f5..d5e924c 100644
--- a/examples/modal.rs
+++ b/examples/modal.rs
@@ -56,7 +56,7 @@ fn Popup(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
                         content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
                     )
                 }
-                Modal(is_open: should_popup.get()) {
+                #(should_popup.get().then(|| element! {
                     Box(
                         align_items: AlignItems::Center,
                         border_style: BorderStyle::Round,
@@ -65,7 +65,7 @@ fn Popup(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
                     ) {
                         Text(content: "안영하세요!")
                     }
-                }
+                }))
             }
         }
     }

Is there additional functionality that Modal could have that would better justify its existence?

[nyanzebra]

Thanks for the PR! I like the idea, but as-is it doesn't seem to add much utility. This achieves the same effect:

diff --git a/examples/modal.rs b/examples/modal.rs
index c8c23f5..d5e924c 100644
--- a/examples/modal.rs
+++ b/examples/modal.rs
@@ -56,7 +56,7 @@ fn Popup(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
                         content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
                     )
                 }
-                Modal(is_open: should_popup.get()) {
+                #(should_popup.get().then(|| element! {
                     Box(
                         align_items: AlignItems::Center,
                         border_style: BorderStyle::Round,
@@ -65,7 +65,7 @@ fn Popup(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
                     ) {
                         Text(content: "안영하세요!")
                     }
-                }
+                }))
             }
         }
     }

Is there additional functionality that Modal could have that would better justify its existence?

At this point in the PR, no, it doesn't have anything special. The value of a modal component, from what I can tell, is to be able to have fns called on open and close of the modal. I am also thinking it could be used for composition with future components that require popup functionality. But as we spoke about whenever ago, if it seems like a useful future component we can add/discuss or can just close :) Am good with either!