refactor: Remove unnecessary border wrappers of Radio and Checkbox (#955

) * refactor: Remove unnecessary border wrappers of Radio and Checkbox * fix formatting * adjust tests for checkbox and radio * Update crates/components/src/checkbox.rs Co-authored-by: Marc Espin <[email protected]> * Update crates/components/src/radio.rs Co-authored-by: Marc Espin <[email protected]> --------- Co-authored-by: Marc Espin <[email protected]>
marc2332 · Oct 6, 2024 · debbb04 · debbb04
1 parent 44d1ee8
commit debbb04
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 61 deletions.
diff --git a/crates/components/src/checkbox.rs b/crates/components/src/checkbox.rs
@@ -85,32 +85,28 @@ pub fn Checkbox(
         ("transparent", unselected_fill.as_ref())
     };
     let border = if focus.is_selected() {
-        format!("4 outer {}", border_fill)
+        format!("2 inner {outer_fill}, 4 outer {border_fill}")
     } else {
-        "none".to_string()
+        format!("2 inner {outer_fill}")
     };
 
     let onkeydown = move |_: KeyboardEvent| {};
 
     rsx!(
         rect {
-            border,
+            a11y_id: focus.attribute(),
+            width: "18",
+            height: "18",
+            padding: "4",
+            main_align: "center",
+            cross_align: "center",
             corner_radius: "4",
-            rect {
-                a11y_id: focus.attribute(),
-                width: "18",
-                height: "18",
-                padding: "4",
-                main_align: "center",
-                cross_align: "center",
-                corner_radius: "4",
-                border: "2 inner {outer_fill}",
-                background: "{inner_fill}",
-                onkeydown,
-                if selected {
-                    TickIcon {
-                        fill: selected_icon_fill
-                    }
+            border,
+            background: "{inner_fill}",
+            onkeydown,
+            if selected {
+                TickIcon {
+                    fill: selected_icon_fill
                 }
             }
         }
@@ -191,29 +187,29 @@ mod test {
         utils.wait_for_update().await;
 
         // If the inner square exists it means that the Checkbox is selected, otherwise it isn't
-        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(2).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(2).get(0).get(0).get(0).is_placeholder());
 
         utils.click_cursor((20., 50.)).await;
 
-        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).get(0).is_element());
-        assert!(root.get(2).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).is_element());
+        assert!(root.get(2).get(0).get(0).get(0).is_placeholder());
 
         utils.click_cursor((10., 90.)).await;
         utils.wait_for_update().await;
 
-        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).get(0).is_element());
-        assert!(root.get(2).get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).is_element());
+        assert!(root.get(2).get(0).get(0).get(0).is_element());
 
         utils.click_cursor((10., 10.)).await;
         utils.click_cursor((10., 50.)).await;
         utils.wait_for_update().await;
 
-        assert!(root.get(0).get(0).get(0).get(0).get(0).is_element());
-        assert!(root.get(1).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(2).get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(1).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(2).get(0).get(0).get(0).is_element());
     }
 }
diff --git a/crates/components/src/radio.rs b/crates/components/src/radio.rs
@@ -69,34 +69,30 @@ pub fn Radio(
         unselected_fill
     };
     let border = if focus.is_selected() {
-        format!("4 outer {}", border_fill)
+        format!("2 inner {fill}, 4 outer {border_fill}")
     } else {
-        "none".to_string()
+        format!("2 inner {fill}")
     };
 
     let onkeydown = move |_: KeyboardEvent| {};
 
     rsx!(
         rect {
+            a11y_id: focus.attribute(),
+            width: "18",
+            height: "18",
             border,
+            padding: "4",
+            main_align: "center",
+            cross_align: "center",
             corner_radius: "99",
-            rect {
-                a11y_id: focus.attribute(),
-                width: "18",
-                height: "18",
-                border: "2 inner {fill}",
-                padding: "4",
-                main_align: "center",
-                cross_align: "center",
-                corner_radius: "99",
-                onkeydown,
-                if selected {
-                    rect {
-                        width: "10",
-                        height: "10",
-                        background: "{fill}",
-                        corner_radius: "99",
-                    }
+            onkeydown,
+            if selected {
+                rect {
+                    width: "10",
+                    height: "10",
+                    background: "{fill}",
+                    corner_radius: "99",
                 }
             }
         }
@@ -157,26 +153,26 @@ mod test {
         utils.wait_for_update().await;
 
         // If the inner circle exists it means that the Radio is activated, otherwise it isn't
-        assert!(root.get(0).get(0).get(0).get(0).get(0).is_element());
-        assert!(root.get(1).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(2).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(1).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(2).get(0).get(0).get(0).is_placeholder());
 
         utils.click_cursor((20., 50.)).await;
 
-        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).get(0).is_element());
-        assert!(root.get(2).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).is_element());
+        assert!(root.get(2).get(0).get(0).get(0).is_placeholder());
 
         utils.click_cursor((10., 90.)).await;
 
-        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(2).get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(2).get(0).get(0).get(0).is_element());
 
         utils.click_cursor((10., 10.)).await;
 
-        assert!(root.get(0).get(0).get(0).get(0).get(0).is_element());
-        assert!(root.get(1).get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(2).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(1).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(2).get(0).get(0).get(0).is_placeholder());
     }
 }