QmlDesigner: Add transient scroll bar to ComboBox

Change-Id: I118e4801fef9fab117e4d7355e56616c7d001858
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Brook Cronin <brook.cronin@qt.io>

share/qtcreator/qmldesigner/assetsLibraryQmlSources/AssetsView.qml

@@ -5,6 +5,7 @@ import QtQuick
 import QtQuick.Controls
 import HelperWidgets as HelperWidgets
 import StudioControls as StudioControls
+import StudioTheme as StudioTheme
 import AssetsLibraryBackend
 
 TreeView {
@@ -53,8 +54,9 @@ TreeView {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.vertical: HelperWidgets.ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: root
         x: root.width - verticalScrollBar.width
         y: 0

share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml

@@ -3,8 +3,8 @@
 
 import QtQuick
 import QtQuick.Controls
-import HelperWidgets 2.0 as HelperWidgets
+import HelperWidgets as HelperWidgets
-import StudioControls 1.0 as StudioControls
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import ConnectionsEditorEditorBackend
 
@@ -30,8 +30,9 @@ ListView {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.vertical: HelperWidgets.ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: root
         x: root.width - verticalScrollBar.width
         y: 0

share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml

@@ -3,8 +3,8 @@
 
 import QtQuick
 import QtQuick.Controls
-import HelperWidgets 2.0 as HelperWidgets
+import HelperWidgets as HelperWidgets
-import StudioControls 1.0 as StudioControls
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import ConnectionsEditorEditorBackend
 
@@ -30,8 +30,9 @@ ListView {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.vertical: HelperWidgets.ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: root
         x: root.width - verticalScrollBar.width
         y: 0

share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml

@@ -3,8 +3,8 @@
 
 import QtQuick
 import QtQuick.Controls
-import HelperWidgets 2.0 as HelperWidgets
+import HelperWidgets as HelperWidgets
-import StudioControls 1.0 as StudioControls
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import ConnectionsEditorEditorBackend
 
@@ -30,8 +30,9 @@ ListView {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.vertical: HelperWidgets.ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: root
         x: root.width - verticalScrollBar.width
         y: 0

share/qtcreator/qmldesigner/connectionseditor/SuggestionPopup.qml

@@ -135,7 +135,7 @@ Controls.Popup {
                     boundsMovement: Flickable.StopAtBounds
                     boundsBehavior: Flickable.StopAtBounds
 
-                    Controls.ScrollBar.vertical: HelperWidgets.ScrollBar {
+                    Controls.ScrollBar.vertical: StudioControls.TransientScrollBar {
                         id: listScrollBar
                         parent: listView
                         x: listView.width - listScrollBar.width
@@ -195,7 +195,7 @@ Controls.Popup {
                     boundsMovement: Flickable.StopAtBounds
                     boundsBehavior: Flickable.StopAtBounds
 
-                    Controls.ScrollBar.vertical: HelperWidgets.ScrollBar {
+                    Controls.ScrollBar.vertical: StudioControls.TransientScrollBar {
                         id: treeScrollBar
                         parent: treeView
                         x: treeView.width - treeScrollBar.width

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Details.qml

@@ -6,7 +6,7 @@ import QtQuick.Controls
 
 import QtQuick
 import QtQuick.Layouts
-import StudioControls as SC
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
 import BackendApi
@@ -22,8 +22,8 @@ Item {
         anchors.fill: parent
 
         Item {
-            x: DialogValues.detailsPanePadding                               // left padding
+            x: DialogValues.detailsPanePadding * 2 // left padding
-            width: parent.width - DialogValues.detailsPanePadding * 2        // right padding
+            width: parent.width - DialogValues.detailsPanePadding * 3 // right padding
             height: parent.height
 
             Column {
@@ -44,6 +44,7 @@ Item {
                 }
 
                 Flickable {
+                    id: flickable
                     width: parent.width
                     height: parent.height - detailsHeading.height - DialogValues.defaultPadding
                             - savePresetButton.height
@@ -52,14 +53,27 @@ Item {
                     boundsBehavior: Flickable.StopAtBounds
                     clip: true
 
-                    ScrollBar.vertical: SC.VerticalScrollBar {}
+                    HoverHandler { id: hoverHandler }
+
+                    ScrollBar.vertical: StudioControls.TransientScrollBar {
+                        id: verticalScrollBar
+                        style: StudioTheme.Values.viewStyle
+                        parent: flickable
+                        x: flickable.width - verticalScrollBar.width
+                        y: 0
+                        height: flickable.availableHeight
+                        orientation: Qt.Vertical
+
+                        show: (hoverHandler.hovered || flickable.focus || verticalScrollBar.inUse)
+                              && verticalScrollBar.isNeeded
+                    }
 
                     Column {
                         id: scrollContent
                         width: parent.width - DialogValues.detailsPanePadding
                         spacing: DialogValues.defaultPadding
 
-                        SC.TextField {
+                        StudioControls.TextField {
                             id: projectNameTextField
                             actionIndicatorVisible: false
                             translationIndicatorVisible: false
@@ -85,7 +99,7 @@ Item {
                         RowLayout { // Project location
                             width: parent.width
 
-                            SC.TextField {
+                            StudioControls.TextField {
                                 Layout.fillWidth: true
                                 id: projectLocationTextField
                                 actionIndicatorVisible: false
@@ -102,7 +116,7 @@ Item {
                                 value: projectLocationTextField.text
                             }
 
-                            SC.AbstractButton {
+                            StudioControls.AbstractButton {
                                 implicitWidth: 30
                                 iconSize: 20
                                 visible: true
@@ -114,7 +128,7 @@ Item {
                                     if (newLocation)
                                         projectLocationTextField.text = newLocation
                                 }
-                            } // SC.AbstractButton
+                            }
                         } // Project location RowLayout
 
                         Item { width: parent.width; height: DialogValues.narrowSpacing(7) }
@@ -171,7 +185,7 @@ Item {
                             } // Text
                         } // RowLayout
 
-                        SC.CheckBox {
+                        StudioControls.CheckBox {
                             id: defaultLocationCheckbox
                             actionIndicatorVisible: false
                             text: qsTr("Use as default project location")
@@ -187,7 +201,7 @@ Item {
 
                         Rectangle { width: parent.width; height: 1; color: DialogValues.dividerlineColor }
 
-                        SC.ComboBox {   // Screen Size ComboBox
+                        StudioControls.ComboBox {   // Screen Size ComboBox
                             id: screenSizeComboBox
                             actionIndicatorVisible: false
                             currentIndex: -1
@@ -253,7 +267,7 @@ Item {
                             }
 
                             // content items
-                            SC.RealSpinBox {
+                            StudioControls.RealSpinBox {
                                 id: widthField
                                 actionIndicatorVisible: false
                                 implicitWidth: 70
@@ -274,7 +288,7 @@ Item {
                                 value: widthField.realValue
                             }
 
-                            SC.RealSpinBox {
+                            StudioControls.RealSpinBox {
                                 id: heightField
                                 actionIndicatorVisible: false
                                 implicitWidth: 70
@@ -368,7 +382,7 @@ Item {
                             color: DialogValues.dividerlineColor
                         }
 
-                        SC.CheckBox {
+                        StudioControls.CheckBox {
                             id: useQtVirtualKeyboard
                             actionIndicatorVisible: false
                             text: qsTr("Use Qt Virtual Keyboard")
@@ -389,7 +403,7 @@ Item {
                                 color: DialogValues.textColor
                             }
 
-                            SC.ComboBox {   // Target Qt Version ComboBox
+                            StudioControls.ComboBox {   // Target Qt Version ComboBox
                                 id: qtVersionComboBox
                                 actionIndicatorVisible: false
                                 implicitWidth: 82
@@ -421,7 +435,7 @@ Item {
                 } // ScrollView
             } // Column
 
-            SC.AbstractButton {
+            StudioControls.AbstractButton {
                 id: savePresetButton
                 width: StudioTheme.Values.singleControlColumnWidth
                 buttonIcon: qsTr("Save Custom Preset")
@@ -459,7 +473,7 @@ Item {
                         color: DialogValues.textColor
                     }
 
-                    SC.TextField {
+                    StudioControls.TextField {
                         id: presetNameTextField
                         actionIndicatorVisible: false
                         translationIndicatorVisible: false

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/PresetView.qml

@@ -6,7 +6,7 @@ import QtQuick.Controls
 
 import QtQuick
 import QtQuick.Layouts
-import StudioControls as SC
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
 import BackendApi
@@ -23,12 +23,17 @@ ScrollView {
     property bool selectLast: false
 
     ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-    ScrollBar.vertical: SC.VerticalScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
+        id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: scrollView
-        x: scrollView.width + (DialogValues.gridMargins
+        x: scrollView.width + (DialogValues.gridMargins - verticalScrollBar.width) * 0.5
-                               - StudioTheme.Values.scrollBarThickness) * 0.5
         y: scrollView.topPadding
         height: scrollView.availableHeight
+        orientation: Qt.Vertical
+
+        show: (scrollView.hovered || scrollView.focus || verticalScrollBar.inUse)
+              && verticalScrollBar.isNeeded
     }
 
     contentWidth: gridView.contentItem.childrenRect.width

share/qtcreator/qmldesigner/newprojectdialog/imports/NewProjectDialog/Styles.qml

@@ -6,7 +6,7 @@ import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Layouts
 
-import StudioControls as SC
+import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 
 import BackendApi
@@ -59,7 +59,7 @@ Item {
                 }
             }
 
-            SC.ComboBox { // Style Filter ComboBox
+            StudioControls.ComboBox { // Style Filter ComboBox
                 id: styleComboBox
                 actionIndicatorVisible: false
                 currentIndex: 0
@@ -93,10 +93,17 @@ Item {
                 width: parent.width
 
                 ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-                ScrollBar.vertical: SC.VerticalScrollBar {
+                ScrollBar.vertical: StudioControls.TransientScrollBar {
-                    id: styleScrollBar
+                    id: verticalScrollBar
-                    x: stylesList.width + (DialogValues.stylesPanePadding
+                    style: StudioTheme.Values.viewStyle
-                                           - StudioTheme.Values.scrollBarThickness) * 0.5
+                    parent: scrollView
+                    x: scrollView.width + (DialogValues.gridMargins - verticalScrollBar.width) * 0.5
+                    y: scrollView.topPadding
+                    height: scrollView.availableHeight
+                    orientation: Qt.Vertical
+
+                    show: (scrollView.hovered || scrollView.focus || verticalScrollBar.inUse)
+                          && verticalScrollBar.isNeeded
                 }
 
                 ListView {

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
-//import QtQuick.Controls as C
+import StudioControls as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
 Flickable {
@@ -26,8 +26,9 @@ Flickable {
 
     HoverHandler { id: hoverHandler }
 
-    ScrollBar.horizontal: ScrollBar {
+    ScrollBar.horizontal: StudioControls.TransientScrollBar {
         id: horizontalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: flickable
         x: 0
         y: flickable.height - horizontalScrollBar.height
@@ -40,8 +41,9 @@ Flickable {
         otherInUse: verticalScrollBar.inUse
     }
 
-    ScrollBar.vertical: ScrollBar {
+    ScrollBar.vertical: StudioControls.TransientScrollBar {
         id: verticalScrollBar
+        style: StudioTheme.Values.viewStyle
         parent: flickable
         x: flickable.width - verticalScrollBar.width
         y: 0

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir

@@ -59,7 +59,6 @@ PropertyEditorPane 2.0 PropertyEditorPane.qml
 PropertyLabel 2.0 PropertyLabel.qml
 PaddingSection 2.0 PaddingSection.qml
 RoundedPanel 2.0 RoundedPanel.qml
-ScrollBar 2.0 ScrollBar.qml
 ScrollView 2.0 ScrollView.qml
 SecondColumnLayout 2.0 SecondColumnLayout.qml
 Section 2.0 Section.qml

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml

@@ -130,14 +130,13 @@ T.ComboBox {
         id: itemDelegate
 
         width: comboBoxPopup.width - comboBoxPopup.leftPadding - comboBoxPopup.rightPadding
-               - (comboBoxPopupScrollBar.visible ? comboBoxPopupScrollBar.contentItem.implicitWidth
-                                                   + 2 : 0) // TODO Magic number
         height: control.style.controlSize.height - 2 * control.style.borderWidth
         padding: 0
         enabled: model.enabled === undefined ? true : model.enabled
 
         contentItem: Text {
-            leftPadding: itemDelegateIconArea.width
+            leftPadding: 8
+            rightPadding: verticalScrollBar.style.scrollBarThicknessHover
             text: control.textRole ? (Array.isArray(control.model)
                                       ? modelData[control.textRole]
                                       : model[control.textRole])
@@ -146,34 +145,16 @@ T.ComboBox {
                 if (!itemDelegate.enabled)
                     return control.style.text.disabled
 
-                return itemDelegate.highlighted ? control.style.text.selectedText
+                if (control.currentIndex === index)
-                                                : control.style.text.idle
+                    return control.style.text.selectedText
+
+                return control.style.text.idle
             }
             font: control.font
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
         }
 
-        Item {
-            id: itemDelegateIconArea
-            width: itemDelegate.height
-            height: itemDelegate.height
-
-            T.Label {
-                id: itemDelegateIcon
-                text: StudioTheme.Constants.tickIcon
-                color: itemDelegate.highlighted ? control.style.text.selectedText
-                                                : control.style.text.idle
-                font.family: StudioTheme.Constants.iconFont.family
-                font.pixelSize: control.style.smallIconFontSize
-                visible: control.currentIndex === index
-                anchors.fill: parent
-                renderType: Text.NativeRendering
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-            }
-        }
-
         highlighted: control.highlightedIndex === index
 
         background: Rectangle {
@@ -182,7 +163,21 @@ T.ComboBox {
             y: 0
             width: itemDelegate.width
             height: itemDelegate.height
-            color: itemDelegate.highlighted ? control.style.interaction : "transparent"
+            color: {
+                if (!itemDelegate.enabled)
+                    return "transparent"
+
+                if (itemDelegate.hovered && control.currentIndex === index)
+                    return control.style.interactionHover
+
+                if (control.currentIndex === index)
+                    return control.style.interaction
+
+                if (itemDelegate.hovered)
+                    return control.style.background.hover
+
+                return "transparent"
+            }
         }
     }
 
@@ -211,9 +206,19 @@ T.ComboBox {
             model: control.popup.visible ? control.delegateModel : null
             currentIndex: control.highlightedIndex
             boundsBehavior: Flickable.StopAtBounds
-            ScrollBar.vertical: ScrollBar {
+
-                id: comboBoxPopupScrollBar
+            HoverHandler { id: hoverHandler }
-                visible: listView.height < listView.contentHeight
+
+            ScrollBar.vertical: TransientScrollBar {
+                id: verticalScrollBar
+                parent: listView
+                x: listView.width - verticalScrollBar.width
+                y: 0
+                height: listView.availableHeight
+                orientation: Qt.Vertical
+
+                show: (hoverHandler.hovered || verticalScrollBar.inUse)
+                      && verticalScrollBar.isNeeded
             }
         }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TopLevelComboBox.qml

@@ -138,9 +138,19 @@ T.ComboBox {
         currentIndex: control.highlightedIndex
         boundsBehavior: Flickable.StopAtBounds
 
-        ScrollBar.vertical: ScrollBar {
+        HoverHandler { id: hoverHandler }
-            id: comboBoxPopupScrollBar
+
-            visible: listView.height < listView.contentHeight
+        ScrollBar.vertical: TransientScrollBar {
+            id: verticalScrollBar
+            style: control.style
+            parent: listView
+            x: listView.width - verticalScrollBar.width
+            y: 0
+            height: listView.availableHeight
+            orientation: Qt.Vertical
+
+            show: (hoverHandler.hovered || verticalScrollBar.inUse)
+                  && verticalScrollBar.isNeeded
         }
 
         delegate: ItemDelegate {
@@ -158,7 +168,8 @@ T.ComboBox {
             enabled: model.enabled === undefined ? true : model.enabled
 
             contentItem: Text {
-                leftPadding: itemDelegateIconArea.width
+                leftPadding: 8
+                rightPadding: verticalScrollBar.style.scrollBarThicknessHover
                 text: control.textRole ? (Array.isArray(control.model)
                                           ? modelData[control.textRole]
                                           : model[control.textRole])
@@ -167,47 +178,37 @@ T.ComboBox {
                     if (!itemDelegate.enabled)
                         return control.style.text.disabled
 
-                    return itemDelegate.hovered ? control.style.text.selectedText
+                    if (control.currentIndex === index)
-                                                : control.style.text.idle
+                        return control.style.text.selectedText
+
+                    return control.style.text.idle
                 }
                 font: control.font
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignVCenter
             }
 
-            Item {
-                id: itemDelegateIconArea
-                width: itemDelegate.height
-                height: itemDelegate.height
-
-                T.Label {
-                    id: itemDelegateIcon
-                    text: StudioTheme.Constants.tickIcon
-                    color: {
-                        if (!itemDelegate.enabled)
-                            return control.style.text.disabled
-
-                        return itemDelegate.hovered ? control.style.text.selectedText
-                                                    : control.style.text.idle
-                    }
-                    font.family: StudioTheme.Constants.iconFont.family
-                    font.pixelSize: control.style.smallIconFontSize
-                    visible: control.currentIndex === index
-                    anchors.fill: parent
-                    renderType: Text.NativeRendering
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-            }
-
             background: Rectangle {
                 id: itemDelegateBackground
                 x: control.style.borderWidth
                 y: 0
                 width: itemDelegate.width - 2 * control.style.borderWidth
                 height: itemDelegate.height
-                color: itemDelegate.hovered && itemDelegate.enabled ? control.style.interaction
+                color: {
-                                                                    : "transparent"
+                    if (!itemDelegate.enabled)
+                        return "transparent"
+
+                    if (itemDelegate.hovered && control.currentIndex === index)
+                        return control.style.interactionHover
+
+                    if (control.currentIndex === index)
+                        return control.style.interaction
+
+                    if (itemDelegate.hovered)
+                        return control.style.background.hover
+
+                    return "transparent"
+                }
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TransientScrollBar.qml

@@ -14,7 +14,8 @@ T.ScrollBar {
     property bool otherInUse: false
     property bool isNeeded: control.size < 1.0
     property bool inUse: control.hovered || control.pressed
-    property int thickness: control.inUse || control.otherInUse ? 10 : 8
+    property int thickness: control.inUse || control.otherInUse ? control.style.scrollBarThicknessHover
+                                                                : control.style.scrollBarThickness
 
     property bool scrollBarVisible: parent.childrenRect.height > parent.height
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/VerticalScrollBar.qml

@@ -1,38 +0,0 @@
-// Copyright (C) 2023 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
-
-import QtQuick
-//import QtQuick.Controls
-import StudioTheme 1.0 as StudioTheme
-
-ScrollBar {
-    id: control
-
-    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-                            implicitContentWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-                             implicitContentHeight + topPadding + bottomPadding)
-
-    property bool scrollBarVisible: parent.contentHeight > control.height
-
-    minimumSize: control.width / control.height
-    orientation: Qt.Vertical
-    policy: control.scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
-
-    height: parent.availableHeight
-            - (parent.bothVisible ? parent.horizontalThickness : 0)
-    padding: control.active ? control.style.scrollBarActivePadding
-                            : control.style.scrollBarInactivePadding
-
-    background: Rectangle {
-        implicitWidth: control.style.scrollBarThickness
-        implicitHeight: control.style.scrollBarThickness
-        color: control.style.scrollBar.track
-    }
-
-    contentItem: Rectangle {
-        implicitWidth: control.style.scrollBarThickness - 2 * control.padding
-        implicitHeight: control.style.scrollBarThickness - 2 * control.padding
-        color: control.style.scrollBar.handle
-    }
-}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir

@@ -47,6 +47,6 @@ TabButton 1.0 TabButton.qml
 TextArea 1.0 TextArea.qml
 TextField 1.0 TextField.qml
 ToolTip 1.0 ToolTip.qml
+TransientScrollBar 1.0 TransientScrollBar.qml
 TranslationIndicator 1.0 TranslationIndicator.qml
-VerticalScrollBar 1.0 VerticalScrollBar.qml
 TopLevelComboBox 1.0 TopLevelComboBox.qml

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ConnectionPopupControlStyle.qml

@@ -4,13 +4,15 @@
 import QtQuick
 
 ControlStyle {
-
     radius: Values.smallRadius
 
     baseIconFontSize: Values.baseFont
     controlSize: Qt.size(Values.viewBarComboWidth, Values.viewBarComboHeight)
     smallIconFontSize: Values.baseFont
 
+    scrollBarThickness: 4
+    scrollBarThicknessHover: 6
+
     background: ControlStyle.BackgroundColors {
         idle: Values.themePopoutControlBackground_idle
         hover: Values.themePopoutControlBackground_hover
@@ -36,4 +38,10 @@ ControlStyle {
         interaction: Values.themeInteraction
         disabled: Values.themePopoutControlBorder_disabled
     }
+
+    scrollBar: ControlStyle.ScrollBarColors {
+        track: Values.themeScrollBarTrack
+        handle: Values.themeScrollBarHandle_idle
+        handleHover: Values.themeScrollBarHandle
+    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ControlStyle.qml

@@ -67,7 +67,8 @@ QtObject {
     property real sectionHeadHeight: Values.sectionHeadHeight
     property real sectionHeadSpacerHeight: Values.sectionHeadSpacerHeight
 
-    property real scrollBarThickness: Values.scrollBarThickness
+    property real scrollBarThickness: 4//Values.scrollBarThickness
+    property real scrollBarThicknessHover: 6//Values.scrollBarThicknessHover
     property real scrollBarActivePadding: Values.scrollBarActivePadding
     property real scrollBarInactivePadding: Values.scrollBarInactivePadding
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml

@@ -99,7 +99,8 @@ QtObject {
     property real inputHorizontalPadding: Math.round(6 * values.scaleFactor)
     property real typeLabelVerticalShift: Math.round(6 * values.scaleFactor)
 
-    property real scrollBarThickness: 10
+    property real scrollBarThickness: 8
+    property real scrollBarThicknessHover: 10
     property real scrollBarActivePadding: 1
     property real scrollBarInactivePadding: 2
 
@@ -458,9 +459,6 @@ QtObject {
     property color themePillTextSelected: Theme.color(Theme.DSpillTextSelected)
     property color themePillTextEdit: Theme.color(Theme.DspillTextEdit)
 
-
-
-
     // Control Style Mapping
     property ControlStyle controlStyle: DefaultStyle {}
     property ControlStyle connectionPopupControlStyle: ConnectionPopupControlStyle {}
@@ -474,4 +472,5 @@ QtObject {
     property ControlStyle statusbarControlStyle: StatusBarControlStyle {}
     property ControlStyle statesControlStyle: StatesControlStyle {}
     property ControlStyle searchControlStyle: SearchControlStyle {}
+    property ControlStyle viewStyle: ViewStyle {}
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ViewStyle.qml

@@ -0,0 +1,9 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0 WITH Qt-GPL-exception-1.0
+
+import QtQuick
+
+ControlStyle {
+    scrollBarThickness: Values.scrollBarThickness
+    scrollBarThicknessHover: Values.scrollBarThicknessHover
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/qmldir

@@ -14,3 +14,4 @@ StatusBarControlStyle 1.0 StatusBarControlStyle.qml
 TopToolbarButtonStyle 1.0 TopToolbarButtonStyle.qml
 ViewBarButtonStyle 1.0 ViewBarButtonStyle.qml
 ViewBarControlStyle 1.0 ViewBarControlStyle.qml
+ViewStyle 1.0 ViewStyle.qml

share/qtcreator/qmldesigner/stateseditor/Main.qml

@@ -579,8 +579,9 @@ Rectangle {
                 anchors.topMargin: root.topMargin
                 anchors.leftMargin: root.leftMargin
 
-                ScrollBar.horizontal: HelperWidgets.ScrollBar {
+                ScrollBar.horizontal: StudioControls.TransientScrollBar {
                     id: horizontalBar
+                    style: StudioTheme.Values.viewStyle
                     parent: scrollView
                     x: scrollView.leftPadding
                     y: scrollView.height - height
@@ -592,8 +593,9 @@ Rectangle {
                     otherInUse: verticalBar.inUse
                 }
 
-                ScrollBar.vertical: HelperWidgets.ScrollBar {
+                ScrollBar.vertical: StudioControls.TransientScrollBar {
                     id: verticalBar
+                    style: StudioTheme.Values.viewStyle
                     parent: scrollView
                     x: scrollView.mirrored ? 0 : scrollView.width - width
                     y: scrollView.topPadding