From b278531f2fbabfdee31bd46434f30f9e462e56ea Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 14 Nov 2019 16:58:07 +0100
Subject: [PATCH] add IconButton as in design

---
 res/css/_components.scss                    |  1 +
 res/css/views/elements/_IconButton.scss     | 55 +++++++++++++++++++++
 res/img/feather-customised/edit.svg         |  4 ++
 src/components/views/elements/IconButton.js | 34 +++++++++++++
 4 files changed, 94 insertions(+)
 create mode 100644 res/css/views/elements/_IconButton.scss
 create mode 100644 res/img/feather-customised/edit.svg
 create mode 100644 src/components/views/elements/IconButton.js

diff --git a/res/css/_components.scss b/res/css/_components.scss
index c8ea237dcd..40a2c576d0 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -90,6 +90,7 @@
 @import "./views/elements/_ErrorBoundary.scss";
 @import "./views/elements/_EventListSummary.scss";
 @import "./views/elements/_Field.scss";
+@import "./views/elements/_IconButton.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_InteractiveTooltip.scss";
diff --git a/res/css/views/elements/_IconButton.scss b/res/css/views/elements/_IconButton.scss
new file mode 100644
index 0000000000..d8ebbeb65e
--- /dev/null
+++ b/res/css/views/elements/_IconButton.scss
@@ -0,0 +1,55 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_IconButton {
+    width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    background-color: $accent-bg-color;
+    // don't shrink or grow if in a flex container
+    flex: 0 0 auto;
+
+    &.mx_AccessibleButton_disabled {
+        background-color: none;
+
+        &::before {
+            background-color: lightgrey;
+        }
+    }
+
+    &:hover {
+        opacity: 90%;
+    }
+
+    &::before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 55%;
+        background-color: $accent-color;
+    }
+
+    &.mx_IconButton_icon_check::before {
+        mask-image: url('$(res)/img/feather-customised/check.svg');
+    }
+
+    &.mx_IconButton_icon_edit::before {
+        mask-image: url('$(res)/img/feather-customised/edit.svg');
+    }
+}
diff --git a/res/img/feather-customised/edit.svg b/res/img/feather-customised/edit.svg
new file mode 100644
index 0000000000..f511aa1477
--- /dev/null
+++ b/res/img/feather-customised/edit.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2L18 6L7 17H3V13L14 2V2Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 22H21" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/views/elements/IconButton.js b/src/components/views/elements/IconButton.js
new file mode 100644
index 0000000000..9f5bf77426
--- /dev/null
+++ b/src/components/views/elements/IconButton.js
@@ -0,0 +1,34 @@
+/*
+ Copyright 2016 Jani Mustonen
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import AccessibleButton from "./AccessibleButton";
+
+export default function IconButton(props) {
+    const {icon, className, ...restProps} = props;
+
+    let newClassName = (className || "") + " mx_IconButton";
+    newClassName = newClassName + " mx_IconButton_icon_" + icon;
+
+    const allProps = Object.assign({}, restProps, {className: newClassName});
+
+    return React.createElement(AccessibleButton, allProps);
+}
+
+IconButton.propTypes = Object.assign({
+    icon: PropTypes.string,
+}, AccessibleButton.propTypes);