Ensure the outer `ListItem` element has a unique ID (#3644)

Marshall Bowers created 2 years ago

This PR fixes an issue where the outer `ListItem` element was using a
static ID instead of the one provided to the component.

Now that active states are fixed, this meant that any time there were
sibling list items they would share active states if one of them was
clicked.

Release Notes:

- N/A

Change summary

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

Detailed changes

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

@@ -128,7 +128,7 @@ impl RenderOnce for ListItem {
 
     fn render(self, cx: &mut WindowContext) -> Self::Rendered {
         h_stack()
-            .id("item_container")
+            .id(self.id)
             .w_full()
             .relative()
             // When an item is inset draw the indent spacing outside of the item
@@ -151,7 +151,7 @@ impl RenderOnce for ListItem {
             })
             .child(
                 h_stack()
-                    .id(self.id)
+                    .id("inner_list_item")
                     .w_full()
                     .relative()
                     .gap_1()

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

@@ -17,7 +17,7 @@ impl Render for ListItemStory {
             .child(ListItem::new("hello_world").child("Hello, world!"))
             .child(Story::label("Inset"))
             .child(
-                ListItem::new("hello_world")
+                ListItem::new("inset_list_item")
                     .inset(true)
                     .start_slot(
                         IconElement::new(Icon::Bell)
@@ -59,7 +59,7 @@ impl Render for ListItemStory {
             )
             .child(Story::label("With end hover slot"))
             .child(
-                ListItem::new("with_left_avatar")
+                ListItem::new("with_end_hover_slot")
                     .child("Hello, world!")
                     .end_slot(
                         h_stack()