list: Add set_size method to List and fix input size in small dropdown. (#246)

crates/story/src/dropdown_story.rs

@@ -50,7 +50,7 @@ pub struct DropdownStory {
     country_dropdown: View<Dropdown<Vec<Country>>>,
     fruit_dropdown: View<Dropdown<SearchableVec<SharedString>>>,
     simple_dropdown1: View<Dropdown<Vec<SharedString>>>,
-    simple_dropdown2: View<Dropdown<Vec<SharedString>>>,
+    simple_dropdown2: View<Dropdown<SearchableVec<SharedString>>>,
     simple_dropdown3: View<Dropdown<Vec<SharedString>>>,
     disabled_dropdown: View<Dropdown<Vec<SharedString>>>,
 }
@@ -131,12 +131,12 @@ impl DropdownStory {
                 simple_dropdown2: cx.new_view(|cx| {
                     Dropdown::new(
                         "string-list2",
-                        vec![
+                        SearchableVec::new(vec![
                             "Rust".into(),
                             "Go".into(),
                             "C++".into(),
                             "JavaScript".into(),
-                        ],
+                        ]),
                         None,
                         cx,
                     )

crates/ui/src/button.rs

@@ -3,7 +3,7 @@ use crate::{
     indicator::Indicator,
     theme::{ActiveTheme, Colorize as _},
     tooltip::Tooltip,
-    Disableable, Icon, Selectable, Sizable, Size, StyledExt,
+    Disableable, Icon, Selectable, Sizable, Size,
 };
 use gpui::{
     div, prelude::FluentBuilder as _, px, relative, AnyElement, ClickEvent, Corners, Div, Edges,

crates/ui/src/dropdown.rs

@@ -568,6 +568,12 @@ where
         let allow_open = !(self.open || self.disabled);
         let outline_visible = is_focused && !self.disabled;
 
+        // If the size has change, set size to self.list, to change the QueryInput size.
+        if self.list.read(cx).size != self.size {
+            self.list
+                .update(cx, |this, cx| this.set_size(self.size, cx))
+        }
+
         div()
             .id(self.id.clone())
             .key_context(CONTEXT)

crates/ui/src/input/input.rs

@@ -235,6 +235,12 @@ impl TextInput {
         cx.notify();
     }
 
+    /// Set the Input size
+    pub fn set_size(&mut self, size: Size, cx: &mut ViewContext<Self>) {
+        self.size = size;
+        cx.notify();
+    }
+
     /// Set the appearance of the input field.
     pub fn appearance(mut self, appearance: bool) -> Self {
         self.appearance = appearance;

crates/ui/src/list/list.rs

@@ -4,8 +4,8 @@ use std::{cell::Cell, rc::Rc};
 use crate::input::{InputEvent, TextInput};
 use crate::scroll::ScrollbarState;
 use crate::theme::ActiveTheme;
-use crate::IconName;
 use crate::{scroll::Scrollbar, v_flex};
+use crate::{IconName, Size};
 use gpui::{
     actions, div, prelude::FluentBuilder, uniform_list, AppContext, FocusHandle, FocusableView,
     InteractiveElement, IntoElement, KeyBinding, Length, ListSizingBehavior, MouseButton,
@@ -77,6 +77,7 @@ pub struct List<D: ListDelegate> {
     vertical_scroll_handle: UniformListScrollHandle,
     scrollbar_state: Rc<Cell<ScrollbarState>>,
 
+    pub(crate) size: Size,
     selected_index: Option<usize>,
     _search_task: Task<()>,
 }
@@ -108,10 +109,21 @@ where
             max_height: None,
             enable_scrollbar: true,
             loading: false,
+            size: Size::default(),
             _search_task: Task::Ready(None),
         }
     }
 
+    /// Set the size
+    pub fn set_size(&mut self, size: Size, cx: &mut ViewContext<Self>) {
+        if let Some(input) = &self.query_input {
+            input.update(cx, |input, cx| {
+                input.set_size(size, cx);
+            })
+        }
+        self.size = size;
+    }
+
     pub fn max_h(mut self, height: impl Into<Length>) -> Self {
         self.max_height = Some(height.into());
         self
@@ -127,6 +139,12 @@ where
         self
     }
 
+    pub fn set_query_input(&mut self, query_input: View<TextInput>, cx: &mut ViewContext<Self>) {
+        cx.subscribe(&query_input, Self::on_query_input_event)
+            .detach();
+        self.query_input = Some(query_input);
+    }
+
     pub fn delegate(&self) -> &D {
         &self.delegate
     }
@@ -318,8 +336,10 @@ where
             .when_some(self.query_input.clone(), |this, input| {
                 this.child(
                     div()
-                        .py_1()
+                        .map(|this| match self.size {
-                        .px_2()
+                            Size::Small => this.py_0().px_1p5(),
+                            _ => this.py_1().px_2(),
+                        })
                         .border_b_1()
                         .border_color(cx.theme().border)
                         .child(input),