From d04866eb7717d0aaabe4ef3a538306de17e5b6c7 Mon Sep 17 00:00:00 2001
From: Floyd Wang <gassnake999@gmail.com>
Date: Wed, 9 Apr 2025 17:31:56 +0800
Subject: [PATCH] checkbox: Support sizable (#781)

| Before | After |
| - | - |
| <img width="672" alt="SCR-20250409-pgbg"
src="https://github.com/user-attachments/assets/73a46b13-a3bb-4f58-afb0-aa388bbaefb5"
/> | <img width="669" alt="SCR-20250409-phiy"
src="https://github.com/user-attachments/assets/1230a02d-cdc7-4c2e-9949-bcad09eb2edc"
/> |
---
 crates/story/src/switch_story.rs |  4 +++-
 crates/ui/src/checkbox.rs        | 30 +++++++++++++++++++++++++++---
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/crates/story/src/switch_story.rs b/crates/story/src/switch_story.rs
index 069f5c7a..44f22813 100644
--- a/crates/story/src/switch_story.rs
+++ b/crates/story/src/switch_story.rs
@@ -195,8 +195,9 @@ impl Render for SwitchStory {
                             ))
                             .child(
                                 Checkbox::new("check2")
+                                    .small()
                                     .checked(self.check2)
-                                    .label("Subscribe to newsletter")
+                                    .label("订阅新闻通讯")
                                     .on_click(cx.listener(|v, _, _, _| {
                                         v.check2 = !v.check2;
                                     })),
@@ -211,6 +212,7 @@ impl Render for SwitchStory {
                             )
                             .child(
                                 Checkbox::new("longlong-checkbox")
+                                    .large()
                                     .w(px(300.))
                                     .checked(self.check4)
                                     .label("The long long label text.")
diff --git a/crates/ui/src/checkbox.rs b/crates/ui/src/checkbox.rs
index 5fbb674c..bb115a04 100644
--- a/crates/ui/src/checkbox.rs
+++ b/crates/ui/src/checkbox.rs
@@ -1,6 +1,8 @@
-use crate::{h_flex, text::Text, v_flex, ActiveTheme, Disableable, IconName, Selectable};
+use crate::{
+    h_flex, text::Text, v_flex, ActiveTheme, Disableable, IconName, Selectable, Sizable, Size,
+};
 use gpui::{
-    div, prelude::FluentBuilder as _, px, relative, svg, AnyElement, App, Div, ElementId,
+    div, prelude::FluentBuilder as _, px, relative, rems, svg, AnyElement, App, Div, ElementId,
     InteractiveElement, IntoElement, ParentElement, RenderOnce, StatefulInteractiveElement as _,
     Styled, Window,
 };
@@ -14,6 +16,7 @@ pub struct Checkbox {
     children: Vec<AnyElement>,
     checked: bool,
     disabled: bool,
+    size: Size,
     on_click: Option<Box<dyn Fn(&bool, &mut Window, &mut App) + 'static>>,
 }
 
@@ -26,6 +29,7 @@ impl Checkbox {
             children: Vec::new(),
             checked: false,
             disabled: false,
+            size: Size::default(),
             on_click: None,
         }
     }
@@ -75,6 +79,13 @@ impl ParentElement for Checkbox {
     }
 }
 
+impl Sizable for Checkbox {
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = size.into();
+        self
+    }
+}
+
 impl RenderOnce for Checkbox {
     fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
         let (color, icon_color) = if self.disabled {
@@ -94,10 +105,23 @@ impl RenderOnce for Checkbox {
                 .items_start()
                 .line_height(relative(1.))
                 .text_color(cx.theme().foreground)
+                .map(|this| match self.size {
+                    Size::XSmall => this.text_xs(),
+                    Size::Small => this.text_sm(),
+                    Size::Medium => this.text_base(),
+                    Size::Large => this.text_lg(),
+                    _ => this,
+                })
                 .child(
                     v_flex()
                         .relative()
-                        .size_4()
+                        .map(|this| match self.size {
+                            Size::XSmall => this.size_3(),
+                            Size::Small => this.size_3p5(),
+                            Size::Medium => this.size_4(),
+                            Size::Large => this.size(rems(1.125)),
+                            _ => this.size_4(),
+                        })
                         .flex_shrink_0()
                         .border_1()
                         .border_color(color)