Button: add support for icons

Task-number: QTBUG-49820
Change-Id: I7f2a72a4ef199d31b2b0041fdad42cfeb15f7b54
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

4 files changed, 87 insertions, 27 deletions

diff --git a/src/imports/controls/Button.qml b/src/imports/controls/Button.qml
index ce8bfd7b..bdf09f32 100644
--- a/src/imports/controls/Button.qml
+++ b/src/imports/controls/Button.qml
@@ -51,17 +51,35 @@ T.Button {
     padding: 6
     leftPadding: padding + 2
     rightPadding: padding + 2
+    spacing: 6
 
-    contentItem: Text {
-        text: control.text
-        font: control.font
-        opacity: enabled || control.highlighted || control.checked ? 1 : 0.3
-        color: control.checked || control.highlighted ?
-            Default.textLightColor :
-            (control.visualFocus ? Default.focusColor : (control.down ? Default.textDarkColor : Default.textColor))
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        elide: Text.ElideRight
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? undefined : Default.textDisabledLightColor
+
+    contentItem: DisplayLayout {
+        spacing: control.spacing
+        mirrored: control.mirrored
+
+        icon: IconImage {
+            id: iconImage
+            name: control.icon.name
+            source: control.icon.source
+            sourceSize.width: control.icon.width
+            sourceSize.height: control.icon.height
+            color: control.icon.color
+        }
+        text: Text {
+            text: control.text
+            font: control.font
+            opacity: enabled || control.highlighted || control.checked ? 1 : 0.3
+            color: control.checked || control.highlighted ?
+                Default.textLightColor :
+                (control.visualFocus ? Default.focusColor : (control.down ? Default.textDarkColor : Default.textColor))
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
     }
 
     background: Rectangle {
diff --git a/src/imports/controls/material/Button.qml b/src/imports/controls/material/Button.qml
index fb05e976..d73eb240 100644
--- a/src/imports/controls/material/Button.qml
+++ b/src/imports/controls/material/Button.qml
@@ -36,6 +36,8 @@
 
 import QtQuick 2.9
 import QtQuick.Templates 2.3 as T
+import QtQuick.Controls 2.3
+import QtQuick.Controls.impl 2.3
 import QtQuick.Controls.Material 2.3
 import QtQuick.Controls.Material.impl 2.3
 
@@ -52,20 +54,38 @@ T.Button {
     padding: 12
     leftPadding: padding - 4
     rightPadding: padding - 4
+    spacing: 6
+
+    icon.width: 24
+    icon.height: 24
+    icon.color: enabled ? undefined : Material.hintTextColor
 
     Material.elevation: flat ? control.down || control.hovered ? 2 : 0
                              : control.down ? 8 : 2
     Material.background: flat ? "transparent" : undefined
 
-    contentItem: Text {
-        text: control.text
-        font: control.font
-        color: !control.enabled ? control.Material.hintTextColor :
-            control.flat && control.highlighted ? control.Material.accentColor :
-            control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.foreground
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        elide: Text.ElideRight
+    contentItem: DisplayLayout {
+        spacing: control.spacing
+        mirrored: control.mirrored
+
+        icon: IconImage {
+            id: iconImage
+            name: control.icon.name
+            source: control.icon.source
+            sourceSize.width: control.icon.width
+            sourceSize.height: control.icon.height
+            color: control.icon.color
+        }
+        text: Text {
+            text: control.text
+            font: control.font
+            color: !control.enabled ? control.Material.hintTextColor :
+                control.flat && control.highlighted ? control.Material.accentColor :
+                control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.foreground
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+        }
     }
 
     // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
diff --git a/src/imports/controls/universal/Button.qml b/src/imports/controls/universal/Button.qml
index d1a312e5..5b6951a5 100644
--- a/src/imports/controls/universal/Button.qml
+++ b/src/imports/controls/universal/Button.qml
@@ -36,6 +36,8 @@
 
 import QtQuick 2.9
 import QtQuick.Templates 2.3 as T
+import QtQuick.Controls 2.3
+import QtQuick.Controls.impl 2.3
 import QtQuick.Controls.Universal 2.3
 
 T.Button {
@@ -50,18 +52,35 @@ T.Button {
     padding: 8
     topPadding: padding - 4
     bottomPadding: padding - 4
+    spacing: 8
+
+    icon.width: 20
+    icon.height: 20
+    icon.color: enabled ? undefined : Color.transparent(Universal.foreground, 0.2)
 
     property bool useSystemFocusVisuals: true
 
-    contentItem: Text {
-        text: control.text
-        font: control.font
-        elide: Text.ElideRight
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
+    contentItem: DisplayLayout {
+        spacing: control.spacing
+        mirrored: control.mirrored
 
-        opacity: enabled ? 1.0 : 0.2
-        color: control.Universal.foreground
+        icon: IconImage {
+            id: iconImage
+            name: control.icon.name
+            source: control.icon.source
+            sourceSize.width: control.icon.width
+            sourceSize.height: control.icon.height
+            color: control.icon.color
+        }
+        text: Text {
+            text: control.text
+            font: control.font
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            opacity: enabled ? 1.0 : 0.2
+            color: control.Universal.foreground
+        }
     }
 
     background: Rectangle {
diff --git a/src/quicktemplates2/qquickbutton.cpp b/src/quicktemplates2/qquickbutton.cpp
index 1a614754..d324feb2 100644
--- a/src/quicktemplates2/qquickbutton.cpp
+++ b/src/quicktemplates2/qquickbutton.cpp
@@ -77,6 +77,9 @@ QT_BEGIN_NAMESPACE
     }
     \endcode
 
+    In addition to displaying \l {AbstractButton::}{text}, buttons can also
+    display an \l [QML]{Button Icons}{icon}.
+
     \sa {Customizing Button}, {Button Controls}
 */