Fix tooltips not showing on `IconButton`s (#3427)

Marshall Bowers created 2 years ago

This PR fixes tooltips not showing on `IconButton`s.

The "fix" here is the same hack that we used to fix `on_click` handlers
for `ListItem`s, where we introduce another layer of wrapping with an
element with an ID set.

This PR also adds a story for the `IconButton` so this issue can be
tested/observed in isolation.

Release Notes:

- N/A

Change summary

crates/storybook2/src/story_selector.rs          |  2 +
crates/ui2/src/components/icon_button.rs         |  3 +
crates/ui2/src/components/stories.rs             |  2 +
crates/ui2/src/components/stories/icon_button.rs | 35 ++++++++++++++++++
4 files changed, 41 insertions(+), 1 deletion(-)

Detailed changes

crates/storybook2/src/story_selector.rs

@@ -18,6 +18,7 @@ pub enum ComponentStory {
     ContextMenu,
     Focus,
     Icon,
+    IconButton,
     Input,
     Keybinding,
     Label,
@@ -37,6 +38,7 @@ impl ComponentStory {
             Self::ContextMenu => cx.build_view(|_| ui::ContextMenuStory).into(),
             Self::Focus => FocusStory::view(cx).into(),
             Self::Icon => cx.build_view(|_| ui::IconStory).into(),
+            Self::IconButton => cx.build_view(|_| ui::IconButtonStory).into(),
             Self::Input => cx.build_view(|_| ui::InputStory).into(),
             Self::Keybinding => cx.build_view(|_| ui::KeybindingStory).into(),
             Self::Label => cx.build_view(|_| ui::LabelStory).into(),

crates/ui2/src/components/icon_button.rs

@@ -65,7 +65,8 @@ impl RenderOnce for IconButton {
             }
         }
 
-        button
+        // HACK: Add an additional identified element wrapper to fix tooltips not showing up.
+        div().id(self.id.clone()).child(button)
     }
 }
 

crates/ui2/src/components/stories.rs

@@ -3,6 +3,7 @@ mod button;
 mod checkbox;
 mod context_menu;
 mod icon;
+mod icon_button;
 mod input;
 mod keybinding;
 mod label;
@@ -13,6 +14,7 @@ pub use button::*;
 pub use checkbox::*;
 pub use context_menu::*;
 pub use icon::*;
+pub use icon_button::*;
 pub use input::*;
 pub use keybinding::*;
 pub use label::*;

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

@@ -0,0 +1,35 @@
+use gpui::{Div, Render};
+use story::Story;
+
+use crate::{prelude::*, Tooltip};
+use crate::{Icon, IconButton};
+
+pub struct IconButtonStory;
+
+impl Render for IconButtonStory {
+    type Element = Div;
+
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+        Story::container()
+            .child(Story::title_for::<IconButton>())
+            .child(Story::label("Default"))
+            .child(div().w_8().child(IconButton::new("icon_a", Icon::Hash)))
+            .child(Story::label("With `on_click`"))
+            .child(
+                div()
+                    .w_8()
+                    .child(
+                        IconButton::new("with_on_click", Icon::Ai).on_click(|_event, _cx| {
+                            println!("Clicked!");
+                        }),
+                    ),
+            )
+            .child(Story::label("With `tooltip`"))
+            .child(
+                div().w_8().child(
+                    IconButton::new("with_tooltip", Icon::MessageBubbles)
+                        .tooltip(|cx| Tooltip::text("Open messages", cx)),
+                ),
+            )
+    }
+}