feat: Keyboard navigation for Checkbox (#926)

* feat: Unified colors theming * some improvements * improvements * clean up * feat: Keyboard navigation support for `Checkbox` * chore: Update switch_theme example
marc2332 · Sep 28, 2024 · 6e7681f · 6e7681f
1 parent 05f07f8
commit 6e7681f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 13 deletions.
diff --git a/crates/components/src/checkbox.rs b/crates/components/src/checkbox.rs
@@ -1,7 +1,11 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements::{
+    elements as dioxus_elements,
+    events::KeyboardEvent,
+};
 use freya_hooks::{
     use_applied_theme,
+    use_focus,
     CheckboxTheme,
     CheckboxThemeWith,
 };
@@ -68,30 +72,46 @@ pub fn Checkbox(
     /// Theme override.
     theme: Option<CheckboxThemeWith>,
 ) -> Element {
+    let focus = use_focus();
     let CheckboxTheme {
+        border_fill,
         unselected_fill,
         selected_fill,
         selected_icon_fill,
     } = use_applied_theme!(&theme, checkbox);
-    let (fill, border) = if selected {
+    let (inner_fill, outer_fill) = if selected {
         (selected_fill.as_ref(), selected_fill.as_ref())
     } else {
         ("transparent", unselected_fill.as_ref())
     };
+    let border = if focus.is_selected() {
+        format!("4 solid {}", border_fill)
+    } else {
+        "none".to_string()
+    };
+
+    let onkeydown = move |_: KeyboardEvent| {};
 
     rsx!(
         rect {
-            width: "18",
-            height: "18",
-            padding: "4",
-            main_align: "center",
-            cross_align: "center",
+            border,
+            border_align: "outer",
             corner_radius: "4",
-            border: "2 solid {border}",
-            background: "{fill}",
-            if selected {
-                TickIcon {
-                    fill: selected_icon_fill
+            rect {
+                a11y_id: focus.attribute(),
+                width: "18",
+                height: "18",
+                padding: "4",
+                main_align: "center",
+                cross_align: "center",
+                corner_radius: "4",
+                border: "2 solid {outer_fill}",
+                background: "{inner_fill}",
+                onkeydown,
+                if selected {
+                    TickIcon {
+                        fill: selected_icon_fill
+                    }
                 }
             }
         }

diff --git a/crates/hooks/src/theming/base.rs b/crates/hooks/src/theming/base.rs
@@ -180,6 +180,7 @@ pub(crate) const BASE_THEME: Theme = Theme {
         unselected_fill: cow_borrowed!("key(solid)"),
         selected_fill: cow_borrowed!("key(primary)"),
         selected_icon_fill: cow_borrowed!("key(secondary)"),
+        border_fill: cow_borrowed!("key(surface)"),
     },
     menu_item: MenuItemTheme {
         hover_background: cow_borrowed!("key(focused_surface)"),

diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs
@@ -482,6 +482,7 @@ define_theme! {
         unselected_fill: str,
         selected_fill: str,
         selected_icon_fill: str,
+        border_fill: str,
     }
 }
 

diff --git a/examples/switch_theme.rs b/examples/switch_theme.rs
@@ -130,7 +130,7 @@ fn app() -> Element {
                         }
                     }
                     Button {
-                        onclick: move |_| value.set(35.),
+                        onpress: move |_| value.set(35.),
                         label {
                             "Set to 35%"
                         }