Update Material Button to Material 3

- Remove the checkable indicator (PaddedRectangle instance), since it
  no longer looks good with fully rounded corners. It seems to come
  from ToggleButton:

  https://developer.android.com/develop/ui/views/components/togglebutton

  The screenshots in the linked bug report show that even Android's
  latest ToggleButton doesn't fit in with the default fully rounded
  corners. Instead, checked buttons now use the accent color for their
  text. Highlighted buttons are the exception, as it would result in a
  lack of contrast between the background and the text.
- Reduce the Angular blur values by 1/4 for all elevations (except
  zero) so that the shadow isn't so huge. Also, use higher "strength"
  on the lower ones as well, so that they are not so spread out and are
  instead small and sharp, matching the Material 3 guidelines and
  getting closer to reflecting the appearance of a real shadow.
- Fix zero elevation buttons with no explicitly specified background
  color having a transparent background, taking care to ensure that flat
  buttons still have a transparent background.

Fixes: QTBUG-108052
Change-Id: If4c7bee47b79e4317dd4c7bb0c4dfd4d4f58ecaf
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

2 files changed, 66 insertions, 42 deletions

diff --git a/tests/manual/quickcontrols2/material/pages/ButtonPage.qml b/tests/manual/quickcontrols2/material/pages/ButtonPage.qml
index c26c936129..3f861e7a70 100644
--- a/tests/manual/quickcontrols2/material/pages/ButtonPage.qml
+++ b/tests/manual/quickcontrols2/material/pages/ButtonPage.qml
@@ -7,7 +7,6 @@ import QtQuick.Layouts
 import ".."
 
 Page {
-    id: root
     topPadding: 20
 
     property var backgroundColor
@@ -19,62 +18,86 @@ Page {
         }
 
         CheckBox {
-            id: flatCheckBox
-            text: "Flat"
+            id: disabledCheckBox
+            text: "Disabled"
+        }
+
+        Item {
+            Layout.fillWidth: true
         }
     }
 
-    component RoundedScaleRepeater: Repeater {
-        id: roundedScaleRepeater
+    component RoundedScaleLayout: ColumnLayout {
+        id: roundedScaleLayout
+        enabled: !disabledCheckBox.checked
 
+        property bool allowFlat
         property var backgroundColor: undefined
         property var foregroundColor: undefined
 
         property int contentLeftMargin
         property int contentRightMargin
 
-        model: ListModel {
-            ListElement { displayName: "NotRounded"; roundedScale: Material.NotRounded }
-            ListElement { displayName: "ExtraSmall"; roundedScale: Material.ExtraSmallScale }
-            ListElement { displayName: "Small"; roundedScale: Material.SmallScale }
-            ListElement { displayName: "Medium"; roundedScale: Material.MediumScale }
-            ListElement { displayName: "Large"; roundedScale: Material.LargeScale }
-            ListElement { displayName: "ExtraLarge"; roundedScale: Material.ExtraLargeScale }
-            ListElement { displayName: "Full"; roundedScale: Material.FullScale }
+        RowLayout {
+            enabled: roundedScaleLayout.allowFlat
+
+            CheckBox {
+                id: flatCheckBox
+                text: "Flat"
+
+                Layout.leftMargin: roundedScaleLayout.contentLeftMargin
+            }
         }
 
-        // Workaround for QTBUG-98859.
-        delegate: Component {
-            ColumnLayout {
-                id: scaleLayout
-                spacing: Constants.spacing
+        RowLayout {
+            spacing: Constants.spacing
+
+            Repeater {
+                id: roundedScaleRepeater
+                model: ListModel {
+                    ListElement { displayName: "NotRounded"; roundedScale: Material.NotRounded }
+                    ListElement { displayName: "ExtraSmall"; roundedScale: Material.ExtraSmallScale }
+                    ListElement { displayName: "Small"; roundedScale: Material.SmallScale }
+                    ListElement { displayName: "Medium"; roundedScale: Material.MediumScale }
+                    ListElement { displayName: "Large"; roundedScale: Material.LargeScale }
+                    ListElement { displayName: "ExtraLarge"; roundedScale: Material.ExtraLargeScale }
+                    ListElement { displayName: "Full"; roundedScale: Material.FullScale }
+                }
 
-                Layout.leftMargin: index === 0 ? roundedScaleRepeater.contentLeftMargin : 0
-                Layout.rightMargin: index === roundedScaleRepeater.count - 1 ? roundedScaleRepeater.contentRightMargin : 0
-                Layout.bottomMargin: Constants.spacing
+                // Workaround for QTBUG-98859.
+                delegate: Component {
+                    ColumnLayout {
+                        id: scaleLayout
+                        spacing: Constants.spacing
 
-                required property int index
-                required property string displayName
-                required property int roundedScale
+                        required property int index
+                        required property string displayName
+                        required property int roundedScale
 
-                Label {
-                    text: scaleLayout.displayName
+                        Layout.leftMargin: index === 0 ? roundedScaleLayout.contentLeftMargin : 0
+                        Layout.rightMargin: index === roundedScaleRepeater.count - 1 ? roundedScaleLayout.contentRightMargin : 0
+                        Layout.bottomMargin: Constants.spacing
 
-                    Layout.alignment: Qt.AlignHCenter
-                }
+                        Label {
+                            text: scaleLayout.displayName
+
+                            Layout.alignment: Qt.AlignHCenter
+                        }
 
-                Repeater {
-                    model: 13
+                        Repeater {
+                            model: 13
 
-                    Button {
-                        text: modelData
-                        flat: flatCheckBox.checked
-                        icon.source: iconCheckBox.checked ? Constants.iconSource : ""
+                            Button {
+                                text: modelData
+                                flat: flatCheckBox.checked
+                                icon.source: iconCheckBox.checked ? "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png" : ""
 
-                        Material.background: roundedScaleRepeater.backgroundColor
-                        Material.foreground: roundedScaleRepeater.foregroundColor
-                        Material.elevation: modelData
-                        Material.roundedScale: scaleLayout.roundedScale
+                                Material.background: roundedScaleLayout.backgroundColor
+                                Material.foreground: roundedScaleLayout.foregroundColor
+                                Material.elevation: modelData
+                                Material.roundedScale: scaleLayout.roundedScale
+                            }
+                        }
                     }
                 }
             }
@@ -87,11 +110,12 @@ Page {
         RowLayout {
             spacing: Constants.spacing
 
-            RoundedScaleRepeater {
+            RoundedScaleLayout {
                 contentLeftMargin: Constants.spacing
+                allowFlat: true
             }
 
-            RoundedScaleRepeater {
+            RoundedScaleLayout {
                 backgroundColor: Material.Teal
                 foregroundColor: "white"
                 contentRightMargin: Constants.spacing
diff --git a/tests/manual/quickcontrols2/testbench/testbench.qml b/tests/manual/quickcontrols2/testbench/testbench.qml
index c9185e35d0..c88e16425a 100644
--- a/tests/manual/quickcontrols2/testbench/testbench.qml
+++ b/tests/manual/quickcontrols2/testbench/testbench.qml
@@ -430,8 +430,8 @@ Ui.ApplicationWindow {
                             Label {
                                 text: statesAsString.length > 0 ? statesAsString : "normal"
 
-                                // 4 is the most states for any element (Button)
-                                Layout.preferredHeight: (fontMetrics.lineSpacing) * (rootDelegate.maxStateCombinations + 1)
+                                // Ensure that each row of the Flow has the same height for the labels.
+                                Layout.preferredHeight: fontMetrics.lineSpacing * rootDelegate.maxStateCombinations
                             }
 
                             ControlContainer {