Expose checkable where necessary, instead of in QQuickAbstractButton

QQuickCheckBox, QQuickRadioButton and QQuickSwitch are inherently
checkable, so having this property available to QML doesn't make
sense.

QQuickButton and QQuickMenuItem are the two classes that need
to expose the property.

Change-Id: Ic421c195295c4bef0fc934c98fa9e781d98c9b67
Task-number: QTBUG-51554
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

24 files changed, 69 insertions, 233 deletions

diff --git a/src/imports/controls/CheckDelegate.qml b/src/imports/controls/CheckDelegate.qml
index 4c5f0644..8d266b7d 100644
--- a/src/imports/controls/CheckDelegate.qml
+++ b/src/imports/controls/CheckDelegate.qml
@@ -53,8 +53,8 @@ T.CheckDelegate {
 
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
 
         text: control.text
         font: control.font
diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml
index 6e3dc91b..dccc7c10 100644
--- a/src/imports/controls/ComboBox.qml
+++ b/src/imports/controls/ComboBox.qml
@@ -57,7 +57,6 @@ T.ComboBox {
     delegate: ItemDelegate {
         width: control.width
         text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
-        checkable: true
         autoExclusive: true
         checked: control.currentIndex === index
         highlighted: control.highlightedIndex === index
diff --git a/src/imports/controls/ItemDelegate.qml b/src/imports/controls/ItemDelegate.qml
index 13a13e1e..f418788e 100644
--- a/src/imports/controls/ItemDelegate.qml
+++ b/src/imports/controls/ItemDelegate.qml
@@ -52,8 +52,8 @@ T.ItemDelegate {
 
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
+        rightPadding: !control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
 
         text: control.text
         font: control.font
@@ -65,16 +65,6 @@ T.ItemDelegate {
     }
     //! [contentItem]
 
-    //! [indicator]
-    indicator: Image {
-        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
-        y: control.topPadding + (control.availableHeight - height) / 2
-
-        visible: control.checked
-        source: control.checkable ? "qrc:/qt-project.org/imports/Qt/labs/controls/images/check.png" : ""
-    }
-    //! [indicator]
-
     //! [background]
     background: Rectangle {
         implicitWidth: 100
diff --git a/src/imports/controls/RadioDelegate.qml b/src/imports/controls/RadioDelegate.qml
index 55186ae5..01b62767 100644
--- a/src/imports/controls/RadioDelegate.qml
+++ b/src/imports/controls/RadioDelegate.qml
@@ -52,8 +52,8 @@ T.RadioDelegate {
 
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
 
         text: control.text
         font: control.font
diff --git a/src/imports/controls/SwipeDelegate.qml b/src/imports/controls/SwipeDelegate.qml
index b3cf4714..45d6ed54 100644
--- a/src/imports/controls/SwipeDelegate.qml
+++ b/src/imports/controls/SwipeDelegate.qml
@@ -52,8 +52,8 @@ T.SwipeDelegate {
 
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
+        rightPadding: !control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
 
         text: control.text
         font: control.font
@@ -73,16 +73,6 @@ T.SwipeDelegate {
     }
     //! [contentItem]
 
-    //! [indicator]
-    indicator: Image {
-        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
-        y: control.topPadding + (control.availableHeight - height) / 2
-
-        visible: control.checked
-        source: control.checkable ? "qrc:/qt-project.org/imports/Qt/labs/controls/images/check.png" : ""
-    }
-    //! [indicator]
-
     //! [background]
     background: Rectangle {
         color: control.pressed ? "#bdbebf" : "#eeeeee"
diff --git a/src/imports/controls/doc/images/qtquickcontrols-itemdelegate.gif b/src/imports/controls/doc/images/qtquickcontrols-itemdelegate.gif
index 7f8a2af8..0e8554ff 100644
--- a/src/imports/controls/doc/images/qtquickcontrols-itemdelegate.gif
+++ b/src/imports/controls/doc/images/qtquickcontrols-itemdelegate.gif
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-combobox-delegate.qml b/src/imports/controls/doc/snippets/qtquickcontrols-combobox-delegate.qml
index 60f56940..1241eeaa 100644
--- a/src/imports/controls/doc/snippets/qtquickcontrols-combobox-delegate.qml
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-combobox-delegate.qml
@@ -40,7 +40,6 @@ Item {
         delegate: ItemDelegate {
             width: combo.width
             text: modelData
-            checkable: true
             autoExclusive: true
             checked: combo.currentIndex === index
             Rectangle {
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-background.qml b/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-background.qml
index 10d5696e..85aba1c8 100644
--- a/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-background.qml
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-background.qml
@@ -30,8 +30,6 @@ import Qt.labs.controls 1.0
 
 ItemDelegate {
     text: "ItemDelegate"
-    checked: true
-    checkable: true
     background: Rectangle {
         color: 'transparent'
         border.color: 'red'
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-contentItem.qml b/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-contentItem.qml
index 43e6f85e..aa7d5e2b 100644
--- a/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-contentItem.qml
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-contentItem.qml
@@ -30,8 +30,6 @@ import Qt.labs.controls 1.0
 
 ItemDelegate {
     text: "ItemDelegate"
-    checked: true
-    checkable: true
     Rectangle {
         anchors.fill: contentItem
         color: "transparent"
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-indicator.qml b/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-indicator.qml
index fb80957d..13e8b6cf 100644
--- a/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-indicator.qml
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-itemdelegate-indicator.qml
@@ -30,8 +30,6 @@ import Qt.labs.controls 1.0
 
 ItemDelegate {
     text: "ItemDelegate"
-    checked: true
-    checkable: true
     Rectangle {
         anchors.fill: indicator
         color: "transparent"
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-swipedelegate-indicator.qml b/src/imports/controls/doc/snippets/qtquickcontrols-swipedelegate-indicator.qml
index 22530e4b..e184dc64 100644
--- a/src/imports/controls/doc/snippets/qtquickcontrols-swipedelegate-indicator.qml
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-swipedelegate-indicator.qml
@@ -31,7 +31,6 @@ import Qt.labs.controls 1.0
 SwipeDelegate {
     text: "SwipeDelegate"
     checked: true
-    checkable: true
     Rectangle {
         anchors.fill: indicator
         color: "transparent"
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
index 103da5fe..4975ac24 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
@@ -228,9 +228,7 @@
 
         \section3 Indicator
 
-            \image qtquickcontrols-itemdelegate-indicator.png
-
-            \snippet ItemDelegate.qml indicator
+            ItemDelegate has no indicator item by default.
 
 
     \section1 Customizing Label
@@ -505,8 +503,9 @@
 
     \section1 Customizing SwipeDelegate
 
-        SwipeDelegate consists of four visual items: \l {Control::background}{background},
-        \l {Control::contentItem}{content item}, \c exposure.left, and \c exposure.right.
+        SwipeDelegate consists of five visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{content item}, \l {AbstractButton::indicator}{indicator},
+        \c exposure.left, and \c exposure.right.
 
         \section3 Background
 
@@ -520,6 +519,10 @@
 
             \snippet SwipeDelegate.qml contentItem
 
+        \section3 Indicator
+
+            SwipeDelegate has no indicator item by default.
+
         \section3 Left, right, and behind
 
             \image qtquickcontrols-swipedelegate.gif
diff --git a/src/imports/controls/material/CheckIndicator.qml b/src/imports/controls/material/CheckIndicator.qml
index 5c26e26f..962d4a9e 100644
--- a/src/imports/controls/material/CheckIndicator.qml
+++ b/src/imports/controls/material/CheckIndicator.qml
@@ -46,8 +46,6 @@ Rectangle {
     border.width: control.checked ? width / 2 : 2
     radius: 2
 
-    visible: control.checkable
-
     property alias control: ripple.control
 
     Behavior on border.width {
diff --git a/src/imports/controls/material/ItemDelegate.qml b/src/imports/controls/material/ItemDelegate.qml
index 132cce3d..e3ec6bd9 100644
--- a/src/imports/controls/material/ItemDelegate.qml
+++ b/src/imports/controls/material/ItemDelegate.qml
@@ -37,7 +37,6 @@
 import QtQuick 2.6
 import Qt.labs.templates 1.0 as T
 import Qt.labs.controls.material 1.0
-import Qt.labs.controls.material.impl 1.0
 
 T.ItemDelegate {
     id: control
@@ -52,85 +51,10 @@ T.ItemDelegate {
     padding: 16
     spacing: 16
 
-    //! [indicator]
-    indicator: Rectangle {
-        id: indicatorItem
-        x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
-        y: control.topPadding + (control.availableHeight - height) / 2
-        implicitWidth: 20
-        implicitHeight: 20
-        color: "transparent"
-        border.color: control.checked ? control.Material.accentColor : control.Material.secondaryTextColor
-        border.width: control.checked ? width / 2 : 2
-        radius: 2
-
-        visible: control.checkable
-
-        Behavior on border.width {
-            NumberAnimation {
-                duration: 100
-                easing.type: Easing.OutCubic
-            }
-        }
-
-        Behavior on border.color {
-            ColorAnimation {
-                duration: 100
-                easing.type: Easing.OutCubic
-            }
-        }
-
-        Ripple {
-            width: parent.width
-            height: width
-            control: control
-            colored: control.checked
-            opacity: control.pressed ? 1 : 0
-        }
-
-        // TODO: This needs to be transparent
-        Image {
-            id: checkImage
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            width: 16
-            height: 16
-            source: "qrc:/qt-project.org/imports/Qt/labs/controls/material/images/check.png"
-            fillMode: Image.PreserveAspectFit
-
-            scale: control.checked ? 1 : 0
-            Behavior on scale { NumberAnimation { duration: 100 } }
-        }
-
-        states: State {
-            name: "checked"
-            when: control.checked
-        }
-
-        transitions: Transition {
-            SequentialAnimation {
-                NumberAnimation {
-                    target: indicatorItem
-                    property: "scale"
-                    // Go down 2 pixels in size.
-                    to: 1 - 2 / indicatorItem.width
-                    duration: 120
-                }
-                NumberAnimation {
-                    target: indicatorItem
-                    property: "scale"
-                    to: 1
-                    duration: 120
-                }
-            }
-        }
-    }
-    //! [indicator]
-
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: control.checkable && !control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
+        rightPadding: control.checkable && control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
 
         text: control.text
         font: control.font
diff --git a/src/imports/controls/material/SwipeDelegate.qml b/src/imports/controls/material/SwipeDelegate.qml
index 34d546d7..c5942140 100644
--- a/src/imports/controls/material/SwipeDelegate.qml
+++ b/src/imports/controls/material/SwipeDelegate.qml
@@ -52,85 +52,10 @@ T.SwipeDelegate {
     padding: 16
     spacing: 16
 
-    //! [indicator]
-    indicator: Rectangle {
-        id: indicatorItem
-        x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
-        y: control.topPadding + (control.availableHeight - height) / 2
-        implicitWidth: 20
-        implicitHeight: 20
-        color: "transparent"
-        border.color: control.checked ? control.Material.accentColor : control.Material.secondaryTextColor
-        border.width: control.checked ? width / 2 : 2
-        radius: 2
-
-        visible: control.checkable
-
-        Behavior on border.width {
-            NumberAnimation {
-                duration: 100
-                easing.type: Easing.OutCubic
-            }
-        }
-
-        Behavior on border.color {
-            ColorAnimation {
-                duration: 100
-                easing.type: Easing.OutCubic
-            }
-        }
-
-        Ripple {
-            width: parent.width
-            height: width
-            control: control
-            colored: control.checked
-            opacity: control.pressed ? 1 : 0
-        }
-
-        // TODO: This needs to be transparent
-        Image {
-            id: checkImage
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            width: 16
-            height: 16
-            source: "qrc:/qt-project.org/imports/Qt/labs/controls/material/images/check.png"
-            fillMode: Image.PreserveAspectFit
-
-            scale: control.checked ? 1 : 0
-            Behavior on scale { NumberAnimation { duration: 100 } }
-        }
-
-        states: State {
-            name: "checked"
-            when: control.checked
-        }
-
-        transitions: Transition {
-            SequentialAnimation {
-                NumberAnimation {
-                    target: indicatorItem
-                    property: "scale"
-                    // Go down 2 pixels in size.
-                    to: 1 - 2 / indicatorItem.width
-                    duration: 120
-                }
-                NumberAnimation {
-                    target: indicatorItem
-                    property: "scale"
-                    to: 1
-                    duration: 120
-                }
-            }
-        }
-    }
-    //! [indicator]
-
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
+        rightPadding: control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
 
         text: control.text
         font: control.font
diff --git a/src/imports/controls/universal/ItemDelegate.qml b/src/imports/controls/universal/ItemDelegate.qml
index d381086d..d8fc80e8 100644
--- a/src/imports/controls/universal/ItemDelegate.qml
+++ b/src/imports/controls/universal/ItemDelegate.qml
@@ -55,20 +55,10 @@ T.ItemDelegate {
     rightPadding: 12
     bottomPadding: 13
 
-    //! [indicator]
-    indicator: Image {
-        x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
-        y: control.topPadding + (control.availableHeight - height) / 2
-
-        visible: control.checked
-        source: !control.checkable ? "" : "image://universal/checkmark/" + (!control.enabled ? control.Universal.baseLowColor : control.pressed ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor)
-    }
-    //! [indicator]
-
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
+        rightPadding: control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
 
         text: control.text
         font: control.font
diff --git a/src/imports/controls/universal/MenuItem.qml b/src/imports/controls/universal/MenuItem.qml
index 128ef9da..22eaee61 100644
--- a/src/imports/controls/universal/MenuItem.qml
+++ b/src/imports/controls/universal/MenuItem.qml
@@ -56,8 +56,8 @@ T.MenuItem {
 
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.mirrored ? control.indicator.width + control.spacing : 0
 
         text: control.text
         font: control.font
diff --git a/src/imports/controls/universal/SwipeDelegate.qml b/src/imports/controls/universal/SwipeDelegate.qml
index 7041e18e..aa1a68e9 100644
--- a/src/imports/controls/universal/SwipeDelegate.qml
+++ b/src/imports/controls/universal/SwipeDelegate.qml
@@ -55,20 +55,10 @@ T.SwipeDelegate {
     rightPadding: 12
     bottomPadding: 13
 
-    //! [indicator]
-    indicator: Image {
-        x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
-        y: control.topPadding + (control.availableHeight - height) / 2
-
-        visible: control.checked
-        source: !control.checkable ? "" : "image://universal/checkmark/" + (!control.enabled ? control.Universal.baseLowColor : control.pressed ? control.Universal.baseHighColor : control.Universal.baseMediumHighColor)
-    }
-    //! [indicator]
-
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
-        rightPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
+        leftPadding: !control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
+        rightPadding: control.mirrored ? (control.indicator ? control.indicator.width : 0) + control.spacing : 0
 
         text: control.text
         font: control.font
diff --git a/src/templates/qquickabstractbutton.cpp b/src/templates/qquickabstractbutton.cpp
index 071b4964..2a462c03 100644
--- a/src/templates/qquickabstractbutton.cpp
+++ b/src/templates/qquickabstractbutton.cpp
@@ -303,11 +303,11 @@ void QQuickAbstractButton::setChecked(bool checked)
     emit checkedChanged();
 }
 
-/*!
-    \qmlproperty bool Qt.labs.controls::AbstractButton::checkable
-
-    This property holds whether the button is checkable.
-*/
+// We define these in QQuickAbstractButton without exposing checkable as a
+// property, and instead expose it as a property in QQuickButton.
+// QQuickRadioButton, QQuickSwitch and QQuickCheckBox are checkable by default,
+// but if we removed the checkable code from here, they'd each have to
+// duplicate it.
 bool QQuickAbstractButton::isCheckable() const
 {
     Q_D(const QQuickAbstractButton);
@@ -322,7 +322,7 @@ void QQuickAbstractButton::setCheckable(bool checkable)
 
     d->checkable = checkable;
     setAccessibleProperty("checkable", checkable);
-    emit checkableChanged();
+    checkableChange();
 }
 
 /*!
@@ -594,6 +594,10 @@ void QQuickAbstractButton::nextCheckState()
         setChecked(!d->checked);
 }
 
+void QQuickAbstractButton::checkableChange()
+{
+}
+
 #ifndef QT_NO_ACCESSIBILITY
 void QQuickAbstractButton::accessibilityActiveChanged(bool active)
 {
diff --git a/src/templates/qquickabstractbutton_p.h b/src/templates/qquickabstractbutton_p.h
index 3877a96d..71aed622 100644
--- a/src/templates/qquickabstractbutton_p.h
+++ b/src/templates/qquickabstractbutton_p.h
@@ -60,7 +60,6 @@ class Q_QUICKTEMPLATES_EXPORT QQuickAbstractButton : public QQuickControl
     Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged FINAL)
     Q_PROPERTY(bool pressed READ isPressed WRITE setPressed NOTIFY pressedChanged FINAL)
     Q_PROPERTY(bool checked READ isChecked WRITE setChecked NOTIFY checkedChanged FINAL)
-    Q_PROPERTY(bool checkable READ isCheckable WRITE setCheckable NOTIFY checkableChanged FINAL)
     Q_PROPERTY(bool highlighted READ isHighlighted WRITE setHighlighted NOTIFY highlightedChanged FINAL)
     Q_PROPERTY(bool autoExclusive READ autoExclusive WRITE setAutoExclusive NOTIFY autoExclusiveChanged FINAL)
     Q_PROPERTY(bool autoRepeat READ autoRepeat WRITE setAutoRepeat NOTIFY autoRepeatChanged FINAL)
@@ -107,7 +106,6 @@ Q_SIGNALS:
     void textChanged();
     void pressedChanged();
     void checkedChanged();
-    void checkableChanged();
     void highlightedChanged();
     void autoExclusiveChanged();
     void autoRepeatChanged();
@@ -129,6 +127,8 @@ protected:
     virtual void checkStateSet();
     virtual void nextCheckState();
 
+    virtual void checkableChange();
+
 #ifndef QT_NO_ACCESSIBILITY
     void accessibilityActiveChanged(bool active) override;
     QAccessible::Role accessibleRole() const override;
diff --git a/src/templates/qquickbutton.cpp b/src/templates/qquickbutton.cpp
index eba6395c..3dbab498 100644
--- a/src/templates/qquickbutton.cpp
+++ b/src/templates/qquickbutton.cpp
@@ -96,6 +96,17 @@ QQuickButton::QQuickButton(QQuickItem *parent) : QQuickAbstractButton(parent)
 {
 }
 
+/*!
+    \qmlproperty bool Qt.labs.controls::Button::checkable
+
+    This property holds whether the button is checkable.
+*/
+
+void QQuickButton::checkableChange()
+{
+    emit checkableChanged();
+}
+
 QFont QQuickButton::defaultFont() const
 {
     return QQuickControlPrivate::themeFont(QPlatformTheme::PushButtonFont);
diff --git a/src/templates/qquickbutton_p.h b/src/templates/qquickbutton_p.h
index cfdf1044..00476313 100644
--- a/src/templates/qquickbutton_p.h
+++ b/src/templates/qquickbutton_p.h
@@ -55,11 +55,17 @@ QT_BEGIN_NAMESPACE
 class Q_QUICKTEMPLATES_EXPORT QQuickButton : public QQuickAbstractButton
 {
     Q_OBJECT
+    Q_PROPERTY(bool checkable READ isCheckable WRITE setCheckable NOTIFY checkableChanged FINAL)
 
 public:
     explicit QQuickButton(QQuickItem *parent = nullptr);
 
+Q_SIGNALS:
+    void checkableChanged();
+
 protected:
+    void checkableChange() override;
+
     QFont defaultFont() const override;
 };
 
diff --git a/src/templates/qquickmenuitem.cpp b/src/templates/qquickmenuitem.cpp
index a2b607b5..daf426e6 100644
--- a/src/templates/qquickmenuitem.cpp
+++ b/src/templates/qquickmenuitem.cpp
@@ -92,6 +92,17 @@ QQuickMenuItem::QQuickMenuItem(QQuickItem *parent) :
     connect(this, &QQuickAbstractButton::clicked, this, &QQuickMenuItem::triggered);
 }
 
+/*!
+    \qmlproperty bool Qt.labs.controls::MenuItem::checkable
+
+    This property holds whether the menu item is checkable.
+*/
+
+void QQuickMenuItem::checkableChange()
+{
+    emit checkableChanged();
+}
+
 QFont QQuickMenuItem::defaultFont() const
 {
     return QQuickControlPrivate::themeFont(QPlatformTheme::MenuItemFont);
diff --git a/src/templates/qquickmenuitem_p.h b/src/templates/qquickmenuitem_p.h
index d73e1081..66f5fdad 100644
--- a/src/templates/qquickmenuitem_p.h
+++ b/src/templates/qquickmenuitem_p.h
@@ -57,14 +57,17 @@ class QQuickMenuItemPrivate;
 class Q_QUICKTEMPLATES_EXPORT QQuickMenuItem : public QQuickAbstractButton
 {
     Q_OBJECT
+    Q_PROPERTY(bool checkable READ isCheckable WRITE setCheckable NOTIFY checkableChanged FINAL)
 
 public:
     explicit QQuickMenuItem(QQuickItem *parent = nullptr);
 
 Q_SIGNALS:
+    void checkableChanged();
     void triggered();
 
 protected:
+    void checkableChange() override;
     QFont defaultFont() const override;
 
 #ifndef QT_NO_ACCESSIBILITY