From 641763029b49594592a399bdc4805279c677b364 Mon Sep 17 00:00:00 2001 From: Danilo Leal Date: Tue, 12 Aug 2025 17:10:48 -0300 Subject: [PATCH 1/4] Make square-shaped + small icon button the default --- .../ui/src/components/button/icon_button.rs | 41 ++++++++++++++++++- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/crates/ui/src/components/button/icon_button.rs b/crates/ui/src/components/button/icon_button.rs index 8d8718a634..40e06e7a72 100644 --- a/crates/ui/src/components/button/icon_button.rs +++ b/crates/ui/src/components/button/icon_button.rs @@ -31,9 +31,9 @@ impl IconButton { pub fn new(id: impl Into, icon: IconName) -> Self { let mut this = Self { base: ButtonLike::new(id), - shape: IconButtonShape::Wide, + shape: IconButtonShape::Square, icon, - icon_size: IconSize::default(), + icon_size: IconSize::Small, icon_color: Color::Default, selected_icon: None, selected_icon_color: None, @@ -232,6 +232,43 @@ impl Component for IconButton { example_group_with_title( "Icon Button Styles", vec![ + // TODO: Remove/organize this later + single_example( + "SIZES", + h_flex() + .gap_0p5() + .child( + IconButton::new("tinted", IconName::Debug) + .icon_size(IconSize::Indicator) + .layer(ElevationIndex::Background) + .style(ButtonStyle::Tinted(TintColor::Accent)), + ) + .child( + IconButton::new("tinted", IconName::Debug) + .icon_size(IconSize::XSmall) + .layer(ElevationIndex::Background) + .style(ButtonStyle::Tinted(TintColor::Accent)), + ) + .child( + IconButton::new("tinted", IconName::Debug) + .icon_size(IconSize::Small) + .layer(ElevationIndex::Background) + .style(ButtonStyle::Tinted(TintColor::Accent)), + ) + .child( + IconButton::new("tinted", IconName::Debug) + .icon_size(IconSize::Medium) + .layer(ElevationIndex::Background) + .style(ButtonStyle::Tinted(TintColor::Accent)), + ) + .child( + IconButton::new("tinted", IconName::Debug) + .icon_size(IconSize::XLarge) + .layer(ElevationIndex::Background) + .style(ButtonStyle::Tinted(TintColor::Accent)), + ) + .into_any_element(), + ), single_example( "Default", IconButton::new("default", IconName::Check) From a040d7bc8d87473ec51516ac6e1f6bdb6a374acb Mon Sep 17 00:00:00 2001 From: Danilo Leal Date: Tue, 12 Aug 2025 17:10:59 -0300 Subject: [PATCH 2/4] Adjust icon button padding value per size --- crates/ui/src/components/icon.rs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/crates/ui/src/components/icon.rs b/crates/ui/src/components/icon.rs index bc0ec462e9..30140bf7d7 100644 --- a/crates/ui/src/components/icon.rs +++ b/crates/ui/src/components/icon.rs @@ -84,11 +84,12 @@ impl IconSize { /// 2. The padding of one side of the square pub fn square_components(&self, window: &mut Window, cx: &mut App) -> (Pixels, Pixels) { let icon_size = self.rems() * window.rem_size(); + let padding = match self { IconSize::Indicator => DynamicSpacing::Base00.px(cx), IconSize::XSmall => DynamicSpacing::Base02.px(cx), - IconSize::Small => DynamicSpacing::Base02.px(cx), - IconSize::Medium => DynamicSpacing::Base02.px(cx), + IconSize::Small => DynamicSpacing::Base04.px(cx), + IconSize::Medium => DynamicSpacing::Base06.px(cx), IconSize::XLarge => DynamicSpacing::Base02.px(cx), // TODO: Wire into dynamic spacing IconSize::Custom(size) => size.to_pixels(window.rem_size()), From 0b47c5cdce13b10e086f9ede45ee535a4a2081ea Mon Sep 17 00:00:00 2001 From: Danilo Leal Date: Tue, 12 Aug 2025 17:11:05 -0300 Subject: [PATCH 3/4] Fix case where we want it to be wide --- crates/editor/src/element.rs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index a7fd0abf88..8fb6c53171 100644 --- a/crates/editor/src/element.rs +++ b/crates/editor/src/element.rs @@ -3008,9 +3008,10 @@ impl EditorElement { }; let toggle = IconButton::new(("expand", ix), icon_name) - .icon_color(Color::Custom(cx.theme().colors().editor_line_number)) .selected_icon_color(Color::Custom(cx.theme().colors().editor_foreground)) + .icon_color(Color::Custom(cx.theme().colors().editor_line_number)) .icon_size(IconSize::Custom(rems(editor_font_size / window.rem_size()))) + .shape(ui::IconButtonShape::Wide) .width(width.into()) .on_click(move |_, window, cx| { editor.update(cx, |editor, cx| { From 2dab8a558612e01528563d84ff1107ba544f4fb9 Mon Sep 17 00:00:00 2001 From: Danilo Leal Date: Tue, 12 Aug 2025 17:11:19 -0300 Subject: [PATCH 4/4] Adjust tab icon size --- crates/workspace/src/pane.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs index 0c35752165..f56e983114 100644 --- a/crates/workspace/src/pane.rs +++ b/crates/workspace/src/pane.rs @@ -2539,7 +2539,7 @@ impl Pane { .shape(IconButtonShape::Square) .icon_color(Color::Muted) .size(ButtonSize::None) - .icon_size(IconSize::Small) + .icon_size(IconSize::XSmall) .on_click(cx.listener(move |pane, _, window, cx| { pane.close_item_by_id(item_id, SaveIntent::Close, window, cx) .detach_and_log_err(cx);