Feat/button group (#37)

* feat: solid button click style

* feat: add button group

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>

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;
+}

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);
 }

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>
+    }
+}

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,7 +78,9 @@ pub fn Button(
                 "--thaw-font-color-disabled: {};",
                 theme.button.color_text_disabled
             ));
-            if variant.get() == ButtonVariant::Primary {
+
+            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};"));
@@ -97,8 +101,21 @@ pub fn Button(
                         "--thaw-border-color-disabled: {};",
                         theme.button.color_border_disabled
                     ));
-
+                }
-            } else if variant.get() == ButtonVariant::Text {
+                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: {};",
@@ -109,15 +126,11 @@ pub fn Button(
                         theme.button.color_text_active
                     ));
                     css_vars.push_str("--thaw-ripple-color: #0000;");
-            } else {
+                }
+                ButtonVariant::Link => {
                     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
-                ));
             }
         });
 
@@ -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())

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(),