Merge branch 'main' into icon-button-square

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| {

crates/ui/src/components/button/icon_button.rs

@@ -31,9 +31,9 @@ impl IconButton {
     pub fn new(id: impl Into<ElementId>, 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)

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()),

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);