StyleKit: Respect background margins as set from the style

As it was, the background margins set to the control were not having
an effect. The background margins set from the StyleKit style, should
effectively behave like the control's insets, ie: defining the area
outside the background. Negative margins make the background larger
than the control. So we set the default controls insets to the value
of the background margins.

Change-Id: Iffe6b1a4673c1bf3b53462d6a5e270ff27ea9bc7
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>
(cherry picked from commit c7590e88b005bf9705feacbbc235fb12a33518bf)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
(cherry picked from commit f59892825a26d83669fd63b11cacc31ecf9c9e47)

27 files changed, 147 insertions, 8 deletions

diff --git a/src/labs/stylekit/Button.qml b/src/labs/stylekit/Button.qml
index c30fda1808..938514d6f0 100644
--- a/src/labs/stylekit/Button.qml
+++ b/src/labs/stylekit/Button.qml
@@ -20,6 +20,12 @@ T.Button {
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     icon.width: 24
diff --git a/src/labs/stylekit/CheckBox.qml b/src/labs/stylekit/CheckBox.qml
index 374c98dc0b..849184a6cd 100644
--- a/src/labs/stylekit/CheckBox.qml
+++ b/src/labs/stylekit/CheckBox.qml
@@ -22,6 +22,11 @@ T.CheckBox {
     rightPadding: checkBoxLayout.padding.right
     bottomPadding: checkBoxLayout.padding.bottom
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     font: styleReader.font
diff --git a/src/labs/stylekit/ComboBox.qml b/src/labs/stylekit/ComboBox.qml
index fa1054bc1b..c890f491cd 100644
--- a/src/labs/stylekit/ComboBox.qml
+++ b/src/labs/stylekit/ComboBox.qml
@@ -22,6 +22,11 @@ T.ComboBox {
     topPadding: comboLayout.padding.top
     bottomPadding: comboLayout.padding.bottom
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     font: styleReader.font
diff --git a/src/labs/stylekit/Frame.qml b/src/labs/stylekit/Frame.qml
index ae2af21783..c25b00e80f 100644
--- a/src/labs/stylekit/Frame.qml
+++ b/src/labs/stylekit/Frame.qml
@@ -20,6 +20,11 @@ T.Frame {
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     font: styleReader.font
 
     StyleVariation.controlType: styleReader.controlType
diff --git a/src/labs/stylekit/GroupBox.qml b/src/labs/stylekit/GroupBox.qml
index 342fe923f1..acbfb5d958 100644
--- a/src/labs/stylekit/GroupBox.qml
+++ b/src/labs/stylekit/GroupBox.qml
@@ -23,10 +23,10 @@ T.GroupBox {
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
 
+    leftInset: styleReader.background.leftMargin
     topInset: styleReader.background.topMargin
-    bottomInset: styleReader.background.bottomMargin
     rightInset: styleReader.background.rightMargin
-    leftInset: styleReader.background.leftMargin
+    bottomInset: styleReader.background.bottomMargin
 
     font: styleReader.font
 
@@ -41,6 +41,7 @@ T.GroupBox {
     }
 
     label: Text {
+        x: control.leftPadding
         padding: styleReader.text.padding
         leftPadding: styleReader.text.leftPadding
         rightPadding: styleReader.text.rightPadding
diff --git a/src/labs/stylekit/ItemDelegate.qml b/src/labs/stylekit/ItemDelegate.qml
index e3af8c8f51..c46500f88c 100644
--- a/src/labs/stylekit/ItemDelegate.qml
+++ b/src/labs/stylekit/ItemDelegate.qml
@@ -21,6 +21,12 @@ T.ItemDelegate {
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     icon.width: 16
diff --git a/src/labs/stylekit/Label.qml b/src/labs/stylekit/Label.qml
index f6d82ad77b..b8c351dc02 100644
--- a/src/labs/stylekit/Label.qml
+++ b/src/labs/stylekit/Label.qml
@@ -15,6 +15,11 @@ T.Label {
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     font: styleReader.font
 
     color: styleReader.text.color
diff --git a/src/labs/stylekit/Page.qml b/src/labs/stylekit/Page.qml
index d2980d28b5..4ddcc96909 100644
--- a/src/labs/stylekit/Page.qml
+++ b/src/labs/stylekit/Page.qml
@@ -24,6 +24,11 @@ T.Page {
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     font: styleReader.font
 
     StyleVariation.controlType: styleReader.controlType
diff --git a/src/labs/stylekit/Pane.qml b/src/labs/stylekit/Pane.qml
index 8d6d61377f..ea49ecf6f5 100644
--- a/src/labs/stylekit/Pane.qml
+++ b/src/labs/stylekit/Pane.qml
@@ -21,6 +21,11 @@ T.Pane {
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     font: styleReader.font
 
     StyleVariation.controlType: styleReader.controlType
diff --git a/src/labs/stylekit/Popup.qml b/src/labs/stylekit/Popup.qml
index b56e8ffdaf..db7f60c56a 100644
--- a/src/labs/stylekit/Popup.qml
+++ b/src/labs/stylekit/Popup.qml
@@ -31,6 +31,12 @@ T.Popup {
     topPadding: __styleReader.topPadding
     rightPadding: __styleReader.rightPadding
     bottomPadding: __styleReader.bottomPadding
+
+    leftInset: __styleReader.background.leftMargin
+    topInset: __styleReader.background.topMargin
+    rightInset: __styleReader.background.rightMargin
+    bottomInset: __styleReader.background.bottomMargin
+
     font: __styleReader.font
 
     background: BackgroundDelegate {
diff --git a/src/labs/stylekit/ProgressBar.qml b/src/labs/stylekit/ProgressBar.qml
index 041991af42..0d5437919f 100644
--- a/src/labs/stylekit/ProgressBar.qml
+++ b/src/labs/stylekit/ProgressBar.qml
@@ -19,6 +19,12 @@ T.ProgressBar {
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     StyleVariation.controlType: styleReader.controlType
diff --git a/src/labs/stylekit/RadioButton.qml b/src/labs/stylekit/RadioButton.qml
index b5ffc99d2f..af773a7162 100644
--- a/src/labs/stylekit/RadioButton.qml
+++ b/src/labs/stylekit/RadioButton.qml
@@ -22,6 +22,11 @@ T.RadioButton {
     rightPadding: radioButtonLayout.padding.right
     bottomPadding: radioButtonLayout.padding.bottom
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     font: styleReader.font
diff --git a/src/labs/stylekit/RangeSlider.qml b/src/labs/stylekit/RangeSlider.qml
index 96edd98e7b..71dea15043 100644
--- a/src/labs/stylekit/RangeSlider.qml
+++ b/src/labs/stylekit/RangeSlider.qml
@@ -23,6 +23,12 @@ T.RangeSlider {
     topPadding: styleReaderFirst.topPadding
     rightPadding: styleReaderFirst.rightPadding
     bottomPadding: styleReaderFirst.bottomPadding
+
+    leftInset: styleReaderFirst.background.leftMargin
+    topInset: styleReaderFirst.background.topMargin
+    rightInset: styleReaderFirst.background.rightMargin
+    bottomInset: styleReaderFirst.background.bottomMargin
+
     spacing: styleReaderFirst.spacing
 
     states: [
diff --git a/src/labs/stylekit/ScrollBar.qml b/src/labs/stylekit/ScrollBar.qml
index ce7f8bb3b5..2bc581bee5 100644
--- a/src/labs/stylekit/ScrollBar.qml
+++ b/src/labs/stylekit/ScrollBar.qml
@@ -19,6 +19,12 @@ T.ScrollBar {
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     StyleVariation.controlType: styleReader.controlType
diff --git a/src/labs/stylekit/ScrollIndicator.qml b/src/labs/stylekit/ScrollIndicator.qml
index 4bac336fa8..104ed2343d 100644
--- a/src/labs/stylekit/ScrollIndicator.qml
+++ b/src/labs/stylekit/ScrollIndicator.qml
@@ -19,6 +19,12 @@ T.ScrollIndicator {
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     StyleVariation.controlType: styleReader.controlType
diff --git a/src/labs/stylekit/ScrollView.qml b/src/labs/stylekit/ScrollView.qml
index e1b0c4db3e..5ed07a66d3 100644
--- a/src/labs/stylekit/ScrollView.qml
+++ b/src/labs/stylekit/ScrollView.qml
@@ -24,6 +24,11 @@ T.ScrollView {
     topPadding: __styleReader.topPadding
     leftPadding: __styleReader.leftPadding
 
+    rightInset: __styleReader.background.rightMargin
+    leftInset: __styleReader.background.leftMargin
+    topInset: __styleReader.background.topMargin
+    bottomInset: __styleReader.background.bottomMargin
+
     StyleVariation.controlType: __styleReader.controlType
     property StyleReader __styleReader: StyleReader {
         controlType: StyleReader.ScrollView
diff --git a/src/labs/stylekit/Slider.qml b/src/labs/stylekit/Slider.qml
index 9807d6cdba..5cced3bee1 100644
--- a/src/labs/stylekit/Slider.qml
+++ b/src/labs/stylekit/Slider.qml
@@ -22,6 +22,12 @@ T.Slider {
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     states: [
diff --git a/src/labs/stylekit/SpinBox.qml b/src/labs/stylekit/SpinBox.qml
index d501f18cfb..43c09ba988 100644
--- a/src/labs/stylekit/SpinBox.qml
+++ b/src/labs/stylekit/SpinBox.qml
@@ -20,6 +20,12 @@ T.SpinBox {
     topPadding: spinBoxLayout.padding.top
     rightPadding: spinBoxLayout.padding.right
     bottomPadding: spinBoxLayout.padding.bottom
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     font: styleReader.font
diff --git a/src/labs/stylekit/Switch.qml b/src/labs/stylekit/Switch.qml
index 4451450e37..8d5cf29e4b 100644
--- a/src/labs/stylekit/Switch.qml
+++ b/src/labs/stylekit/Switch.qml
@@ -20,6 +20,12 @@ T.Switch {
     topPadding: switchLayout.padding.top
     rightPadding: switchLayout.padding.right
     bottomPadding: switchLayout.padding.bottom
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     font: styleReader.font
diff --git a/src/labs/stylekit/TabBar.qml b/src/labs/stylekit/TabBar.qml
index 83e6e0892d..cda4214aec 100644
--- a/src/labs/stylekit/TabBar.qml
+++ b/src/labs/stylekit/TabBar.qml
@@ -20,6 +20,12 @@ T.TabBar {
     rightPadding: styleReader.rightPadding
     topPadding: styleReader.topPadding
     bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     font: styleReader.font
diff --git a/src/labs/stylekit/TabButton.qml b/src/labs/stylekit/TabButton.qml
index c2e24833dd..a330990997 100644
--- a/src/labs/stylekit/TabButton.qml
+++ b/src/labs/stylekit/TabButton.qml
@@ -20,6 +20,12 @@ T.TabButton {
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     icon.width: 24
diff --git a/src/labs/stylekit/TextArea.qml b/src/labs/stylekit/TextArea.qml
index 0b2d10f4d4..0fd03dc351 100644
--- a/src/labs/stylekit/TextArea.qml
+++ b/src/labs/stylekit/TextArea.qml
@@ -18,12 +18,16 @@ T.TextArea {
                              contentHeight + topPadding + bottomPadding,
                              placeHolder.implicitHeight + topPadding + bottomPadding)
 
-    padding: styleReader.padding
     leftPadding: styleReader.leftPadding
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     font: styleReader.font
 
     color: styleReader.text.color
diff --git a/src/labs/stylekit/TextField.qml b/src/labs/stylekit/TextField.qml
index f7c14e9e72..a486295f04 100644
--- a/src/labs/stylekit/TextField.qml
+++ b/src/labs/stylekit/TextField.qml
@@ -11,17 +11,22 @@ import Qt.labs.StyleKit.impl
 T.TextField {
     id: control
 
-    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                   Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding)
+    implicitWidth: implicitBackgroundWidth + leftInset + rightInset
+                   || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-                    contentHeight + topPadding + bottomPadding,
-                    placeholder.implicitHeight + topPadding + bottomPadding)
+                             contentHeight + topPadding + bottomPadding,
+                             placeholder.implicitHeight + topPadding + bottomPadding)
 
     leftPadding: styleReader.leftPadding
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     font: styleReader.font
 
     color: styleReader.text.color
diff --git a/src/labs/stylekit/ToolBar.qml b/src/labs/stylekit/ToolBar.qml
index 7b7ac018f6..3ccefdb958 100644
--- a/src/labs/stylekit/ToolBar.qml
+++ b/src/labs/stylekit/ToolBar.qml
@@ -20,6 +20,12 @@ T.ToolBar {
     rightPadding: SafeArea.margins.right + styleReader.rightPadding
     topPadding: SafeArea.margins.top + styleReader.topPadding
     bottomPadding: SafeArea.margins.bottom + styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     font: styleReader.font
diff --git a/src/labs/stylekit/ToolButton.qml b/src/labs/stylekit/ToolButton.qml
index d973e88e9c..9fafdbd0f2 100644
--- a/src/labs/stylekit/ToolButton.qml
+++ b/src/labs/stylekit/ToolButton.qml
@@ -20,6 +20,12 @@ T.ToolButton {
     topPadding: styleReader.topPadding
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
+
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     spacing: styleReader.spacing
 
     icon.width: 24
diff --git a/src/labs/stylekit/ToolSeparator.qml b/src/labs/stylekit/ToolSeparator.qml
index 25e862d96b..13a1c5bd18 100644
--- a/src/labs/stylekit/ToolSeparator.qml
+++ b/src/labs/stylekit/ToolSeparator.qml
@@ -21,6 +21,11 @@ T.ToolSeparator {
     rightPadding: styleReader.rightPadding
     bottomPadding: styleReader.bottomPadding
 
+    leftInset: styleReader.background.leftMargin
+    topInset: styleReader.background.topMargin
+    rightInset: styleReader.background.rightMargin
+    bottomInset: styleReader.background.bottomMargin
+
     font: styleReader.font
 
     StyleVariation.controlType: styleReader.controlType
diff --git a/src/labs/stylekit/impl/BackgroundAndIndicatorDelegate.qml b/src/labs/stylekit/impl/BackgroundAndIndicatorDelegate.qml
index 51a6056c0c..eb4e4e318d 100644
--- a/src/labs/stylekit/impl/BackgroundAndIndicatorDelegate.qml
+++ b/src/labs/stylekit/impl/BackgroundAndIndicatorDelegate.qml
@@ -41,8 +41,8 @@ Item {
         }
         contentMargins {
             left: quickControl.leftPadding - quickControl.leftInset
-            right: quickControl.rightPadding - quickControl.rightInset
             top: quickControl.topPadding - quickControl.topInset
+            right: quickControl.rightPadding - quickControl.rightInset
             bottom: quickControl.bottomPadding - quickControl.bottomInset
         }
         layoutItems: [