From 72de24c445230b00020e003b5d5b44226d0c3660 Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Tue, 5 Dec 2023 16:19:49 +0800
Subject: [PATCH] Feat/button group (#37)

* feat: solid button click style

* feat: add button group
---
 demo/src/pages/button/mod.rs | 60 +++++++++++++++++++++++
 src/button/button-group.css  | 25 ++++++++++
 src/button/button.css        | 20 +++++---
 src/button/button_group.rs   | 12 +++++
 src/button/mod.rs            | 94 +++++++++++++++++++++---------------
 src/button/theme.rs          |  5 +-
 6 files changed, 169 insertions(+), 47 deletions(-)
 create mode 100644 src/button/button-group.css
 create mode 100644 src/button/button_group.rs

diff --git a/demo/src/pages/button/mod.rs b/demo/src/pages/button/mod.rs
index cb4394c..8387e62 100644
--- a/demo/src/pages/button/mod.rs
+++ b/demo/src/pages/button/mod.rs
@@ -133,6 +133,66 @@ pub fn ButtonPage() -> impl IntoView {
 
                 </DemoCode>
             </Demo>
+            <h3>"Button group"</h3>
+            <Demo>
+                <Space>
+                    <ButtonGroup>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                    </ButtonGroup>
+                    <ButtonGroup vertical=true>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                    </ButtonGroup>
+                </Space>
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                <Space>
+                    <ButtonGroup>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                    </ButtonGroup>
+                    <ButtonGroup vertical=true>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                        <Button variant=ButtonVariant::Solid>
+                            "Solid"
+                        </Button>
+                    </ButtonGroup>
+                </Space>
+                    "#,
+                        "rust"
+                    )}
+
+                </DemoCode>
+            </Demo>
             <h3>"style"</h3>
             <Demo>
                 <Space>
diff --git a/src/button/button-group.css b/src/button/button-group.css
new file mode 100644
index 0000000..db78b56
--- /dev/null
+++ b/src/button/button-group.css
@@ -0,0 +1,25 @@
+.thaw-button-group--vertical {
+    display: inline-flex;
+    flex-direction: column;
+}
+.thaw-button-group--vertical .thaw-button:first-child {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+.thaw-button-group--vertical .thaw-button:last-child {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+}
+.thaw-button-group--vertical .thaw-button:not(:first-child):not(:last-child),
+.thaw-button-group:not(.thaw-button-group--vertical)
+    .thaw-button:not(:first-child):not(:last-child) {
+    border-radius: 0 !important;
+}
+.thaw-button-group:not(.thaw-button-group--vertical) .thaw-button:first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+.thaw-button-group:not(.thaw-button-group--vertical) .thaw-button:last-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
diff --git a/src/button/button.css b/src/button/button.css
index c38eaa0..8bf5e7a 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -12,7 +12,7 @@
     user-select: none;
 }
 
-.thaw-button:hover:not(.thaw-button--disabled) {
+.thaw-button:hover:not(.thaw-button--disabled, .thaw-button--solid) {
     border-color: var(--thaw-border-color-hover);
     background-color: var(--thaw-background-color-hover);
     cursor: pointer;
@@ -36,22 +36,30 @@
     background-color: var(--thaw-background-color-active);
 }
 
+.thaw-button--solid {
+    background-color: transparent;
+    color: inherit;
+    transition: all 0.3s;
+}
+
+.thaw-button--solid:hover:not(.thaw-button--disabled) {
+    cursor: pointer;
+    color: var(--thaw-font-color-hover);
+    border-color: var(--thaw-border-color-hover);
+}
+
 .thaw-button--text,
 .thaw-button--link {
     border: none;
 }
 
-.thaw-button--text:hover:not(.thaw-button--disabled) {
-    color: var(--thaw-font-color-hover);
-}
-
 .thaw-button--link {
     background-color: transparent;
     color: inherit;
     height: auto;
     padding: inherit;
 }
-
+.thaw-button--text:hover:not(.thaw-button--disabled),
 .thaw-button--link:hover:not(.thaw-button--disabled) {
     color: var(--thaw-font-color-hover);
 }
diff --git a/src/button/button_group.rs b/src/button/button_group.rs
new file mode 100644
index 0000000..c116f9c
--- /dev/null
+++ b/src/button/button_group.rs
@@ -0,0 +1,12 @@
+use crate::utils::mount_style;
+use leptos::*;
+
+#[component]
+pub fn ButtonGroup(#[prop(optional)] vertical: bool, children: Children) -> impl IntoView {
+    mount_style("button-group", include_str!("./button-group.css"));
+    view! {
+        <div class="thaw-button-group" class=("thaw-button-group--vertical", vertical)>
+            {children()}
+        </div>
+    }
+}
diff --git a/src/button/mod.rs b/src/button/mod.rs
index 5ba0926..d1ce9d7 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -1,3 +1,4 @@
+mod button_group;
 mod theme;
 
 use crate::{
@@ -6,6 +7,7 @@ use crate::{
     theme::*,
     utils::{mount_style, ComponentRef},
 };
+pub use button_group::ButtonGroup;
 use leptos::*;
 pub use theme::ButtonTheme;
 
@@ -76,48 +78,59 @@ pub fn Button(
                 "--thaw-font-color-disabled: {};",
                 theme.button.color_text_disabled
             ));
-            if variant.get() == ButtonVariant::Primary {
-                let bg_color_hover = color.get().theme_color_hover(theme);
-                let bg_color_active = color.get().theme_color_active(theme);
-                css_vars.push_str(&format!("--thaw-background-color: {bg_color};"));
-                css_vars.push_str(&format!("--thaw-background-color-hover: {bg_color_hover};"));
-                css_vars.push_str(&format!(
-                    "--thaw-background-color-active: {bg_color_active};"
-                ));
-                css_vars.push_str("--thaw-font-color: #fff;");
-                css_vars.push_str(&format!("--thaw-border-color: {bg_color};"));
-                css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
-                css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
 
-                css_vars.push_str(&format!(
-                    "--thaw-background-color-disabled: {};",
-                    theme.button.color_background_disabled
-                ));
-                css_vars.push_str(&format!(
-                    "--thaw-border-color-disabled: {};",
-                    theme.button.color_border_disabled
-                ));
+            match variant.get() {
+                ButtonVariant::Primary => {
+                    let bg_color_hover = color.get().theme_color_hover(theme);
+                    let bg_color_active = color.get().theme_color_active(theme);
+                    css_vars.push_str(&format!("--thaw-background-color: {bg_color};"));
+                    css_vars.push_str(&format!("--thaw-background-color-hover: {bg_color_hover};"));
+                    css_vars.push_str(&format!(
+                        "--thaw-background-color-active: {bg_color_active};"
+                    ));
+                    css_vars.push_str("--thaw-font-color: #fff;");
+                    css_vars.push_str(&format!("--thaw-border-color: {bg_color};"));
+                    css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
+                    css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
 
-            } else if variant.get() == ButtonVariant::Text {
-                css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
-                css_vars.push_str(&format!(
-                    "--thaw-background-color-hover: {};",
-                    theme.button.color_text_hover
-                ));
-                css_vars.push_str(&format!(
-                    "--thaw-background-color-active: {};",
-                    theme.button.color_text_active
-                ));
-                css_vars.push_str("--thaw-ripple-color: #0000;");
-            } else {
-                css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
-                css_vars.push_str("--thaw-border-color: #555a;");
-                css_vars.push_str("--thaw-border-color-hover: #555;");
-                css_vars.push_str("--thaw-ripple-color: #0000;");
-                css_vars.push_str(&format!(
-                    "--thaw-border-color-disabled: {};",
-                    theme.button.color_border_disabled
-                ));
+                    css_vars.push_str(&format!(
+                        "--thaw-background-color-disabled: {};",
+                        theme.button.color_background_disabled
+                    ));
+                    css_vars.push_str(&format!(
+                        "--thaw-border-color-disabled: {};",
+                        theme.button.color_border_disabled
+                    ));
+                }
+                ButtonVariant::Solid => {
+                    css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
+                    css_vars.push_str(&format!(
+                        "--thaw-border-color: {};",
+                        theme.button.border_color_solid
+                    ));
+                    css_vars.push_str(&format!("--thaw-border-color-hover: {bg_color};"));
+                    css_vars.push_str(&format!("--thaw-ripple-color: {bg_color};"));
+                    css_vars.push_str(&format!(
+                        "--thaw-border-color-disabled: {};",
+                        theme.button.color_border_disabled
+                    ));
+                }
+                ButtonVariant::Text => {
+                    css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
+                    css_vars.push_str(&format!(
+                        "--thaw-background-color-hover: {};",
+                        theme.button.color_text_hover
+                    ));
+                    css_vars.push_str(&format!(
+                        "--thaw-background-color-active: {};",
+                        theme.button.color_text_active
+                    ));
+                    css_vars.push_str("--thaw-ripple-color: #0000;");
+                }
+                ButtonVariant::Link => {
+                    css_vars.push_str(&format!("--thaw-font-color-hover: {bg_color};"));
+                    css_vars.push_str("--thaw-ripple-color: #0000;");
+                }
             }
         });
 
@@ -157,6 +170,7 @@ pub fn Button(
     view! {
         <button
             class:thaw-button=true
+            class=("thaw-button--solid", move || variant.get() == ButtonVariant::Solid)
             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())
diff --git a/src/button/theme.rs b/src/button/theme.rs
index 1b81224..000c0bf 100644
--- a/src/button/theme.rs
+++ b/src/button/theme.rs
@@ -2,16 +2,18 @@ use crate::theme::ThemeMethod;
 
 #[derive(Clone)]
 pub struct ButtonTheme {
+    pub border_color_solid: String,
     pub color_text_hover: String,
     pub color_text_active: String,
     pub color_text_disabled: String,
     pub color_background_disabled: String,
-    pub color_border_disabled: String
+    pub color_border_disabled: String,
 }
 
 impl ThemeMethod for ButtonTheme {
     fn light() -> Self {
         Self {
+            border_color_solid: "#e0e0e6".into(),
             color_text_hover: "#f1f3f5".into(),
             color_text_active: "#eceef0".into(),
             color_text_disabled: "#00000040".into(),
@@ -22,6 +24,7 @@ impl ThemeMethod for ButtonTheme {
 
     fn dark() -> Self {
         Self {
+            border_color_solid: "#ffffff3d".into(),
             color_text_hover: "#ffffff1a".into(),
             color_text_active: "#ffffff26".into(),
             color_text_disabled: "#4c5155".into(),