fix: toolbar demo toggle buttons not toggling off

- Replace broken Vec-based toggle logic with individual boolean signals
- Use Dioxus native CSS-in-RSX properties instead of style string memo
- Add data-state attribute for visual button pressed state
- Add CSS styling for pressed toolbar buttons

Author: AnttiJalomaki

preview/src/components/toolbar/style.css

@@ -21,11 +21,17 @@
 
 .toolbar button:hover:not([disabled]),
 .toolbar button:focus-visible {
-    background: var(--light, var(--primary-color-4)) 
+    background: var(--light, var(--primary-color-4))
         var(--dark, var(--primary-color-7));
     color: var(--secondary-color-1);
 }
 
+.toolbar button[data-state="on"] {
+    background: var(--light, var(--primary-color-5))
+        var(--dark, var(--primary-color-6));
+    color: var(--secondary-color-1);
+}
+
 .toolbar button:disabled {
     color: var(--secondary-color-5);
     cursor: not-allowed;

preview/src/components/toolbar/variants/main/mod.rs

@@ -3,49 +3,61 @@ use dioxus::prelude::*;
 
 #[component]
 pub fn Demo() -> Element {
-    let mut text_style = use_signal(Vec::new);
-    let mut text_align = use_signal(|| String::from("left"));
-    let mut toggle_style = move |style: &str| {
-        let mut current_styles = text_style.write();
-        current_styles.retain(|s| s != style);
-        current_styles.push(style.to_string());
-    };
-    let mut set_align = move |align: &str| {
-        text_align.set(align.to_string());
-    };
-    let text_styles = use_memo(move || {
-        let mut classes = Vec::new();
-        for style in text_style() {
-            match style.as_str() {
-                "bold" => classes.push("font-weight: bold;"),
-                "italic" => classes.push("font-style: italic;"),
-                "underline" => classes.push("text-decoration: underline;"),
-                _ => {}
-            }
-        }
-        classes.join(" ")
-    });
-    let text_align_style =
-        use_memo(move || format!("text-align: {}; {}", text_align(), text_styles()));
+    let mut is_bold = use_signal(|| false);
+    let mut is_italic = use_signal(|| false);
+    let mut is_underline = use_signal(|| false);
+    let mut text_align = use_signal(|| "left".to_string());
+
     rsx! {
         Toolbar { aria_label: "Text formatting",
             ToolbarGroup {
-                ToolbarButton { index: 0usize, on_click: move |_| toggle_style("bold"), "Bold" }
-                ToolbarButton { index: 1usize, on_click: move |_| toggle_style("italic"), "Italic" }
+                ToolbarButton {
+                    index: 0usize,
+                    on_click: move |_| is_bold.toggle(),
+                    "data-state": if is_bold() { "on" } else { "off" },
+                    "Bold"
+                }
+                ToolbarButton {
+                    index: 1usize,
+                    on_click: move |_| is_italic.toggle(),
+                    "data-state": if is_italic() { "on" } else { "off" },
+                    "Italic"
+                }
                 ToolbarButton {
                     index: 2usize,
-                    on_click: move |_| toggle_style("underline"),
+                    on_click: move |_| is_underline.toggle(),
+                    "data-state": if is_underline() { "on" } else { "off" },
                     "Underline"
                 }
             }
             ToolbarSeparator {}
             ToolbarGroup {
-                ToolbarButton { index: 3usize, on_click: move |_| set_align("left"), "Align Left" }
-                ToolbarButton { index: 4usize, on_click: move |_| set_align("center"), "Align Center" }
-                ToolbarButton { index: 5usize, on_click: move |_| set_align("right"), "Align Right" }
+                ToolbarButton {
+                    index: 3usize,
+                    on_click: move |_| text_align.set("left".to_string()),
+                    "data-state": if text_align() == "left" { "on" } else { "off" },
+                    "Align Left"
+                }
+                ToolbarButton {
+                    index: 4usize,
+                    on_click: move |_| text_align.set("center".to_string()),
+                    "data-state": if text_align() == "center" { "on" } else { "off" },
+                    "Align Center"
+                }
+                ToolbarButton {
+                    index: 5usize,
+                    on_click: move |_| text_align.set("right".to_string()),
+                    "data-state": if text_align() == "right" { "on" } else { "off" },
+                    "Align Right"
+                }
             }
         }
-        p { style: text_align_style, max_width: "30rem",
+        p {
+            max_width: "30rem",
+            text_align: "{text_align}",
+            font_weight: if is_bold() { "bold" } else { "normal" },
+            font_style: if is_italic() { "italic" } else { "normal" },
+            text_decoration: if is_underline() { "underline" } else { "none" },
             "This is a sample text that will be formatted according to the toolbar buttons you click. Try clicking the buttons above to see how the text formatting changes."
         }
     }