Use sparse spacing for `ListItem`s in `Picker`s

Marshall Bowers created 2 years ago

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                        |  3 
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          | 18 +++++++
crates/vcs_menu2/src/lib.rs                          |  9 ++-
crates/welcome2/src/base_keymap_picker.rs            |  5 +
14 files changed, 110 insertions(+), 61 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

@@ -5,7 +5,7 @@ use gpui::{
     View, ViewContext, WindowContext,
 };
 use std::{cmp, sync::Arc};
-use ui::{prelude::*, v_stack, Color, Divider, Label, ListItem};
+use ui::{prelude::*, v_stack, Color, Divider, Label, ListItem, ListItemSpacing};
 use workspace::ModalView;
 
 pub struct Picker<D: PickerDelegate> {
@@ -293,6 +293,7 @@ impl<D: PickerDelegate> Render for Picker<D> {
                 el.child(
                     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,11 +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.
@@ -35,6 +43,7 @@ impl ListItem {
             id: id.into(),
             disabled: false,
             selected: false,
+            spacing: ListItemSpacing::Dense,
             indent_level: 0,
             indent_step_size: px(12.),
             start_slot: None,
@@ -50,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
@@ -165,6 +179,10 @@ 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 && !self.disabled, |this| {
                         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(),