Add large variant for buttons

Marshall Bowers created 2 years ago

Change summary

crates/search2/src/buffer_search.rs                | 2 ++
crates/ui2/src/components/button/button_like.rs    | 3 +++
crates/ui2/src/components/stories/toggle_button.rs | 8 ++++++++
3 files changed, 13 insertions(+)

Detailed changes

crates/search2/src/buffer_search.rs

@@ -255,6 +255,7 @@ impl Render for BufferSearchBar {
                             .child(
                                 ToggleButton::new("search-mode-text", SearchMode::Text.label())
                                     .style(ButtonStyle::Filled)
+                                    .size(ButtonSize::Large)
                                     .selected(self.current_mode == SearchMode::Text)
                                     .on_click(cx.listener(move |_, _event, cx| {
                                         cx.dispatch_action(SearchMode::Text.action())
@@ -271,6 +272,7 @@ impl Render for BufferSearchBar {
                             .child(
                                 ToggleButton::new("search-mode-regex", SearchMode::Regex.label())
                                     .style(ButtonStyle::Filled)
+                                    .size(ButtonSize::Large)
                                     .selected(self.current_mode == SearchMode::Regex)
                                     .on_click(cx.listener(move |_, _event, cx| {
                                         cx.dispatch_action(SearchMode::Regex.action())

crates/ui2/src/components/button/button_like.rs

@@ -233,6 +233,7 @@ impl ButtonStyle {
 /// that are consistently sized with buttons.
 #[derive(Default, PartialEq, Clone, Copy)]
 pub enum ButtonSize {
+    Large,
     #[default]
     Default,
     Compact,
@@ -242,6 +243,7 @@ pub enum ButtonSize {
 impl ButtonSize {
     fn height(self) -> Rems {
         match self {
+            ButtonSize::Large => rems(32. / 16.),
             ButtonSize::Default => rems(22. / 16.),
             ButtonSize::Compact => rems(18. / 16.),
             ButtonSize::None => rems(16. / 16.),
@@ -377,6 +379,7 @@ impl RenderOnce for ButtonLike {
             })
             .gap_1()
             .map(|this| match self.size {
+                ButtonSize::Large => this.px_2(),
                 ButtonSize::Default | ButtonSize::Compact => this.px_1(),
                 ButtonSize::None => this,
             })

crates/ui2/src/components/stories/toggle_button.rs

@@ -31,21 +31,25 @@ impl Render for ToggleButtonStory {
                         .child(
                             ToggleButton::new(1, "Apple")
                                 .style(ButtonStyle::Filled)
+                                .size(ButtonSize::Large)
                                 .first(),
                         )
                         .child(
                             ToggleButton::new(2, "Banana")
                                 .style(ButtonStyle::Filled)
+                                .size(ButtonSize::Large)
                                 .middle(),
                         )
                         .child(
                             ToggleButton::new(3, "Cherry")
                                 .style(ButtonStyle::Filled)
+                                .size(ButtonSize::Large)
                                 .middle(),
                         )
                         .child(
                             ToggleButton::new(4, "Dragonfruit")
                                 .style(ButtonStyle::Filled)
+                                .size(ButtonSize::Large)
                                 .last(),
                         ),
                 )
@@ -61,22 +65,26 @@ impl Render for ToggleButtonStory {
                         .child(
                             ToggleButton::new(1, "Apple")
                                 .style(ButtonStyle::Filled)
+                                .size(ButtonSize::Large)
                                 .first(),
                         )
                         .child(
                             ToggleButton::new(2, "Banana")
                                 .style(ButtonStyle::Filled)
+                                .size(ButtonSize::Large)
                                 .selected(true)
                                 .middle(),
                         )
                         .child(
                             ToggleButton::new(3, "Cherry")
                                 .style(ButtonStyle::Filled)
+                                .size(ButtonSize::Large)
                                 .middle(),
                         )
                         .child(
                             ToggleButton::new(4, "Dragonfruit")
                                 .style(ButtonStyle::Filled)
+                                .size(ButtonSize::Large)
                                 .last(),
                         ),
                 )