Button: add property icon-size (#9279)

It's nice that the default icon size comes from the style, but sometimes
the user wants a big button with a big icon.

Tested in all 5 styles, with PNG and SVG, with and without icon-size
set.

ChangeLog: Added `icon-size` property to Button

Author: dfaure

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/button.mdx

@@ -64,6 +64,11 @@ Set to true when the button has keyboard focus
 The image to show in the button. Note that not all styles support drawing icons.
 </SlintProperty>
 
+### icon-size
+<SlintProperty propName="icon-size" typeName="length">
+The size of the icon shown in the button. The default value depends on the style. The button will grow if needed to accommodate for large icon sizes.
+</SlintProperty>
+
 ### pressed
 <SlintProperty propName="pressed" typeName="bool" defaultValue="false" propertyVisibility="out">
 Set to true when the button is pressed.

internal/backends/qt/qt_widgets/button.rs

@@ -4,6 +4,7 @@
 // cSpell: ignore qstyle unshade
 
 use super::*;
+use i_slint_core::graphics::euclid;
 
 #[allow(nonstandard_style)]
 #[allow(unused)]
@@ -107,6 +108,7 @@ type ActualStandardButtonKind = Option<StandardButtonKind>;
 pub struct NativeButton {
     pub text: Property<SharedString>,
     pub icon: Property<i_slint_core::graphics::Image>,
+    pub icon_size: Property<LogicalLength>,
     pub pressed: Property<bool>,
     pub has_hover: Property<bool>,
     pub checkable: Property<bool>,
@@ -166,7 +168,9 @@ impl NativeButton {
             Some(StandardButtonKind::Retry) => QStyle_StandardPixmap_SP_DialogRetryButton,
             Some(StandardButtonKind::Ignore) => QStyle_StandardPixmap_SP_DialogIgnoreButton,
             None => {
-                return crate::qt_window::image_to_pixmap((&self.icon()).into(), None)
+                let icon_size = self.icon_size().get().round() as u32;
+                let source_size = Some(euclid::Size2D::new(icon_size, icon_size));
+                return crate::qt_window::image_to_pixmap((&self.icon()).into(), source_size)
                     .unwrap_or_default();
             }
         };
@@ -195,7 +199,19 @@ impl Item for NativeButton {
         let animation_tracker_property_ptr = Self::FIELD_OFFSETS.animation_tracker.apply_pin(self);
         self.widget_ptr.set(cpp! { unsafe [animation_tracker_property_ptr as "void*"] -> SlintTypeErasedWidgetPtr as "std::unique_ptr<SlintTypeErasedWidget>" {
             return make_unique_animated_widget<QPushButton>(animation_tracker_property_ptr);
-        }})
+        }});
+        let widget_ptr: NonNull<()> = SlintTypeErasedWidgetPtr::qwidget_ptr(&self.widget_ptr);
+        let icon_size = unsafe {
+            cpp!([widget_ptr as "QWidget*" ] -> i32 as "int"
+            {
+                ensure_initialized();
+                return qApp->style()->pixelMetric(QStyle::PM_ButtonIconSize, 0, widget_ptr);
+            })
+        };
+        Self::FIELD_OFFSETS
+            .icon_size
+            .apply_pin(self)
+            .set(LogicalLength::new(icon_size as i_slint_core::Coord));
     }
 
     fn layout_info(
@@ -207,10 +223,12 @@ impl Item for NativeButton {
         let standard_button_kind = self.actual_standard_button_kind();
         let mut text: qttypes::QString = self.actual_text(standard_button_kind);
         let icon: qttypes::QPixmap = self.actual_icon(standard_button_kind);
+        let icon_size = self.icon_size().get() as i32;
         let widget_ptr: NonNull<()> = SlintTypeErasedWidgetPtr::qwidget_ptr(&self.widget_ptr);
         let size = cpp!(unsafe [
             mut text as "QString",
             icon as "QPixmap",
+            icon_size as "int",
             widget_ptr as "QWidget*"
         ] -> qttypes::QSize as "QSize" {
             ensure_initialized();
@@ -220,11 +238,10 @@ impl Item for NativeButton {
             option.rect = option.fontMetrics.boundingRect(text);
             option.text = std::move(text);
             option.icon = icon;
-            auto iconSize = qApp->style()->pixelMetric(QStyle::PM_ButtonIconSize, 0, widget_ptr);
-            option.iconSize = QSize(iconSize, iconSize);
+            option.iconSize = QSize(icon_size, icon_size);
             if (!icon.isNull()) {
-                option.rect.setHeight(qMax(option.rect.height(), iconSize));
-                option.rect.setWidth(option.rect.width() + 4 + iconSize);
+                option.rect.setHeight(qMax(option.rect.height(), icon_size));
+                option.rect.setWidth(option.rect.width() + 4 + icon_size);
             }
             return qApp->style()->sizeFromContents(QStyle::CT_PushButton, &option, option.rect.size(), widget_ptr);
         });
@@ -348,6 +365,7 @@ impl Item for NativeButton {
         let has_focus = this.has_focus();
         let has_hover = this.has_hover();
         let primary = this.primary();
+        let icon_size = this.icon_size().get().round() as i32;
         let colorize_icon = this.colorize_icon();
 
         cpp!(unsafe [
@@ -362,6 +380,7 @@ impl Item for NativeButton {
             has_focus as "bool",
             has_hover as "bool",
             primary as "bool",
+            icon_size as "int",
             colorize_icon as "bool",
             dpr as "float",
             initial_state as "int"
@@ -429,8 +448,7 @@ impl Item for NativeButton {
             } else {
                 option.icon = icon;
             }
-            auto iconSize = qApp->style()->pixelMetric(QStyle::PM_ButtonIconSize, 0, nullptr);
-            option.iconSize = QSize(iconSize, iconSize);
+            option.iconSize = QSize(icon_size, icon_size);
             option.rect = QRect(QPoint(), size / dpr);
 
             qApp->style()->drawControl(QStyle::CE_PushButton, &option, painter->get(), widget);

internal/compiler/builtins.slint

@@ -567,6 +567,7 @@ export component NativeButton {
     out property <bool> has-focus;
     in property <bool> primary;
     in property <bool> colorize-icon;
+    in property <length> icon-size;
     callback clicked;
     in property <bool> enabled: true;
     in property <StandardButtonKind> standard-button-kind;

internal/compiler/widgets/cosmic/button.slint

@@ -7,6 +7,7 @@ import { StateLayer } from "components.slint";
 export component Button {
     in property <string> text;
     in property <image> icon;
+    in property <length> icon-size: 20px;
     in property <bool> primary;
     in property <bool> enabled <=> state-layer.enabled;
     in property <bool> checkable;
@@ -55,7 +56,8 @@ export component Button {
             if (root.icon.width > 0 && root.icon.height > 0) : Image {
                 y: (parent.height - self.height) / 2;
                 source <=> root.icon;
-                width: 20px;
+                width: root.icon-size;
+                min-height: root.icon-size;
                 colorize: root.colorize-icon ? root.text-color : transparent;
             }
 

internal/compiler/widgets/cupertino/button.slint

@@ -7,6 +7,7 @@ import { FocusBorder } from "components.slint";
 export component Button {
     in property <string> text;
     in property <image> icon;
+    in property <length> icon-size: 13px;
     in property <bool> primary;
     in property <bool> enabled <=> i-touch-area.enabled;
     in property <bool> checkable;
@@ -118,7 +119,8 @@ export component Button {
         if (root.icon.width > 0 && root.icon.height > 0) : Image {
             y: (parent.height - self.height) / 2;
             source <=> root.icon;
-            width: 13px;
+            width: root.icon-size;
+            min-height: root.icon-size;
             opacity: root.enabled ? 1 : 0.5;
             colorize: root.colorize-icon ? root.text-color : transparent;
         }

internal/compiler/widgets/fluent/button.slint

@@ -7,6 +7,7 @@ import { FocusBorder } from "components.slint";
 export component Button {
     in property <string> text;
     in property <image> icon;
+    in property <length> icon-size: 20px;
     in property <bool> primary;
     in property <bool> enabled <=> i-touch-area.enabled;
     in property <bool> checkable;
@@ -76,7 +77,8 @@ export component Button {
             if (root.icon.width > 0 && root.icon.height > 0) : Image {
                 y: (parent.height - self.height) / 2;
                 source <=> root.icon;
-                width: 20px;
+                width: root.icon-size;
+                min-height: root.icon-size;
                 colorize: root.colorize-icon ? root.text-color : transparent;
             }
 

internal/compiler/widgets/material/button.slint

@@ -7,6 +7,7 @@ import { MaterialFontSettings, MaterialPalette, Elevation } from "styling.slint"
 component MaterialButtonBase {
     in property <string> text;
     in property <image> icon;
+    in property <length> icon-size: 24px;
     in property <length> border-radius <=> state-layer.border-radius;
     in property <bool> checkable;
     in property <brush> text-color;
@@ -39,10 +40,13 @@ component MaterialButtonBase {
         spacing: 8px;
         padding-left: root.layout-padding-left;
         padding-right: root.layout-padding-right;
+        padding-top: 5px;
+        padding-bottom: 5px;
 
         if root.icon.width > 0 && root.icon.height > 0: Image {
             source <=> root.icon;
-            width: 24px;
+            width: root.icon-size;
+            min-height: root.icon-size;
             opacity: root.text-opacity;
             colorize: root.colorize-icon ? root.text-color : transparent;
         }
@@ -70,6 +74,7 @@ export component Button {
     in property <bool> enabled <=> base.enabled;
     in property <bool> checkable;
     in property <image> icon <=> base.icon;
+    in property <length> icon-size <=> base.icon-size;
     in property <bool> primary;
     in property <bool> colorize-icon <=> base.colorize-icon;
     out property <bool> has-focus: base.has-focus;

internal/compiler/widgets/qt/button.slint

@@ -4,6 +4,7 @@
 export component Button {
     in property <string> text <=> native.text;
     in property <image> icon <=> native.icon;
+    in property <length> icon_size <=> native.icon_size;
     in property <bool> enabled <=> native.enabled;
     in property <bool> checkable <=> native.checkable;
     in property <bool> primary <=> native.primary;