Add RoundButton

[ChangeLog][Controls] Added RoundButton.

Change-Id: I30a8b9e942a61089e87fb1aa248432e42caf0d20
Task-number: QTBUG-54967
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

22 files changed, 930 insertions, 32 deletions

diff --git a/src/imports/controls/RoundButton.qml b/src/imports/controls/RoundButton.qml
new file mode 100644
index 00000000..102774e0
--- /dev/null
+++ b/src/imports/controls/RoundButton.qml
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import QtQuick.Templates 2.1 as T
+
+T.RoundButton {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    padding: 6
+
+    //! [contentItem]
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        opacity: enabled || control.highlighted || control.checked ? 1 : 0.3
+        color: control.checked || control.highlighted ? "#ffffff" : (control.visualFocus ? "#0066ff" : (control.down ? "#26282a" : "#353637"))
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        implicitWidth: 40
+        implicitHeight: 40
+        radius: control.radius
+        opacity: enabled ? 1 : 0.3
+        visible: !control.flat || control.down || control.checked || control.highlighted
+        color: control.checked || control.highlighted ?
+            (control.visualFocus ? (control.down ? "#599bff" : "#0066ff") : (control.down ? "#585a5c" : "#353637")) :
+            (control.visualFocus ? (control.down ? "#cce0ff" : "#f0f6ff") : (control.down ? "#d0d0d0" : "#e0e0e0"))
+        border.color: "#0066ff"
+        border.width: control.visualFocus ? 2 : 0
+    }
+    //! [background]
+}
diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri
index 9eeb2c1f..eecaccd4 100644
--- a/src/imports/controls/controls.pri
+++ b/src/imports/controls/controls.pri
@@ -36,6 +36,7 @@ QML_CONTROLS = \
     RadioDelegate.qml \
     RadioIndicator.qml \
     RangeSlider.qml \
+    RoundButton.qml \
     ScrollBar.qml \
     ScrollIndicator.qml \
     Slider.qml \
diff --git a/src/imports/controls/doc/images/qtquickcontrols2-roundbutton.png b/src/imports/controls/doc/images/qtquickcontrols2-roundbutton.png
new file mode 100644
index 00000000..9f1d44fc
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols2-roundbutton.png
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-roundbutton.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-roundbutton.qml
new file mode 100644
index 00000000..fa926302
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtquickcontrols2-roundbutton.qml
@@ -0,0 +1,36 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Controls 2.1
+
+//! [1]
+RoundButton {
+    text: "\u2713" // Unicode Character 'CHECK MARK'
+    onClicked: textArea.readOnly = true
+}
+//! [1]
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
index d98b70d1..3e804bd4 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
@@ -548,6 +548,12 @@
         \snippet qtquickcontrols2-rangeslider-custom.qml file
 
 
+    \section2 Customizing RoundButton
+
+        RoundButton can be customized in the same manner as
+        \l {Customizing Button}{Button}.
+
+
     \section2 Customizing ScrollBar
 
         ScrollBar consists of two visual items: \l {Control::background}{background}
diff --git a/src/imports/controls/material/RoundButton.qml b/src/imports/controls/material/RoundButton.qml
new file mode 100644
index 00000000..57f30e30
--- /dev/null
+++ b/src/imports/controls/material/RoundButton.qml
@@ -0,0 +1,115 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import QtQuick.Templates 2.1 as T
+import QtQuick.Controls.Material 2.1
+import QtQuick.Controls.Material.impl 2.1
+
+T.RoundButton {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    // external vertical padding is 6 (to increase touch area)
+    padding: 12
+
+    hoverEnabled: Qt.styleHints.useHoverEffects
+
+    Material.elevation: flat ? control.down || control.hovered ? 2 : 0
+                             : control.down ? 8 : 2
+    Material.background: flat ? "transparent" : undefined
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        color: !control.enabled ? control.Material.hintTextColor :
+            control.flat && control.highlighted ? control.Material.accentColor :
+            control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.primaryTextColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
+    background: Rectangle {
+        implicitWidth: 48
+        implicitHeight: 48
+
+        // external vertical padding is 6 (to increase touch area)
+        x: 6
+        y: 6
+        width: parent.width - 12
+        height: parent.height - 12
+        radius: control.radius
+        color: !control.enabled ? control.Material.buttonDisabledColor
+            : control.checked || control.highlighted ? control.Material.highlightedButtonColor : control.Material.buttonColor
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            radius: control.radius
+            visible: control.hovered || control.visualFocus
+            color: control.Material.rippleColor
+        }
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            radius: control.radius
+            visible: control.down
+            color: control.Material.rippleColor
+        }
+
+        Behavior on color {
+            ColorAnimation {
+                duration: 400
+            }
+        }
+
+        // The layer is disabled when the button color is transparent so that you can do
+        // Material.background: "transparent" and get a proper flat button without needing
+        // to set Material.elevation as well
+        layer.enabled: control.enabled && control.Material.buttonColor.a > 0
+        layer.effect: ElevationEffect {
+            elevation: control.Material.elevation
+        }
+    }
+}
diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri
index 437edeee..3170a695 100644
--- a/src/imports/controls/material/material.pri
+++ b/src/imports/controls/material/material.pri
@@ -42,6 +42,7 @@ QML_FILES += \
     $$PWD/RadioDelegate.qml \
     $$PWD/RadioIndicator.qml \
     $$PWD/RangeSlider.qml \
+    $$PWD/RoundButton.qml \
     $$PWD/RectangularGlow.qml \
     $$PWD/ScrollBar.qml \
     $$PWD/ScrollIndicator.qml \
diff --git a/src/imports/controls/qtquickcontrols2plugin.cpp b/src/imports/controls/qtquickcontrols2plugin.cpp
index 3cd3b8b2..8804fff2 100644
--- a/src/imports/controls/qtquickcontrols2plugin.cpp
+++ b/src/imports/controls/qtquickcontrols2plugin.cpp
@@ -144,6 +144,7 @@ void QtQuickControls2Plugin::registerTypes(const char *uri)
     qmlRegisterType(selector.select(QStringLiteral("Dialog.qml")), uri, 2, 1, "Dialog");
     qmlRegisterType(selector.select(QStringLiteral("DialogButtonBox.qml")), uri, 2, 1, "DialogButtonBox");
     qmlRegisterType(selector.select(QStringLiteral("MenuSeparator.qml")), uri, 2, 1, "MenuSeparator");
+    qmlRegisterType(selector.select(QStringLiteral("RoundButton.qml")), uri, 2, 1, "RoundButton");
     qmlRegisterType(selector.select(QStringLiteral("ToolSeparator.qml")), uri, 2, 1, "ToolSeparator");
 }
 
diff --git a/src/imports/controls/universal/RoundButton.qml b/src/imports/controls/universal/RoundButton.qml
new file mode 100644
index 00000000..61701099
--- /dev/null
+++ b/src/imports/controls/universal/RoundButton.qml
@@ -0,0 +1,87 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import QtQuick.Templates 2.1 as T
+import QtQuick.Controls.Universal 2.1
+
+T.RoundButton {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentItem.implicitHeight + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    hoverEnabled: Qt.styleHints.useHoverEffects
+
+    padding: 8
+
+    property bool useSystemFocusVisuals: true
+
+    contentItem: Text {
+        text: control.text
+        font: control.font
+        elide: Text.ElideRight
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        opacity: enabled ? 1.0 : 0.2
+        color: control.Universal.foreground
+    }
+
+    background: Rectangle {
+        implicitWidth: 32
+        implicitHeight: 32
+
+        radius: control.radius
+        visible: !control.flat || control.down || control.checked || control.highlighted
+        color: control.down ? control.Universal.baseMediumLowColor :
+               control.enabled && (control.highlighted || control.checked) ? control.Universal.accent :
+                                                                             control.Universal.baseLowColor
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            radius: control.radius
+            color: "transparent"
+            visible: control.hovered
+            border.width: 2 // ButtonBorderThemeThickness
+            border.color: control.Universal.baseMediumLowColor
+        }
+    }
+}
diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri
index 72edbc32..3697a2a6 100644
--- a/src/imports/controls/universal/universal.pri
+++ b/src/imports/controls/universal/universal.pri
@@ -26,6 +26,7 @@ QML_FILES += \
     $$PWD/RadioDelegate.qml \
     $$PWD/RadioIndicator.qml \
     $$PWD/RangeSlider.qml \
+    $$PWD/RoundButton.qml \
     $$PWD/ScrollBar.qml \
     $$PWD/ScrollIndicator.qml \
     $$PWD/Slider.qml \
diff --git a/src/imports/templates/qtquicktemplates2plugin.cpp b/src/imports/templates/qtquicktemplates2plugin.cpp
index 67a52d14..6624b019 100644
--- a/src/imports/templates/qtquicktemplates2plugin.cpp
+++ b/src/imports/templates/qtquicktemplates2plugin.cpp
@@ -66,6 +66,7 @@
 #include <QtQuickTemplates2/private/qquickradiobutton_p.h>
 #include <QtQuickTemplates2/private/qquickradiodelegate_p.h>
 #include <QtQuickTemplates2/private/qquickrangeslider_p.h>
+#include <QtQuickTemplates2/private/qquickroundbutton_p.h>
 #include <QtQuickTemplates2/private/qquickscrollbar_p.h>
 #include <QtQuickTemplates2/private/qquickscrollindicator_p.h>
 #include <QtQuickTemplates2/private/qquickslider_p.h>
@@ -186,6 +187,7 @@ void QtQuickTemplates2Plugin::registerTypes(const char *uri)
     qmlRegisterType<QQuickMenuSeparator>(uri, 2, 1, "MenuSeparator");
     qmlRegisterType<QQuickPopup, 1>(uri, 2, 1, "Popup");
     qmlRegisterType<QQuickRangeSlider, 1>(uri, 2, 1, "RangeSlider");
+    qmlRegisterType<QQuickRoundButton, 1>(uri, 2, 1, "RoundButton");
     qmlRegisterType<QQuickSlider, 1>(uri, 2, 1, "Slider");
     qmlRegisterType<QQuickSpinBox, 1>(uri, 2, 1, "SpinBox");
     qmlRegisterType<QQuickStackView, 1>(uri, 2, 1, "StackView");
diff --git a/src/quicktemplates2/qquickbutton.cpp b/src/quicktemplates2/qquickbutton.cpp
index a51e2210..19310713 100644
--- a/src/quicktemplates2/qquickbutton.cpp
+++ b/src/quicktemplates2/qquickbutton.cpp
@@ -35,7 +35,7 @@
 ****************************************************************************/
 
 #include "qquickbutton_p.h"
-#include "qquickabstractbutton_p_p.h"
+#include "qquickbutton_p_p.h"
 
 #include <QtGui/qpa/qplatformtheme.h>
 
@@ -91,17 +91,6 @@ QT_BEGIN_NAMESPACE
     \sa {Customizing Button}, {Button Controls}
 */
 
-class QQuickButtonPrivate : public QQuickAbstractButtonPrivate
-{
-    Q_DECLARE_PUBLIC(QQuickButton)
-
-public:
-    QQuickButtonPrivate();
-
-    bool flat;
-    bool highlighted;
-};
-
 QQuickButtonPrivate::QQuickButtonPrivate() :
     flat(false), highlighted(false)
 {
@@ -112,6 +101,11 @@ QQuickButton::QQuickButton(QQuickItem *parent) :
 {
 }
 
+QQuickButton::QQuickButton(QQuickButtonPrivate &dd, QQuickItem *parent) :
+    QQuickAbstractButton(dd, parent)
+{
+}
+
 /*!
     \qmlproperty bool QtQuick.Controls::Button::checkable
 
diff --git a/src/quicktemplates2/qquickbutton_p.h b/src/quicktemplates2/qquickbutton_p.h
index fafce150..95f94f10 100644
--- a/src/quicktemplates2/qquickbutton_p.h
+++ b/src/quicktemplates2/qquickbutton_p.h
@@ -78,6 +78,8 @@ Q_SIGNALS:
     void flatChanged();
 
 protected:
+    QQuickButton(QQuickButtonPrivate &dd, QQuickItem *parent);
+
     void checkableChange() override;
     void autoRepeatChange() override;
 
diff --git a/src/quicktemplates2/qquickbutton_p_p.h b/src/quicktemplates2/qquickbutton_p_p.h
new file mode 100644
index 00000000..86663e9e
--- /dev/null
+++ b/src/quicktemplates2/qquickbutton_p_p.h
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Templates 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef QQUICKBUTTON_P_P_H
+#define QQUICKBUTTON_P_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQuickTemplates2/private/qquickabstractbutton_p_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickButtonPrivate : public QQuickAbstractButtonPrivate
+{
+    Q_DECLARE_PUBLIC(QQuickButton)
+
+public:
+    QQuickButtonPrivate();
+
+    bool flat;
+    bool highlighted;
+};
+
+QT_END_NAMESPACE
+
+#endif // QQUICKBUTTON_P_P_H
diff --git a/src/quicktemplates2/qquickroundbutton.cpp b/src/quicktemplates2/qquickroundbutton.cpp
new file mode 100644
index 00000000..4169b269
--- /dev/null
+++ b/src/quicktemplates2/qquickroundbutton.cpp
@@ -0,0 +1,143 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Templates 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "qquickroundbutton_p.h"
+
+#include <QtQuickTemplates2/private/qquickbutton_p_p.h>
+
+QT_BEGIN_NAMESPACE
+
+/*!
+    \qmltype RoundButton
+    \inherits Button
+    \instantiates QQuickRoundButton
+    \inqmlmodule QtQuick.Controls
+    \since 5.8
+    \ingroup qtquickcontrols2-buttons
+    \brief A push-button control with rounded corners that can be clicked by the user.
+
+    \image qtquickcontrols2-roundbutton.png
+
+    RoundButton is identical to \l Button, except that it has a \l radius property
+    which allows the corners to be rounded without having to customize the
+    \l background.
+
+    \snippet qtquickcontrols2-roundbutton.qml 1
+
+    \sa {Customizing RoundButton}, {Button Controls}
+*/
+
+class QQuickRoundButtonPrivate : public QQuickButtonPrivate
+{
+    Q_DECLARE_PUBLIC(QQuickRoundButton)
+
+public:
+    QQuickRoundButtonPrivate();
+
+    qreal radius;
+    bool explicitRadius;
+
+    void setRadius(qreal newRadius = -1.0);
+};
+
+QQuickRoundButtonPrivate::QQuickRoundButtonPrivate() :
+    radius(0),
+    explicitRadius(false)
+{
+}
+
+void QQuickRoundButtonPrivate::setRadius(qreal newRadius)
+{
+    Q_Q(QQuickRoundButton);
+    const qreal oldRadius = radius;
+    if (newRadius < 0)
+        radius = qMax<qreal>(0, qMin(width, height) / 2);
+    else
+        radius = newRadius;
+
+    if (!qFuzzyCompare(radius, oldRadius))
+        emit q->radiusChanged();
+}
+
+QQuickRoundButton::QQuickRoundButton(QQuickItem *parent) :
+    QQuickButton(*(new QQuickRoundButtonPrivate), parent)
+{
+}
+
+/*!
+    \qmlproperty real QtQuick.Controls::RoundButton::radius
+
+    This property holds the radius of the button.
+
+    To create a relatively square button that has slightly rounded corners,
+    use a small value, such as \c 3.
+
+    To create a completely circular button (the default), use a value that is
+    equal to half of the width or height of the button, and make the button's
+    width and height identical.
+
+    To reset this property back to the default value, set its value to
+    \c undefined.
+*/
+qreal QQuickRoundButton::radius() const
+{
+    Q_D(const QQuickRoundButton);
+    return d->radius;
+}
+
+void QQuickRoundButton::setRadius(qreal radius)
+{
+    Q_D(QQuickRoundButton);
+    d->explicitRadius = true;
+    d->setRadius(radius);
+}
+
+void QQuickRoundButton::resetRadius()
+{
+    Q_D(QQuickRoundButton);
+    d->explicitRadius = false;
+    d->setRadius();
+}
+
+void QQuickRoundButton::geometryChanged(const QRectF &newGeometry, const QRectF &oldGeometry)
+{
+    Q_D(QQuickRoundButton);
+    QQuickControl::geometryChanged(newGeometry, oldGeometry);
+    if (!d->explicitRadius)
+        d->setRadius();
+}
+
+QT_END_NAMESPACE
diff --git a/src/quicktemplates2/qquickroundbutton_p.h b/src/quicktemplates2/qquickroundbutton_p.h
new file mode 100644
index 00000000..f308ddd3
--- /dev/null
+++ b/src/quicktemplates2/qquickroundbutton_p.h
@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Templates 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef QQUICKROUNDBUTTON_P_H
+#define QQUICKROUNDBUTTON_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtQuickTemplates2/private/qquickbutton_p.h>
+
+QT_BEGIN_NAMESPACE
+
+class QQuickRoundButtonPrivate;
+
+class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickRoundButton : public QQuickButton
+{
+    Q_OBJECT
+    Q_PROPERTY(qreal radius READ radius WRITE setRadius RESET resetRadius NOTIFY radiusChanged FINAL)
+
+public:
+    explicit QQuickRoundButton(QQuickItem *parent = nullptr);
+
+    qreal radius() const;
+    void setRadius(qreal radius);
+    void resetRadius();
+
+Q_SIGNALS:
+    void radiusChanged();
+
+protected:
+    void geometryChanged(const QRectF &newGeometry, const QRectF &oldGeometry) override;
+
+private:
+    Q_DISABLE_COPY(QQuickRoundButton)
+    Q_DECLARE_PRIVATE(QQuickRoundButton)
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QQuickRoundButton)
+
+#endif // QQUICKROUNDBUTTON_P_H
diff --git a/src/quicktemplates2/quicktemplates2.pri b/src/quicktemplates2/quicktemplates2.pri
index f5e95aea..686cbd52 100644
--- a/src/quicktemplates2/quicktemplates2.pri
+++ b/src/quicktemplates2/quicktemplates2.pri
@@ -6,6 +6,7 @@ HEADERS += \
     $$PWD/qquickapplicationwindow_p.h \
     $$PWD/qquickbusyindicator_p.h \
     $$PWD/qquickbutton_p.h \
+    $$PWD/qquickbutton_p_p.h \
     $$PWD/qquickbuttongroup_p.h \
     $$PWD/qquickcheckbox_p.h \
     $$PWD/qquickcheckdelegate_p.h \
@@ -44,6 +45,7 @@ HEADERS += \
     $$PWD/qquickradiobutton_p.h \
     $$PWD/qquickradiodelegate_p.h \
     $$PWD/qquickrangeslider_p.h \
+    $$PWD/qquickroundbutton_p.h \
     $$PWD/qquickscrollbar_p.h \
     $$PWD/qquickscrollindicator_p.h \
     $$PWD/qquickslider_p.h \
@@ -101,6 +103,7 @@ SOURCES += \
     $$PWD/qquickradiobutton.cpp \
     $$PWD/qquickradiodelegate.cpp \
     $$PWD/qquickrangeslider.cpp \
+    $$PWD/qquickroundbutton.cpp \
     $$PWD/qquickscrollbar.cpp \
     $$PWD/qquickscrollindicator.cpp \
     $$PWD/qquickslider.cpp \
diff --git a/tests/auto/controls/data/tst_roundbutton.qml b/tests/auto/controls/data/tst_roundbutton.qml
new file mode 100644
index 00000000..aa956776
--- /dev/null
+++ b/tests/auto/controls/data/tst_roundbutton.qml
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtTest 1.0
+import QtQuick.Controls 2.1
+
+TestCase {
+    id: testCase
+    width: 200
+    height: 200
+    visible: true
+    when: windowShown
+    name: "RoundButton"
+
+    Component {
+        id: roundButton
+        RoundButton { }
+    }
+
+    function test_radius() {
+        var control = roundButton.createObject(testCase);
+        verify(control);
+
+        var implicitRadius = control.radius;
+        compare(implicitRadius, Math.min(control.width, control.height) / 2);
+
+        control.radius = 10;
+        compare(control.radius, 10);
+
+        control.radius = undefined;
+        compare(control.radius, implicitRadius);
+
+        control.width = -1;
+        compare(control.radius, 0);
+
+        control.width = 10;
+        compare(control.radius, 5);
+
+        control.destroy();
+    }
+}
diff --git a/tests/manual/buttons/ButtonLoader.qml b/tests/manual/buttons/ButtonLoader.qml
new file mode 100644
index 00000000..8793d98f
--- /dev/null
+++ b/tests/manual/buttons/ButtonLoader.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the test suite of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.8
+import QtQuick.Controls 2.1
+
+Item {
+    id: root
+    implicitWidth: activeButton.implicitWidth
+    implicitHeight: activeButton.implicitHeight
+
+    property bool round: false
+
+    property string text
+    property bool flat
+    property bool hoverEnabled
+    property bool highlighted
+    property bool checked
+    property var down: undefined
+
+    property AbstractButton activeButton: round ? roundButton : button
+
+    Button {
+        id: button
+        visible: !round
+        text: root.text
+        flat: root.flat
+        hoverEnabled: root.hoverEnabled
+        highlighted: root.highlighted
+        checked: root.checked
+        down: root.down
+        enabled: root.enabled
+    }
+
+    RoundButton {
+        id: roundButton
+        visible: round
+        text: "\u2713"
+        flat: root.flat
+        hoverEnabled: root.hoverEnabled
+        highlighted: root.highlighted
+        checked: root.checked
+        down: root.down
+        enabled: root.enabled
+
+        Label {
+            text: root.text
+            font.pixelSize: roundButton.contentItem.font.pixelSize * 0.5
+            anchors.top: parent.bottom
+            anchors.topMargin: 2
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+}
diff --git a/tests/manual/buttons/buttons.pro b/tests/manual/buttons/buttons.pro
index d0a6eb28..2cb1c14c 100644
--- a/tests/manual/buttons/buttons.pro
+++ b/tests/manual/buttons/buttons.pro
@@ -3,4 +3,4 @@ TARGET = buttons
 QT += qml quickcontrols2
 
 SOURCES += buttons.cpp
-RESOURCES += buttons.qml
+RESOURCES += $$files(*.qml)
diff --git a/tests/manual/buttons/buttons.qml b/tests/manual/buttons/buttons.qml
index e1a393fd..b3aba775 100644
--- a/tests/manual/buttons/buttons.qml
+++ b/tests/manual/buttons/buttons.qml
@@ -62,6 +62,11 @@ ApplicationWindow {
                 text: "Hover"
                 checked: true
             }
+            CheckBox {
+                id: roundBox
+                text: "Round"
+                checked: false
+            }
         }
     }
 
@@ -105,25 +110,25 @@ ApplicationWindow {
                             spacing: 20
                             padding: 20
 
-                            Button { text: "Normal";   flat: modelData.flat; hoverEnabled: hoverBox.checked }
-                            Button { text: "Disabled"; flat: modelData.flat; hoverEnabled: hoverBox.checked; enabled: false }
-                            Button { text: "Down";     flat: modelData.flat; hoverEnabled: hoverBox.checked; down: true }
-                            Button { text: "Disabled"; flat: modelData.flat; hoverEnabled: hoverBox.checked; down: true; enabled: false }
-
-                            Button { text: "Checked";  flat: modelData.flat; hoverEnabled: hoverBox.checked; checked: true }
-                            Button { text: "Disabled"; flat: modelData.flat; hoverEnabled: hoverBox.checked; checked: true; enabled: false }
-                            Button { text: "Down";     flat: modelData.flat; hoverEnabled: hoverBox.checked; checked: true; down: true }
-                            Button { text: "Disabled"; flat: modelData.flat; hoverEnabled: hoverBox.checked; checked: true; down: true; enabled: false }
-
-                            Button { text: "Highlighted"; flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true }
-                            Button { text: "Disabled";    flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; enabled: false }
-                            Button { text: "Down";        flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; down: true }
-                            Button { text: "Disabled";    flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; down: true; enabled: false }
-
-                            Button { text: "Hi-checked"; flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; checked: true }
-                            Button { text: "Disabled";   flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; checked: true; enabled: false }
-                            Button { text: "Down";       flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; checked: true; down: true }
-                            Button { text: "Disabled";   flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; checked: true; down: true; enabled: false }
+                            ButtonLoader { text: "Normal";   flat: modelData.flat; hoverEnabled: hoverBox.checked; round: roundBox.checked }
+                            ButtonLoader { text: "Disabled"; flat: modelData.flat; hoverEnabled: hoverBox.checked; enabled: false; round: roundBox.checked }
+                            ButtonLoader { text: "Down";     flat: modelData.flat; hoverEnabled: hoverBox.checked; down: true; round: roundBox.checked }
+                            ButtonLoader { text: "Disabled"; flat: modelData.flat; hoverEnabled: hoverBox.checked; down: true; enabled: false; round: roundBox.checked }
+
+                            ButtonLoader { text: "Checked";  flat: modelData.flat; hoverEnabled: hoverBox.checked; checked: true; round: roundBox.checked }
+                            ButtonLoader { text: "Disabled"; flat: modelData.flat; hoverEnabled: hoverBox.checked; checked: true; enabled: false; round: roundBox.checked }
+                            ButtonLoader { text: "Down";     flat: modelData.flat; hoverEnabled: hoverBox.checked; checked: true; down: true; round: roundBox.checked }
+                            ButtonLoader { text: "Disabled"; flat: modelData.flat; hoverEnabled: hoverBox.checked; checked: true; down: true; enabled: false; round: roundBox.checked }
+
+                            ButtonLoader { text: "Highlighted"; flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; round: roundBox.checked }
+                            ButtonLoader { text: "Disabled";    flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; enabled: false; round: roundBox.checked }
+                            ButtonLoader { text: "Down";        flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; down: true; round: roundBox.checked }
+                            ButtonLoader { text: "Disabled";    flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; down: true; enabled: false; round: roundBox.checked }
+
+                            ButtonLoader { text: "Hi-checked"; flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; checked: true; round: roundBox.checked }
+                            ButtonLoader { text: "Disabled";   flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; checked: true; enabled: false; round: roundBox.checked }
+                            ButtonLoader { text: "Down";       flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; checked: true; down: true; round: roundBox.checked }
+                            ButtonLoader { text: "Disabled";   flat: modelData.flat; hoverEnabled: hoverBox.checked; highlighted: true; checked: true; down: true; enabled: false; round: roundBox.checked }
                         }
                     }
                 }
diff --git a/tests/manual/testbench/main.qml b/tests/manual/testbench/main.qml
index dd1a1de8..ea59d5b5 100644
--- a/tests/manual/testbench/main.qml
+++ b/tests/manual/testbench/main.qml
@@ -251,6 +251,108 @@ ApplicationWindow {
                 }
 
                 RowLayout {
+                    spacing: window.controlSpacing * 2
+
+                    Button {
+                        text: "Normal"
+                    }
+                    Button {
+                        text: "Pressed"
+                        down: true
+                    }
+                    Button {
+                        text: "Checked"
+                        checked: true
+                    }
+                    Button {
+                        text: "CH + PR"
+                        checked: true
+                        down: true
+                    }
+                    Button {
+                        text: "Disabled"
+                        enabled: false
+                    }
+                    Button {
+                        text: "CH + DIS"
+                        enabled: false
+                        checked: true
+                    }
+                }
+
+                RowLayout {
+                    spacing: window.controlSpacing * 2
+
+                    ColumnLayout {
+                        RoundButton {
+                            highlighted: true
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                        Label {
+                            text: "HI"
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                    }
+                    ColumnLayout {
+                        RoundButton {
+                            highlighted: true
+                            down: true
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                        Label {
+                            text: "HI + PR"
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                    }
+                    ColumnLayout {
+                        RoundButton {
+                            highlighted: true
+                            checked: true
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                        Label {
+                            text: "HI + CH"
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                    }
+                    ColumnLayout {
+                        RoundButton {
+                            highlighted: true
+                            down: true
+                            checked: true
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                        Label {
+                            text: "HI+CH+PR"
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                    }
+                    ColumnLayout {
+                        RoundButton {
+                            highlighted: true
+                            enabled: false
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                        Label {
+                            text: "HI + DIS"
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                    }
+                    ColumnLayout {
+                        RoundButton {
+                            highlighted: true
+                            enabled: false
+                            checked: true
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                        Label {
+                            text: "HI+CH+DIS"
+                            Layout.alignment: Qt.AlignHCenter
+                        }
+                    }
+                }
+
+                RowLayout {
                     CheckBox {
                         text: "Normal"
                     }