diff --git a/crates/story/src/text_story.rs b/crates/story/src/text_story.rs index e5386ebe..74436c0d 100644 --- a/crates/story/src/text_story.rs +++ b/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), ), diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs index 48786167..ac7ac502 100644 --- a/crates/ui/src/button.rs +++ b/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) }) diff --git a/crates/ui/src/checkbox.rs b/crates/ui/src/checkbox.rs index 1c192cc2..6f376fa6 100644 --- a/crates/ui/src/checkbox.rs +++ b/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), ) diff --git a/crates/ui/src/radio.rs b/crates/ui/src/radio.rs index 61c8a13c..e1692d20 100644 --- a/crates/ui/src/radio.rs +++ b/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), )