add icon button

crates/core/Cargo.toml

@@ -51,7 +51,7 @@ slider = []
 progress = []
 avatar = []
 badge = []
-input = []
+input = ["button"]
 popover = []
 scroll_area = []
 segmented = []

crates/core/src/button.rs

@@ -134,6 +134,7 @@ impl RenderOnce for Button {
 
         let on_click = self.on_click;
         let a11y_label = self.a11y_label.or_else(|| self.label.clone());
+        let icon_only = self.label.is_none() && self.icon.is_some();
 
         let (background, foreground, hover, pressed) = match self.variant {
             ButtonVariant::Primary => (
@@ -166,8 +167,10 @@ impl RenderOnce for Button {
             .id(self.id)
             .role(Role::Button)
             .justify_center()
-            .h(metrics.control_height)
-            .px(metrics.padding_x)
+            .when(icon_only, |button| button.size(metrics.control_height))
+            .when(!icon_only, |button| {
+                button.h(metrics.control_height).px(metrics.padding_x)
+            })
             .line_height(relative(1.0))
             .gap_1p5()
             .rounded(theme.radius.control)

crates/core/src/input.rs

@@ -14,9 +14,10 @@ use gpui::{
     ScrollEvent, SharedString, StatefulInteractiveElement as _, Styled as _, Subscription,
     TextAlign, TextRun, UTF16Selection, Window, actions, canvas, div, fill, point, px,
 };
-use gpui_native_icons::{IconRole, icon};
+use gpui_native_icons::IconRole;
 use gpui_native_theme::{ActiveTheme as _, ColorTokens, Size};
 
+use crate::button::{Button, ButtonVariant};
 use crate::common::{Sizable, h_flex};
 
 /// The key context input bindings match against.
@@ -1786,31 +1787,34 @@ impl RenderOnce for Input {
                         .id((self.id.clone(), "input-reveal"))
                         .debug_selector(|| "input-reveal".to_string())
                         .absolute()
-                        .right(metrics.dense_padding_x)
+                        .right(metrics.dense_padding_x / 2.0)
                         .top_0p5()
                         .bottom_0p5()
                         .flex()
                         .items_center()
-                        .cursor_pointer()
-                        .rounded(theme.radius.sm)
-                        .hover(|style| style.bg(colors.muted))
-                        .on_mouse_down(MouseButton::Left, {
-                            let state = self.state.clone();
-                            move |_, _window, cx| {
-                                cx.stop_propagation();
-                                state.update(cx, |state, cx| {
-                                    state.set_revealed(!state.is_revealed(), cx)
-                                });
-                            }
-                        })
+                        .on_mouse_down(MouseButton::Left, |_, _, cx| cx.stop_propagation())
                         .child(
-                            icon(if revealed {
-                                IconRole::EyeOff
-                            } else {
-                                IconRole::Eye
-                            })
-                            .size(metrics.icon_size)
-                            .color(colors.muted_foreground),
+                            Button::new((self.id.clone(), "input-reveal-button"))
+                                .icon(if revealed {
+                                    IconRole::EyeOff
+                                } else {
+                                    IconRole::Eye
+                                })
+                                .variant(ButtonVariant::Ghost)
+                                .small()
+                                .accessibility_label(if revealed {
+                                    "Hide password"
+                                } else {
+                                    "Show password"
+                                })
+                                .on_click({
+                                    let state = self.state.clone();
+                                    move |_, _, cx| {
+                                        state.update(cx, |state, cx| {
+                                            state.set_revealed(!state.is_revealed(), cx)
+                                        });
+                                    }
+                                }),
                         ),
                 )
             })