Re-introduce SpinBox

It came up in discussions at the QtWS that even if we have Tumbler,
people still want and expect to have the good old SpinBox control.
SpinBox has it pros, such as that it might work better inside a
vertical Flickable, and that in multi-field forms it might visually
align better with other controls like TextFields.

An early mockup of SpinBox was removed in 1c0edf0. A quote from the
commit message:

    SpinBox is a desktop centric control. It won't be provided in
    Qt Quick Controls 2.0, but maybe later when desktop support is
    re-considered. Qt Quick Controls 2.0 will focus on embedded and
    mobile. SpinBox is still available in 1.x.

While it is true that SpinBox might not be optimal for touch or
mobile, the real reason for the removal was that validating decimal
number input is very complicated. Even though locales have well-
defined thousand separators and decimal points, users have very
different expectations on how strict or relaxed the input
validation should be.

This change re-introduces a touch-optimized integer-based SpinBox.
What makes it more touch friendly than the earlier version is that
it has now auto-repeating buttons. Limiting it to integers avoids
the decimal number input validation problem. We can introduce a
separate DoubleSpinBox later if necessary - just like in QtWidgets.

Change-Id: I2819060eb5d1ae6a8c00b0f12be703456085079d
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>

7 files changed, 32 insertions, 1 deletions

diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox-background.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox-background.png
new file mode 100644
index 00000000..0224e6f1
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox-background.png
diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox-contentItem.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox-contentItem.png
new file mode 100644
index 00000000..0e39d92f
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox-contentItem.png
diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox-down.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox-down.png
new file mode 100644
index 00000000..a6bbecdf
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox-down.png
diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox-up.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox-up.png
new file mode 100644
index 00000000..3c6c870b
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox-up.png
diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox.png
new file mode 100644
index 00000000..39fa813a
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox.png
diff --git a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc
index 474caba9..c4124191 100644
--- a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc
@@ -305,6 +305,37 @@
             \snippet Slider.qml handle
 
 
+    \section1 Customizing SpinBox
+
+        SpinBox consists of four visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{contentItem}, \l {SpinBox::up.indicator}{up indicator},
+        and \l {SpinBox::down.indicator}{down indicator}.
+
+        \section3 Background
+
+            \image qtlabscontrols-spinbox-background.png
+
+            \snippet SpinBox.qml background
+
+        \section3 Content item
+
+            \image qtlabscontrols-spinbox-contentItem.png
+
+            \snippet SpinBox.qml contentItem
+
+        \section3 Down indicator
+
+            \image qtlabscontrols-spinbox-down.png
+
+            \snippet Spinbox.qml down.indicator
+
+        \section3 Up indicator
+
+            \image qtlabscontrols-spinbox-up.png
+
+            \snippet Spinbox.qml up.indicator
+
+
     \section1 Customizing StackView
 
         StackView can have a visual \l {Control::background}{background}
diff --git a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc
index 557bc73a..c105ede9 100644
--- a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc
@@ -250,7 +250,7 @@
         \li \l [QtLabsControls] {Slider}
     \row
         \li \l [QtQuickControls] {SpinBox}
-        \li No equivalent; see \l [QtLabsControls] {Tumbler} instead.
+        \li \l [QtLabsControls] {SpinBox}
     \row
         \li \l [QtQuickControls] {Stack},
             \l [QtQuickControls] {StackView},