Add new Button and IconButton components (#3448)

This PR adds new `Button` and `IconButton` components built on top of our new button abstractions. Both of these buttons are built from the common `ButtonLike` base, and implement the `ButtonCommon` (name TBD) trait in order to provide a common interface. There are still some visual tweaks that we'll need to make to the new buttons, but those should be straightforward to make after we land this. Release Notes: - N/A
2023-11-29 17:41:44 -05:00
parent df5de47a78
commit b357ae4dc3
23 changed files with 324 additions and 682 deletions
@@ -0,0 +1,91 @@
+use gpui::AnyView;
+
+use crate::prelude::*;
+use crate::{ButtonCommon, ButtonLike, ButtonSize2, ButtonStyle2, Label, LineHeightStyle};
+
+#[derive(IntoElement)]
+pub struct Button {
+    base: ButtonLike,
+    label: SharedString,
+    label_color: Option<Color>,
+    selected: bool,
+}
+
+impl Button {
+    pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Self {
+        Self {
+            base: ButtonLike::new(id),
+            label: label.into(),
+            label_color: None,
+            selected: false,
+        }
+    }
+
+    pub fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    pub fn color(mut self, label_color: impl Into<Option<Color>>) -> Self {
+        self.label_color = label_color.into();
+        self
+    }
+}
+
+impl Clickable for Button {
+    fn on_click(
+        mut self,
+        handler: impl Fn(&gpui::ClickEvent, &mut WindowContext) + 'static,
+    ) -> Self {
+        self.base = self.base.on_click(handler);
+        self
+    }
+}
+
+impl Disableable for Button {
+    fn disabled(mut self, disabled: bool) -> Self {
+        self.base = self.base.disabled(disabled);
+        self
+    }
+}
+
+impl ButtonCommon for Button {
+    fn id(&self) -> &ElementId {
+        self.base.id()
+    }
+
+    fn style(mut self, style: ButtonStyle2) -> Self {
+        self.base = self.base.style(style);
+        self
+    }
+
+    fn size(mut self, size: ButtonSize2) -> Self {
+        self.base = self.base.size(size);
+        self
+    }
+
+    fn tooltip(mut self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self {
+        self.base = self.base.tooltip(tooltip);
+        self
+    }
+}
+
+impl RenderOnce for Button {
+    type Rendered = ButtonLike;
+
+    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+        let label_color = if self.base.disabled {
+            Color::Disabled
+        } else if self.selected {
+            Color::Selected
+        } else {
+            Color::Default
+        };
+
+        self.base.child(
+            Label::new(self.label)
+                .color(label_color)
+                .line_height_style(LineHeightStyle::UILabel),
+        )
+    }
+}
@@ -0,0 +1,272 @@
+use gpui::{rems, AnyElement, AnyView, ClickEvent, Div, Hsla, Rems, Stateful};
+use smallvec::SmallVec;
+
+use crate::h_stack;
+use crate::prelude::*;
+
+pub trait ButtonCommon: Clickable + Disableable {
+    fn id(&self) -> &ElementId;
+    fn style(self, style: ButtonStyle2) -> Self;
+    fn size(self, size: ButtonSize2) -> Self;
+    fn tooltip(self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self;
+}
+
+#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
+pub enum ButtonStyle2 {
+    #[default]
+    Filled,
+    // Tinted,
+    Subtle,
+    Transparent,
+}
+
+#[derive(Debug, Clone)]
+pub struct ButtonStyle {
+    pub background: Hsla,
+    pub border_color: Hsla,
+    pub label_color: Hsla,
+    pub icon_color: Hsla,
+}
+
+impl ButtonStyle2 {
+    pub fn enabled(self, cx: &mut WindowContext) -> ButtonStyle {
+        match self {
+            ButtonStyle2::Filled => ButtonStyle {
+                background: cx.theme().colors().element_background,
+                border_color: gpui::transparent_black(),
+                label_color: Color::Default.color(cx),
+                icon_color: Color::Default.color(cx),
+            },
+            ButtonStyle2::Subtle => ButtonStyle {
+                background: cx.theme().colors().ghost_element_background,
+                border_color: gpui::transparent_black(),
+                label_color: Color::Default.color(cx),
+                icon_color: Color::Default.color(cx),
+            },
+            ButtonStyle2::Transparent => ButtonStyle {
+                background: gpui::transparent_black(),
+                border_color: gpui::transparent_black(),
+                label_color: Color::Default.color(cx),
+                icon_color: Color::Default.color(cx),
+            },
+        }
+    }
+
+    pub fn hovered(self, cx: &mut WindowContext) -> ButtonStyle {
+        match self {
+            ButtonStyle2::Filled => ButtonStyle {
+                background: cx.theme().colors().element_hover,
+                border_color: gpui::transparent_black(),
+                label_color: Color::Default.color(cx),
+                icon_color: Color::Default.color(cx),
+            },
+            ButtonStyle2::Subtle => ButtonStyle {
+                background: cx.theme().colors().ghost_element_hover,
+                border_color: gpui::transparent_black(),
+                label_color: Color::Default.color(cx),
+                icon_color: Color::Default.color(cx),
+            },
+            ButtonStyle2::Transparent => ButtonStyle {
+                background: gpui::transparent_black(),
+                border_color: gpui::transparent_black(),
+                // TODO: These are not great
+                label_color: Color::Muted.color(cx),
+                // TODO: These are not great
+                icon_color: Color::Muted.color(cx),
+            },
+        }
+    }
+
+    pub fn active(self, cx: &mut WindowContext) -> ButtonStyle {
+        match self {
+            ButtonStyle2::Filled => ButtonStyle {
+                background: cx.theme().colors().element_active,
+                border_color: gpui::transparent_black(),
+                label_color: Color::Default.color(cx),
+                icon_color: Color::Default.color(cx),
+            },
+            ButtonStyle2::Subtle => ButtonStyle {
+                background: cx.theme().colors().ghost_element_active,
+                border_color: gpui::transparent_black(),
+                label_color: Color::Default.color(cx),
+                icon_color: Color::Default.color(cx),
+            },
+            ButtonStyle2::Transparent => ButtonStyle {
+                background: gpui::transparent_black(),
+                border_color: gpui::transparent_black(),
+                // TODO: These are not great
+                label_color: Color::Muted.color(cx),
+                // TODO: These are not great
+                icon_color: Color::Muted.color(cx),
+            },
+        }
+    }
+
+    pub fn focused(self, cx: &mut WindowContext) -> ButtonStyle {
+        match self {
+            ButtonStyle2::Filled => ButtonStyle {
+                background: cx.theme().colors().element_background,
+                border_color: cx.theme().colors().border_focused,
+                label_color: Color::Default.color(cx),
+                icon_color: Color::Default.color(cx),
+            },
+            ButtonStyle2::Subtle => ButtonStyle {
+                background: cx.theme().colors().ghost_element_background,
+                border_color: cx.theme().colors().border_focused,
+                label_color: Color::Default.color(cx),
+                icon_color: Color::Default.color(cx),
+            },
+            ButtonStyle2::Transparent => ButtonStyle {
+                background: gpui::transparent_black(),
+                border_color: cx.theme().colors().border_focused,
+                label_color: Color::Accent.color(cx),
+                icon_color: Color::Accent.color(cx),
+            },
+        }
+    }
+
+    pub fn disabled(self, cx: &mut WindowContext) -> ButtonStyle {
+        match self {
+            ButtonStyle2::Filled => ButtonStyle {
+                background: cx.theme().colors().element_disabled,
+                border_color: cx.theme().colors().border_disabled,
+                label_color: Color::Disabled.color(cx),
+                icon_color: Color::Disabled.color(cx),
+            },
+            ButtonStyle2::Subtle => ButtonStyle {
+                background: cx.theme().colors().ghost_element_disabled,
+                border_color: cx.theme().colors().border_disabled,
+                label_color: Color::Disabled.color(cx),
+                icon_color: Color::Disabled.color(cx),
+            },
+            ButtonStyle2::Transparent => ButtonStyle {
+                background: gpui::transparent_black(),
+                border_color: gpui::transparent_black(),
+                label_color: Color::Disabled.color(cx),
+                icon_color: Color::Disabled.color(cx),
+            },
+        }
+    }
+}
+
+#[derive(Default, PartialEq, Clone, Copy)]
+pub enum ButtonSize2 {
+    #[default]
+    Default,
+    Compact,
+    None,
+}
+
+impl ButtonSize2 {
+    fn height(self) -> Rems {
+        match self {
+            ButtonSize2::Default => rems(22. / 16.),
+            ButtonSize2::Compact => rems(18. / 16.),
+            ButtonSize2::None => rems(16. / 16.),
+        }
+    }
+}
+
+#[derive(IntoElement)]
+pub struct ButtonLike {
+    id: ElementId,
+    pub(super) style: ButtonStyle2,
+    pub(super) disabled: bool,
+    size: ButtonSize2,
+    tooltip: Option<Box<dyn Fn(&mut WindowContext) -> AnyView>>,
+    on_click: Option<Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>>,
+    children: SmallVec<[AnyElement; 2]>,
+}
+
+impl ButtonLike {
+    pub fn new(id: impl Into<ElementId>) -> Self {
+        Self {
+            id: id.into(),
+            style: ButtonStyle2::default(),
+            disabled: false,
+            size: ButtonSize2::Default,
+            tooltip: None,
+            children: SmallVec::new(),
+            on_click: None,
+        }
+    }
+}
+
+impl Disableable for ButtonLike {
+    fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+}
+
+impl Clickable for ButtonLike {
+    fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self {
+        self.on_click = Some(Box::new(handler));
+        self
+    }
+}
+
+// impl Selectable for ButtonLike {
+//     fn selected(&mut self, selected: bool) -> &mut Self {
+//         todo!()
+//     }
+
+//     fn selected_tooltip(
+//         &mut self,
+//         tooltip: Box<dyn Fn(&mut WindowContext) -> AnyView + 'static>,
+//     ) -> &mut Self {
+//         todo!()
+//     }
+// }
+
+impl ButtonCommon for ButtonLike {
+    fn id(&self) -> &ElementId {
+        &self.id
+    }
+
+    fn style(mut self, style: ButtonStyle2) -> Self {
+        self.style = style;
+        self
+    }
+
+    fn size(mut self, size: ButtonSize2) -> Self {
+        self.size = size;
+        self
+    }
+
+    fn tooltip(mut self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self {
+        self.tooltip = Some(Box::new(tooltip));
+        self
+    }
+}
+
+impl ParentElement for ButtonLike {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
+        &mut self.children
+    }
+}
+
+impl RenderOnce for ButtonLike {
+    type Rendered = Stateful<Div>;
+
+    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+        h_stack()
+            .id(self.id.clone())
+            .h(self.size.height())
+            .rounded_md()
+            .cursor_pointer()
+            .gap_1()
+            .px_1()
+            .bg(self.style.enabled(cx).background)
+            .hover(|hover| hover.bg(self.style.hovered(cx).background))
+            .active(|active| active.bg(self.style.active(cx).background))
+            .when_some(
+                self.on_click.filter(|_| !self.disabled),
+                |this, on_click| this.on_click(move |event, cx| (on_click)(event, cx)),
+            )
+            .when_some(self.tooltip, |this, tooltip| {
+                this.tooltip(move |cx| tooltip(cx))
+            })
+            .children(self.children)
+    }
+}
@@ -0,0 +1,102 @@
+use gpui::{Action, AnyView};
+
+use crate::prelude::*;
+use crate::{ButtonCommon, ButtonLike, ButtonSize2, ButtonStyle2, Icon, IconElement, IconSize};
+
+#[derive(IntoElement)]
+pub struct IconButton {
+    base: ButtonLike,
+    icon: Icon,
+    icon_size: IconSize,
+    icon_color: Color,
+    selected: bool,
+}
+
+impl IconButton {
+    pub fn new(id: impl Into<ElementId>, icon: Icon) -> Self {
+        Self {
+            base: ButtonLike::new(id),
+            icon,
+            icon_size: IconSize::default(),
+            icon_color: Color::Default,
+            selected: false,
+        }
+    }
+
+    pub fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    pub fn icon_size(mut self, icon_size: IconSize) -> Self {
+        self.icon_size = icon_size;
+        self
+    }
+
+    pub fn icon_color(mut self, icon_color: Color) -> Self {
+        self.icon_color = icon_color;
+        self
+    }
+
+    pub fn action(self, action: Box<dyn Action>) -> Self {
+        self.on_click(move |_event, cx| cx.dispatch_action(action.boxed_clone()))
+    }
+}
+
+impl Clickable for IconButton {
+    fn on_click(
+        mut self,
+        handler: impl Fn(&gpui::ClickEvent, &mut WindowContext) + 'static,
+    ) -> Self {
+        self.base = self.base.on_click(handler);
+        self
+    }
+}
+
+impl Disableable for IconButton {
+    fn disabled(mut self, disabled: bool) -> Self {
+        self.base = self.base.disabled(disabled);
+        self
+    }
+}
+
+impl ButtonCommon for IconButton {
+    fn id(&self) -> &ElementId {
+        self.base.id()
+    }
+
+    fn style(mut self, style: ButtonStyle2) -> Self {
+        self.base = self.base.style(style);
+        self
+    }
+
+    fn size(mut self, size: ButtonSize2) -> Self {
+        self.base = self.base.size(size);
+        self
+    }
+
+    fn tooltip(mut self, tooltip: impl Fn(&mut WindowContext) -> AnyView + 'static) -> Self {
+        self.base = self.base.tooltip(tooltip);
+        self
+    }
+}
+
+impl RenderOnce for IconButton {
+    type Rendered = ButtonLike;
+
+    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+        let icon_color = if self.base.disabled {
+            Color::Disabled
+        } else if self.selected {
+            Color::Selected
+        } else {
+            self.icon_color
+        };
+
+        self.base.child(
+            IconElement::new(self.icon)
+                .size(self.icon_size)
+                .color(icon_color),
+        )
+    }
+}
@@ -0,0 +1,7 @@
+mod button;
+mod button_like;
+mod icon_button;
+
+pub use button::*;
+pub use button_like::*;
+pub use icon_button::*;