clean up dropdown

marc2332 · Feb 8, 2025 · 0fd908a · 0fd908a
1 parent 0d4262e
commit 0fd908a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/crates/components/src/body.rs b/crates/components/src/body.rs
@@ -23,6 +23,9 @@ pub struct BodyProps {
     /// Height of the Body.
     #[props(default = "fill".to_string())]
     pub height: String,
+    /// Direction of the Body.
+    #[props(default = "vertical".to_string())]
+    pub direction: String,
 }
 
 /// Usually used to wrap the application root component.
@@ -53,6 +56,7 @@ pub fn Body(
         padding,
         width,
         height,
+        direction,
     }: BodyProps,
 ) -> Element {
     let theme = use_applied_theme!(&theme, body);
@@ -66,6 +70,7 @@ pub fn Body(
             background: "{background}",
             spacing,
             padding,
+            direction,
             {&children}
         }
     )

diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs
@@ -139,7 +139,7 @@ where
             a11y_member_of,
             background: "{background}",
             border,
-            padding: "6 22 6 16",
+            padding: "6 10",
             corner_radius: "6",
             main_align: "center",
             onmouseenter,
@@ -321,6 +321,7 @@ where
     rsx!(
         rect {
             direction: "vertical",
+            spacing: "4",
             rect {
                 width: "{width}",
                 onmouseenter,
@@ -333,9 +334,8 @@ where
                 background: "{background}",
                 color: "{font_theme.color}",
                 corner_radius: "8",
-                padding: "8 16",
+                padding: "6 16",
                 border,
-                shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
                 direction: "horizontal",
                 main_align: "center",
                 cross_align: "center",
@@ -365,7 +365,7 @@ where
                             overflow: "clip",
                             corner_radius: "8",
                             background: "{dropdown_background}",
-                            shadow: "0 4 5 0 rgb(0, 0, 0, 0.3)",
+                            shadow: "0 2 4 0 rgb(0, 0, 0, 0.15)",
                             padding: "6",
                             content: "fit",
                             {props.children}

diff --git a/examples/dropdown.rs b/examples/dropdown.rs
@@ -20,8 +20,10 @@ fn app() -> Element {
     let mut selected_dropdown = use_signal(|| "First Option".to_string());
 
     rsx!(
-        rect {
+        Body {
             direction: "horizontal",
+            padding: "4",
+            spacing: "4",
             Dropdown {
                 theme: theme_with!(DropdownTheme {
                     width: "200".into(),