SearchField: Adjust indicator background height to match control height

When larger fonts are used, the SearchField indicator backgrounds become
visually smaller than the control. Update their background height so
it follows the control height.

Keep the icon sizes unchanged, since scaling them with the font would
make them look blurry at larger sizes.

Fixes: QTBUG-143298
Change-Id: I6d185401ffde53ed46fbb21bfc31e98da9f82d10
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit 04e3bc7a0d27646e14994b87c2bce44cb58d1feb)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
(cherry picked from commit ea70a0501a1620ec37f9481a28e660169d89a6fb)

5 files changed, 96 insertions, 21 deletions

diff --git a/src/quickcontrols/basic/SearchField.qml b/src/quickcontrols/basic/SearchField.qml
index 11294e44cf..377a5a42ab 100644
--- a/src/quickcontrols/basic/SearchField.qml
+++ b/src/quickcontrols/basic/SearchField.qml
@@ -37,9 +37,10 @@ T.SearchField {
     searchIndicator.indicator: Rectangle {
         implicitWidth: 28
         implicitHeight: 28
+        height: control.height - (background.border.width * 2)
 
         x: !control.mirrored ? 3 : control.width - width - 3
-        y: control.topPadding + (control.availableHeight - height) / 2
+        y: background.border.width
         color: control.palette.button
 
         ColorImage {
@@ -55,9 +56,10 @@ T.SearchField {
     clearIndicator.indicator: Rectangle {
         implicitWidth: 28
         implicitHeight: 28
+        height: control.height - (background.border.width * 2)
 
         x: control.mirrored ? 3 : control.width - width - 3
-        y: control.topPadding + (control.availableHeight - height) / 2
+        y: background.border.width
         visible: control.text.length > 0
         color: control.palette.button
 
diff --git a/src/quickcontrols/fluentwinui3/SearchField.qml b/src/quickcontrols/fluentwinui3/SearchField.qml
index 716ae9d499..7d59f36636 100644
--- a/src/quickcontrols/fluentwinui3/SearchField.qml
+++ b/src/quickcontrols/fluentwinui3/SearchField.qml
@@ -72,10 +72,11 @@ T.SearchField {
         imageConfig: indicatorConfig.indicator_up_background
 
         x: !control.mirrored ? control.width - width - control.spacing : control.spacing
-        y: control.topPadding + (control.availableHeight - height) / 2
+        y: control.topPadding
 
         implicitWidth: 32
         implicitHeight: 24
+        height: control.availableHeight
 
         ColorImage {
             x: (parent.width - width) / 2
@@ -103,9 +104,12 @@ T.SearchField {
         x: (!searchIndicator.indicator || !searchIndicator.indicator.visible)
            ? (!control.mirrored ? control.width - width - control.spacing : control.spacing)
            : (!control.mirrored ? control.width - width - (control.spacing * 2) - searchIndicator.indicator.width : searchIndicator.indicator.width + (control.spacing * 2))
-        y: control.topPadding + (control.availableHeight - height) / 2
+        y: control.topPadding
+
         implicitWidth: 32
         implicitHeight: 24
+        height: control.availableHeight
+
         visible: control.text.length > 0
 
         ColorImage {
diff --git a/src/quickcontrols/fusion/SearchField.qml b/src/quickcontrols/fusion/SearchField.qml
index c503220eb5..1644c86060 100644
--- a/src/quickcontrols/fusion/SearchField.qml
+++ b/src/quickcontrols/fusion/SearchField.qml
@@ -10,7 +10,6 @@ import QtQuick.Controls.impl
 import QtQuick.Controls.Fusion
 import QtQuick.Controls.Fusion.impl
 
-
 T.SearchField {
     id: control
 
@@ -38,13 +37,20 @@ T.SearchField {
         required property int index
     }
 
-    searchIndicator.indicator: Rectangle {
-        implicitWidth: 20
+    searchIndicator.indicator: PaddedRectangle {
+        implicitWidth: 22
         implicitHeight: 20
+        height: control.height - 2
 
-        x: !control.mirrored ? 2 : control.width - width - 2
-        y: control.topPadding + (control.availableHeight - height) / 2
-        color: control.palette.base
+        x: !control.mirrored ? 1 : control.width - width - 1
+        y: 1
+
+        radius: 1.7
+        clip: true
+        topPadding: -2
+        leftPadding: -2
+
+        color: control.searchIndicator.pressed ? Fusion.buttonColor(control.palette, false, true, true) : "transparent"
 
         ColorImage {
             x: (parent.width - width) / 2
@@ -57,14 +63,21 @@ T.SearchField {
         }
     }
 
-    clearIndicator.indicator: Rectangle {
-        implicitWidth: 20
+    clearIndicator.indicator: PaddedRectangle {
+        implicitWidth: 22
         implicitHeight: 20
+        height: control.height - 2
 
-        x: control.mirrored ? 2 : control.width - width - 2
-        y: control.topPadding + (control.availableHeight - height) / 2
+        x: control.mirrored ? 1 : control.width - width - 1
+        y: 1
         visible: control.text.length > 0
-        color: control.palette.base
+
+        radius: 1.7
+        clip: true
+        topPadding: -2
+        leftPadding: -2
+
+        color: control.clearIndicator.pressed ? Fusion.buttonColor(control.palette, false, true, true) : "transparent"
 
         ColorImage {
             x: (parent.width - width) / 2
@@ -116,6 +129,60 @@ T.SearchField {
             height: 1
             color: Fusion.topShadow
         }
+
+        Rectangle {
+            x: !control.mirrored ? 1 : parent.width - width - 1
+            y: 1
+            width: control.searchIndicator.indicator && control.searchIndicator.indicator.visible
+                   ? control.searchIndicator.indicator.width + 1  : 0
+            height: parent.height - 2
+            radius: 2
+
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: Fusion.gradientStart(Fusion.buttonColor(control.palette, control.visualFocus, false, control.searchIndicator.hovered))
+                }
+                GradientStop {
+                    position: 1
+                    color: Fusion.gradientStop(Fusion.buttonColor(control.palette, control.visualFocus, false, control.searchIndicator.hovered))
+                }
+            }
+
+            Rectangle {
+                x: !control.mirrored ? parent.width - 1 : 0
+                width: 1
+                height: parent.height
+                color: Fusion.outline(control.palette)
+            }
+        }
+
+        Rectangle {
+            x: control.mirrored ? 1 : parent.width - width - 1
+            y: 1
+            width: control.clearIndicator.indicator && control.clearIndicator.indicator.visible
+                   ? control.clearIndicator.indicator.width + 1  : 0
+            height: parent.height - 2
+            radius: 2
+
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: Fusion.gradientStart(Fusion.buttonColor(control.palette, control.visualFocus, false, control.clearIndicator.hovered))
+                }
+                GradientStop {
+                    position: 1
+                    color: Fusion.gradientStop(Fusion.buttonColor(control.palette, control.visualFocus, false, control.clearIndicator.hovered))
+                }
+            }
+
+            Rectangle {
+                x: control.mirrored ? parent.width - 1 : 0
+                width: 1
+                height: parent.height
+                color: Fusion.outline(control.palette)
+            }
+        }
     }
 
     popup: T.Popup {
diff --git a/src/quickcontrols/material/SearchField.qml b/src/quickcontrols/material/SearchField.qml
index 85610c7fca..03bcdb8180 100644
--- a/src/quickcontrols/material/SearchField.qml
+++ b/src/quickcontrols/material/SearchField.qml
@@ -39,8 +39,8 @@ T.SearchField {
 
     searchIndicator.indicator: Item {
         x: !control.mirrored ? 10 : control.width - width - 10
-        y: control.topPadding + (control.availableHeight - height) / 2
-        height: control.height
+        y: control.topPadding
+        height: control.availableHeight
         width: height / 2
 
         ColorImage {
@@ -54,8 +54,8 @@ T.SearchField {
 
     clearIndicator.indicator: Item {
         x: control.mirrored ? 10 : control.width - width - 10
-        y: control.topPadding + (control.availableHeight - height) / 2
-        height: control.height
+        y: control.topPadding
+        height: control.availableHeight
         width: height / 2
         visible: control.text.length > 0
 
diff --git a/src/quickcontrols/universal/SearchField.qml b/src/quickcontrols/universal/SearchField.qml
index f36c6b98cf..6362ead2d4 100644
--- a/src/quickcontrols/universal/SearchField.qml
+++ b/src/quickcontrols/universal/SearchField.qml
@@ -43,9 +43,10 @@ T.SearchField {
 
     searchIndicator.indicator: Item {
         x: !control.mirrored ? control.padding : control.width - width - control.padding
-        y: control.topPadding + (control.availableHeight - height) / 2
+        y: control.topPadding
         implicitWidth: 28
         implicitHeight: 28
+        height: control.availableHeight
 
         Rectangle {
             width: parent.width
@@ -70,9 +71,10 @@ T.SearchField {
 
     clearIndicator.indicator: Item {
         x: control.mirrored ? control.padding : control.width - width - control.padding
-        y: control.topPadding + (control.availableHeight - height) / 2
+        y: control.topPadding
         implicitWidth: 28
         implicitHeight: 28
+        height: control.availableHeight
         visible: control.text.length > 0
 
         Rectangle {