TabButton: add support for icons

Task-number: QTBUG-49820
Change-Id: I9ab7044d5f5809c8b922c5a8a4f1fa9eb2233139
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

4 files changed, 122 insertions, 17 deletions

diff --git a/src/imports/controls/TabButton.qml b/src/imports/controls/TabButton.qml
index c98022bf..039f9769 100644
--- a/src/imports/controls/TabButton.qml
+++ b/src/imports/controls/TabButton.qml
@@ -49,15 +49,22 @@ T.TabButton {
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 6
+    spacing: 6
 
-    contentItem: Text {
+    icon.width: 24
+    icon.height: 24
+    icon.color: !enabled ? Default.textDisabledLightColor : !checked ? Default.textLightColor : Default.textColor
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
         text: control.text
         font: control.font
-        elide: Text.ElideRight
-        opacity: enabled ? 1 : 0.3
-        color: !control.checked ? Default.textLightColor : control.down ? Default.textDarkColor : Default.textColor
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
+        color: Color.transparent(!control.checked ? Default.textLightColor : control.down ? Default.textDarkColor : Default.textColor,
+                                 enabled ? 1 : 0.3)
     }
 
     background: Rectangle {
diff --git a/src/imports/controls/material/TabButton.qml b/src/imports/controls/material/TabButton.qml
index fb433c07..96546d3f 100644
--- a/src/imports/controls/material/TabButton.qml
+++ b/src/imports/controls/material/TabButton.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
 
@@ -49,14 +51,21 @@ T.TabButton {
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 12
+    spacing: 6
 
-    contentItem: Text {
+    icon.width: 24
+    icon.height: 24
+    icon.color: !enabled ? Material.hintTextColor : down || checked ? Material.accentColor : Material.foreground
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
         text: control.text
         font: control.font
-        elide: Text.ElideRight
         color: !control.enabled ? control.Material.hintTextColor : control.down || control.checked ? control.Material.accentColor : control.Material.foreground
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
     }
 
     background: Ripple {
diff --git a/src/imports/controls/universal/TabButton.qml b/src/imports/controls/universal/TabButton.qml
index 88a98a71..054f65f5 100644
--- a/src/imports/controls/universal/TabButton.qml
+++ b/src/imports/controls/universal/TabButton.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.TabButton {
@@ -48,15 +50,22 @@ T.TabButton {
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 12 // PivotItemMargin
+    spacing: 8
 
-    contentItem: Text {
+    icon.width: 20
+    icon.height: 20
+    icon.color: Color.transparent(control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground,
+                                                    control.checked || control.down || control.hovered ? 1.0 : 0.2)
+
+    contentItem: IconLabel {
+        spacing: control.spacing
+        mirrored: control.mirrored
+        display: control.display
+
+        icon: control.icon
         text: control.text
         font: control.font
-        elide: Text.ElideRight
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-
-        opacity: control.checked || control.down || control.hovered ? 1.0 : 0.2
-        color: control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground
+        color: Color.transparent(control.hovered ? control.Universal.baseMediumHighColor : control.Universal.foreground,
+                                 control.checked || control.down || control.hovered ? 1.0 : 0.2)
     }
 }
diff --git a/tests/auto/controls/data/tst_tabbutton.qml b/tests/auto/controls/data/tst_tabbutton.qml
index 60cae927..05108992 100644
--- a/tests/auto/controls/data/tst_tabbutton.qml
+++ b/tests/auto/controls/data/tst_tabbutton.qml
@@ -95,4 +95,84 @@ TestCase {
         verify(control)
         compare(control.baselineOffset, control.contentItem.y + control.contentItem.baselineOffset)
     }
+
+    function test_spacing() {
+        var control = createTemporaryObject(tabButton, testCase, { text: "Some long, long, long text" })
+        verify(control)
+        if (control.background)
+            verify(control.contentItem.implicitWidth + control.leftPadding + control.rightPadding > control.background.implicitWidth)
+
+        var textLabel = findChild(control.contentItem, "label")
+        verify(textLabel)
+
+        // The implicitWidth of the IconLabel that all buttons use as their contentItem
+        // should be equal to the implicitWidth of the Text while no icon is set.
+        compare(control.contentItem.implicitWidth, textLabel.implicitWidth)
+
+        // That means that spacing shouldn't affect it.
+        control.spacing += 100
+        compare(control.contentItem.implicitWidth, textLabel.implicitWidth)
+
+        // The implicitWidth of the TabButton itself should, therefore, also never include spacing while no icon is set.
+        compare(control.implicitWidth, textLabel.implicitWidth + control.leftPadding + control.rightPadding)
+    }
+
+    function test_display_data() {
+        return [
+            { "tag": "IconOnly", display: TabButton.IconOnly },
+            { "tag": "TextOnly", display: TabButton.TextOnly },
+            { "tag": "TextUnderIcon", display: TabButton.TextUnderIcon },
+            { "tag": "TextBesideIcon", display: TabButton.TextBesideIcon },
+            { "tag": "IconOnly, mirrored", display: TabButton.IconOnly, mirrored: true },
+            { "tag": "TextOnly, mirrored", display: TabButton.TextOnly, mirrored: true },
+            { "tag": "TextUnderIcon, mirrored", display: TabButton.TextUnderIcon, mirrored: true },
+            { "tag": "TextBesideIcon, mirrored", display: TabButton.TextBesideIcon, mirrored: true }
+        ]
+    }
+
+    function test_display(data) {
+        var control = createTemporaryObject(tabButton, testCase, {
+            text: "TabButton",
+            display: data.display,
+            "icon.source": "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/check.png",
+            "LayoutMirroring.enabled": !!data.mirrored
+        })
+        verify(control)
+        verify(control.icon.source.length > 0)
+
+        var iconImage = findChild(control.contentItem, "image")
+        var textLabel = findChild(control.contentItem, "label")
+
+        switch (control.display) {
+        case TabButton.IconOnly:
+            verify(iconImage)
+            verify(!textLabel)
+            compare(iconImage.x, (control.availableWidth - iconImage.width) / 2)
+            compare(iconImage.y, (control.availableHeight - iconImage.height) / 2)
+            break;
+        case TabButton.TextOnly:
+            verify(!iconImage)
+            verify(textLabel)
+            compare(textLabel.x, (control.availableWidth - textLabel.width) / 2)
+            compare(textLabel.y, (control.availableHeight - textLabel.height) / 2)
+            break;
+        case TabButton.TextUnderIcon:
+            verify(iconImage)
+            verify(textLabel)
+            compare(iconImage.x, (control.availableWidth - iconImage.width) / 2)
+            compare(textLabel.x, (control.availableWidth - textLabel.width) / 2)
+            verify(iconImage.y < textLabel.y)
+            break;
+        case TabButton.TextBesideIcon:
+            verify(iconImage)
+            verify(textLabel)
+            if (control.mirrored)
+                verify(textLabel.x < iconImage.x)
+            else
+                verify(iconImage.x < textLabel.x)
+            compare(iconImage.y, (control.availableHeight - iconImage.height) / 2)
+            compare(textLabel.y, (control.availableHeight - textLabel.height) / 2)
+            break;
+        }
+    }
 }