Remove unneeded wrapping `div`s in `ListItem` left content (#3438)

Marshall Bowers created 2 years ago

This PR removes some unneeded wrapping `div`s around the left content in
`ListItem`s.

Release Notes:

- N/A

Change summary

crates/ui2/src/components/list.rs              | 26 ++++++++-----------
crates/ui2/src/components/stories/list_item.rs | 16 +++++++++++
2 files changed, 26 insertions(+), 16 deletions(-)

Detailed changes

crates/ui2/src/components/list.rs

@@ -285,19 +285,6 @@ impl RenderOnce for ListItem {
     type Rendered = Stateful<Div>;
 
     fn render(self, cx: &mut WindowContext) -> Self::Rendered {
-        let left_content = match self.left_slot.clone() {
-            Some(GraphicSlot::Icon(i)) => Some(
-                h_stack().child(
-                    IconElement::new(i)
-                        .size(IconSize::Small)
-                        .color(Color::Muted),
-                ),
-            ),
-            Some(GraphicSlot::Avatar(src)) => Some(h_stack().child(Avatar::source(src))),
-            Some(GraphicSlot::PublicActor(src)) => Some(h_stack().child(Avatar::uri(src))),
-            None => None,
-        };
-
         div()
             .id(self.id)
             .relative()
@@ -312,7 +299,7 @@ impl RenderOnce for ListItem {
             .when(self.selected, |this| {
                 this.bg(cx.theme().colors().ghost_element_selected)
             })
-            .when_some(self.on_click.clone(), |this, on_click| {
+            .when_some(self.on_click, |this, on_click| {
                 this.cursor_pointer().on_click(move |event, cx| {
                     // HACK: GPUI currently fires `on_click` with any mouse button,
                     // but we only care about the left button.
@@ -335,7 +322,16 @@ impl RenderOnce for ListItem {
                     .items_center()
                     .relative()
                     .child(disclosure_control(self.toggle, self.on_toggle))
-                    .children(left_content)
+                    .map(|this| match self.left_slot {
+                        Some(GraphicSlot::Icon(i)) => this.child(
+                            IconElement::new(i)
+                                .size(IconSize::Small)
+                                .color(Color::Muted),
+                        ),
+                        Some(GraphicSlot::Avatar(src)) => this.child(Avatar::source(src)),
+                        Some(GraphicSlot::PublicActor(src)) => this.child(Avatar::uri(src)),
+                        None => this,
+                    })
                     .children(self.children),
             )
     }

crates/ui2/src/components/stories/list_item.rs

@@ -2,7 +2,7 @@ use gpui::{Div, Render};
 use story::Story;
 
 use crate::prelude::*;
-use crate::ListItem;
+use crate::{Icon, ListItem};
 
 pub struct ListItemStory;
 
@@ -14,6 +14,20 @@ impl Render for ListItemStory {
             .child(Story::title_for::<ListItem>())
             .child(Story::label("Default"))
             .child(ListItem::new("hello_world").child("Hello, world!"))
+            .child(Story::label("With left icon"))
+            .child(
+                ListItem::new("with_left_icon")
+                    .child("Hello, world!")
+                    .left_icon(Icon::Bell),
+            )
+            .child(Story::label("With left avatar"))
+            .child(
+                ListItem::new("with_left_avatar")
+                    .child("Hello, world!")
+                    .left_avatar(SharedString::from(
+                        "https://avatars.githubusercontent.com/u/1714999?v=4",
+                    )),
+            )
             .child(Story::label("With `on_click`"))
             .child(
                 ListItem::new("with_on_click")