diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index 8a5c65f994..e86d93d024 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) .on_click(move |_, window, cx| { editor.update(cx, |editor, cx| { diff --git a/crates/ui/src/components/button/icon_button.rs b/crates/ui/src/components/button/icon_button.rs index 74fc4851fe..3975e45b6e 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) 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()), diff --git a/crates/workspace/src/pane.rs b/crates/workspace/src/pane.rs index cffeea0a8d..7183f7d379 100644 --- a/crates/workspace/src/pane.rs +++ b/crates/workspace/src/pane.rs @@ -2540,7 +2540,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);