From 6505be409bab75ba3944f0cd9776c0a5ed012d5b Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Fri, 28 Nov 2025 17:37:43 +0800 Subject: [PATCH] input: Change to input text size to smaller. (#1703) Use `text_sm` for text size for Input. Ref https://ui.shadcn.com/docs/components/input ## Screenshot ## Before image ## After image --- crates/story/src/main.rs | 1 + crates/story/src/textarea_story.rs | 12 +++++++++++- crates/ui/src/button/button.rs | 12 ++++++------ crates/ui/src/input/input.rs | 12 ++++++++---- crates/ui/src/input/number_input.rs | 12 ++++++------ crates/ui/src/input/otp_input.rs | 14 +++++++------- crates/ui/src/styled.rs | 12 ++++++------ 7 files changed, 45 insertions(+), 30 deletions(-) diff --git a/crates/story/src/main.rs b/crates/story/src/main.rs index 1a02f8ff..2d0e0aac 100644 --- a/crates/story/src/main.rs +++ b/crates/story/src/main.rs @@ -218,6 +218,7 @@ impl Render for Gallery { div() .bg(cx.theme().sidebar_accent) .rounded_full() + .px_1() .when(cx.theme().radius.is_zero(), |this| { this.rounded(px(0.)) }) diff --git a/crates/story/src/textarea_story.rs b/crates/story/src/textarea_story.rs index 7ff8a152..0dd22460 100644 --- a/crates/story/src/textarea_story.rs +++ b/crates/story/src/textarea_story.rs @@ -87,7 +87,17 @@ impl TextareaStory { InputState::new(window, cx) .auto_grow(1, 5) .placeholder("Enter text here...") - .default_value("Hello 世界, this is a very long line of text to test if the horizontal scrolling function is working properly, and it should not wrap automatically but display a horizontal scrollbar.\nThe second line is also very long text, used to test the horizontal scrolling effect under multiple lines, and you can input more content to test.\nThe third line: Here you can input other long text content that requires horizontal scrolling.\n") + .default_value( + "Hello 世界 this is a very long line of text \ + to test if the horizontal scrolling function is working \ + properly, and it should not wrap automatically but display \ + a horizontal scrollbar.\n\ + The second line is also very long text, used to test the \ + horizontal scrolling effect under multiple lines, and you \ + can input more content to test.\nThe third line: Here you \ + can input other long text content that requires \ + horizontal scrolling.\n", + ) }); let textarea_auto_grow_no_wrap = cx.new(|cx| { diff --git a/crates/ui/src/button/button.rs b/crates/ui/src/button/button.rs index 9fc102e6..6982b1c4 100644 --- a/crates/ui/src/button/button.rs +++ b/crates/ui/src/button/button.rs @@ -1,14 +1,14 @@ use std::rc::Rc; use crate::{ - h_flex, spinner::Spinner, tooltip::Tooltip, ActiveTheme, Colorize as _, Disableable, - FocusableExt as _, Icon, IconName, Selectable, Sizable, Size, StyleSized, StyledExt, + ActiveTheme, Colorize as _, Disableable, FocusableExt as _, Icon, IconName, Selectable, + Sizable, Size, StyleSized, StyledExt, h_flex, spinner::Spinner, tooltip::Tooltip, }; use gpui::{ - div, prelude::FluentBuilder as _, px, relative, Action, AnyElement, App, ClickEvent, Corners, - Div, Edges, ElementId, Hsla, InteractiveElement, Interactivity, IntoElement, MouseButton, - ParentElement, Pixels, RenderOnce, SharedString, Stateful, StatefulInteractiveElement as _, - StyleRefinement, Styled, Window, + Action, AnyElement, App, ClickEvent, Corners, Div, Edges, ElementId, Hsla, InteractiveElement, + Interactivity, IntoElement, MouseButton, ParentElement, Pixels, RenderOnce, SharedString, + Stateful, StatefulInteractiveElement as _, StyleRefinement, Styled, Window, div, + prelude::FluentBuilder as _, px, relative, }; #[derive(Default, Clone, Copy)] diff --git a/crates/ui/src/input/input.rs b/crates/ui/src/input/input.rs index 21f3f782..ba45faaf 100644 --- a/crates/ui/src/input/input.rs +++ b/crates/ui/src/input/input.rs @@ -2,7 +2,7 @@ use gpui::prelude::FluentBuilder as _; use gpui::{ AnyElement, App, DefiniteLength, Edges, EdgesRefinement, Entity, InteractiveElement as _, IntoElement, IsZero, MouseButton, ParentElement as _, Rems, RenderOnce, StyleRefinement, - Styled, Window, div, px, relative, + Styled, Window, div, px, relative, rems, }; use crate::button::{Button, ButtonVariants as _}; @@ -242,7 +242,11 @@ impl RenderOnce for Input { fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement { const LINE_HEIGHT: Rems = Rems(1.25); let font = window.text_style().font(); - let font_size = window.text_style().font_size.to_pixels(window.rem_size()); + let font_size = match self.size { + Size::Large => rems(1.), + _ => rems(0.875), + } + .to_pixels(window.rem_size()); self.state.update(cx, |state, cx| { state.text_wrapper.set_font(font, font_size, cx); @@ -255,7 +259,7 @@ impl RenderOnce for Input { let gap_x = match self.size { Size::Small => px(4.), Size::Large => px(8.), - _ => px(4.), + _ => px(6.), }; let bg = if state.disabled { @@ -397,7 +401,7 @@ impl RenderOnce for Input { this.child(self.state.clone()) }) .when(has_suffix, |this| { - this.pr(self.size.input_px() / 2.).child( + this.pr(self.size.input_px()).child( h_flex() .id("suffix") .gap(gap_x) diff --git a/crates/ui/src/input/number_input.rs b/crates/ui/src/input/number_input.rs index 59121fd4..73f0a3a2 100644 --- a/crates/ui/src/input/number_input.rs +++ b/crates/ui/src/input/number_input.rs @@ -1,11 +1,11 @@ use gpui::{ - actions, prelude::FluentBuilder as _, AnyElement, App, Context, Corners, Edges, Entity, - EventEmitter, FocusHandle, Focusable, InteractiveElement, IntoElement, KeyBinding, - ParentElement, RenderOnce, SharedString, StyleRefinement, Styled, Window, + AnyElement, App, Context, Corners, Edges, Entity, EventEmitter, FocusHandle, Focusable, + InteractiveElement, IntoElement, KeyBinding, ParentElement, RenderOnce, SharedString, + StyleRefinement, Styled, Window, actions, prelude::FluentBuilder as _, }; use crate::{ - button::Button, h_flex, ActiveTheme, Disableable, IconName, Sizable, Size, StyledExt as _, + ActiveTheme, Disableable, IconName, Sizable, Size, StyledExt as _, button::Button, h_flex, }; use super::{Input, InputState}; @@ -153,7 +153,7 @@ impl RenderOnce for NumberInput { .refine_style(&self.style) .when(self.disabled, |this| this.bg(cx.theme().muted)) .child( - Button::new("-") + Button::new("minus") .outline() .with_size(self.size) .icon(IconName::Minus) @@ -191,7 +191,7 @@ impl RenderOnce for NumberInput { .when_some(self.suffix, |this, suffix| this.suffix(suffix)), ) .child( - Button::new("+") + Button::new("plus") .outline() .with_size(self.size) .icon(IconName::Plus) diff --git a/crates/ui/src/input/otp_input.rs b/crates/ui/src/input/otp_input.rs index d507edf1..02bb9140 100644 --- a/crates/ui/src/input/otp_input.rs +++ b/crates/ui/src/input/otp_input.rs @@ -1,12 +1,12 @@ use gpui::{ - div, prelude::FluentBuilder, px, AnyElement, App, AppContext as _, Context, Empty, Entity, - EventEmitter, FocusHandle, Focusable, InteractiveElement, IntoElement, KeyDownEvent, - MouseButton, MouseDownEvent, ParentElement as _, Render, RenderOnce, SharedString, Styled as _, - Subscription, Window, + AnyElement, App, AppContext as _, Context, Empty, Entity, EventEmitter, FocusHandle, Focusable, + InteractiveElement, IntoElement, KeyDownEvent, MouseButton, MouseDownEvent, ParentElement as _, + Render, RenderOnce, SharedString, Styled as _, Subscription, Window, div, + prelude::FluentBuilder, px, }; -use super::{blink_cursor::BlinkCursor, InputEvent}; -use crate::{h_flex, v_flex, ActiveTheme, Disableable, Icon, IconName, Sizable, Size}; +use super::{InputEvent, blink_cursor::BlinkCursor}; +use crate::{ActiveTheme, Disableable, Icon, IconName, Sizable, Size, h_flex, v_flex}; pub struct OtpState { focus_handle: FocusHandle, @@ -299,7 +299,7 @@ impl RenderOnce for OtpInput { .h_4() .w_0() .border_l_3() - .border_color(crate::blue_500()), + .border_color(cx.theme().caret), ) }), }) diff --git a/crates/ui/src/styled.rs b/crates/ui/src/styled.rs index 94a869d2..de0027b4 100644 --- a/crates/ui/src/styled.rs +++ b/crates/ui/src/styled.rs @@ -338,9 +338,9 @@ impl Size { /// Returns the horizontal input padding. pub fn input_px(&self) -> Pixels { match self { - Self::Large => px(20.), + Self::Large => px(16.), Self::Medium => px(12.), - Self::Small => px(8.), + Self::Small => px(6.), Self::XSmall => px(4.), _ => px(8.), } @@ -350,7 +350,7 @@ impl Size { pub fn input_py(&self) -> Pixels { match self { Size::Large => px(10.), - Size::Medium => px(5.), + Size::Medium => px(8.), Size::Small => px(2.), Size::XSmall => px(0.), _ => px(2.), @@ -473,9 +473,9 @@ impl StyleSized for T { match size { Size::Large => self.h_11(), Size::Medium => self.h_8(), - Size::Small => self.h(px(24.)), - Size::XSmall => self.h(px(20.)), - _ => self.h(px(24.)), + Size::Small => self.h_6(), + Size::XSmall => self.h_5(), + _ => self.h_6(), } .input_text_size(size) }