From 2c531fa3efcd4bfbebe7412dd7f7f1f85fa7b6bd Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Thu, 8 Aug 2024 20:13:52 +0800 Subject: [PATCH] Add `text` style to Button with no padding. (#122) --- crates/story/src/button_story.rs | 21 ++++++++++++++++++++ crates/ui/src/button.rs | 33 +++++++++++++++++++++++++++----- 2 files changed, 49 insertions(+), 5 deletions(-) diff --git a/crates/story/src/button_story.rs b/crates/story/src/button_story.rs index 78fe1c95..3b4f678a 100644 --- a/crates/story/src/button_story.rs +++ b/crates/story/src/button_story.rs @@ -150,6 +150,16 @@ impl Render for ButtonStory { .when(compact, |this| this.compact()) .on_click(Self::on_click), ) + .child( + Button::new("button-5-text", cx) + .text() + .label("Text Button") + .disabled(disabled) + .selected(selected) + .loading(loading) + .when(compact, |this| this.compact()) + .on_click(Self::on_click), + ) .child( Button::new("button-6-custom", cx) .custom( @@ -239,6 +249,17 @@ impl Render for ButtonStory { .loading(loading) .when(compact, |this| this.compact()) .on_click(Self::on_click), + ) + .child( + Button::new("button-icon-6-text", cx) + .text() + .icon(IconName::Check) + .label("Text Button") + .disabled(disabled) + .selected(selected) + .loading(loading) + .when(compact, |this| this.compact()) + .on_click(Self::on_click), ), ), ) diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs index 875d4b8b..9e1233ff 100644 --- a/crates/ui/src/button.rs +++ b/crates/ui/src/button.rs @@ -79,6 +79,7 @@ pub enum ButtonStyle { Outline, Ghost, Link, + Text, Custom(ButtonCustomStyle), } @@ -86,6 +87,14 @@ impl ButtonStyle { fn is_link(&self) -> bool { matches!(self, Self::Link) } + + fn is_text(&self) -> bool { + matches!(self, Self::Text) + } + + fn no_padding(&self) -> bool { + self.is_link() || self.is_text() + } } #[derive(IntoElement)] @@ -164,6 +173,12 @@ impl Button { self } + /// With the text style for the Button, it will no padding look like a normal text. + pub fn text(mut self) -> Self { + self.style = ButtonStyle::Text; + self + } + /// With the custom style for the Button. pub fn custom(mut self, custom: ButtonCustomStyle) -> Self { self.style = ButtonStyle::Custom(custom); @@ -270,7 +285,7 @@ impl RenderOnce for Button { .items_center() .justify_center() .cursor_pointer() - .when(!style.is_link(), |this| { + .when(!style.no_padding(), |this| { if self.label.is_none() && self.children.is_empty() { // Icon Button match self.size { @@ -387,7 +402,9 @@ impl ButtonStyle { ButtonStyle::Primary => cx.theme().primary, ButtonStyle::Secondary => cx.theme().secondary, ButtonStyle::Danger => cx.theme().destructive, - ButtonStyle::Outline | ButtonStyle::Ghost | ButtonStyle::Link => cx.theme().transparent, + ButtonStyle::Outline | ButtonStyle::Ghost | ButtonStyle::Link | ButtonStyle::Text => { + cx.theme().transparent + } ButtonStyle::Custom(colors) => colors.color, } } @@ -400,6 +417,7 @@ impl ButtonStyle { } ButtonStyle::Danger => cx.theme().destructive_foreground, ButtonStyle::Link => cx.theme().link, + ButtonStyle::Text => cx.theme().foreground, ButtonStyle::Custom(colors) => colors.foreground, } } @@ -410,7 +428,7 @@ impl ButtonStyle { ButtonStyle::Secondary => cx.theme().border, ButtonStyle::Danger => cx.theme().destructive, ButtonStyle::Outline => cx.theme().border, - ButtonStyle::Ghost | ButtonStyle::Link => cx.theme().transparent, + ButtonStyle::Ghost | ButtonStyle::Link | ButtonStyle::Text => cx.theme().transparent, ButtonStyle::Custom(colors) => colors.border, } } @@ -443,6 +461,7 @@ impl ButtonStyle { ButtonStyle::Danger => cx.theme().destructive_hover, ButtonStyle::Ghost => cx.theme().secondary, ButtonStyle::Link => cx.theme().transparent, + ButtonStyle::Text => cx.theme().transparent, ButtonStyle::Custom(colors) => colors.hover, }; let border = self.border_color(cx); @@ -468,11 +487,13 @@ impl ButtonStyle { } ButtonStyle::Danger => cx.theme().destructive_active, ButtonStyle::Link => cx.theme().transparent, + ButtonStyle::Text => cx.theme().transparent, ButtonStyle::Custom(colors) => colors.active, }; let border = self.border_color(cx); let fg = match self { ButtonStyle::Link => cx.theme().link_active, + ButtonStyle::Text => cx.theme().foreground.opacity(0.7), _ => self.text_color(cx), }; let underline = self.underline(cx); @@ -493,11 +514,13 @@ impl ButtonStyle { } ButtonStyle::Danger => cx.theme().destructive_active, ButtonStyle::Link => cx.theme().transparent, + ButtonStyle::Text => cx.theme().transparent, ButtonStyle::Custom(colors) => colors.active, }; let border = self.border_color(cx); let fg = match self { ButtonStyle::Link => cx.theme().link_active, + ButtonStyle::Text => cx.theme().foreground.opacity(0.7), _ => self.text_color(cx), }; let underline = self.underline(cx); @@ -512,11 +535,11 @@ impl ButtonStyle { fn disabled(&self, cx: &WindowContext) -> ButtonStyles { let bg = match self { - ButtonStyle::Link | ButtonStyle::Ghost => cx.theme().transparent, + ButtonStyle::Link | ButtonStyle::Ghost | ButtonStyle::Text => cx.theme().transparent, _ => cx.theme().secondary.darken(0.2).grayscale(), }; let fg = match self { - ButtonStyle::Link | ButtonStyle::Ghost => cx.theme().link.grayscale(), + ButtonStyle::Link | ButtonStyle::Text => cx.theme().link.grayscale(), _ => cx.theme().secondary_foreground.darken(0.2).grayscale(), };