Update Material ComboBox to Material 3

Fixes: QTBUG-111887
Change-Id: I9a518ce4fb3ebc03a792d8bff0f89b2c4bce3a0f
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>
(cherry picked from commit 846a4ebf26c58ef3fcdaedc85e1d04e7d4ee974f)
Reviewed-by: Volker Hilsheimer <volker.hilsheimer@qt.io>

2 files changed, 16 insertions, 39 deletions

diff --git a/src/quickcontrols/material/ComboBox.qml b/src/quickcontrols/material/ComboBox.qml
index 30222c4180..4febbb9326 100644
--- a/src/quickcontrols/material/ComboBox.qml
+++ b/src/quickcontrols/material/ComboBox.qml
@@ -23,8 +23,6 @@ T.ComboBox {
     leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
     rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
 
-    Material.elevation: flat ? control.pressed || (enabled && control.hovered) ? 2 : 0
-                             : control.pressed ? 8 : 2
     Material.background: flat ? "transparent" : undefined
     Material.foreground: flat ? undefined : Material.primaryTextColor
 
@@ -44,9 +42,9 @@ T.ComboBox {
     }
 
     contentItem: T.TextField {
-        padding: 6
-        leftPadding: control.editable ? 2 : control.mirrored ? 0 : 12
-        rightPadding: control.editable ? 2 : control.mirrored ? 12 : 0
+        leftPadding: Material.textFieldHorizontalPadding
+        topPadding: Material.textFieldVerticalPadding
+        bottomPadding: Material.textFieldVerticalPadding
 
         text: control.editable ? control.editText : control.displayText
 
@@ -65,46 +63,25 @@ T.ComboBox {
         cursorDelegate: CursorDelegate { }
     }
 
-    background: Rectangle {
+    background: MaterialTextContainer {
         implicitWidth: 120
-        implicitHeight: control.Material.buttonHeight
+        implicitHeight: control.Material.textFieldHeight
 
-        radius: control.flat ? 0 : 2
-        color: !control.editable ? control.Material.dialogColor : "transparent"
-
-        layer.enabled: control.enabled && !control.editable && control.Material.background.a > 0
-        layer.effect: ElevationEffect {
-            elevation: control.Material.elevation
-        }
-
-        Rectangle {
-            visible: control.editable
-            y: parent.y + control.baselineOffset
-            width: parent.width
-            height: control.activeFocus ? 2 : 1
-            color: control.editable && control.activeFocus ? control.Material.accentColor : control.Material.hintTextColor
-        }
-
-        Ripple {
-            clip: control.flat
-            clipRadius: control.flat ? 0 : 2
-            x: control.editable && control.indicator ? control.indicator.x : 0
-            width: control.editable && control.indicator ? control.indicator.width : parent.width
-            height: parent.height
-            pressed: control.pressed
-            anchor: control.editable && control.indicator ? control.indicator : control
-            active: enabled && (control.pressed || control.visualFocus || control.hovered)
-            color: control.Material.rippleColor
-        }
+        outlineColor: (enabled && control.hovered) ? control.Material.primaryTextColor : control.Material.hintTextColor
+        focusedOutlineColor: control.Material.accentColor
+        controlHasActiveFocus: control.activeFocus
+        controlHasText: true
+        horizontalPadding: control.Material.textFieldHorizontalPadding
     }
 
     popup: T.Popup {
         y: control.editable ? control.height - 5 : 0
         width: control.width
-        height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
+        height: Math.min(contentItem.implicitHeight + verticalPadding * 2, control.Window.height - topMargin - bottomMargin)
         transformOrigin: Item.Top
         topMargin: 12
         bottomMargin: 12
+        verticalPadding: 8
 
         Material.theme: control.Material.theme
         Material.accent: control.Material.accent
@@ -133,12 +110,13 @@ T.ComboBox {
         }
 
         background: Rectangle {
-            radius: 2
+            radius: 4
             color: parent.Material.dialogColor
 
             layer.enabled: control.enabled
-            layer.effect: ElevationEffect {
-                elevation: 8
+            layer.effect: RoundedElevationEffect {
+                elevation: 4
+                roundedScale: Material.ExtraSmallScale
             }
         }
     }
diff --git a/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml b/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
index 46dd5b42d0..d85ddc7a44 100644
--- a/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
+++ b/tests/auto/quickcontrols/qquickmaterialstyle/data/tst_material.qml
@@ -747,7 +747,6 @@ TestCase {
     function test_background_data() {
         return [
             { tag: "button", inherit: false, wait: 400 },
-            { tag: "combobox", inherit: false, wait: 400 },
             { tag: "drawer", inherit: true },
             { tag: "groupbox", inherit: true },
             { tag: "frame", inherit: true },