Feat/overlay drawer modal (#265)

* feat: OverlayDrawer adds modal_type prop

* fix: OverlayDrawer modal_type

thaw/src/drawer/docs/mod.md

@@ -39,6 +39,34 @@ view! {
 }
 ```
 
+### Overlay No Modal
+
+```rust demo
+let open = RwSignal::new(false);
+
+view! {
+    <Button on_click=move |_| open.update(|open| *open = !*open)>"Toggle"</Button>
+    <OverlayDrawer open modal_type=DrawerModalType::NonModal>
+        <DrawerHeader>
+          <DrawerHeaderTitle>
+            <DrawerHeaderTitleAction slot>
+                 <Button
+                    appearance=ButtonAppearance::Subtle
+                    on_click=move |_| open.set(false)
+                >
+                    "x"
+                </Button>
+            </DrawerHeaderTitleAction>
+            "Default Drawer"
+          </DrawerHeaderTitle>
+        </DrawerHeader>
+        <DrawerBody>
+          <p>"Drawer content"</p>
+        </DrawerBody>
+    </OverlayDrawer>
+}
+```
+
 ### Inline
 
 ```rust demo
@@ -151,6 +179,7 @@ view! {
 | close_on_esc | `bool` | `false` | Whether to close drawer on Esc is pressed. |
 | position | `MaybeSignal<DrawerPosition>` | `DrawerPlacement::Left` | Position of the drawer. |
 | size | `MaybeSignal<DrawerSize>` | `DrawerSize::Small` | Size of the drawer. |
+| modal_type | `DrawerModalType` | `DrawerModalType::Modal` | Dialog variations. |
 | children | `Children` |  |  |
 
 ### InlineDrawer Props

thaw/src/drawer/mod.rs

@@ -54,3 +54,14 @@ impl DrawerSize {
         }
     }
 }
+
+#[derive(Debug, Default, PartialEq)]
+pub enum DrawerModalType {
+    /// When this type of dialog is open,
+    /// the rest of the page is dimmed out and cannot be interacted with. 
+    #[default]
+    Modal,
+    /// When a non-modal dialog is open,
+    /// the rest of the page is not dimmed out and users can interact with the rest of the page.
+    NonModal,
+}

thaw/src/drawer/overlay_drawer.rs

@@ -1,6 +1,6 @@
-use super::{DrawerPosition, DrawerSize};
+use super::{DrawerModalType, DrawerPosition, DrawerSize};
 use crate::ConfigInjection;
-use leptos::{ev, html, prelude::*};
+use leptos::{either::Either, ev, html, prelude::*};
 use thaw_components::{CSSTransition, FocusTrap, Teleport};
 use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model};
 
@@ -22,6 +22,9 @@ pub fn OverlayDrawer(
     /// Size of the drawer.
     #[prop(optional, into)]
     size: MaybeSignal<DrawerSize>,
+    /// Dialog variations.
+    #[prop(optional, into)]
+    modal_type: DrawerModalType,
     children: Children,
 ) -> impl IntoView {
     mount_style("drawer", include_str!("./drawer.css"));
@@ -60,20 +63,28 @@ pub fn OverlayDrawer(
                     class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class]
                     data-thaw-id=config_provider.id()
                 >
-                    <CSSTransition
+                    {if modal_type == DrawerModalType::Modal {
-                        node_ref=mask_ref
+                        Either::Left(
-                        appear=open.get_untracked()
+                            view! {
-                        show=open.signal()
+                                <CSSTransition
-                        name="fade-in-transition"
+                                    node_ref=mask_ref
-                        let:display
+                                    appear=open.get_untracked()
-                    >
+                                    show=open.signal()
-                        <div
+                                    name="fade-in-transition"
-                            class="thaw-overlay-drawer__backdrop"
+                                    let:display
-                            style=move || display.get().unwrap_or_default()
+                                >
-                            on:click=on_mask_click
+                                    <div
-                            node_ref=mask_ref
+                                        class="thaw-overlay-drawer__backdrop"
-                        ></div>
+                                        style=move || display.get().unwrap_or_default()
-                    </CSSTransition>
+                                        on:click=on_mask_click
+                                        node_ref=mask_ref
+                                    ></div>
+                                </CSSTransition>
+                            },
+                        )
+                    } else {
+                        Either::Right(())
+                    }}
                     <CSSTransition
                         node_ref=drawer_ref
                         appear=open_drawer.get_untracked()

thaw/src/theme/color.rs

@@ -119,6 +119,7 @@ pub struct ColorTheme {
     pub shadow4: String,
     pub shadow8: String,
     pub shadow16: String,
+    pub shadow64: String,
 }
 
 impl ColorTheme {
@@ -242,6 +243,7 @@ impl ColorTheme {
             shadow4: "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)".into(),
             shadow8: "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)".into(),
             shadow16: "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)".into(),
+            shadow64: "0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)".into(),
         }
     }
 
@@ -365,6 +367,7 @@ impl ColorTheme {
             shadow4: "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)".into(),
             shadow8: "0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28)".into(),
             shadow16: "0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28)".into(),
+            shadow64: "0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28)".into(),
         }
     }
 }

thaw/src/theme/common.rs

@@ -59,6 +59,7 @@ pub struct CommonTheme {
     pub duration_ultra_fast: String,
     pub duration_faster: String,
     pub duration_normal: String,
+    pub duration_gentle: String,
     pub duration_slow: String,
     pub curve_accelerate_mid: String,
     pub curve_decelerate_max: String,
@@ -126,6 +127,7 @@ impl CommonTheme {
             duration_ultra_fast: "50ms".into(),
             duration_faster: "100ms".into(),
             duration_normal: "200ms".into(),
+            duration_gentle: "250ms".into(),
             duration_slow: "300ms".into(),
             curve_accelerate_mid: "cubic-bezier(1,0,1,1)".into(),
             curve_decelerate_max: "cubic-bezier(0.1,0.9,0.2,1)".into(),