Do not preset padding when input with affix (#70)

crates/story/src/input_story.rs

@@ -1,5 +1,5 @@
 use gpui::{
-    actions, AppContext, FocusHandle, InteractiveElement, IntoElement, KeyBinding,
+    actions, div, AppContext, FocusHandle, InteractiveElement, IntoElement, KeyBinding,
     ParentElement as _, Render, SharedString, Styled, View, ViewContext, VisualContext,
     WindowContext,
 };
@@ -68,21 +68,21 @@ impl InputStory {
 
         let prefix_input1 = cx.new_view(|cx| {
             TextInput::new(cx)
-                .prefix(|_| IconName::Search)
+                .prefix(|_| div().child(IconName::Search).ml_3())
                 .placeholder("Search some thing...")
                 .cleanable(true)
         });
         let suffix_input1 = cx.new_view(|cx| {
             TextInput::new(cx)
-                .suffix(|_| IconName::Info)
+                .suffix(|_| div().child(IconName::Info).mr_3())
                 .placeholder("This input only support [a-zA-Z0-9] characters.")
                 .pattern(regex::Regex::new(r"^[a-zA-Z0-9]*$").unwrap())
                 .cleanable(true)
         });
         let both_input1 = cx.new_view(|cx| {
             TextInput::new(cx)
-                .prefix(|_| IconName::Search)
+                .prefix(|_| div().child(IconName::Search).ml_3())
-                .suffix(|_| IconName::Info)
+                .suffix(|_| div().child(IconName::Info).mr_3())
                 .cleanable(true)
                 .placeholder("This input have prefix and suffix.")
         });
@@ -198,7 +198,7 @@ impl Render for InputStory {
                     .gap_3()
                     .items_start()
                     .child(
-                        section("Preifx and Suffix", cx)
+                        section("Prefix and Suffix", cx)
                             .child(self.prefix_input1.clone())
                             .child(self.both_input1.clone())
                             .child(self.suffix_input1.clone()),

crates/ui/src/dropdown.rs

@@ -24,7 +24,7 @@ use crate::{
     button::{Button, ButtonStyle},
     h_flex,
     list::{self, List, ListDelegate, ListItem},
-    styled_ext::Sizeful,
+    styled_ext::StyleSized,
     theme::ActiveTheme as _,
     Clickable as _, Icon, IconName, Size, StyledExt,
 };

crates/ui/src/event.rs

@@ -1,6 +1,6 @@
 use gpui::{ClickEvent, Focusable, InteractiveElement, WindowContext};
 
-pub trait InterativeElementExt: InteractiveElement {
+pub trait InteractiveElementExt: InteractiveElement {
     /// Set the listener for a double click event.
     fn on_double_click(
         mut self,
@@ -18,9 +18,9 @@ pub trait InterativeElementExt: InteractiveElement {
     }
 }
 
-impl<E: InteractiveElement> InterativeElementExt for Focusable<E> {}
+impl<E: InteractiveElement> InteractiveElementExt for Focusable<E> {}
 
-// impl<E> InterativeElementExt for Stateful<E>
+// impl<E> InteractiveElementExt for Stateful<E>
 // where
 //     E: Element,
 //     Self: InteractiveElement,

crates/ui/src/input/input.rs

@@ -9,9 +9,9 @@ use super::blink_cursor::BlinkCursor;
 use super::history::History;
 use crate::button::{Button, ButtonStyle};
 use crate::indicator::Indicator;
-use crate::styled_ext::Sizeful;
+use crate::styled_ext::StyleSized;
 use crate::theme::ActiveTheme;
-use crate::{event::InterativeElementExt as _, Size};
+use crate::{event::InteractiveElementExt as _, Size};
 use crate::{Clickable, IconName, StyledExt as _};
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
@@ -821,7 +821,7 @@ impl Element for TextElement {
         let cursor = input.cursor_offset();
         let style = cx.text_style();
 
-        let (disaplay_text, text_color) = if text.is_empty() {
+        let (display_text, text_color) = if text.is_empty() {
             (placeholder, cx.theme().muted_foreground)
         } else if input.masked {
             (
@@ -833,7 +833,7 @@ impl Element for TextElement {
         };
 
         let run = TextRun {
-            len: disaplay_text.len(),
+            len: display_text.len(),
             font: style.font(),
             color: text_color,
             background_color: None,
@@ -857,7 +857,7 @@ impl Element for TextElement {
                     ..run.clone()
                 },
                 TextRun {
-                    len: disaplay_text.len() - marked_range.end,
+                    len: display_text.len() - marked_range.end,
                     ..run.clone()
                 },
             ]
@@ -871,7 +871,7 @@ impl Element for TextElement {
         let font_size = style.font_size.to_pixels(cx.rem_size());
         let line = cx
             .text_system()
-            .shape_line(disaplay_text, font_size, &runs)
+            .shape_line(display_text, font_size, &runs)
             .unwrap();
 
         // Calculate the scroll offset to keep the cursor in view
@@ -1036,7 +1036,8 @@ impl Render for TextInput {
                     .rounded(px(cx.theme().radius))
                     .shadow_sm()
                     .when(focused, |this| this.outline(cx))
-                    .input_px(self.size)
+                    .when(prefix.is_none(), |this| this.input_pl(self.size))
+                    .when(suffix.is_none(), |this| this.input_pr(self.size))
                     .bg(if self.disabled {
                         cx.theme().muted
                     } else {

crates/ui/src/lib.rs

@@ -38,7 +38,7 @@ pub use wry;
 
 pub use clickable::Clickable;
 pub use disableable::Disableable;
-pub use event::InterativeElementExt;
+pub use event::InteractiveElementExt;
 pub use focusable::FocusableCycle;
 pub use selectable::{Selectable, Selection};
 pub use styled_ext::{Size, StyledExt};

crates/ui/src/styled_ext.rs

@@ -195,18 +195,36 @@ impl From<Pixels> for Size {
 }
 
 #[allow(unused)]
-pub trait Sizeful<T: Styled> {
+pub trait StyleSized<T: Styled> {
     fn input_size(self, size: Size) -> Self;
+    fn input_pl(self, size: Size) -> Self;
+    fn input_pr(self, size: Size) -> Self;
     fn input_px(self, size: Size) -> Self;
     fn input_py(self, size: Size) -> Self;
     fn input_h(self, size: Size) -> Self;
 }
 
-impl<T: Styled> Sizeful<T> for T {
+impl<T: Styled> StyleSized<T> for T {
     fn input_size(self, size: Size) -> Self {
         self.input_px(size).input_py(size).input_h(size)
     }
 
+    fn input_pl(self, size: Size) -> Self {
+        match size {
+            Size::Large => self.pl_5(),
+            Size::Medium => self.pl_3(),
+            _ => self.pl_2(),
+        }
+    }
+
+    fn input_pr(self, size: Size) -> Self {
+        match size {
+            Size::Large => self.pr_5(),
+            Size::Medium => self.pr_3(),
+            _ => self.pr_2(),
+        }
+    }
+
     fn input_px(self, size: Size) -> Self {
         match size {
             Size::Large => self.px_5(),