Try fix Button, Checkbox, Radio text line-height (#240)

<img width="1202" alt="屏幕截图 2024-09-12 224306"
src="https://github.com/user-attachments/assets/b96fee5e-6d39-4ba0-829c-3eaf4aed8ff2">

crates/story/src/text_story.rs

@@ -164,7 +164,7 @@ impl Render for TextStory {
                         .child(
                             div().w(px(300.)).child(
                                 Checkbox::new("longlong-checkbox")
-                                .label("Warp: Label should support text wrap in default, if the text is too long, it should wrap to the next line.")
+                                .label("The long long label text, it should ellipsis when the text is too long.")
                             ),
                         )
                 ),
@@ -219,7 +219,7 @@ impl Render for TextStory {
                         .child(
                               div().w(px(200.)).child(
                                   Radio::new("radio3")
-                                      .label("Warp: A long long long text radio label")
+                                      .label("A long long long text radio label")
                                       .checked(true)
                                       .disabled(true),
                               ),

crates/ui/src/button.rs

@@ -3,7 +3,7 @@ use crate::{
     indicator::Indicator,
     theme::{ActiveTheme, Colorize as _},
     tooltip::Tooltip,
-    Disableable, Icon, Selectable, Sizable, Size,
+    Disableable, Icon, Selectable, Sizable, Size, StyledExt,
 };
 use gpui::{
     div, prelude::FluentBuilder as _, px, relative, AnyElement, ClickEvent, Corners, Div, Edges,
@@ -303,6 +303,13 @@ impl RenderOnce for Button {
             _ => self.size,
         };
 
+        // Hotfix the font vertical center for macOS.
+        let text_offset_top = if cfg!(target_os = "windows") {
+            px(0.)
+        } else {
+            px(2.)
+        };
+
         self.base
             .id(self.id)
             .track_focus(&self.focus_handle)
@@ -406,7 +413,6 @@ impl RenderOnce for Button {
                     .id("label")
                     .items_center()
                     .justify_center()
-                    .h_full()
                     .gap_2()
                     .map(|this| match self.size {
                         Size::XSmall => this.text_xs(),
@@ -422,7 +428,13 @@ impl RenderOnce for Button {
                         this.child(Indicator::new().with_size(self.size))
                     })
                     .when_some(self.label, |this, label| {
-                        this.child(div().flex_none().line_height(relative(1.)).child(label))
+                        this.child(
+                            div()
+                                .flex_none()
+                                .mt(text_offset_top)
+                                .line_height(relative(1.))
+                                .child(label),
+                        )
                     })
                     .children(self.children)
             })

crates/ui/src/checkbox.rs

@@ -78,7 +78,8 @@ impl RenderOnce for Checkbox {
             .id(self.id)
             .group(group_id.clone())
             .gap_2()
-            .items_start()
+            .items_center()
+            .line_height(relative(1.))
             .child(
                 v_flex()
                     .relative()
@@ -116,7 +117,8 @@ impl RenderOnce for Checkbox {
                     this.text_color(cx.theme().foreground).child(
                         div()
                             .w_full()
-                            .overflow_hidden()
+                            .overflow_x_hidden()
+                            .text_ellipsis()
                             .line_height(relative(1.))
                             .child(label),
                     )

crates/ui/src/radio.rs

@@ -60,7 +60,8 @@ impl RenderOnce for Radio {
             .gap_x_2()
             .cursor(CursorStyle::PointingHand)
             .text_color(cx.theme().foreground)
-            .items_start()
+            .items_center()
+            .line_height(relative(1.))
             .child(
                 div()
                     .relative()
@@ -90,7 +91,8 @@ impl RenderOnce for Radio {
                 this.child(
                     div()
                         .size_full()
-                        .overflow_hidden()
+                        .overflow_x_hidden()
+                        .text_ellipsis()
                         .line_height(relative(1.))
                         .child(label),
                 )