dropdown_button: Add more style preferences (#554)

crates/story/src/button_story.rs

@@ -552,16 +552,28 @@ impl Render for ButtonStory {
                     ),
             )
             .child(
-                section("Dropdown Button", cx).child(
+                section("Dropdown Button", cx)
-                    DropdownButton::new("dropdown-button")
+                    .child(
-                        .button(Button::new("dropdown-button-button").label("Click Me"))
+                        DropdownButton::new("dropdown-button1")
-                        .popup_menu(move |this, _| {
+                            .small()
-                            this.menu("Disabled", Box::new(Disabled))
+                            .button(Button::new("dropdown-button-button1").label("Click Me"))
-                                .menu("Loading", Box::new(Loading))
+                            .popup_menu(move |this, _| {
-                                .menu("Selected", Box::new(Selected))
+                                this.menu("Disabled", Box::new(Disabled))
-                                .menu("Compact", Box::new(Compact))
+                                    .menu("Loading", Box::new(Loading))
-                        }),
+                                    .menu("Selected", Box::new(Selected))
-                ),
+                                    .menu("Compact", Box::new(Compact))
+                            }),
+                    )
+                    .child(
+                        DropdownButton::new("dropdown-button")
+                            .button(Button::new("dropdown-button-button").label("Click Me"))
+                            .popup_menu(move |this, _| {
+                                this.menu("Disabled", Box::new(Disabled))
+                                    .menu("Loading", Box::new(Loading))
+                                    .menu("Selected", Box::new(Selected))
+                                    .menu("Compact", Box::new(Compact))
+                            }),
+                    ),
             )
             .child(
                 section("Icon Button", cx)

crates/ui/src/button/button.rs

@@ -11,6 +11,7 @@ use gpui::{
     RenderOnce, SharedString, StatefulInteractiveElement as _, Styled, WindowContext,
 };
 
+#[derive(Clone, Copy)]
 pub enum ButtonRounded {
     None,
     Small,

crates/ui/src/button/dropdown_button.rs

@@ -1,48 +1,47 @@
 use gpui::{
-    prelude::FluentBuilder, Corner, Corners, Edges, ElementId, IntoElement, ParentElement,
+    prelude::FluentBuilder, Corner, Corners, Div, Edges, ElementId, IntoElement, ParentElement,
-    RenderOnce, ViewContext, WindowContext,
+    RenderOnce, Styled, ViewContext, WindowContext,
 };
 
 use crate::{
     h_flex,
     popup_menu::{PopupMenu, PopupMenuExt},
-    IconName,
+    IconName, Sizable, Size,
 };
 
-use super::Button;
+use super::{Button, ButtonRounded, ButtonVariant, ButtonVariants};
 
 #[derive(IntoElement)]
 pub struct DropdownButton {
+    base: Div,
     id: ElementId,
     button: Option<Button>,
     popup_menu: Option<Box<dyn Fn(PopupMenu, &mut ViewContext<PopupMenu>) -> PopupMenu + 'static>>,
+
+    // The button props
+    compact: Option<bool>,
+    variant: Option<ButtonVariant>,
+    size: Option<Size>,
+    rounded: ButtonRounded,
 }
 
 impl DropdownButton {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
+            base: h_flex(),
             id: id.into(),
             button: None,
             popup_menu: None,
+
+            compact: None,
+            variant: None,
+            size: None,
+            rounded: ButtonRounded::Medium,
         }
     }
 
     pub fn button(mut self, button: Button) -> Self {
-        self.button = Some(
+        self.button = Some(button);
-            button
-                .border_corners(Corners {
-                    top_left: true,
-                    top_right: false,
-                    bottom_left: true,
-                    bottom_right: false,
-                })
-                .border_edges(Edges {
-                    left: true,
-                    top: true,
-                    right: true,
-                    bottom: true,
-                }),
-        );
         self
     }
 
@@ -53,33 +52,80 @@ impl DropdownButton {
         self.popup_menu = Some(Box::new(popup_menu));
         self
     }
+
+    pub fn rounded(mut self, rounded: impl Into<ButtonRounded>) -> Self {
+        self.rounded = rounded.into();
+        self
+    }
+}
+
+impl Styled for DropdownButton {
+    fn style(&mut self) -> &mut gpui::StyleRefinement {
+        self.base.style()
+    }
+}
+
+impl Sizable for DropdownButton {
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = Some(size.into());
+        self
+    }
+}
+
+impl ButtonVariants for DropdownButton {
+    fn with_variant(mut self, variant: ButtonVariant) -> Self {
+        self.variant = Some(variant);
+        self
+    }
 }
 
 impl RenderOnce for DropdownButton {
     fn render(self, _: &mut WindowContext) -> impl IntoElement {
-        h_flex().when_some(self.button, |this, button| {
+        self.base.when_some(self.button, |this, button| {
-            this.child(button)
+            this.child(
-                .when_some(self.popup_menu, |this, popup_menu| {
+                button
-                    this.child(
+                    .rounded(self.rounded)
-                        Button::new(self.id)
+                    .border_corners(Corners {
-                            .icon(IconName::ChevronDown)
+                        top_left: true,
-                            .border_edges(Edges {
+                        top_right: false,
-                                left: false,
+                        bottom_left: true,
-                                top: true,
+                        bottom_right: false,
-                                right: true,
+                    })
-                                bottom: true,
+                    .border_edges(Edges {
-                            })
+                        left: true,
-                            .border_corners(Corners {
+                        top: true,
-                                top_left: false,
+                        right: true,
-                                top_right: true,
+                        bottom: true,
-                                bottom_left: false,
+                    })
-                                bottom_right: true,
+                    .when_some(self.compact, |this, _| this.compact())
-                            })
+                    .when_some(self.size, |this, size| this.with_size(size))
-                            .popup_menu_with_anchor(Corner::TopRight, move |this, cx| {
+                    .when_some(self.variant, |this, variant| this.with_variant(variant)),
-                                popup_menu(this, cx)
+            )
-                            }),
+            .when_some(self.popup_menu, |this, popup_menu| {
-                    )
+                this.child(
-                })
+                    Button::new(self.id)
+                        .icon(IconName::ChevronDown)
+                        .rounded(self.rounded)
+                        .border_edges(Edges {
+                            left: false,
+                            top: true,
+                            right: true,
+                            bottom: true,
+                        })
+                        .border_corners(Corners {
+                            top_left: false,
+                            top_right: true,
+                            bottom_left: false,
+                            bottom_right: true,
+                        })
+                        .when_some(self.compact, |this, _| this.compact())
+                        .when_some(self.size, |this, size| this.with_size(size))
+                        .when_some(self.variant, |this, variant| this.with_variant(variant))
+                        .popup_menu_with_anchor(Corner::TopRight, move |this, cx| {
+                            popup_menu(this, cx)
+                        }),
+                )
+            })
         })
     }
 }