Material: respect background color of flat buttons

Fixes: QTBUG-113474
Pick-to: 6.2 6.5 6.5.1
Change-Id: I1fc39082e4cd1763bae56c512741502228b28397
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

2 files changed, 27 insertions, 19 deletions

diff --git a/src/quickcontrols/material/qquickmaterialstyle.cpp b/src/quickcontrols/material/qquickmaterialstyle.cpp
index 9d10ee30fa..ea408b211f 100644
--- a/src/quickcontrols/material/qquickmaterialstyle.cpp
+++ b/src/quickcontrols/material/qquickmaterialstyle.cpp
@@ -945,10 +945,7 @@ QColor QQuickMaterialStyle::iconDisabledColor() const
 QColor QQuickMaterialStyle::buttonColor(Theme theme, const QVariant &background, const QVariant &accent,
     bool enabled, bool flat, bool highlighted, bool checked) const
 {
-    if (flat)
-        return Qt::transparent;
-
-    if (!enabled) {
+    if (!enabled && !flat) {
         return QColor::fromRgba(m_theme == Light
             ? raisedButtonDisabledColorLight : raisedButtonDisabledColorDark);
     }
@@ -974,7 +971,7 @@ QColor QQuickMaterialStyle::buttonColor(Theme theme, const QVariant &background,
             // A highlighted + checked button should become darker.
             color = accentColor(checked ? Shade100 : shade);
         }
-    } else {
+    } else if (!flat) {
         // Even if the elevation is zero, it should still have a background if it's not flat.
         color = QColor::fromRgba(m_theme == Light ? raisedButtonColorLight
                                                   : raisedButtonColorDark);
diff --git a/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml b/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
index f77c0c5fc8..aac3bbd832 100644
--- a/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
+++ b/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
@@ -24,12 +24,12 @@ TestCase {
     }
 
     Component {
-        id: button
+        id: buttonComponent
         Button { }
     }
 
     Component {
-        id: styledButton
+        id: styledButtonComponent
         Button {
             Material.theme: Material.Dark
             Material.primary: Material.DeepOrange
@@ -152,7 +152,7 @@ TestCase {
     }
 
     function test_defaults() {
-        let control = createTemporaryObject(button, testCase)
+        let control = createTemporaryObject(buttonComponent, testCase)
         verify(control)
         verify(control.Material)
         compare(control.Material.primary, Material.color(Material.Indigo))
@@ -166,7 +166,7 @@ TestCase {
     }
 
     function test_set() {
-        let control = createTemporaryObject(button, testCase)
+        let control = createTemporaryObject(buttonComponent, testCase)
         verify(control)
         control.Material.primary = Material.Green
         control.Material.accent = Material.Brown
@@ -183,7 +183,7 @@ TestCase {
     }
 
     function test_reset() {
-        let control = createTemporaryObject(styledButton, testCase)
+        let control = createTemporaryObject(styledButtonComponent, testCase)
         verify(control)
         compare(control.Material.primary, Material.color(Material.DeepOrange))
         compare(control.Material.accent, Material.color(Material.DeepPurple, themeshade(control.Material.theme)))
@@ -219,18 +219,18 @@ TestCase {
 
     function test_inheritance(data) {
         let prop = data.tag
-        let parent = createTemporaryObject(button, testCase)
+        let parent = createTemporaryObject(buttonComponent, testCase)
         parent.Material[prop] = data.value1
         compare(parent.Material[prop], data.value1)
 
-        let child1 = button.createObject(parent)
+        let child1 = buttonComponent.createObject(parent)
         compare(child1.Material[prop], data.value1)
 
         parent.Material[prop] = data.value2
         compare(parent.Material[prop], data.value2)
         compare(child1.Material[prop], data.value2)
 
-        let child2 = button.createObject(parent)
+        let child2 = buttonComponent.createObject(parent)
         compare(child2.Material[prop], data.value2)
 
         child2.Material[prop] = data.value1
@@ -244,13 +244,13 @@ TestCase {
         compare(child1.Material[prop], parent.Material[prop])
         verify(child2.Material[prop] !== parent.Material[prop])
 
-        let grandChild1 = button.createObject(child1)
-        let grandChild2 = button.createObject(child2)
+        let grandChild1 = buttonComponent.createObject(child1)
+        let grandChild2 = buttonComponent.createObject(child2)
         compare(grandChild1.Material[prop], child1.Material[prop])
         compare(grandChild2.Material[prop], child2.Material[prop])
 
-        let themelessGrandGrandChild = button.createObject(grandChild1)
-        let grandGrandGrandChild1 = button.createObject(themelessGrandGrandChild)
+        let themelessGrandGrandChild = buttonComponent.createObject(grandChild1)
+        let grandGrandGrandChild1 = buttonComponent.createObject(themelessGrandGrandChild)
         compare(grandGrandGrandChild1.Material[prop], parent.Material[prop])
 
         child1.Material[prop] = data.value2
@@ -418,7 +418,7 @@ TestCase {
         let parentWindow = createTemporaryObject(data.component, null)
         verify(parentWindow)
 
-        let control = button.createObject(parentWindow.contentItem)
+        let control = buttonComponent.createObject(parentWindow.contentItem)
         verify(control)
         compare(control.Material.primary, parentWindow.Material.primary)
         compare(control.Material.accent, parentWindow.Material.accent)
@@ -590,7 +590,7 @@ TestCase {
     }
 
     function test_colors(data) {
-        let control = createTemporaryObject(button, testCase)
+        let control = createTemporaryObject(buttonComponent, testCase)
         verify(control)
 
         let prop = data.tag
@@ -1146,4 +1146,15 @@ TestCase {
         compare(textField.topInset, placeholderTextItem.largestHeight / 2)
         compare(textField.topPadding, textField.Material.textFieldVerticalPadding + textField.topInset)
     }
+
+    function test_flatButton() {
+        let button = createTemporaryObject(buttonComponent, testCase, { flat: true })
+        verify(button)
+        // A flat button should be transparent by default.
+        compare(button.background.color, "#00000000")
+
+        // However, if a background color is explicitly specified, it should be respected.
+        button.Material.background = "#ff6347"
+        compare(button.background.color, "#ff6347")
+    }
 }