[layout] change clickable_diameter: f32 to interact_size: Vec2

egui/src/containers/collapsing_header.rs

@@ -191,9 +191,7 @@ impl CollapsingHeader {
             desired_width,
             galley.size.y + 2.0 * ui.style().spacing.button_padding.y,
         );
-        desired_size.y = desired_size
+        desired_size = desired_size.at_least(ui.style().spacing.interact_size);
-            .y
-            .at_least(ui.style().spacing.clickable_diameter);
         let rect = ui.allocate_space(desired_size);
         let rect = rect.expand2(ui.style().spacing.button_expand);
 

egui/src/demos/color_test.rs

@@ -60,7 +60,7 @@ impl ColorTest {
             let vertex_color = Rgba::new(0.5, 0.75, 0.75, 1.0);
 
             ui.horizontal_centered(|ui| {
-                let color_size = vec2(2.0, 1.0) * ui.style().spacing.clickable_diameter;
+                let color_size = ui.style().spacing.interact_size;
                 ui.label("texture");
                 show_color(ui, tex_color, color_size);
                 ui.label(" * ");
@@ -133,7 +133,7 @@ impl ColorTest {
         let is_opaque = left.is_opaque() && right.is_opaque();
 
         ui.horizontal_centered(|ui| {
-            let color_size = vec2(2.0, 1.0) * ui.style().spacing.clickable_diameter;
+            let color_size = ui.style().spacing.interact_size;
             if !is_opaque {
                 ui.label("Background:");
                 show_color(ui, bg_fill, color_size);

egui/src/demos/toggle_switch.rs

@@ -20,7 +20,7 @@ pub fn toggle(ui: &mut Ui, on: &mut bool) -> Response {
     // 1. Deciding widget size:
     // You can query the `ui` how much space is available,
     // but in this example we have a fixed size component:
-    let desired_size = vec2(2.0, 1.0) * ui.style().spacing.clickable_diameter;
+    let desired_size = ui.style().spacing.interact_size;
 
     // 2. Allocating space:
     // This is where we get a region (`Rect`) of the screen assigned.

egui/src/style.rs

@@ -45,17 +45,18 @@ pub struct Spacing {
     /// Expand buttons by this much *after* allocating them.
     /// This is then mostly a visual change (but also makes them easier to hit with the mouse).
     /// This allows for compact layout where buttons actually eat into item_spacing a bit
-    pub button_expand: Vec2,
+    pub button_expand: Vec2, // TODO: remove
 
     /// Indent collapsing regions etc by this much.
     pub indent: f32,
 
-    /// Anything clickable is (at least) this wide.
+    /// Minimum size of e.g. a button.
-    /// TODO: rename `button_height` or something?
+    /// `interact_size.y` is the default height of button, slider, etc.
-    pub clickable_diameter: f32,
+    /// Anything clickable should be (at least) this size.
+    pub interact_size: Vec2, // TODO: rename min_interact_size ?
 
-    /// Total width of a slider
+    /// Total width of a slider.
-    pub slider_width: f32,
+    pub slider_width: f32, // TODO: rename big_interact_size ?
 
     /// Checkboxes, radio button and collapsing headers have an icon at the start.
     /// The text starts after this many pixels.
@@ -202,7 +203,7 @@ impl Default for Spacing {
             button_padding: vec2(2.0, 0.0),
             button_expand: vec2(1.0, 1.0),
             indent: 21.0,
-            clickable_diameter: 14.0, // TODO: automatically higher on touch screens
+            interact_size: vec2(28.0, 14.0), // TODO: larger interact_size.y
             slider_width: 140.0,
             icon_width: 14.0,
             menu_bar_height: 16.0,
@@ -319,7 +320,7 @@ impl Spacing {
             button_padding,
             button_expand,
             indent,
-            clickable_diameter,
+            interact_size,
             slider_width,
             icon_width,
             menu_bar_height,
@@ -330,7 +331,8 @@ impl Spacing {
         ui_slider_vec2(ui, button_padding, 0.0..=10.0, "button_padding");
         ui_slider_vec2(ui, button_expand, 0.0..=10.0, "button_expand");
         ui.add(Slider::f32(indent, 0.0..=100.0).text("indent"));
-        ui.add(Slider::f32(clickable_diameter, 0.0..=40.0).text("clickable_diameter"));
+        ui_slider_vec2(ui, interact_size, 0.0..=40.0, "interact_size")
+            .tooltip_text("Minimum size of an interactive widget");
         ui.add(Slider::f32(slider_width, 0.0..=1000.0).text("slider_width"));
         ui.add(Slider::f32(icon_width, 0.0..=40.0).text("icon_width"));
         ui.add(Slider::f32(menu_bar_height, 0.0..=40.0).text("menu_bar_height"));
@@ -443,12 +445,18 @@ impl Stroke {
 }
 
 // TODO: improve and standardize ui_slider_vec2
-fn ui_slider_vec2(ui: &mut Ui, value: &mut Vec2, range: std::ops::RangeInclusive<f32>, text: &str) {
+fn ui_slider_vec2(
-    ui.horizontal_centered(|ui| {
+    ui: &mut Ui,
+    value: &mut Vec2,
+    range: std::ops::RangeInclusive<f32>,
+    text: &str,
+) -> Response {
+    let (_, rect) = ui.horizontal_centered(|ui| {
         ui.label(format!("{}: ", text));
         ui.add(Slider::f32(&mut value.x, range.clone()).text("w"));
         ui.add(Slider::f32(&mut value.y, range.clone()).text("h"));
     });
+    ui.interact_hover(rect)
 }
 
 fn ui_color(ui: &mut Ui, srgba: &mut Srgba, text: &str) {

egui/src/ui.rs

@@ -658,13 +658,19 @@ impl Ui {
 
     /// Start a ui with horizontal layout
     pub fn horizontal<R>(&mut self, add_contents: impl FnOnce(&mut Ui) -> R) -> (R, Rect) {
-        let initial_size = vec2(self.available().width(), 0.0);
+        let initial_size = vec2(
+            self.available().width(),
+            self.style().spacing.interact_size.y,
+        );
         self.inner_layout(Layout::horizontal(Align::Min), initial_size, add_contents)
     }
 
     /// Start a ui with horizontal layout where elements are centered on the Y axis.
     pub fn horizontal_centered<R>(&mut self, add_contents: impl FnOnce(&mut Ui) -> R) -> (R, Rect) {
-        let initial_size = vec2(self.available().width(), 0.0);
+        let initial_size = vec2(
+            self.available().width(),
+            self.style().spacing.interact_size.y,
+        );
         self.inner_layout(
             Layout::horizontal(Align::Center),
             initial_size,

egui/src/widgets/color_picker.rs

@@ -55,7 +55,7 @@ fn show_srgba(ui: &mut Ui, srgba: Srgba, desired_size: Vec2) -> Response {
 }
 
 fn color_button(ui: &mut Ui, color: Srgba) -> Response {
-    let desired_size = Vec2::splat(ui.style().spacing.clickable_diameter);
+    let desired_size = ui.style().spacing.interact_size;
     let rect = ui.allocate_space(desired_size);
     let rect = rect.expand2(ui.style().spacing.button_expand);
     let id = ui.make_position_id();
@@ -76,7 +76,7 @@ fn color_slider_1d(ui: &mut Ui, value: &mut f32, color_at: impl Fn(f32) -> Srgba
 
     let desired_size = vec2(
         ui.style().spacing.slider_width,
-        ui.style().spacing.clickable_diameter * 2.0,
+        ui.style().spacing.interact_size.y * 2.0,
     );
     let rect = ui.allocate_space(desired_size);
 
@@ -192,7 +192,7 @@ fn color_picker_hsvag_2d(ui: &mut Ui, hsva: &mut HsvaGamma) {
     ui.vertical_centered(|ui| {
         let current_color_size = vec2(
             ui.style().spacing.slider_width,
-            ui.style().spacing.clickable_diameter * 2.0,
+            ui.style().spacing.interact_size.y * 2.0,
         );
 
         show_color(ui, *hsva, current_color_size).tooltip_text("Current color");

egui/src/widgets/mod.rs

@@ -292,9 +292,7 @@ impl Widget for Button {
         let font = &ui.fonts()[text_style];
         let galley = font.layout_multiline(text, ui.available().width());
         let mut desired_size = galley.size + 2.0 * ui.style().spacing.button_padding;
-        desired_size.y = desired_size
+        desired_size = desired_size.at_least(ui.style().spacing.interact_size);
-            .y
-            .at_least(ui.style().spacing.clickable_diameter);
         let rect = ui.allocate_space(desired_size);
         let rect = rect.expand2(ui.style().spacing.button_expand);
 
@@ -357,9 +355,7 @@ impl<'a> Widget for Checkbox<'a> {
         let button_padding = ui.style().spacing.button_padding;
         let mut desired_size =
             button_padding + vec2(icon_width, 0.0) + galley.size + button_padding;
-        desired_size.y = desired_size
+        desired_size = desired_size.at_least(ui.style().spacing.interact_size);
-            .y
-            .at_least(ui.style().spacing.clickable_diameter);
         let rect = ui.allocate_space(desired_size);
 
         let response = ui.interact(rect, id, Sense::click());
@@ -441,9 +437,7 @@ impl Widget for RadioButton {
         let button_padding = ui.style().spacing.button_padding;
         let mut desired_size =
             button_padding + vec2(icon_width, 0.0) + galley.size + button_padding;
-        desired_size.y = desired_size
+        desired_size = desired_size.at_least(ui.style().spacing.interact_size);
-            .y
-            .at_least(ui.style().spacing.clickable_diameter);
         let rect = ui.allocate_space(desired_size);
 
         let response = ui.interact(rect, id, Sense::click());

egui/src/widgets/slider.rs

@@ -272,7 +272,7 @@ impl<'a> Widget for Slider<'a> {
         let font = &ui.fonts()[text_style];
         let height = font
             .line_spacing()
-            .at_least(ui.style().spacing.clickable_diameter);
+            .at_least(ui.style().spacing.interact_size.y);
 
         if let Some(text) = &self.text {
             self.id = self.id.or_else(|| Some(ui.make_unique_child_id(text)));