Standardize button design in modal footers (#20585)

Danilo Leal created 1 year ago

- Making sure this design and properties are the same across different
places
- No need for the `ButtonLike` here, we can use `Button` as it supports
`key_binding` and makes it for a cleaner code!
- Also, that ensures the binding is always to the right of the label,
which makes more sense
- Title-case the labels for consistency with other buttons across the
app

| File finder | Project finder |
|--------|--------|
| <img width="1136" alt="Screenshot 2024-11-13 at 09 21 06"
src="https://github.com/user-attachments/assets/dd051514-d873-4b65-a08f-af0920f2c010">
| <img width="1136" alt="Screenshot 2024-11-13 at 09 21 12"
src="https://github.com/user-attachments/assets/f958e3e7-4bfb-4752-839e-2bbc01334643">
|

Release Notes:

- N/A

Change summary

crates/file_finder/src/file_finder.rs         | 73 ++++++++------------
crates/recent_projects/src/recent_projects.rs | 27 ++-----
2 files changed, 40 insertions(+), 60 deletions(-)

Detailed changes

crates/file_finder/src/file_finder.rs

@@ -33,8 +33,8 @@ use std::{
 };
 use text::Point;
 use ui::{
-    prelude::*, ButtonLike, ContextMenu, HighlightedLabel, KeyBinding, ListItem, ListItemSpacing,
-    PopoverMenu, PopoverMenuHandle, TintColor,
+    prelude::*, ContextMenu, HighlightedLabel, KeyBinding, ListItem, ListItemSpacing, PopoverMenu,
+    PopoverMenuHandle,
 };
 use util::{paths::PathWithPosition, post_inc, ResultExt};
 use workspace::{
@@ -1222,54 +1222,43 @@ impl PickerDelegate for FileFinderDelegate {
     }
 
     fn render_footer(&self, cx: &mut ViewContext<Picker<Self>>) -> Option<AnyElement> {
-        let menu_open = self.popover_menu_handle.is_focused(cx);
         Some(
             h_flex()
                 .w_full()
-                .border_t_1()
-                .py_2()
-                .pr_2()
-                .border_color(cx.theme().colors().border)
+                .p_2()
+                .gap_2()
                 .justify_end()
+                .border_t_1()
+                .border_color(cx.theme().colors().border_variant)
                 .child(
-                    ButtonLike::new("open-selection")
-                        .when_some(KeyBinding::for_action(&menu::Confirm, cx), |button, key| {
-                            button.child(key)
-                        })
-                        .child(Label::new("Open"))
+                    Button::new("open-selection", "Open")
+                        .key_binding(KeyBinding::for_action(&menu::Confirm, cx))
                         .on_click(|_, cx| cx.dispatch_action(menu::Confirm.boxed_clone())),
                 )
                 .child(
-                    div().pl_2().child(
-                        PopoverMenu::new("menu-popover")
-                            .with_handle(self.popover_menu_handle.clone())
-                            .attach(gpui::AnchorCorner::TopRight)
-                            .anchor(gpui::AnchorCorner::BottomRight)
-                            .trigger(
-                                ButtonLike::new("menu-trigger")
-                                    .selected(menu_open)
-                                    .selected_style(ButtonStyle::Tinted(TintColor::Accent))
-                                    .when_some(
-                                        KeyBinding::for_action_in(
-                                            &OpenMenu,
-                                            &self.focus_handle,
-                                            cx,
-                                        ),
-                                        |button, key| button.child(key),
-                                    )
-                                    .child(Label::new("More actions")),
-                            )
-                            .menu({
-                                move |cx| {
-                                    Some(ContextMenu::build(cx, move |menu, _| {
-                                        menu.action("Split left", pane::SplitLeft.boxed_clone())
-                                            .action("Split right", pane::SplitRight.boxed_clone())
-                                            .action("Split up", pane::SplitUp.boxed_clone())
-                                            .action("Split down", pane::SplitDown.boxed_clone())
-                                    }))
-                                }
-                            }),
-                    ),
+                    PopoverMenu::new("menu-popover")
+                        .with_handle(self.popover_menu_handle.clone())
+                        .attach(gpui::AnchorCorner::TopRight)
+                        .anchor(gpui::AnchorCorner::BottomRight)
+                        .trigger(
+                            Button::new("actions-trigger", "Split Options")
+                                .selected_label_color(Color::Accent)
+                                .key_binding(KeyBinding::for_action_in(
+                                    &OpenMenu,
+                                    &self.focus_handle,
+                                    cx,
+                                )),
+                        )
+                        .menu({
+                            move |cx| {
+                                Some(ContextMenu::build(cx, move |menu, _| {
+                                    menu.action("Split Left", pane::SplitLeft.boxed_clone())
+                                        .action("Split Right", pane::SplitRight.boxed_clone())
+                                        .action("Split Up", pane::SplitUp.boxed_clone())
+                                        .action("Split Down", pane::SplitDown.boxed_clone())
+                                }))
+                            }
+                        }),
                 )
                 .into_any(),
         )

crates/recent_projects/src/recent_projects.rs

@@ -23,9 +23,7 @@ use std::{
     path::{Path, PathBuf},
     sync::Arc,
 };
-use ui::{
-    prelude::*, tooltip_container, ButtonLike, KeyBinding, ListItem, ListItemSpacing, Tooltip,
-};
+use ui::{prelude::*, tooltip_container, KeyBinding, ListItem, ListItemSpacing, Tooltip};
 use util::{paths::PathExt, ResultExt};
 use workspace::{
     CloseIntent, ModalView, OpenOptions, SerializedWorkspaceLocation, Workspace, WorkspaceId,
@@ -471,27 +469,20 @@ impl PickerDelegate for RecentProjectsDelegate {
     fn render_footer(&self, cx: &mut ViewContext<Picker<Self>>) -> Option<AnyElement> {
         Some(
             h_flex()
+                .w_full()
+                .p_2()
+                .gap_2()
+                .justify_end()
                 .border_t_1()
-                .py_2()
-                .pr_2()
                 .border_color(cx.theme().colors().border_variant)
-                .justify_end()
-                .gap_4()
                 .child(
-                    ButtonLike::new("remote")
-                        .when_some(KeyBinding::for_action(&OpenRemote, cx), |button, key| {
-                            button.child(key)
-                        })
-                        .child(Label::new("Open Remote Folder…").color(Color::Muted))
+                    Button::new("remote", "Open Remote Folder")
+                        .key_binding(KeyBinding::for_action(&OpenRemote, cx))
                         .on_click(|_, cx| cx.dispatch_action(OpenRemote.boxed_clone())),
                 )
                 .child(
-                    ButtonLike::new("local")
-                        .when_some(
-                            KeyBinding::for_action(&workspace::Open, cx),
-                            |button, key| button.child(key),
-                        )
-                        .child(Label::new("Open Local Folder…").color(Color::Muted))
+                    Button::new("local", "Open Local Folder")
+                        .key_binding(KeyBinding::for_action(&workspace::Open, cx))
                         .on_click(|_, cx| cx.dispatch_action(workspace::Open.boxed_clone())),
                 )
                 .into_any(),