Support button with only icon (#3024)

examples/gallery/ui/pages/controls_page.slint

@@ -30,6 +30,12 @@ export component ControlsPage inherits Page {
                 primary: true;
             }
 
+            Button {
+                icon: @image-url("../../thumbsup.png");
+                enabled: GallerySettings.widgets-enabled;
+                primary: true;
+            }
+
             Button {
                 checkable: true;
                 text: self.checked ? @tr("ON") : @tr("OFF");

internal/compiler/widgets/fluent-base/button.slint

@@ -5,9 +5,11 @@ import { Typography, Palette } from "styling.slint";
 import { FocusBorder } from "components.slint";
 
 export component Button {
+    private property <brush> text-color: primary || checked ? Palette.text-on-accent-primary : Palette.text-primary;
+
     callback clicked;
 
-    in property <string> text <=> i-text.text;
+    in property <string> text;
     in property <image> icon;
     in property <bool> primary;
     in property <bool> enabled <=> i-touch-area.enabled;
@@ -21,7 +23,7 @@ export component Button {
     horizontal-stretch: 0;
     vertical-stretch: 0;
 
-    accessible-label <=> i-text.text;
+    accessible-label: text;
     accessible-role: button;
 
     i-background := Rectangle {
@@ -48,12 +50,13 @@ export component Button {
                 width: 20px;
             }
 
-            i-text := Text {
+            if (root.text != ""): Text {
-                color: root.primary || root.checked ? Palette.text-on-accent-primary : Palette.text-primary;
                 font-size: Typography.body.font-size;
                 font-weight: Typography.body.font-weight;
                 horizontal-alignment: center;
                 vertical-alignment: center;
+                text: root.text;
+                color: root.text-color;
 
                 animate color { duration: 150ms; }
             }
@@ -95,12 +98,12 @@ export component Button {
         disabled when !root.enabled : {
             i-background.background: root.primary || root.checked ? Palette.accent-disabled : Palette.control-disabled;
             i-border.border-color: root.primary || root.checked ? transparent : Palette.control-stroke;
-            i-text.color: root.primary || root.checked ? Palette.text-on-accent-disabled : Palette.text-disabled;
+            root.text-color: root.primary || root.checked ? Palette.text-on-accent-disabled : Palette.text-disabled;
         }
         pressed when root.pressed : {
             i-background.background: root.primary || root.checked ? Palette.accent-tertiary : Palette.control-tertiary;
             i-border.border-color: Palette.control-stroke;
-            i-text.color: root.primary || root.checked ? Palette.text-on-accent-secondary : Palette.text-secondary;
+            root.text-color: root.primary || root.checked ? Palette.text-on-accent-secondary : Palette.text-secondary;
         }
         hover when i-touch-area.has-hover : {
             i-background.background: root.primary || root.checked ? Palette.accent-secondary : Palette.control-secondary;
@@ -108,7 +111,7 @@ export component Button {
         checked when root.checked : {
             i-background.background: Palette.accent-default;
             i-border.border-color: Palette.accent-control-border;
-            i-text.color: Palette.text-on-accent-primary;
+            root.text-color: Palette.text-on-accent-primary;
         }
     ]
 }

internal/compiler/widgets/material-base/button.slint

@@ -6,9 +6,12 @@ import { Typography, Palette, Elevation } from "styling.slint";
 
 // Default button widget with Material Design Filled Button look and feel.
 export component Button {
+    private property <brush> text-color: root.primary ? Palette.on-primary : Palette.on-secondary-container;
+    private property <float> text-opacity: 1.0;
+
     callback clicked;
 
-    in property<string> text <=> i-text.text;
+    in property<string> text;
     in property<bool> enabled <=> i-state-layer.enabled;
     in property<bool> checkable;
     in property<image> icon;
@@ -18,7 +21,8 @@ export component Button {
     in-out property<bool> checked;
 
     min-height: max(40px, i-layout.min-height);
-    accessible-label <=> i-text.text;
+    min-width: max(40px, i-layout.min-width);
+    accessible-label: text;
     accessible-role: button;
     forward-focus: i-state-layer;
 
@@ -56,11 +60,13 @@ export component Button {
         if (root.icon.width > 0 && root.icon.height > 0): Image {
             source <=> root.icon;
             width: 24px;
-            opacity: i-text.opacity;
+            opacity: root.text-opacity;
         }
 
-        i-text := Text {
+        if (root.text != "") : Text {
-            color: root.primary ? Palette.on-primary : Palette.on-secondary-container;
+            text: root.text;
+            color: root.text-color;
+            opacity: root.text-opacity;
             vertical-alignment: center;
             horizontal-alignment: center;
             font-weight: Typography.label-large.font-weight;
@@ -73,11 +79,11 @@ export component Button {
         disabled when !root.enabled : {
             i-background.background: Palette.on-surface;
             i-background.opacity: 0.12;
-            i-text.opacity: 0.38;
+            root.text-opacity: 0.38;
-            i-text.color: Palette.on-surface;
+            root.text-color: Palette.on-surface;
         }
         checked when root.checked: {
-            i-text.color: Palette.on-primary;
+            root.text-color: Palette.on-primary;
         }
     ]
 }