Increase spacing of `ListItem`s inside `Picker`s (#3764)

Marshall Bowers created

This PR increases the spacing of `ListItem`s inside of `Picker`s to give
the UI some more breathing room.

#### Before

<img width="584" alt="Screenshot 2023-12-21 at 4 36 21 PM"
src="https://github.com/zed-industries/zed/assets/1486634/ed324c0d-e606-4844-b30a-7d5b8b8c9e47">

#### After

<img width="592" alt="Screenshot 2023-12-21 at 4 36 31 PM"
src="https://github.com/zed-industries/zed/assets/1486634/fbbcb230-0048-4310-8e06-07943af6a38e">

Release Notes:

- N/A

Change summary

crates/collab_ui2/src/collab_panel/channel_modal.rs  |  3 
crates/collab_ui2/src/collab_panel/contact_finder.rs |  3 
crates/command_palette2/src/command_palette.rs       | 34 +++++++------
crates/file_finder2/src/file_finder.rs               | 21 +++++---
crates/language_selector2/src/language_selector.rs   |  3 
crates/outline2/src/outline.rs                       | 18 ++++--
crates/picker2/src/picker2.rs                        | 28 +++-------
crates/project_symbols2/src/project_symbols.rs       | 28 ++++++----
crates/recent_projects2/src/recent_projects.rs       | 20 ++++---
crates/storybook2/src/stories/picker.rs              |  3 
crates/theme_selector2/src/theme_selector.rs         |  3 
crates/ui2/src/components/list/list_item.rs          | 31 +++++++++++
crates/vcs_menu2/src/lib.rs                          |  9 ++-
crates/welcome2/src/base_keymap_picker.rs            |  5 +
14 files changed, 128 insertions(+), 81 deletions(-)

Detailed changes

crates/collab_ui2/src/collab_panel/channel_modal.rs 🔗

@@ -11,7 +11,7 @@ use gpui::{
 };
 use picker::{Picker, PickerDelegate};
 use std::sync::Arc;
-use ui::{prelude::*, Avatar, Checkbox, ContextMenu, ListItem};
+use ui::{prelude::*, Avatar, Checkbox, ContextMenu, ListItem, ListItemSpacing};
 use util::TryFutureExt;
 use workspace::ModalView;
 
@@ -366,6 +366,7 @@ impl PickerDelegate for ChannelModalDelegate {
         Some(
             ListItem::new(ix)
                 .inset(true)
+                .spacing(ListItemSpacing::Sparse)
                 .selected(selected)
                 .start_slot(Avatar::new(user.avatar_uri.clone()))
                 .child(Label::new(user.github_login.clone()))

crates/collab_ui2/src/collab_panel/contact_finder.rs 🔗

@@ -6,7 +6,7 @@ use gpui::{
 use picker::{Picker, PickerDelegate};
 use std::sync::Arc;
 use theme::ActiveTheme as _;
-use ui::{prelude::*, Avatar, ListItem};
+use ui::{prelude::*, Avatar, ListItem, ListItemSpacing};
 use util::{ResultExt as _, TryFutureExt};
 use workspace::ModalView;
 
@@ -153,6 +153,7 @@ impl PickerDelegate for ContactFinderDelegate {
         Some(
             ListItem::new(ix)
                 .inset(true)
+                .spacing(ListItemSpacing::Sparse)
                 .selected(selected)
                 .start_slot(Avatar::new(user.avatar_uri.clone()))
                 .child(Label::new(user.github_login.clone()))

crates/command_palette2/src/command_palette.rs 🔗

@@ -11,7 +11,7 @@ use gpui::{
 };
 use picker::{Picker, PickerDelegate};
 
-use ui::{h_stack, prelude::*, v_stack, HighlightedLabel, KeyBinding, ListItem};
+use ui::{h_stack, prelude::*, v_stack, HighlightedLabel, KeyBinding, ListItem, ListItemSpacing};
 use util::{
     channel::{parse_zed_link, ReleaseChannel, RELEASE_CHANNEL},
     ResultExt,
@@ -308,20 +308,24 @@ impl PickerDelegate for CommandPaletteDelegate {
         let r#match = self.matches.get(ix)?;
         let command = self.commands.get(r#match.candidate_id)?;
         Some(
-            ListItem::new(ix).inset(true).selected(selected).child(
-                h_stack()
-                    .w_full()
-                    .justify_between()
-                    .child(HighlightedLabel::new(
-                        command.name.clone(),
-                        r#match.positions.clone(),
-                    ))
-                    .children(KeyBinding::for_action_in(
-                        &*command.action,
-                        &self.previous_focus_handle,
-                        cx,
-                    )),
-            ),
+            ListItem::new(ix)
+                .inset(true)
+                .spacing(ListItemSpacing::Sparse)
+                .selected(selected)
+                .child(
+                    h_stack()
+                        .w_full()
+                        .justify_between()
+                        .child(HighlightedLabel::new(
+                            command.name.clone(),
+                            r#match.positions.clone(),
+                        ))
+                        .children(KeyBinding::for_action_in(
+                            &*command.action,
+                            &self.previous_focus_handle,
+                            cx,
+                        )),
+                ),
         )
     }
 }

crates/file_finder2/src/file_finder.rs 🔗

@@ -15,7 +15,7 @@ use std::{
     },
 };
 use text::Point;
-use ui::{prelude::*, HighlightedLabel, ListItem};
+use ui::{prelude::*, HighlightedLabel, ListItem, ListItemSpacing};
 use util::{paths::PathLikeWithPosition, post_inc, ResultExt};
 use workspace::{ModalView, Workspace};
 
@@ -714,13 +714,18 @@ impl PickerDelegate for FileFinderDelegate {
             self.labels_for_match(path_match, cx, ix);
 
         Some(
-            ListItem::new(ix).inset(true).selected(selected).child(
-                v_stack()
-                    .child(HighlightedLabel::new(file_name, file_name_positions))
-                    .child(
-                        HighlightedLabel::new(full_path, full_path_positions).color(Color::Muted),
-                    ),
-            ),
+            ListItem::new(ix)
+                .spacing(ListItemSpacing::Sparse)
+                .inset(true)
+                .selected(selected)
+                .child(
+                    v_stack()
+                        .child(HighlightedLabel::new(file_name, file_name_positions))
+                        .child(
+                            HighlightedLabel::new(full_path, full_path_positions)
+                                .color(Color::Muted),
+                        ),
+                ),
         )
     }
 }

crates/language_selector2/src/language_selector.rs 🔗

@@ -12,7 +12,7 @@ use language::{Buffer, LanguageRegistry};
 use picker::{Picker, PickerDelegate};
 use project::Project;
 use std::sync::Arc;
-use ui::{prelude::*, HighlightedLabel, ListItem};
+use ui::{prelude::*, HighlightedLabel, ListItem, ListItemSpacing};
 use util::ResultExt;
 use workspace::{ModalView, Workspace};
 
@@ -226,6 +226,7 @@ impl PickerDelegate for LanguageSelectorDelegate {
         Some(
             ListItem::new(ix)
                 .inset(true)
+                .spacing(ListItemSpacing::Sparse)
                 .selected(selected)
                 .child(HighlightedLabel::new(label, mat.positions.clone())),
         )

crates/outline2/src/outline.rs 🔗

@@ -18,7 +18,7 @@ use std::{
 };
 
 use theme::{color_alpha, ActiveTheme, ThemeSettings};
-use ui::{prelude::*, ListItem};
+use ui::{prelude::*, ListItem, ListItemSpacing};
 use util::ResultExt;
 use workspace::ModalView;
 
@@ -296,12 +296,16 @@ impl PickerDelegate for OutlineViewDelegate {
             StyledText::new(outline_item.text.clone()).with_highlights(&text_style, highlights);
 
         Some(
-            ListItem::new(ix).inset(true).selected(selected).child(
-                div()
-                    .text_ui()
-                    .pl(rems(outline_item.depth as f32))
-                    .child(styled_text),
-            ),
+            ListItem::new(ix)
+                .inset(true)
+                .spacing(ListItemSpacing::Sparse)
+                .selected(selected)
+                .child(
+                    div()
+                        .text_ui()
+                        .pl(rems(outline_item.depth as f32))
+                        .child(styled_text),
+                ),
         )
     }
 }

crates/picker2/src/picker2.rs 🔗

@@ -1,11 +1,11 @@
 use editor::Editor;
 use gpui::{
-    div, prelude::*, rems, uniform_list, AppContext, DismissEvent, Div, EventEmitter, FocusHandle,
+    div, prelude::*, uniform_list, AppContext, DismissEvent, Div, EventEmitter, FocusHandle,
     FocusableView, Length, MouseButton, MouseDownEvent, Render, Task, UniformListScrollHandle,
     View, ViewContext, WindowContext,
 };
 use std::{cmp, sync::Arc};
-use ui::{prelude::*, v_stack, Color, Divider, Label};
+use ui::{prelude::*, v_stack, Color, Divider, Label, ListItem, ListItemSpacing};
 use workspace::ModalView;
 
 pub struct Picker<D: PickerDelegate> {
@@ -229,21 +229,10 @@ impl<D: PickerDelegate> Render for Picker<D> {
             .px_3()
             .child(self.editor.clone());
 
-        let empty_state = div().p_1().child(
-            h_stack()
-                // TODO: This number matches the height of the uniform list items.
-                // Align these two with a less magic number.
-                .h(rems(1.4375))
-                .px_2()
-                .child(Label::new("No matches").color(Color::Muted)),
-        );
-
         div()
             .key_context("Picker")
             .size_full()
-            .when_some(self.width, |el, width| {
-                el.w(width)
-            })
+            .when_some(self.width, |el, width| el.w(width))
             .overflow_hidden()
             // This is a bit of a hack to remove the modal styling when we're rendering the `Picker`
             // as a part of a modal rather than the entire modal.
@@ -257,9 +246,7 @@ impl<D: PickerDelegate> Render for Picker<D> {
             .on_action(cx.listener(Self::cancel))
             .on_action(cx.listener(Self::confirm))
             .on_action(cx.listener(Self::secondary_confirm))
-            .child(
-                picker_editor
-            )
+            .child(picker_editor)
             .child(Divider::horizontal())
             .when(self.delegate.match_count() > 0, |el| {
                 el.child(
@@ -272,7 +259,6 @@ impl<D: PickerDelegate> Render for Picker<D> {
                                 self.delegate.match_count(),
                                 {
                                     let selected_index = self.delegate.selected_index();
-
                                     move |picker, visible_range, cx| {
                                         visible_range
                                             .map(|ix| {
@@ -305,7 +291,11 @@ impl<D: PickerDelegate> Render for Picker<D> {
             })
             .when(self.delegate.match_count() == 0, |el| {
                 el.child(
-                    empty_state
+                    ListItem::new("empty_state")
+                        .inset(true)
+                        .spacing(ListItemSpacing::Sparse)
+                        .disabled(true)
+                        .child(Label::new("No matches").color(Color::Muted)),
                 )
             })
     }

crates/project_symbols2/src/project_symbols.rs 🔗

@@ -11,7 +11,7 @@ use std::{borrow::Cow, cmp::Reverse, sync::Arc};
 use theme::ActiveTheme;
 use util::ResultExt;
 use workspace::{
-    ui::{v_stack, Color, Label, LabelCommon, LabelLike, ListItem, Selectable},
+    ui::{v_stack, Color, Label, LabelCommon, LabelLike, ListItem, ListItemSpacing, Selectable},
     Workspace,
 };
 
@@ -237,17 +237,21 @@ impl PickerDelegate for ProjectSymbolsDelegate {
         );
 
         Some(
-            ListItem::new(ix).inset(true).selected(selected).child(
-                // todo!() combine_syntax_and_fuzzy_match_highlights()
-                v_stack()
-                    .child(
-                        LabelLike::new().child(
-                            StyledText::new(label)
-                                .with_highlights(&cx.text_style().clone(), highlights),
-                        ),
-                    )
-                    .child(Label::new(path).color(Color::Muted)),
-            ),
+            ListItem::new(ix)
+                .inset(true)
+                .spacing(ListItemSpacing::Sparse)
+                .selected(selected)
+                .child(
+                    // todo!() combine_syntax_and_fuzzy_match_highlights()
+                    v_stack()
+                        .child(
+                            LabelLike::new().child(
+                                StyledText::new(label)
+                                    .with_highlights(&cx.text_style().clone(), highlights),
+                            ),
+                        )
+                        .child(Label::new(path).color(Color::Muted)),
+                ),
         )
     }
 }

crates/recent_projects2/src/recent_projects.rs 🔗

@@ -10,7 +10,7 @@ use highlighted_workspace_location::HighlightedWorkspaceLocation;
 use ordered_float::OrderedFloat;
 use picker::{Picker, PickerDelegate};
 use std::sync::Arc;
-use ui::{prelude::*, ListItem};
+use ui::{prelude::*, ListItem, ListItemSpacing};
 use util::paths::PathExt;
 use workspace::{
     notifications::simple_message_notification::MessageNotification, ModalView, Workspace,
@@ -251,13 +251,17 @@ impl PickerDelegate for RecentProjectsDelegate {
         );
 
         Some(
-            ListItem::new(ix).inset(true).selected(selected).child(
-                v_stack()
-                    .child(highlighted_location.names)
-                    .when(self.render_paths, |this| {
-                        this.children(highlighted_location.paths)
-                    }),
-            ),
+            ListItem::new(ix)
+                .inset(true)
+                .spacing(ListItemSpacing::Sparse)
+                .selected(selected)
+                .child(
+                    v_stack()
+                        .child(highlighted_location.names)
+                        .when(self.render_paths, |this| {
+                            this.children(highlighted_location.paths)
+                        }),
+                ),
         )
     }
 }

crates/storybook2/src/stories/picker.rs 🔗

@@ -4,7 +4,7 @@ use gpui::{
 };
 use picker::{Picker, PickerDelegate};
 use std::sync::Arc;
-use ui::prelude::*;
+use ui::{prelude::*, ListItemSpacing};
 use ui::{Label, ListItem};
 
 pub struct PickerStory {
@@ -62,6 +62,7 @@ impl PickerDelegate for Delegate {
         Some(
             ListItem::new(ix)
                 .inset(true)
+                .spacing(ListItemSpacing::Sparse)
                 .selected(selected)
                 .child(Label::new(candidate)),
         )

crates/theme_selector2/src/theme_selector.rs 🔗

@@ -9,7 +9,7 @@ use picker::{Picker, PickerDelegate};
 use settings::{update_settings_file, SettingsStore};
 use std::sync::Arc;
 use theme::{Theme, ThemeMeta, ThemeRegistry, ThemeSettings};
-use ui::{prelude::*, v_stack, ListItem};
+use ui::{prelude::*, v_stack, ListItem, ListItemSpacing};
 use util::ResultExt;
 use workspace::{ui::HighlightedLabel, ModalView, Workspace};
 
@@ -276,6 +276,7 @@ impl PickerDelegate for ThemeSelectorDelegate {
         Some(
             ListItem::new(ix)
                 .inset(true)
+                .spacing(ListItemSpacing::Sparse)
                 .selected(selected)
                 .child(HighlightedLabel::new(
                     theme_match.string.clone(),

crates/ui2/src/components/list/list_item.rs 🔗

@@ -5,10 +5,19 @@ use smallvec::SmallVec;
 
 use crate::{prelude::*, Disclosure};
 
+#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
+pub enum ListItemSpacing {
+    #[default]
+    Dense,
+    Sparse,
+}
+
 #[derive(IntoElement)]
 pub struct ListItem {
     id: ElementId,
+    disabled: bool,
     selected: bool,
+    spacing: ListItemSpacing,
     indent_level: usize,
     indent_step_size: Pixels,
     /// A slot for content that appears before the children, like an icon or avatar.
@@ -32,7 +41,9 @@ impl ListItem {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
+            disabled: false,
             selected: false,
+            spacing: ListItemSpacing::Dense,
             indent_level: 0,
             indent_step_size: px(12.),
             start_slot: None,
@@ -48,6 +59,11 @@ impl ListItem {
         }
     }
 
+    pub fn spacing(mut self, spacing: ListItemSpacing) -> Self {
+        self.spacing = spacing;
+        self
+    }
+
     pub fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self {
         self.on_click = Some(Box::new(handler));
         self
@@ -110,6 +126,13 @@ impl ListItem {
     }
 }
 
+impl Disableable for ListItem {
+    fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+}
+
 impl Selectable for ListItem {
     fn selected(mut self, selected: bool) -> Self {
         self.selected = selected;
@@ -134,7 +157,7 @@ impl RenderOnce for ListItem {
             // When an item is inset draw the indent spacing outside of the item
             .when(self.inset, |this| {
                 this.ml(self.indent_level as f32 * self.indent_step_size)
-                    .px_1()
+                    .px_2()
             })
             .when(!self.inset, |this| {
                 this
@@ -156,8 +179,12 @@ impl RenderOnce for ListItem {
                     .relative()
                     .gap_1()
                     .px_2()
+                    .map(|this| match self.spacing {
+                        ListItemSpacing::Dense => this,
+                        ListItemSpacing::Sparse => this.py_1(),
+                    })
                     .group("list_item")
-                    .when(self.inset, |this| {
+                    .when(self.inset && !self.disabled, |this| {
                         this
                             // TODO: Add focus state
                             // .when(self.state == InteractionState::Focused, |this| {

crates/vcs_menu2/src/lib.rs 🔗

@@ -8,7 +8,7 @@ use gpui::{
 };
 use picker::{Picker, PickerDelegate};
 use std::sync::Arc;
-use ui::{v_stack, HighlightedLabel, ListItem, Selectable};
+use ui::{v_stack, HighlightedLabel, ListItem, ListItemSpacing, Selectable};
 use util::ResultExt;
 use workspace::{ModalView, Toast, Workspace};
 
@@ -134,6 +134,7 @@ impl BranchListDelegate {
 
 impl PickerDelegate for BranchListDelegate {
     type ListItem = ListItem;
+
     fn placeholder_text(&self) -> Arc<str> {
         "Select branch...".into()
     }
@@ -281,8 +282,10 @@ impl PickerDelegate for BranchListDelegate {
             .collect();
         Some(
             ListItem::new(SharedString::from(format!("vcs-menu-{ix}")))
-                .start_slot(HighlightedLabel::new(shortened_branch_name, highlights))
-                .selected(selected),
+                .inset(true)
+                .spacing(ListItemSpacing::Sparse)
+                .selected(selected)
+                .start_slot(HighlightedLabel::new(shortened_branch_name, highlights)),
         )
     }
     // fn render_header(

crates/welcome2/src/base_keymap_picker.rs 🔗

@@ -8,7 +8,7 @@ use picker::{Picker, PickerDelegate};
 use project::Fs;
 use settings::{update_settings_file, Settings};
 use std::sync::Arc;
-use ui::{prelude::*, ListItem};
+use ui::{prelude::*, ListItem, ListItemSpacing};
 use util::ResultExt;
 use workspace::{ui::HighlightedLabel, ModalView, Workspace};
 
@@ -198,8 +198,9 @@ impl PickerDelegate for BaseKeymapSelectorDelegate {
 
         Some(
             ListItem::new(ix)
-                .selected(selected)
                 .inset(true)
+                .spacing(ListItemSpacing::Sparse)
+                .selected(selected)
                 .child(HighlightedLabel::new(
                     keymap_match.string.clone(),
                     keymap_match.positions.clone(),