From 60a1f589f5289f73fd8d685d6bdda26920f44a83 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Mon, 8 May 2023 23:53:54 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20button=20add=20round?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/basic/src/demo_button.rs |  2 ++
 src/button/button.css             |  5 +++++
 src/button/mod.rs                 | 20 +++++++++++++++++---
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/examples/basic/src/demo_button.rs b/examples/basic/src/demo_button.rs
index 826f316..dc15270 100644
--- a/examples/basic/src/demo_button.rs
+++ b/examples/basic/src/demo_button.rs
@@ -32,6 +32,8 @@ pub fn DemoButton(cx: Scope) -> impl IntoView {
             <Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
                 "ERROR Color Icon"
             </Button>
+            <Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
+            </Button>
         </Space>
     }
 }
\ No newline at end of file
diff --git a/src/button/button.css b/src/button/button.css
index 6ae4756..fc325d3 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -31,3 +31,8 @@
 .melt-button--link:hover {
     color: var(--font-color-hover);
 }
+
+.melt-button--round {
+    padding: 0 10px;
+    border-radius: 50%;
+}
\ No newline at end of file
diff --git a/src/button/mod.rs b/src/button/mod.rs
index 37f6938..a101591 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -39,8 +39,9 @@ pub fn Button(
     cx: Scope,
     #[prop(optional, into)] type_: MaybeSignal<ButtonType>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
+    #[prop(optional, into)] round: MaybeSignal<bool>,
     #[prop(optional, into)] icon: Option<leptos_icons::Icon>,
-    children: Children,
+    #[prop(optional)] children: Option<Children>,
 ) -> impl IntoView {
     let theme = use_theme(cx, Theme::light);
     let css_vars = create_memo(cx, move |_| {
@@ -62,23 +63,36 @@ pub fn Button(
     });
     let class_name = mount_style("button", || style_sheet_str!("./src/button/button.css"));
 
+    let icon_style= if children.is_some() {
+        "margin-right: 6px"
+    } else {
+        ""
+    };
+
     view! {cx, class=class_name,
         <button
             class:melt-button=true
             class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
             class=("melt-button--link", move || type_.get() == ButtonType::LINK)
+            class=("melt-button--round", move || round.get())
             style=move || css_vars.get()
             >
             {
                 if let Some(icon) = icon {
                     view!{cx,
-                            <LeptosIcon icon=icon style="margin-right: 6px"/>
+                            <LeptosIcon icon=icon style=icon_style/>
                     }.into()
                 } else {
                     None
                 }
             }
-            {children(cx)}
+            {
+                if let Some(children) = children {
+                    children(cx).into()
+                } else {
+                    None
+                }
+            }
         </button>
     }
 }