feat: button component add size (#43)

demo/src/pages/button/mod.rs

@@ -133,6 +133,46 @@ pub fn ButtonPage() -> impl IntoView {
 
                 </DemoCode>
             </Demo>
+            <h3>"Size"</h3>
+            <Demo>
+                <Space>
+                    <Button size=ButtonSize::Tiny>
+                        "Primary"
+                    </Button>
+                    <Button size=ButtonSize::Small>
+                        "Primary"
+                    </Button>
+                    <Button size=ButtonSize::Medium>
+                        "Primary"
+                    </Button>
+                    <Button size=ButtonSize::Large>
+                        "Primary"
+                    </Button>
+                </Space>
+                <DemoCode slot>
+
+                    {highlight_str!(
+                        r#"
+                <Space>
+                    <Button size=ButtonSize::Tiny>
+                        "Primary"
+                    </Button>
+                    <Button size=ButtonSize::Small>
+                        "Primary"
+                    </Button>
+                    <Button size=ButtonSize::Medium>
+                        "Primary"
+                    </Button>
+                    <Button size=ButtonSize::Large>
+                        "Primary"
+                    </Button>
+                </Space>
+                    "#,
+                        "rust"
+                    )}
+
+                </DemoCode>
+            </Demo>
             <h3>"Button group"</h3>
             <Demo>
                 <Space>
@@ -292,6 +332,16 @@ pub fn ButtonPage() -> impl IntoView {
                         </td>
                         <td>"Whether the button is disabled."</td>
                     </tr>
+                    <tr>
+                        <td>"size"</td>
+                        <td>
+                            <Text code=true>"MaybeSignal<ButtonSize>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"ButtonSize::Medium"</Text>
+                        </td>
+                        <td>"Button size."</td>
+                    </tr>
                     <tr>
                         <td>"on_click"</td>
                         <td>
@@ -305,9 +355,11 @@ pub fn ButtonPage() -> impl IntoView {
                     <tr>
                         <td>"children"</td>
                         <td>
-                            <Text code=true>"Children"</Text>
+                            <Text code=true>"Option<Children>"</Text>
+                        </td>
+                        <td>
+                            <Text code=true>"None"</Text>
                         </td>
-                        <td></td>
                         <td>"Button's content."</td>
                     </tr>
                 </tbody>

src/button/button.css

@@ -1,6 +1,7 @@
 .thaw-button {
-    height: 34px;
+    height: var(--thaw-height);
-    padding: 0 16px;
+    padding: var(--thaw-padding);
+    font-size: var(--thaw-font-color);
     background-color: var(--thaw-background-color);
     color: var(--thaw-font-color);
     border: 1px solid var(--thaw-border-color);

src/button/mod.rs

@@ -57,11 +57,50 @@ impl ButtonColor {
     }
 }
 
+#[derive(Default, Clone)]
+pub enum ButtonSize {
+    Tiny,
+    Small,
+    #[default]
+    Medium,
+    Large,
+}
+
+impl ButtonSize {
+    fn theme_font_size(&self, theme: &Theme) -> String {
+        match self {
+            ButtonSize::Tiny => theme.common.font_size_tiny.clone(),
+            ButtonSize::Small => theme.common.font_size_small.clone(),
+            ButtonSize::Medium => theme.common.font_size_medium.clone(),
+            ButtonSize::Large => theme.common.font_size_large.clone(),
+        }
+    }
+
+    fn theme_height(&self, theme: &Theme) -> String {
+        match self {
+            ButtonSize::Tiny => theme.common.height_tiny.clone(),
+            ButtonSize::Small => theme.common.height_small.clone(),
+            ButtonSize::Medium => theme.common.height_medium.clone(),
+            ButtonSize::Large => theme.common.height_large.clone(),
+        }
+    }
+
+    fn theme_padding(&self, theme: &Theme) -> String {
+        match self {
+            ButtonSize::Tiny => theme.button.padding_tiny.clone(),
+            ButtonSize::Small => theme.button.padding_small.clone(),
+            ButtonSize::Medium => theme.button.padding_medium.clone(),
+            ButtonSize::Large => theme.button.padding_large.clone(),
+        }
+    }
+}
+
 #[component]
 pub fn Button(
     #[prop(optional, into)] style: MaybeSignal<String>,
     #[prop(optional, into)] variant: MaybeSignal<ButtonVariant>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
+    #[prop(optional, into)] size: MaybeSignal<ButtonSize>,
     #[prop(optional, into)] round: MaybeSignal<bool>,
     #[prop(optional, into)] icon: Option<Icon>,
     #[prop(optional, into)] loading: MaybeSignal<bool>,
@@ -78,6 +117,18 @@ pub fn Button(
                 "--thaw-font-color-disabled: {};",
                 theme.button.color_text_disabled
             ));
+            css_vars.push_str(&format!(
+                "--thaw-font-size: {};",
+                size.get().theme_font_size(theme)
+            ));
+            css_vars.push_str(&format!(
+                "--thaw-height: {};",
+                size.get().theme_height(theme)
+            ));
+            css_vars.push_str(&format!(
+                "--thaw-padding: {};",
+                size.get().theme_padding(theme)
+            ));
 
             match variant.get() {
                 ButtonVariant::Primary => {

src/button/theme.rs

@@ -2,6 +2,11 @@ use crate::theme::ThemeMethod;
 
 #[derive(Clone)]
 pub struct ButtonTheme {
+    pub padding_tiny: String,
+    pub padding_small: String,
+    pub padding_medium: String,
+    pub padding_large: String,
+
     pub border_color_solid: String,
     pub color_text_hover: String,
     pub color_text_active: String,
@@ -13,6 +18,11 @@ pub struct ButtonTheme {
 impl ThemeMethod for ButtonTheme {
     fn light() -> Self {
         Self {
+            padding_tiny: "0 6px".into(),
+            padding_small: "0 10px".into(),
+            padding_medium: "0 14px".into(),
+            padding_large: "0 18px".into(),
+
             border_color_solid: "#e0e0e6".into(),
             color_text_hover: "#f1f3f5".into(),
             color_text_active: "#eceef0".into(),
@@ -24,6 +34,11 @@ impl ThemeMethod for ButtonTheme {
 
     fn dark() -> Self {
         Self {
+            padding_tiny: "0 6px".into(),
+            padding_small: "0 10px".into(),
+            padding_medium: "0 14px".into(),
+            padding_large: "0 18px".into(),
+
             border_color_solid: "#ffffff3d".into(),
             color_text_hover: "#ffffff1a".into(),
             color_text_active: "#ffffff26".into(),

src/theme/common.rs

@@ -22,11 +22,17 @@ pub struct CommonTheme {
     pub color_error_active: String,
 
     pub font_size: String,
+    pub font_size_tiny: String,
     pub font_size_small: String,
     pub font_size_medium: String,
     pub font_size_large: String,
     pub font_size_huge: String,
 
+    pub height_tiny: String,
+    pub height_small: String,
+    pub height_medium: String,
+    pub height_large: String,
+
     pub line_height: String,
     pub line_height_small: String,
     pub line_height_medium: String,
@@ -59,16 +65,25 @@ impl CommonTheme {
             color_error: "".into(),
             color_error_hover: "".into(),
             color_error_active: "".into(),
+
             font_size: "14px".into(),
-            font_size_small: "12px".into(),
+            font_size_tiny: "12px".into(),
-            font_size_medium: "16px".into(),
+            font_size_small: "14px".into(),
-            font_size_large: "20px".into(),
+            font_size_medium: "14px".into(),
-            font_size_huge: "24px".into(),
+            font_size_large: "15px".into(),
+            font_size_huge: "16px".into(),
+
+            height_tiny: "22px".into(),
+            height_small: "28px".into(),
+            height_medium: "34px".into(),
+            height_large: "40px".into(),
+
             line_height: "22px".into(),
-            line_height_small: "20px".into(),
+            line_height_small: "22px".into(),
-            line_height_medium: "24px".into(),
+            line_height_medium: "22px".into(),
-            line_height_large: "28px".into(),
+            line_height_large: "23px".into(),
-            line_height_huge: "32px".into(),
+            line_height_huge: "24px".into(),
+
             border_radius: "3px".into(),
             border_radius_small: "2px".into(),
             border_radius_medium: "4px".into(),