Make channel buttons square (#4092)

Marshall Bowers created 2 years ago

This PR makes the channel buttons square.

Release Notes:

- Adjusted the shape of the channel buttons.

Change summary

crates/collab_ui/src/collab_panel.rs            |  4 +-
crates/ui/src/components/button/icon_button.rs  | 17 +++++++--
crates/ui/src/components/stories/icon_button.rs | 31 +++++++++++++++++-
3 files changed, 44 insertions(+), 8 deletions(-)

Detailed changes

crates/collab_ui/src/collab_panel.rs

@@ -2314,7 +2314,7 @@ impl CollabPanel {
                             .child(
                                 IconButton::new("channel_chat", IconName::MessageBubbles)
                                     .style(ButtonStyle::Filled)
-                                    .size(ButtonSize::Compact)
+                                    .shape(ui::IconButtonShape::Square)
                                     .icon_size(IconSize::Small)
                                     .icon_color(if has_messages_notification {
                                         Color::Default
@@ -2332,7 +2332,7 @@ impl CollabPanel {
                             .child(
                                 IconButton::new("channel_notes", IconName::File)
                                     .style(ButtonStyle::Filled)
-                                    .size(ButtonSize::Compact)
+                                    .shape(ui::IconButtonShape::Square)
                                     .icon_size(IconSize::Small)
                                     .icon_color(if has_notes_notification {
                                         Color::Default

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

@@ -127,16 +127,25 @@ impl VisibleOnHover for IconButton {
 }
 
 impl RenderOnce for IconButton {
-    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let is_disabled = self.base.disabled;
         let is_selected = self.base.selected;
         let selected_style = self.base.selected_style;
 
         self.base
             .map(|this| match self.shape {
-                IconButtonShape::Square => this
-                    .width(self.icon_size.rems().into())
-                    .height(self.icon_size.rems().into()),
+                IconButtonShape::Square => {
+                    let icon_size = self.icon_size.rems() * cx.rem_size();
+                    let padding = match self.icon_size {
+                        IconSize::Indicator => px(0.),
+                        IconSize::XSmall => px(0.),
+                        IconSize::Small => px(2.),
+                        IconSize::Medium => px(2.),
+                    };
+
+                    this.width((icon_size + padding * 2.).into())
+                        .height((icon_size + padding * 2.).into())
+                }
                 IconButtonShape::Wide => this,
             })
             .child(

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

@@ -1,7 +1,7 @@
 use gpui::Render;
 use story::{StoryContainer, StoryItem, StorySection};
 
-use crate::{prelude::*, Tooltip};
+use crate::{prelude::*, IconButtonShape, Tooltip};
 use crate::{IconButton, IconName};
 
 pub struct IconButtonStory;
@@ -115,7 +115,34 @@ impl Render for IconButtonStory {
             "Icon Button",
             "crates/ui2/src/components/stories/icon_button.rs",
         )
-        .children(vec![StorySection::new().children(buttons)])
+        .child(StorySection::new().children(buttons))
+        .child(
+            StorySection::new().child(StoryItem::new(
+                "Square",
+                h_flex()
+                    .gap_2()
+                    .child(
+                        IconButton::new("square-medium", IconName::Close)
+                            .shape(IconButtonShape::Square)
+                            .icon_size(IconSize::Medium),
+                    )
+                    .child(
+                        IconButton::new("square-small", IconName::Close)
+                            .shape(IconButtonShape::Square)
+                            .icon_size(IconSize::Small),
+                    )
+                    .child(
+                        IconButton::new("square-xsmall", IconName::Close)
+                            .shape(IconButtonShape::Square)
+                            .icon_size(IconSize::XSmall),
+                    )
+                    .child(
+                        IconButton::new("square-indicator", IconName::Close)
+                            .shape(IconButtonShape::Square)
+                            .icon_size(IconSize::Indicator),
+                    ),
+            )),
+        )
         .into_element()
     }
 }