Add ui.small_button: a smaller button that looks good embedded in text

TODO.md

@@ -2,11 +2,6 @@
 
 TODO-list for the Egui project. If you looking for something to do, look here.
 
-## Layout refactor
-
-* Test `allocate_ui`
-* Mix wrapping text and other widgets.
-
 ## Misc
 
 * Widgets

egui/src/demos/demo_window.rs

@@ -44,7 +44,7 @@ impl DemoWindow {
             });
 
         CollapsingHeader::new("Layout")
-            .default_open(true)
+            .default_open(false)
             .show(ui, |ui| self.layout.ui(ui));
 
         CollapsingHeader::new("Tree")
@@ -417,19 +417,15 @@ impl LayoutDemo {
 
     pub fn demo_ui(&mut self, ui: &mut Ui) {
         ui.monospace("Example widgets:");
-        for i in 0..9 {
+        for _ in 0..3 {
-            match i % 3 {
+            ui.label("label");
-                0 => {
+        }
-                    ui.label(format!("{} label", i));
+        for _ in 0..3 {
-                }
+            let mut dummy = false;
-                1 => {
+            ui.checkbox(&mut dummy, "checkbox");
-                    let mut dummy = false;
+        }
-                    ui.checkbox(&mut dummy, format!("{} checkbox", i));
+        for _ in 0..3 {
-                }
+            let _ = ui.button("button");
-                _ => {
-                    let _ = ui.button(format!("{} button", i));
-                }
-            }
         }
     }
 }

egui/src/demos/widgets.rs

@@ -56,8 +56,9 @@ impl Widgets {
                 "This is a multiline tooltip that demonstrates that you can easily add tooltips to any element.\nThis is the second line.\nThis is the third.",
             );
 
-            ui.label("You can mix in other widgets into text, like this button:");
+            ui.label("You can mix in other widgets into text, like this");
-            let _ = ui.button("button");
+            let _ = ui.small_button("button");
+            ui.label(".");
 
             ui.label("There is also (limited) non-ASCII support: Ευρηκα! τ = 2×π")
                 .on_hover_text("The current font supports only a few non-latin characters and Egui does not currently support right-to-left text.");

egui/src/ui.rs

@@ -558,12 +558,24 @@ impl Ui {
         self.add(TextEdit::multiline(text))
     }
 
+    /// Usage: `if ui.button("Click me").clicked { ... }`
+    ///
     /// Shortcut for `add(Button::new(text))`
     #[must_use = "You should check if the user clicked this with `if ui.button(...).clicked { ... } "]
     pub fn button(&mut self, text: impl Into<String>) -> Response {
         self.add(Button::new(text))
     }
 
+    /// A button as small as normal body text.
+    ///
+    /// Usage: `if ui.small_button("Click me").clicked { ... }`
+    ///
+    /// Shortcut for `add(Button::new(text).small())`
+    #[must_use = "You should check if the user clicked this with `if ui.small_button(...).clicked { ... } "]
+    pub fn small_button(&mut self, text: impl Into<String>) -> Response {
+        self.add(Button::new(text).small())
+    }
+
     /// Show a checkbox.
     pub fn checkbox(&mut self, checked: &mut bool, text: impl Into<String>) -> Response {
         self.add(Checkbox::new(checked, text))

egui/src/widgets/mod.rs

@@ -287,6 +287,7 @@ pub struct Button {
     /// None means default for interact
     fill: Option<Srgba>,
     sense: Sense,
+    small: bool,
 }
 
 impl Button {
@@ -297,6 +298,7 @@ impl Button {
             text_style: TextStyle::Button,
             fill: Default::default(),
             sense: Sense::click(),
+            small: false,
         }
     }
 
@@ -320,6 +322,13 @@ impl Button {
         self
     }
 
+    /// Make this a small button, suitable for embedding into text.
+    pub fn small(mut self) -> Self {
+        self.text_style = TextStyle::Body;
+        self.small = true;
+        self
+    }
+
     /// By default, buttons senses clicks.
     /// Change this to a drag-button with `Sense::drag()`.
     pub fn sense(mut self, sense: Sense) -> Self {
@@ -345,14 +354,20 @@ impl Widget for Button {
             text_style,
             fill,
             sense,
+            small,
         } = self;
 
-        let button_padding = ui.style().spacing.button_padding;
+        let mut button_padding = ui.style().spacing.button_padding;
+        if small {
+            button_padding.y = 0.0;
+        }
 
         let font = &ui.fonts()[text_style];
         let galley = font.layout_multiline(text, ui.available_width());
         let mut desired_size = galley.size + 2.0 * button_padding;
-        desired_size = desired_size.at_least(ui.style().spacing.interact_size);
+        if !small {
+            desired_size = desired_size.at_least(ui.style().spacing.interact_size);
+        }
         let rect = ui.allocate_space(desired_size);
 
         let id = ui.make_position_id();