chore(Storybook): Added page clarifying popup sizing issues

storybook/PagesModel.qml

@@ -293,4 +293,8 @@ ListModel {
         title: "WalletHeader"
         section: "Panels"
     }
+    ListElement {
+        title: "PopupSizing"
+        section: "Research / Examples"
+    }
 }

storybook/pages/PopupSizingPage.qml

@@ -0,0 +1,254 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQml 2.15
+
+
+Item {
+    id: root
+
+    readonly property string bugLink:
+        "https://bugreports.qt.io/browse/QTBUG-87804"
+
+    Popup {
+        id: popup
+
+        visible: true
+
+        width: 200
+
+        x: draggableRectangle.width / 2
+        y: draggableRectangle.height / 2
+
+        parent: {
+            anchors.centerIn = undefined
+            Qt.callLater(() => anchors.centerIn = Qt.binding(
+                             () => centerInParentCheckBox.checked ? parent
+                                                                  : undefined))
+            if (pageRootRadioButton.checked)
+                return root
+
+            if (overlayRadioButton.checked)
+                return Overlay.overlay
+
+            return draggableRectangle
+        }
+
+        closePolicy: Popup.NoAutoClose
+
+        margins: marginsSlider.value
+
+        background: Rectangle {
+            border.color: "black"
+        }
+
+        Binding on margins{
+            id: workaroundBinding
+
+            when: false
+        }
+
+        ColumnLayout {
+            Button {
+                text: "Some button 1"
+
+                Layout.fillWidth: true
+            }
+            Button {
+                text: "Some button 2"
+
+                 Layout.fillWidth: true
+            }
+
+            onImplicitHeightChanged: {
+                if (!workAroundCheckBox.checked)
+                    return
+
+                workaroundBinding.value = popup.margins + 1
+                workaroundBinding.when = true
+                workaroundBinding.when = false
+            }
+
+            anchors.fill: parent
+
+            ListView {
+                id: listView
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.preferredHeight: contentHeight
+
+                model: itemsCountSlider.value
+                spacing: 2
+                clip: true
+
+                delegate: Rectangle {
+                    width: popup.availableWidth
+                    color: "lightblue"
+                    border.color: "black"
+                    height: 20
+
+                    Label {
+                        text: index
+                        anchors.centerIn: parent
+                    }
+                }
+            }
+
+            Button {
+                text: "Some button 3"
+
+                 Layout.fillWidth: true
+            }
+        }
+    }
+
+    Rectangle {
+        id: draggableRectangle
+
+        visible: draggableRadioButton.checked
+
+        border.color: "green"
+        color: "lightgreen"
+        border.width: 3
+
+        width: 50
+        height: width
+        x: 100
+        y: 100
+        radius: width / 2
+
+        Drag.active: dragArea.drag.active
+
+        MouseArea {
+            id: dragArea
+
+            anchors.fill: parent
+            drag.target: parent
+        }
+    }
+
+    Pane {
+        anchors.bottom: parent.bottom
+
+        ColumnLayout {
+            RowLayout {
+                Label {
+                    text: "items count:"
+                }
+
+                Slider {
+                    id: itemsCountSlider
+
+                    from: 5
+                    to: 100
+                    stepSize: 1
+
+                    value: 10
+                }
+
+                Label {
+                    text: `(${itemsCountSlider.value})`
+                }
+            }
+
+            RowLayout {
+                Label {
+                    text: "margins:"
+                }
+
+                Slider {
+                    id: marginsSlider
+
+                    from: -1
+                    to: 100
+                    stepSize: 1
+
+                    value: 10
+                }
+
+                Label {
+                    text: `(${marginsSlider.value})`
+                }
+            }
+
+            CheckBox {
+                id: centerInParentCheckBox
+
+                checked: true
+                text: "Center in parent"
+            }
+
+            CheckBox {
+                id: workAroundCheckBox
+
+                checked: true
+                text: "Use workaround for " +
+                      `<a href="${bugLink}">${bugLink}</a>` +
+                      " (not needed in Qt 6)"
+
+                contentItem: Label {
+                     text: parent.text
+                     font: parent.font
+                     verticalAlignment: Text.AlignVCenter
+                     leftPadding: parent.indicator.width + parent.spacing
+
+                     onLinkActivated: Qt.openUrlExternally(link)
+                 }
+            }
+
+            RowLayout {
+                Label {
+                    text: "parent:"
+                }
+
+                RadioButton {
+                    id: pageRootRadioButton
+
+                    text: "page root"
+                    checked: true
+                }
+
+                RadioButton {
+                    id: overlayRadioButton
+
+                    text: "overlay"
+                }
+
+                RadioButton {
+                    id: draggableRadioButton
+
+                    text: "draggable item"
+                }
+            }
+        }
+    }
+
+    Pane {
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        z: -1
+
+        Label {
+            anchors.fill: parent
+
+            wrapMode: Text.Wrap
+
+            textFormat: Text.MarkdownText
+            text: `Conclusions:
+
+* When component size depends on both content and screen position, it is
+  important to set both **Layout.fillHeight: true** and
+  **Layout.preferredHeight** for a variable height component.
+* There is a bug in Qt causing the default height calculation mechanism doesn't
+  work properly in Qt 5.15 (it's ok in Qt 6). The proposed solution works
+  transparently and does not change other aspects of behavior.
+* The value **margins: -1** has a special meaning and changes the behavior of
+  the popup when **anchors.centerIn** is not used. Causes the popup to never be
+  positioned higher than the given position, regardless of the amount of space
+  available (probably undesirable behavior in most cases).
+`
+        }
+    }
+}