dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

input: Change to input text size to smaller. (#1703)

Browse source 
Use `text_sm` for text size for Input.

Ref https://ui.shadcn.com/docs/components/input

## Screenshot

## Before

<img width="1143" height="1034" alt="image"
src="https://github.com/user-attachments/assets/17a8731e-9977-4beb-89d0-e2460f3823fd"
/>

## After

<img width="1218" height="974" alt="image"
src="https://github.com/user-attachments/assets/cca684d0-c86b-440f-bd30-cff7a4f444c4"
/>
This commit is contained in:
Jason Lee 2025-11-28 17:37:43 +08:00 committed by GitHub
parent 04abdbe771
commit 6505be409b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 45 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
crates/story/src/main.rs
View file

@ -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.))
})

12
crates/story/src/textarea_story.rs
View file

@ -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| {

12
crates/ui/src/button/button.rs
View file

@ -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)]

12
crates/ui/src/input/input.rs
View file

@ -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)

12
crates/ui/src/input/number_input.rs
View file

@ -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)

14
crates/ui/src/input/otp_input.rs
View file

@ -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),
)
}),
})

12
crates/ui/src/styled.rs
View file

@ -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<T: Styled> StyleSized<T> 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)
}