SpinBox: use control instead of parent in indicators

This avoids errors when users give an id to a customized indicator.

Fixes: QTBUG-97782
Pick-to: 6.2
Change-Id: I3af8139abf992152f27826dd34d499608c6558b9
Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

src/quickcontrols2/basic/SpinBox.qml

@@ -88,8 +88,8 @@ T.SpinBox {
     }
 
     up.indicator: Rectangle {
-        x: control.mirrored ? 0 : parent.width - width
+        x: control.mirrored ? 0 : control.width - width
-        height: parent.height
+        height: control.height
         implicitWidth: 40
         implicitHeight: 40
         color: control.up.pressed ? control.palette.mid : control.palette.button
@@ -112,7 +112,7 @@ T.SpinBox {
 
     down.indicator: Rectangle {
         x: control.mirrored ? parent.width - width : 0
-        height: parent.height
+        height: control.height
         implicitWidth: 40
         implicitHeight: 40
         color: control.down.pressed ? control.palette.mid : control.palette.button

src/quickcontrols2/fusion/SpinBox.qml

@@ -79,9 +79,9 @@ T.SpinBox {
     }
 
     up.indicator: PaddedRectangle {
-        x: control.mirrored ? 1 : parent.width - width - 1
+        x: control.mirrored ? 1 : control.width - width - 1
         y: 1
-        height: parent.height / 2 - 1
+        height: control.height / 2 - 1
         implicitWidth: 16
         implicitHeight: 10
 
@@ -103,9 +103,9 @@ T.SpinBox {
     }
 
     down.indicator: PaddedRectangle {
-        x: control.mirrored ? 1 : parent.width - width - 1
+        x: control.mirrored ? 1 : control.width - width - 1
-        y: parent.height - height - 1
+        y: control.height - height - 1
-        height: parent.height / 2 - 1
+        height: control.height / 2 - 1
         implicitWidth: 16
         implicitHeight: 10
 

src/quickcontrols2/imagine/SpinBox.qml

@@ -102,8 +102,8 @@ T.SpinBox {
     }
 
     up.indicator: NinePatchImage {
-        x: control.mirrored ? 0 : parent.width - width
+        x: control.mirrored ? 0 : control.width - width
-        height: parent.height
+        height: control.height
 
         source: Imagine.url + "spinbox-indicator"
         NinePatchImageSelector on source {
@@ -120,8 +120,8 @@ T.SpinBox {
     }
 
     down.indicator: NinePatchImage {
-        x: control.mirrored ? parent.width - width : 0
+        x: control.mirrored ? control.width - width : 0
-        height: parent.height
+        height: control.height
 
         source: Imagine.url + "spinbox-indicator"
         NinePatchImageSelector on source {

src/quickcontrols2/material/SpinBox.qml

@@ -81,10 +81,10 @@ T.SpinBox {
     }
 
     up.indicator: Item {
-        x: control.mirrored ? 0 : parent.width - width
+        x: control.mirrored ? 0 : control.width - width
         implicitWidth: control.Material.touchTarget
         implicitHeight: control.Material.touchTarget
-        height: parent.height
+        height: control.height
         width: height
 
         Ripple {
@@ -115,10 +115,10 @@ T.SpinBox {
     }
 
     down.indicator: Item {
-        x: control.mirrored ? parent.width - width : 0
+        x: control.mirrored ? control.width - width : 0
         implicitWidth: control.Material.touchTarget
         implicitHeight: control.Material.touchTarget
-        height: parent.height
+        height: control.height
         width: height
 
         Ripple {

src/quickcontrols2/universal/SpinBox.qml

@@ -84,9 +84,9 @@ T.SpinBox {
 
     up.indicator: Item {
         implicitWidth: 28
-        height: parent.height + 4
+        height: control.height + 4
         y: -2
-        x: control.mirrored ? 0 : parent.width - width
+        x: control.mirrored ? 0 : control.width - width
 
         Rectangle {
             x: 2; y: 4
@@ -110,9 +110,9 @@ T.SpinBox {
 
     down.indicator: Item {
         implicitWidth: 28
-        height: parent.height + 4
+        height: control.height + 4
         y: -2
-        x: control.mirrored ? parent.width - width : 0
+        x: control.mirrored ? control.width - width : 0
 
         Rectangle {
             x: 2; y: 4

tests/auto/quickcontrols2/controls/data/tst_spinbox.qml

@@ -688,6 +688,31 @@ TestCase {
         compare(control.up.indicator.s, "this is the one");
     }
 
+    Component {
+        id: overriddenSpinBoxWithIds
+        SpinBox {
+            value: 50
+            up.indicator: Rectangle {
+                id: uhOh1
+                property string s: "up"
+            }
+            down.indicator: Rectangle {
+                id: uhOh2
+                property string s: "down"
+            }
+        }
+    }
+
+    function test_indicatorOverriddenWithIds() {
+        var control = createTemporaryObject(overriddenSpinBoxWithIds, testCase)
+        verify(control)
+        // TODO: Use failOnWarning() here when it has been implemented
+        // Specifying an id will result in both the default indicator implementations
+        // and the custom ones being created, but it shouldn't result in any TypeErrors.
+        compare(control.up.indicator.s, "up");
+        compare(control.down.indicator.s, "down");
+    }
+
     function test_valueEnterFromOutsideRange() {
         // Check that changing from 2 to 99 goes to 98 then changing to 99 puts it back to 98
         var control = createTemporaryObject(spinBox, testCase, {from: 2, to: 98, value: 2, editable: true})