Feat/button block (#135)

* feat: Button adds class block prop

* feat: ButtonGroup adds class prop

Author: luoxiaozero

demo_markdown/docs/button/mod.md

@@ -136,6 +136,16 @@ view! {
 }
 ```
 
+### Block
+
+```rust demo
+view! {
+    <Space vertical=true>
+        <Button block=true>"Primary"</Button>
+    </Space>
+}
+```
+
 ### Group
 
 ```rust demo
@@ -163,6 +173,7 @@ view! {
 | style | `Option<MaybeSignal<String>>` | `Default::default()` | Button's style. |
 | variant | `MaybeSignal<ButtonVariant>` | `ButtonVariant::Primary` | Button's variant. |
 | color | `MaybeSignal<ButtonColor>` | `ButtonColor::Primary` | Button's color. |
+| block | `MaybeSignal<bool>` | `false` | Whether the button is displayed as block. |
 | round | `MaybeSignal<bool>` | `false` | Whether the button shows rounded corners. |
 | circle | `MaybeSignal<bool>` | `false` | Whether the button is round. |
 | icon | `OptionalMaybeSignal<icondata_core::Icon>` | `None` | The icon of the button. |
@@ -174,7 +185,8 @@ view! {
 
 ### ButtonGroup props
 
-| Name     | Type       | Default | Description                         |
-| -------- | ---------- | ------- | ----------------------------------- |
-| vertical | `bool`     | `false` | Directions of buttons in the group. |
-| children | `Children` |         | ButtonGroup's content.              |
+| Name     | Type                                | Default              | Description                               |
+| -------- | ----------------------------------- | -------------------- | ----------------------------------------- |
+| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the group element. |
+| vertical | `bool`                              | `false`              | Directions of buttons in the group.       |
+| children | `Children`                          |                      | ButtonGroup's content.                    |

thaw/src/button/button.css

@@ -21,6 +21,11 @@
     transition: all 0.3s;
 }
 
+.thaw-button--block {
+    display: flex;
+    width: 100%;
+}
+
 .thaw-button--disabled:not(.thaw-button--text, .thaw-button--link) {
     border-color: var(--thaw-border-color-disabled);
     background-color: var(--thaw-background-color-disabled);

thaw/src/button/button_group.rs

@@ -1,11 +1,15 @@
-use crate::utils::mount_style;
+use crate::utils::{class_list::class_list, mount_style, OptionalProp};
 use leptos::*;
 
 #[component]
-pub fn ButtonGroup(#[prop(optional)] vertical: bool, children: Children) -> impl IntoView {
+pub fn ButtonGroup(
+    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[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)>
+        <div class=class_list!["thaw-button-group", class.map(| c | move || c.get())] class=("thaw-button-group--vertical", vertical)>
             {children()}
         </div>
     }

thaw/src/button/mod.rs

@@ -102,6 +102,7 @@ pub fn Button(
     #[prop(optional, into)] variant: MaybeSignal<ButtonVariant>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] size: MaybeSignal<ButtonSize>,
+    #[prop(optional, into)] block: MaybeSignal<bool>,
     #[prop(optional, into)] round: MaybeSignal<bool>,
     #[prop(optional, into)] circle: MaybeSignal<bool>,
     #[prop(optional, into)] icon: OptionalMaybeSignal<icondata_core::Icon>,
@@ -228,7 +229,7 @@ pub fn Button(
                 ButtonVariant::Text), ("thaw-button--link", move || variant.get() ==
                 ButtonVariant::Link), ("thaw-button--round", move || round.get()),
                 ("thaw-button--circle", move || circle.get()), ("thaw-button--disabled", move ||
-                disabled.get()), class.map(| c | move || c.get())
+                disabled.get()), ("thaw-button--block", move || block.get()), class.map(| c | move || c.get())
             ]
 
             style=move || {