Update Material Dialog to Material 3

Fixes: QTBUG-109035
Pick-to: 6.5
Change-Id: Idf4bf0a114529dd1715c4b9db0b3fdeea5b78bf1
Reviewed-by: Oliver Eftevaag <oliver.eftevaag@qt.io>

2 files changed, 21 insertions, 11 deletions

diff --git a/src/quickcontrols/material/Dialog.qml b/src/quickcontrols/material/Dialog.qml
index 72f11ffd22..33d8ce97d1 100644
--- a/src/quickcontrols/material/Dialog.qml
+++ b/src/quickcontrols/material/Dialog.qml
@@ -19,10 +19,17 @@ T.Dialog {
                              + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
                              + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
 
+    // https://m3.material.io/components/dialogs/specs#7dbad5e0-f001-4eae-a536-694aeca90ba6
     padding: 24
-    topPadding: 20
+    topPadding: 16
+    // https://m3.material.io/components/dialogs/guidelines#812cedf1-5c45-453f-97fc-7fd9bba7522b
+    modal: true
 
-    Material.elevation: 24
+    // https://m3.material.io/components/dialogs/specs#401a48c3-f50c-4fa9-b798-701f5adcf155
+    // Specs say level 3 (6 dp) is the default, yet the screenshots there show 0. Native Android defaults to non-zero.
+    Material.elevation: 6
+    // https://m3.material.io/components/dialogs/specs#6771d107-624e-47cc-b6d8-2b7b620ba2f1
+    Material.roundedScale: Material.ExtraLargeScale
 
     enter: Transition {
         // grow_fade_in
@@ -37,12 +44,14 @@ T.Dialog {
     }
 
     background: Rectangle {
-        radius: 2
+        // FullScale doesn't make sense for Dialog.
+        radius: control.Material.roundedScale
         color: control.Material.dialogColor
 
         layer.enabled: control.Material.elevation > 0
-        layer.effect: ElevationEffect {
+        layer.effect: RoundedElevationEffect {
             elevation: control.Material.elevation
+            roundedScale: control.background.radius
         }
     }
 
@@ -53,12 +62,12 @@ T.Dialog {
         padding: 24
         bottomPadding: 0
         // TODO: QPlatformTheme::TitleBarFont
-        font.bold: true
-        font.pixelSize: 16
+        // https://m3.material.io/components/dialogs/specs#401a48c3-f50c-4fa9-b798-701f5adcf155
+        font.pixelSize: 24
         background: PaddedRectangle {
-            radius: 2
+            radius: control.background.radius
             color: control.Material.dialogColor
-            bottomPadding: -2
+            bottomPadding: -radius
             clip: true
         }
     }
diff --git a/src/quickcontrols/material/DialogButtonBox.qml b/src/quickcontrols/material/DialogButtonBox.qml
index dad1601931..55b2011c83 100644
--- a/src/quickcontrols/material/DialogButtonBox.qml
+++ b/src/quickcontrols/material/DialogButtonBox.qml
@@ -22,6 +22,7 @@ T.DialogButtonBox {
     buttonLayout: T.DialogButtonBox.AndroidLayout
 
     Material.foreground: Material.accent
+    Material.roundedScale: Material.ExtraLargeScale
 
     delegate: Button { flat: true }
 
@@ -36,11 +37,11 @@ T.DialogButtonBox {
 
     background: PaddedRectangle {
         implicitHeight: control.Material.dialogButtonBoxHeight
-        radius: 2
+        radius: control.Material.roundedScale
         color: control.Material.dialogColor
         // Rounded corners should be only at the top or at the bottom
-        topPadding: control.position === T.DialogButtonBox.Footer ? -2 : 0
-        bottomPadding: control.position === T.DialogButtonBox.Header ? -2 : 0
+        topPadding: control.position === T.DialogButtonBox.Footer ? -radius : 0
+        bottomPadding: control.position === T.DialogButtonBox.Header ? -radius : 0
         clip: true
     }
 }