Fix TodoMVC toggle-all control in dioxus-native

examples/todomvc/src/app.rs

@@ -63,18 +63,15 @@ pub fn app() -> Element {
             style { {include_str!("./todomvc.css")} }
             section { class: "todoapp",
                 TodoHeader { todos }
-                section { class: "main",
-                    if !todos.read().is_empty() {
-                        input {
-                            id: "toggle-all",
-                            class: "toggle-all",
-                            r#type: "checkbox",
-                            onchange: toggle_all,
-                            checked: active_todo_count() == 0,
-                        }
-                        label { r#for: "toggle-all" }
+                if !todos.read().is_empty() {
+                    button {
+                        class: "toggle-all",
+                        class: if active_todo_count() == 0 { "checked" },
+                        onclick: toggle_all,
+                        ">"
                     }
-
+                }
+                section { class: "main",
                     // Render the todos using the filtered_todos signal
                     // We pass the ID into the TodoEntry component so it can access the todo from the todos signal.
                     // Since we store the todos in a signal too, we also need to send down the todo list

examples/todomvc/src/todomvc.css

@@ -112,32 +112,26 @@ body {
 }
 
 .toggle-all {
-    text-align: center;
-    border: none;
-    /* Mobile Safari */
-    opacity: 0;
-    position: absolute;
-}
-
-.toggle-all+label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 60px;
     height: 34px;
-    font-size: 0;
+    font-size: 22px;
+    line-height: 1;
+    color: #e6e6e6;
     position: absolute;
-    top: -52px;
+    top: 13px;
     left: -13px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    z-index: 3;
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
 }
 
-.toggle-all+label:before {
-    content: '❯';
-    font-size: 22px;
-    color: #e6e6e6;
-    padding: 10px 27px 10px 27px;
-}
-
-.toggle-all:checked+label:before {
+.toggle-all.checked {
     color: #737373;
 }
 
@@ -363,7 +357,6 @@ html .clear-completed:active {
 */
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
-    .toggle-all,
     .todo-list li .toggle {
         background: none;
     }

tests/blitz-tests/Cargo.toml

@@ -17,6 +17,7 @@ blitz-dom = { workspace = true, features = ["accessibility", "floats", "system-f
 blitz-html = { workspace = true }
 blitz-traits = { workspace = true }
 blitz-paint = { workspace = true, features = ["scrollbars", "svg"] }
+dioxus-native = { workspace = true, features = ["svg", "system-fonts", "data-uri", "prelude", "vello-hybrid"] }
 dioxus-native-dom = { workspace = true }
 anyrender = { workspace = true }
 anyrender_vello_cpu = { workspace = true }

tests/blitz-tests/tests/todomvc_toggle_all.rs

@@ -0,0 +1,43 @@
+use blitz_test_harness::Harness;
+use keyboard_types::Key;
+
+#[path = "../../../examples/todomvc/src/app.rs"]
+mod todomvc_app;
+
+#[test]
+fn todomvc_toggle_all_has_visible_label_content() {
+    let mut harness = Harness::from_component(todomvc_app::app);
+
+    harness.type_text("first todo");
+    harness.press(Key::Enter);
+    harness.type_text("second todo");
+    harness.press(Key::Enter);
+
+    assert!(
+        harness.query(".toggle-all").is_some(),
+        "toggle-all control should be rendered once at least one todo exists"
+    );
+
+    assert_eq!(harness.text_content(".toggle-all"), ">");
+
+    let label_rect = harness.layout_rect(".toggle-all");
+    assert!(label_rect.width > 0.0, "toggle-all control should have width");
+    assert!(
+        label_rect.height > 0.0,
+        "toggle-all control should have height"
+    );
+
+    harness.click(".toggle-all");
+    assert_eq!(
+        harness.query_all(".todo-list li.completed").len(),
+        2,
+        "clicking toggle-all should mark all todos as completed"
+    );
+
+    harness.click(".toggle-all");
+    assert_eq!(
+        harness.query_all(".todo-list li.completed").len(),
+        0,
+        "clicking toggle-all again should unmark all todos"
+    );
+}