Plasma QML components: fix internal anchoring in Button and ToolButton

There is a bug in the tool button and button components resulting in
layout breakage if one clears and sets the text property of the
component when not visible, see the attached screenshot.

I have tried to solve the issue without changing the existing
anchoring system, but without success. The only working solution
was to put the icon and the label item into Row item. That way I was
able to fix the bug and even get rid of the ugly explicit
non-declarative anchor assignments.

I have also removed the preferredWidth property of the label item,
that one always evaluated to paintedWidth, anyway.

REVIEW: 107813

declarativeimports/plasmacomponents/qml/Button.qml

@@ -94,7 +94,7 @@ Item {
     /**
      * Smallest width this button can be to show all the contents
      */
-    property real minimumWidth: icon.width + label.preferredWidth + surfaceNormal.margins.left + surfaceNormal.margins.right + ((icon.valid) ? surfaceNormal.margins.left : 0)
+    property real minimumWidth: icon.width + label.paintedWidth + surfaceNormal.margins.left + surfaceNormal.margins.right + ((icon.valid) ? surfaceNormal.margins.left : 0)
 
     /**
      * Smallest height this button can be to show all the contents
@@ -191,9 +191,10 @@ Item {
         opacity: 0
     }
 
-    Item {
+    Row {
         id: buttonContent
         state: (internal.userPressed || checked) ? "pressed" : "normal"
+        spacing: icon.valid ? surfaceNormal.margins.left : 0
 
         states: [
             State { name: "normal" },
@@ -229,35 +230,17 @@ Item {
 
         PlasmaCore.IconItem {
             id: icon
-
+            anchors.verticalCenter: parent.verticalCenter
-            anchors {
+            width: valid? parent.height: 0
-                verticalCenter: parent.verticalCenter
+            height: width
-                left: label.text.length > 0 ? parent.left : undefined
-                horizontalCenter: label.text.length > 0 ? undefined : parent.horizontalCenter
-            }
             active: shadow.hasOverState && mouse.containsMouse
-            height: parent.height
-            width: parent.height
         }
 
         Text {
             id: label
 
-            //FIXME: why this is needed?
+            width: parent.width - icon.width - parent.spacing
-            onTextChanged: {
+            height: parent.height
-                icon.anchors.horizontalCenter = label.text.length > 0 ? undefined : icon.parent.horizontalCenter
-                icon.anchors.left = label.text.length > 0 ? icon.parent.left : undefined
-            }
-
-            property int preferredWidth: button.width < button.implicitWidth ? paintedWidth: paintedWidth
-
-            anchors {
-                top: parent.top
-                bottom: parent.bottom
-                right: parent.right
-                left: icon.valid ? icon.right : parent.left
-                leftMargin: icon.valid ? parent.anchors.leftMargin : 0
-            }
 
             font.capitalization: theme.defaultFont.capitalization
             font.family: theme.defaultFont.family

declarativeimports/plasmacomponents/qml/ToolButton.qml

@@ -94,7 +94,7 @@ Item {
     //icon + label + left margin + right margin + spacing between icon and text
     //here it assumesleft margin = right top = bottom, why?
     // because the right and bottom margins can be disabled, so they would return 0, but their actual size is still needed for size hints
-    property real minimumWidth: theme.smallIconSize + label.preferredWidth + delegate.margins.left + delegate.margins.left + ((icon.valid) ? delegate.margins.left : 0)
+    property real minimumWidth: theme.smallIconSize + label.paintedWidth + delegate.margins.left + delegate.margins.left + ((icon.valid) ? delegate.margins.left : 0)
     property real minimumHeight: Math.max(theme.smallIconSize, label.paintedHeight) + delegate.margins.top + delegate.margins.top
 
     implicitWidth: {
@@ -342,7 +342,7 @@ Item {
         }
     }
 
-    Item {
+    Row {
         anchors {
             fill: parent
             leftMargin: delegate.margins.left
@@ -351,37 +351,22 @@ Item {
             bottomMargin: delegate.margins.bottom
         }
 
+        spacing: icon.valid ? delegate.margins.left : 0
+
         PlasmaCore.IconItem {
             id: icon
-
+            anchors.verticalCenter: parent.verticalCenter
-            anchors {
+            width: valid ? parent.height: 0
-                verticalCenter: parent.verticalCenter
+            height: width
-                left: label.text ? parent.left : undefined
-                horizontalCenter: label.text ? undefined : parent.horizontalCenter
-            }
-            height: parent.height
-            width:  parent.height
             active: delegate.item.hasOverState && mouse.containsMouse
         }
 
         Text {
             id: label
 
-            //FIXME: why this is needed?
+            width: parent.width - icon.width - parent.spacing
-            onPaintedWidthChanged: {
+            height: parent.height
-                icon.anchors.horizontalCenter = label.paintedWidth > 0 ? undefined : icon.parent.horizontalCenter
-                icon.anchors.left = label.paintedWidth > 0 ? icon.parent.left : undefined
-            }
 
-            property int preferredWidth: button.width < button.implicitWidth ? paintedWidth: paintedWidth
-
-            anchors {
-                top: parent.top
-                bottom: parent.bottom
-                left: icon.valid ? icon.right : parent.left
-                leftMargin: icon.valid ? delegate.margins.left : 0
-                right: parent.right
-            }
             font.capitalization: theme.defaultFont.capitalization
             font.family: theme.defaultFont.family
             font.italic: theme.defaultFont.italic