Remove unneeded wrapping divs in `ListItem` left content

Marshall Bowers created 2 years ago

Change summary

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

Detailed changes

crates/ui2/src/components/list.rs

@@ -265,19 +265,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()
@@ -315,7 +302,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.clone() {
+                        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")