From 9d1e808627faa3972e6809d9e2bde6c322a0b25d Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Mon, 11 Dec 2023 16:33:50 +0800
Subject: [PATCH] feat: button add a circle property

---
 demo/src/pages/button/mod.rs | 22 +++++++++++++++++++++-
 src/button/button.css        |  6 ++++++
 src/button/mod.rs            |  2 ++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/demo/src/pages/button/mod.rs b/demo/src/pages/button/mod.rs
index 25cddb6..64dae40 100644
--- a/demo/src/pages/button/mod.rs
+++ b/demo/src/pages/button/mod.rs
@@ -67,7 +67,7 @@ pub fn ButtonPage() -> impl IntoView {
 
                 </DemoCode>
             </Demo>
-            <h3>"icon"</h3>
+            <h3>"Icon"</h3>
             <Demo>
                 <Space>
                     <Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined>
@@ -78,6 +78,11 @@ pub fn ButtonPage() -> impl IntoView {
                         icon=icondata::AiIcon::AiCloseOutlined
                         round=true
                     />
+                    <Button
+                        color=ButtonColor::Error
+                        icon=icondata::AiIcon::AiCloseOutlined
+                        circle=true
+                    />
                 </Space>
                 <DemoCode slot>
 
@@ -88,6 +93,11 @@ pub fn ButtonPage() -> impl IntoView {
                 </Button>
                 <Button color=ButtonColor::Error icon=icondata::AiIcon::AiCloseOutlined round=true>
                 </Button>
+                <Button
+                    color=ButtonColor::Error
+                    icon=icondata::AiIcon::AiCloseOutlined
+                    circle=true
+                />
             "#,
                         "rust"
                     )}
@@ -282,6 +292,16 @@ pub fn ButtonPage() -> impl IntoView {
                         </td>
                         <td>"Whether the button shows rounded corners."</td>
                     </tr>
+                    <tr>
+                        <td>"circle"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<bool>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"false"</Text>
+                        </td>
+                        <td>"Whether the button is round."</td>
+                    </tr>
                     <tr>
                         <td>"icon"</td>
                         <td>
diff --git a/src/button/button.css b/src/button/button.css
index 3942ffb..db77053 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -69,6 +69,12 @@
     border-radius: var(--thaw-height);
 }
 
+.thaw-button--circle:not(.thaw-button--link) {
+    width: var(--thaw-height);
+    padding: 0;
+    border-radius: var(--thaw-height);
+}
+
 @keyframes thawLoadingCircle {
     100% {
         transform: rotate(360deg);
diff --git a/src/button/mod.rs b/src/button/mod.rs
index cd4f343..761e3aa 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -102,6 +102,7 @@ pub fn Button(
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] size: MaybeSignal<ButtonSize>,
     #[prop(optional, into)] round: MaybeSignal<bool>,
+    #[prop(optional, into)] circle: MaybeSignal<bool>,
     #[prop(optional, into)] icon: Option<Icon>,
     #[prop(optional, into)] loading: MaybeSignal<bool>,
     #[prop(optional, into)] disabled: MaybeSignal<bool>,
@@ -225,6 +226,7 @@ pub fn Button(
             class=("thaw-button--text", move || variant.get() == ButtonVariant::Text)
             class=("thaw-button--link", move || variant.get() == ButtonVariant::Link)
             class=("thaw-button--round", move || round.get())
+            class=("thaw-button--circle", move || circle.get())
             class=("thaw-button--disabled", move || disabled.get())
             style=move || format!("{}{}", css_vars.get(), style.get())
             disabled=move || disabled.get()