Pass IDs to `IconButton`s instead of generating them

Marshall Bowers created

Change summary

crates/ui2/src/components/assistant_panel.rs | 12 ++++++------
crates/ui2/src/components/buffer_search.rs   |  2 +-
crates/ui2/src/components/chat_panel.rs      |  4 ++--
crates/ui2/src/components/editor_pane.rs     |  6 +++---
crates/ui2/src/components/icon_button.rs     |  7 ++++---
crates/ui2/src/components/multi_buffer.rs    |  2 +-
crates/ui2/src/components/status_bar.rs      | 16 ++++++++--------
crates/ui2/src/components/tab_bar.rs         |  8 ++++----
crates/ui2/src/components/terminal.rs        |  4 ++--
crates/ui2/src/components/title_bar.rs       | 12 ++++++------
crates/ui2/src/components/toolbar.rs         |  6 +++---
11 files changed, 40 insertions(+), 39 deletions(-)

Detailed changes

crates/ui2/src/components/assistant_panel.rs 🔗

@@ -45,7 +45,7 @@ impl<S: 'static + Send + Sync> AssistantPanel<S> {
                         .child(
                             div()
                                 .flex()
-                                .child(IconButton::new(Icon::Menu))
+                                .child(IconButton::new(Icon::Menu, "menu"))
                                 .child(Label::new("New Conversation")),
                         )
                         .child(
@@ -53,11 +53,11 @@ impl<S: 'static + Send + Sync> AssistantPanel<S> {
                                 .flex()
                                 .items_center()
                                 .gap_px()
-                                .child(IconButton::new(Icon::SplitMessage))
-                                .child(IconButton::new(Icon::Quote))
-                                .child(IconButton::new(Icon::MagicWand))
-                                .child(IconButton::new(Icon::Plus))
-                                .child(IconButton::new(Icon::Maximize)),
+                                .child(IconButton::new(Icon::SplitMessage, "split_message"))
+                                .child(IconButton::new(Icon::Quote, "quote"))
+                                .child(IconButton::new(Icon::MagicWand, "magic_wand"))
+                                .child(IconButton::new(Icon::Plus, "plus"))
+                                .child(IconButton::new(Icon::Maximize, "maximize")),
                         ),
                 )
                 // Chat Body

crates/ui2/src/components/buffer_search.rs 🔗

@@ -32,7 +32,7 @@ impl BufferSearch {
 
         h_stack().bg(color.toolbar).p_2().child(
             h_stack().child(Input::new("Search")).child(
-                IconButton::<Self>::new(Icon::Replace)
+                IconButton::<Self>::new(Icon::Replace, "replace")
                     .when(self.is_replace_open, |this| this.color(IconColor::Accent))
                     .on_click(|buffer_search, cx| {
                         buffer_search.toggle_replace(cx);

crates/ui2/src/components/chat_panel.rs 🔗

@@ -45,8 +45,8 @@ impl<S: 'static + Send + Sync> ChatPanel<S> {
                             .flex()
                             .items_center()
                             .gap_px()
-                            .child(IconButton::new(Icon::File))
-                            .child(IconButton::new(Icon::AudioOn)),
+                            .child(IconButton::new(Icon::File, "file"))
+                            .child(IconButton::new(Icon::AudioOn, "audio_on")),
                     ),
             )
             .child(

crates/ui2/src/components/editor_pane.rs 🔗

@@ -61,15 +61,15 @@ impl EditorPane {
                 Toolbar::new()
                     .left_item(Breadcrumb::new(self.path.clone(), self.symbols.clone()))
                     .right_items(vec![
-                        IconButton::new(Icon::InlayHint),
-                        IconButton::<Self>::new(Icon::MagnifyingGlass)
+                        IconButton::new(Icon::InlayHint, "toggle_inlay_hints"),
+                        IconButton::<Self>::new(Icon::MagnifyingGlass, "buffer_search")
                             .when(self.is_buffer_search_open, |this| {
                                 this.color(IconColor::Accent)
                             })
                             .on_click(|editor, cx| {
                                 editor.toggle_buffer_search(cx);
                             }),
-                        IconButton::new(Icon::MagicWand),
+                        IconButton::new(Icon::MagicWand, "inline_assist"),
                     ]),
             )
             .children(Some(self.buffer_search.clone()).filter(|_| self.is_buffer_search_open))

crates/ui2/src/components/icon_button.rs 🔗

@@ -19,6 +19,7 @@ impl<S: 'static + Send + Sync> Default for IconButtonHandlers<S> {
 #[derive(Element)]
 pub struct IconButton<S: 'static + Send + Sync> {
     state_type: PhantomData<S>,
+    id: ElementId,
     icon: Icon,
     color: IconColor,
     variant: ButtonVariant,
@@ -27,9 +28,10 @@ pub struct IconButton<S: 'static + Send + Sync> {
 }
 
 impl<S: 'static + Send + Sync> IconButton<S> {
-    pub fn new(icon: Icon) -> Self {
+    pub fn new(icon: Icon, id: impl Into<ElementId>) -> Self {
         Self {
             state_type: PhantomData,
+            id: id.into(),
             icon,
             color: IconColor::default(),
             variant: ButtonVariant::default(),
@@ -88,8 +90,7 @@ impl<S: 'static + Send + Sync> IconButton<S> {
         };
 
         let mut button = h_stack()
-            // TODO: We probably need a more robust method for differentiating `IconButton`s from one another.
-            .id(SharedString::from(format!("{:?}", self.icon)))
+            .id(self.id.clone())
             .justify_center()
             .rounded_md()
             .py(ui_size(cx, 0.25))

crates/ui2/src/components/multi_buffer.rs 🔗

@@ -34,7 +34,7 @@ impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
                             .p_4()
                             .bg(color.editor_subheader)
                             .child(Label::new("main.rs"))
-                            .child(IconButton::new(Icon::ArrowUpRight)),
+                            .child(IconButton::new(Icon::ArrowUpRight, "arrow_up_right")),
                     )
                     .child(buffer)
             }))

crates/ui2/src/components/status_bar.rs 🔗

@@ -113,7 +113,7 @@ impl StatusBar {
             .items_center()
             .gap_1()
             .child(
-                IconButton::<Workspace>::new(Icon::FileTree)
+                IconButton::<Workspace>::new(Icon::FileTree, "project_panel")
                     .when(workspace.is_project_panel_open(), |this| {
                         this.color(IconColor::Accent)
                     })
@@ -122,7 +122,7 @@ impl StatusBar {
                     }),
             )
             .child(
-                IconButton::<Workspace>::new(Icon::Hash)
+                IconButton::<Workspace>::new(Icon::Hash, "collab_panel")
                     .when(workspace.is_collab_panel_open(), |this| {
                         this.color(IconColor::Accent)
                     })
@@ -131,7 +131,7 @@ impl StatusBar {
                     }),
             )
             .child(ToolDivider::new())
-            .child(IconButton::new(Icon::XCircle))
+            .child(IconButton::new(Icon::XCircle, "diagnostics"))
     }
 
     fn right_tools(
@@ -164,11 +164,11 @@ impl StatusBar {
                     .items_center()
                     .gap_1()
                     .child(
-                        IconButton::new(Icon::Copilot)
+                        IconButton::new(Icon::Copilot, "copilot")
                             .on_click(|_, _| println!("Copilot clicked.")),
                     )
                     .child(
-                        IconButton::new(Icon::Envelope)
+                        IconButton::new(Icon::Envelope, "envelope")
                             .on_click(|_, _| println!("Send Feedback clicked.")),
                     ),
             )
@@ -179,7 +179,7 @@ impl StatusBar {
                     .items_center()
                     .gap_1()
                     .child(
-                        IconButton::<Workspace>::new(Icon::Terminal)
+                        IconButton::<Workspace>::new(Icon::Terminal, "terminal")
                             .when(workspace.is_terminal_open(), |this| {
                                 this.color(IconColor::Accent)
                             })
@@ -188,7 +188,7 @@ impl StatusBar {
                             }),
                     )
                     .child(
-                        IconButton::<Workspace>::new(Icon::MessageBubbles)
+                        IconButton::<Workspace>::new(Icon::MessageBubbles, "chat_panel")
                             .when(workspace.is_chat_panel_open(), |this| {
                                 this.color(IconColor::Accent)
                             })
@@ -197,7 +197,7 @@ impl StatusBar {
                             }),
                     )
                     .child(
-                        IconButton::<Workspace>::new(Icon::Ai)
+                        IconButton::<Workspace>::new(Icon::Ai, "assistant_panel")
                             .when(workspace.is_assistant_panel_open(), |this| {
                                 this.color(IconColor::Accent)
                             })

crates/ui2/src/components/tab_bar.rs 🔗

@@ -51,11 +51,11 @@ impl<S: 'static + Send + Sync + Clone> TabBar<S> {
                             .items_center()
                             .gap_px()
                             .child(
-                                IconButton::new(Icon::ArrowLeft)
+                                IconButton::new(Icon::ArrowLeft, "arrow_left")
                                     .state(InteractionState::Enabled.if_enabled(can_navigate_back)),
                             )
                             .child(
-                                IconButton::new(Icon::ArrowRight).state(
+                                IconButton::new(Icon::ArrowRight, "arrow_right").state(
                                     InteractionState::Enabled.if_enabled(can_navigate_forward),
                                 ),
                             ),
@@ -83,8 +83,8 @@ impl<S: 'static + Send + Sync + Clone> TabBar<S> {
                             .flex()
                             .items_center()
                             .gap_px()
-                            .child(IconButton::new(Icon::Plus))
-                            .child(IconButton::new(Icon::Split)),
+                            .child(IconButton::new(Icon::Plus, "plus"))
+                            .child(IconButton::new(Icon::Split, "split")),
                     ),
             )
     }

crates/ui2/src/components/terminal.rs 🔗

@@ -40,11 +40,11 @@ impl<S: 'static + Send + Sync + Clone> Terminal<S> {
                                 .items_center()
                                 .gap_px()
                                 .child(
-                                    IconButton::new(Icon::ArrowLeft).state(
+                                    IconButton::new(Icon::ArrowLeft, "arrow_left").state(
                                         InteractionState::Enabled.if_enabled(can_navigate_back),
                                     ),
                                 )
-                                .child(IconButton::new(Icon::ArrowRight).state(
+                                .child(IconButton::new(Icon::ArrowRight, "arrow_right").state(
                                     InteractionState::Enabled.if_enabled(can_navigate_forward),
                                 )),
                         ),

crates/ui2/src/components/title_bar.rs 🔗

@@ -129,7 +129,7 @@ impl TitleBar {
                             .child(Button::new("nate/gpui2-ui-components")),
                     )
                     .children(player_list.map(|p| PlayerStack::new(p)))
-                    .child(IconButton::new(Icon::Plus)),
+                    .child(IconButton::new(Icon::Plus, "plus")),
             )
             .child(
                 div()
@@ -141,8 +141,8 @@ impl TitleBar {
                             .flex()
                             .items_center()
                             .gap_1()
-                            .child(IconButton::new(Icon::FolderX))
-                            .child(IconButton::new(Icon::Exit)),
+                            .child(IconButton::new(Icon::FolderX, "folder_x"))
+                            .child(IconButton::new(Icon::Exit, "exit")),
                     )
                     .child(ToolDivider::new())
                     .child(
@@ -152,17 +152,17 @@ impl TitleBar {
                             .items_center()
                             .gap_1()
                             .child(
-                                IconButton::<TitleBar>::new(Icon::Mic)
+                                IconButton::<TitleBar>::new(Icon::Mic, "toggle_mic_status")
                                     .when(self.is_mic_muted(), |this| this.color(IconColor::Error))
                                     .on_click(|title_bar, cx| title_bar.toggle_mic_status(cx)),
                             )
                             .child(
-                                IconButton::<TitleBar>::new(Icon::AudioOn)
+                                IconButton::<TitleBar>::new(Icon::AudioOn, "toggle_deafened")
                                     .when(self.is_deafened, |this| this.color(IconColor::Error))
                                     .on_click(|title_bar, cx| title_bar.toggle_deafened(cx)),
                             )
                             .child(
-                                IconButton::<TitleBar>::new(Icon::Screen)
+                                IconButton::<TitleBar>::new(Icon::Screen, "toggle_screen_share")
                                     .when(
                                         self.screen_share_status == ScreenShareStatus::Shared,
                                         |this| this.color(IconColor::Accent),

crates/ui2/src/components/toolbar.rs 🔗

@@ -130,9 +130,9 @@ mod stories {
                             ],
                         ))
                         .right_items(vec![
-                            IconButton::new(Icon::InlayHint),
-                            IconButton::new(Icon::MagnifyingGlass),
-                            IconButton::new(Icon::MagicWand),
+                            IconButton::new(Icon::InlayHint, "toggle_inlay_hints"),
+                            IconButton::new(Icon::MagnifyingGlass, "buffer_search"),
+                            IconButton::new(Icon::MagicWand, "inline_assist"),
                         ]),
                 )
         }