Use normal cursor for buttons. (#760)

This change to follow native UI to use normal cursor for all buttons,
items.

Only use `pointer` for link item.

crates/story/src/tooltip_story.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    div, App, AppContext, Context, CursorStyle, Entity, Focusable, InteractiveElement,
+    div, App, AppContext, Context, Entity, Focusable, InteractiveElement, ParentElement, Render,
-    ParentElement, Render, StatefulInteractiveElement, Styled, Window,
+    StatefulInteractiveElement, Styled, Window,
 };
 
 use gpui_component::{
@@ -58,7 +58,6 @@ impl Render for TooltipStory {
             .gap_5()
             .child(
                 div()
-                    .cursor(CursorStyle::PointingHand)
                     .child(
                         Button::new("button")
                             .label("Hover me")
@@ -70,21 +69,18 @@ impl Render for TooltipStory {
             .child(
                 h_flex()
                     .justify_center()
-                    .cursor(CursorStyle::PointingHand)
                     .child(Label::new("Hover me"))
                     .id("tooltip-2")
                     .tooltip(|window, cx| Tooltip::new("This is a Label", window, cx)),
             )
             .child(
                 div()
-                    .cursor(CursorStyle::PointingHand)
                     .child(Checkbox::new("check").label("Remember me").checked(true))
                     .id("tooltip-3")
                     .tooltip(|window, cx| Tooltip::new("Checked!", window, cx)),
             )
             .child(
                 div()
-                    .cursor(CursorStyle::PointingHand)
                     .child(
                         Button::new("button")
                             .label("Hover me")

crates/ui/src/accordion.rs

@@ -261,8 +261,7 @@ impl RenderOnce for AccordionItem {
                             .child(self.title),
                     )
                     .when(!self.disabled, |this| {
-                        this.cursor_pointer()
+                        this.hover(|this| this.bg(cx.theme().accordion_hover))
-                            .hover(|this| this.bg(cx.theme().accordion_hover))
                             .child(
                                 Icon::new(if self.open {
                                     IconName::ChevronUp

crates/ui/src/button/button.rs

@@ -358,7 +358,7 @@ impl RenderOnce for Button {
             .flex()
             .items_center()
             .justify_center()
-            .cursor_pointer()
+            .when(self.variant.is_link(), |this| this.cursor_pointer())
             .overflow_hidden()
             .when(cx.theme().shadow && normal_style.shadow, |this| {
                 this.shadow_sm()

crates/ui/src/button/toggle.rs

@@ -115,7 +115,6 @@ impl RenderOnce for Toggle {
             .flex_row()
             .items_center()
             .justify_center()
-            .cursor_pointer()
             .map(|this| match self.size {
                 Size::XSmall => this.min_w_5().h_5().px_0p5().text_xs(),
                 Size::Small => this.min_w_6().h_6().px_1().text_sm(),

crates/ui/src/color_picker.rs

@@ -218,22 +218,21 @@ impl ColorPicker {
             .border_1()
             .border_color(color.darken(0.1))
             .when(clickable, |this| {
-                this.cursor_pointer()
+                this.hover(|this| {
-                    .hover(|this| {
+                    this.border_color(color.darken(0.3))
-                        this.border_color(color.darken(0.3))
+                        .bg(color.lighten(0.1))
-                            .bg(color.lighten(0.1))
+                        .shadow_sm()
-                            .shadow_sm()
+                })
-                    })
+                .active(|this| this.border_color(color.darken(0.5)).bg(color.darken(0.2)))
-                    .active(|this| this.border_color(color.darken(0.5)).bg(color.darken(0.2)))
+                .on_mouse_move(cx.listener(move |view, _, _, cx| {
-                    .on_mouse_move(cx.listener(move |view, _, _, cx| {
+                    view.hovered_color = Some(color);
-                        view.hovered_color = Some(color);
+                    cx.notify();
-                        cx.notify();
+                }))
-                    }))
+                .on_click(cx.listener(move |view, _, window, cx| {
-                    .on_click(cx.listener(move |view, _, window, cx| {
+                    view.update_value(Some(color), true, window, cx);
-                        view.update_value(Some(color), true, window, cx);
+                    view.open = false;
-                        view.open = false;
+                    cx.notify();
-                        cx.notify();
+                }))
-                    }))
             })
     }
 
@@ -321,7 +320,6 @@ impl Render for ColorPicker {
             .child(
                 h_flex()
                     .id("color-picker-input")
-                    .cursor_pointer()
                     .gap_2()
                     .items_center()
                     .input_text_size(self.size)

crates/ui/src/dropdown.rs

@@ -153,7 +153,6 @@ where
         if let Some(item) = self.delegate.get(ix) {
             let list_item = ListItem::new(("list-item", ix))
                 .check_icon(IconName::Check)
-                .cursor_pointer()
                 .selected(selected)
                 .input_text_size(size)
                 .list_size(size)
@@ -649,7 +648,7 @@ where
                         if self.disabled {
                             this.cursor_not_allowed()
                         } else {
-                            this.cursor_pointer()
+                            this
                         }
                     })
                     .overflow_hidden()

crates/ui/src/list/list_item.rs

@@ -130,11 +130,10 @@ impl RenderOnce for ListItem {
             .justify_between()
             .when(!self.disabled, |this| {
                 this.when_some(self.on_click, |this, on_click| {
-                    this.cursor_pointer()
+                    this.on_mouse_down(MouseButton::Left, move |_, _, cx| {
-                        .on_mouse_down(MouseButton::Left, move |_, _, cx| {
+                        cx.stop_propagation();
-                            cx.stop_propagation();
+                    })
-                        })
+                    .on_click(on_click)
-                        .on_click(on_click)
                 })
                 .when_some(self.on_mouse_enter, |this, on_mouse_enter| {
                     this.on_mouse_move(move |ev, window, cx| (on_mouse_enter)(ev, window, cx))

crates/ui/src/notification.rs

@@ -247,11 +247,10 @@ impl Render for Notification {
                     .child(div().text_sm().child(self.message.clone())),
             )
             .when_some(self.on_click.clone(), |this, on_click| {
-                this.cursor_pointer()
+                this.on_click(cx.listener(move |view, event, window, cx| {
-                    .on_click(cx.listener(move |view, event, window, cx| {
+                    view.dismiss(event, window, cx);
-                        view.dismiss(event, window, cx);
+                    on_click(event, window, cx);
-                        on_click(event, window, cx);
+                }))
-                    }))
             })
             .when(!self.autohide, |this| {
                 this.child(

crates/ui/src/sidebar/footer.rs

@@ -62,7 +62,6 @@ impl RenderOnce for SidebarFooter {
             .p_2()
             .w_full()
             .justify_between()
-            .cursor_pointer()
             .rounded(cx.theme().radius)
             .hover(|this| {
                 this.bg(cx.theme().sidebar_accent)

crates/ui/src/sidebar/header.rs

@@ -62,7 +62,6 @@ impl RenderOnce for SidebarHeader {
             .p_2()
             .w_full()
             .justify_between()
-            .cursor_pointer()
             .rounded(cx.theme().radius)
             .hover(|this| {
                 this.bg(cx.theme().sidebar_accent)

crates/ui/src/sidebar/menu.rs

@@ -146,7 +146,6 @@ impl SidebarMenuItem {
             .items_center()
             .rounded(cx.theme().radius)
             .text_sm()
-            .cursor_pointer()
             .hover(|this| {
                 this.bg(cx.theme().sidebar_accent)
                     .text_color(cx.theme().sidebar_accent_foreground)

crates/ui/src/switch.rs

@@ -157,7 +157,7 @@ impl Element for Switch {
                                 .border(inset)
                                 .border_color(cx.theme().transparent)
                                 .bg(bg)
-                                .when(!self.disabled, |this| this.cursor_pointer())
+                                .when(self.disabled, |this| this.cursor_not_allowed())
                                 .child(
                                     // Switch Toggle
                                     div().rounded(radius).bg(toggle_bg).size(bar_width).map(

crates/ui/src/tab/tab.rs

@@ -583,7 +583,7 @@ impl RenderOnce for Tab {
             .flex_wrap()
             .items_center()
             .flex_shrink_0()
-            .when(!self.disabled, |this| this.cursor_pointer())
+            .when(self.disabled, |this| this.cursor_not_allowed())
             .overflow_hidden()
             .h(height)
             .overflow_hidden()

crates/ui/src/table.rs

@@ -1017,7 +1017,6 @@ where
         Some(
             div()
                 .id(("icon-sort", col_ix))
-                .cursor_pointer()
                 .p(px(2.))
                 .rounded(cx.theme().radius / 2.)
                 .map(|this| match is_on {

crates/ui/src/time/calendar.rs

@@ -477,7 +477,7 @@ impl Calendar {
                 if disabled {
                     this.cursor_not_allowed()
                 } else {
-                    this.cursor_pointer()
+                    this
                 }
             })
             .when(muted, |this| {

crates/ui/src/time/date_picker.rs

@@ -322,7 +322,6 @@ impl Render for DatePicker {
                     .border_color(cx.theme().input)
                     .rounded(cx.theme().radius)
                     .when(cx.theme().shadow, |this| this.shadow_sm())
-                    .cursor_pointer()
                     .overflow_hidden()
                     .input_text_size(self.size)
                     .when(is_focused, |this| this.focused_border(cx))

crates/ui/src/title_bar.rs

@@ -153,7 +153,6 @@ impl RenderOnce for ControlIcon {
         div()
             .id(self.id())
             .flex()
-            .cursor_pointer()
             .w(TITLE_BAR_HEIGHT)
             .h_full()
             .justify_center()