Create ChipPreview and refactor

lookbook/Cargo.toml

@@ -8,4 +8,3 @@ dioxus = { git = "https://github.com/dioxuslabs/dioxus" }
 dioxus-web = { git = "https://github.com/dioxuslabs/dioxus" }
 lookbook = { git = "https://github.com/matthunz/lookbook" }
 dioxus-material = { git = "https://github.com/matthunz/dioxus-material" }
-

lookbook/src/main.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 use lookbook::LookBook;
 
 mod previews;
-use previews::{ButtonPreview, TabRowPreview, TextButtonPreview, TextFieldPreview};
+use previews::{ButtonPreview, ChipPreview,TabRowPreview, TextButtonPreview, TextFieldPreview};
 
 #[component]
 fn Home(cx: Scope) -> Element {
@@ -22,15 +22,12 @@ fn Home(cx: Scope) -> Element {
 }
 
 fn app(cx: Scope) -> Element {
-    render!(LookBook {
-        home: Home,
-        previews: [
-            ButtonPreview,
-            TabRowPreview,
-            TextButtonPreview,
-            TextFieldPreview
-        ]
-    })
+    render!(
+        LookBook {
+            home: Home,
+            previews: [ButtonPreview, ChipPreview, TabRowPreview, TextButtonPreview, TextFieldPreview]
+        }
+    )
 }
 
 fn main() {

lookbook/src/previews/button.rs

@@ -18,10 +18,7 @@ pub fn ButtonPreview(
     #[lookbook(default = &*use_theme(cx).border_radius_medium)]
     border_radius: &'a str,
 ) -> Element {
-    render!(Button {
-        background_color: background_color,
-        border_radius: border_radius,
-        onpress: |_| {},
-        label
-    })
+    render!(
+        Button { background_color: background_color, border_radius: border_radius, onpress: |_| {}, label }
+    )
 }

lookbook/src/previews/chip.rs

@@ -0,0 +1,21 @@
+use dioxus::prelude::*;
+use dioxus_material::{use_theme, Chip};
+use lookbook::{preview, Json};
+
+/// Buttons let people take action and make choices with one tap.
+#[preview]
+pub fn ChipPreview(
+    cx: Scope,
+    /// Label for the button.
+    #[lookbook(default = "Label")]
+    label: &'a str,
+
+    /// Background color of the container (optional).
+    #[lookbook(default = false)]
+    is_selected: Json<bool>,
+
+) -> Element {
+    render!(
+        Chip { is_selected: is_selected.0, onclick: |_| {}, label }
+    )
+}

lookbook/src/previews/mod.rs

@@ -1,6 +1,9 @@
 mod button;
 pub use button::ButtonPreview;
 
+mod chip;
+pub use chip::ChipPreview;
+
 mod tab_row;
 pub use tab_row::TabRowPreview;
 

lookbook/src/previews/text_button.rs

@@ -18,10 +18,7 @@ pub fn TextButtonPreview(
     #[lookbook(default = &*use_theme(cx).border_radius_medium)]
     border_radius: &'a str,
 ) -> Element {
-    render!(TextButton {
-        color: color,
-        border_radius: border_radius,
-        onpress: |_| {},
-        label
-    })
+    render!(
+        TextButton { color: color, border_radius: border_radius, onpress: |_| {}, label }
+    )
 }

lookbook/src/previews/text_field.rs

@@ -12,9 +12,11 @@ pub fn TextFieldPreview<'a>(
 ) -> Element<'a> {
     let value = use_state(cx, || String::from("Text Field"));
 
-    render!(TextField {
-        label: label,
-        value: value,
-        onchange: move |event: FormEvent| value.set(event.data.value.clone())
-    })
+    render!(
+        TextField {
+            label: label,
+            value: value,
+            onchange: move |event: FormEvent| value.set(event.data.value.clone())
+        }
+    )
 }

src/chip.rs

@@ -51,19 +51,21 @@ pub fn Chip<'a>(
             height: "32px",
             line_height: "32px",
             border_radius: "{theme.border_radius_small}",
-            padding: "0 14px",
             font_family: "sans-serif",
             font_size: "14px",
             font_weight: 500,
             border: "1px solid {border_color}",
             background: background,
             Ripple { onclick: |event| onclick.call(event),
-                if *is_selected == Some(true) {
-                    render!(Icon { kind: IconKind::Check })
-                } else {
-                    None
+                div { display: "inline-flex", flex_direction: "row", align_items: "center",
+                    if *is_selected == Some(true) {
+                        render!(Icon { kind: IconKind::Check })
+                    } else {
+                        None
+                    }
+
+                    div { padding: "0 14px", children }
                 }
-                children
             }
         }
     )

src/tab.rs

@@ -2,10 +2,7 @@ use dioxus::prelude::*;
 
 #[component]
 pub fn Tab<'a>(cx: Scope<'a>, children: Element<'a>) -> Element<'a> {
-    render!(div {
-        font_size: "1.2em",
-        padding: "10px 0",
-        text_align: "center",
-        children
-    })
+    render!(
+        div { font_size: "1.2em", padding: "10px 0", text_align: "center", children }
+    )
 }