feat: Input improvements (#480)

* feat: Proper event bubbling * update * ux improvements * improvements * fixes and improvements * fix * clean up * fixes * cleanup * fixes and improvements * fixes * feat: `Input` improvements
marc2332 · Feb 10, 2024 · 048787f · 048787f
1 parent 1924c00
commit 048787f
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs
@@ -96,6 +96,7 @@ pub fn Input(
     let theme = use_applied_theme!(&theme, input);
     let mut focus = use_focus();
 
+    let focus_id = focus.attribute();
     if &value != editable.editor().read().rope() {
         editable.editor_mut().write().set(&value);
     }
@@ -163,6 +164,7 @@ pub fn Input(
         border_fill,
         width,
         margin,
+        corner_radius,
         font_theme: FontTheme { color },
         ..
     } = theme;
@@ -174,11 +176,12 @@ pub fn Input(
             color: "{color}",
             background: "{background}",
             border: "1 solid {border_fill}",
-            shadow: "0 3 15 0 rgb(0, 0, 0, 0.3)",
-            corner_radius: "10",
+            shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
+            corner_radius: "{corner_radius}",
             margin: "{margin}",
             cursor_reference,
             focus_id,
+            focusable: "true",
             role: "textInput",
             main_align: "center",
             paragraph {

diff --git a/crates/hooks/src/theming/dark.rs b/crates/hooks/src/theming/dark.rs
@@ -37,6 +37,7 @@ pub const DARK_THEME: Theme = Theme {
         border_fill: cow_borrowed!("rgb(80, 80, 80)"),
         width: LIGHT_THEME.input.width,
         margin: LIGHT_THEME.input.margin,
+        corner_radius: LIGHT_THEME.input.corner_radius,
     },
     switch: SwitchTheme {
         background: cow_borrowed!("rgb(60, 60, 60)"),

diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs
@@ -37,6 +37,7 @@ pub const LIGHT_THEME: Theme = Theme {
         border_fill: cow_borrowed!("rgb(210, 210, 210)"),
         width: cow_borrowed!("150"),
         margin: cow_borrowed!("4"),
+        corner_radius: cow_borrowed!("10"),
     },
     switch: SwitchTheme {
         background: cow_borrowed!("rgb(121, 116, 126)"),

diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs
@@ -274,6 +274,7 @@ define_theme! {
         border_fill: str,
         width: str,
         margin: str,
+        corner_radius: str,
         %[subthemes]
         font_theme: FontTheme,
     }