From a28be80b61fbfd241d6732ae607bc711731b5b58 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 9 Mar 2017 11:02:22 -0500
Subject: [PATCH] Move modal close button to shared component
---
src/components/close-button/close-button.css | 44 ++++++++++++++++++
src/components/close-button/close-button.jsx | 38 +++++++++++++++
.../{modal => close-button}/icon--close.svg | Bin
src/components/modal/modal.css | 33 +------------
src/components/modal/modal.jsx | 13 ++----
5 files changed, 88 insertions(+), 40 deletions(-)
create mode 100644 src/components/close-button/close-button.css
create mode 100644 src/components/close-button/close-button.jsx
rename src/components/{modal => close-button}/icon--close.svg (100%)
diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css
new file mode 100644
index 000000000..ef48624c4
--- /dev/null
+++ b/src/components/close-button/close-button.css
@@ -0,0 +1,44 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.close-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ color: gray;
+ background-color: $blue;
+
+ border-radius: 50%;
+ border-color: #dbdbdb;
+ border-style: solid;
+
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ cursor: pointer;
+ transition: all 0.15s ease-out; /* @todo: standardize with var */
+}
+
+.small {
+ width: 1rem;
+ height: 1rem;
+ border-width: 1px;
+}
+
+.large {
+ width: 2.75rem;
+ height: 2.75rem;
+ border-width: 2px;
+}
+
+.close-button:hover {
+ transform: scale(1.1, 1.1);
+}
+
+/* Same icon as Sprite Selector Add button, but rotated.
+ TODO: reuse?
+*/
+.close-icon {
+ transform-origin: 50%;
+ transform: rotate(45deg);
+ width: 40%;
+}
diff --git a/src/components/close-button/close-button.jsx b/src/components/close-button/close-button.jsx
new file mode 100644
index 000000000..7335dbd11
--- /dev/null
+++ b/src/components/close-button/close-button.jsx
@@ -0,0 +1,38 @@
+const React = require('react');
+const classNames = require('classnames');
+
+const styles = require('./close-button.css');
+const closeIcon = require('./icon--close.svg');
+
+const CloseButton = (props) => (
+ <div
+ className={classNames(
+ styles.closeButton,
+ props.className,
+ {
+ [styles.large]: props.size === CloseButton.SIZE_LARGE,
+ [styles.small]: props.size === CloseButton.SIZE_SMALL
+ }
+ )}
+ onClick={props.onClick}
+ >
+ <img
+ className={styles.closeIcon}
+ src={closeIcon}
+ />
+ </div>
+);
+
+CloseButton.SIZE_LARGE = 'large';
+CloseButton.SIZE_SMALL = 'small';
+
+CloseButton.propTypes = {
+ onClick: React.PropTypes.func,
+ size: React.PropTypes.oneOf([CloseButton.SIZE_LARGE, CloseButton.SIZE_SMALL])
+};
+
+CloseButton.defaultProps = {
+ size: CloseButton.SIZE_LARGE
+};
+
+module.exports = CloseButton
diff --git a/src/components/modal/icon--close.svg b/src/components/close-button/icon--close.svg
similarity index 100%
rename from src/components/modal/icon--close.svg
rename to src/components/close-button/icon--close.svg
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 46a51a191..dea04e1f4 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -33,38 +33,9 @@
background: $ui-pane-gray;
}
-.modal-close-button {
- display: flex;
+.close-button {
position: absolute;
- z-index: 2147483647;
- align-items: center;
- justify-content: center;
-
top: 1rem;
right: 1rem;
- width: 2.75rem !important;
- height: 2.75rem !important;
-
- color: gray;
- background-color: $blue;
-
- border-radius: 50% !important;
- border: 2px solid #dbdbdb;
-
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- cursor: pointer;
- transition: all 0.15s ease-out; /* @todo: standardize with var */
-}
-
-.modal-close-button:hover {
- transform: scale(1.1, 1.1);
-}
-
-/* Same icon as Sprite Selector Add button, but rotated.
- @todo: reuse?
-*/
-.close-icon {
- transform-origin: 50%;
- transform: rotate(45deg);
- width: 40%;
+ z-index: 2;
}
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index 51c5e353d..17537a892 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -2,9 +2,9 @@ const React = require('react');
const ReactModal = require('react-modal');
const Box = require('../box/box.jsx');
+const CloseButton = require('../close-button/close-button.jsx');
const styles = require('./modal.css');
-const closeIcon = require('./icon--close.svg');
class ModalComponent extends React.Component {
render () {
@@ -17,15 +17,10 @@ class ModalComponent extends React.Component {
ref={m => (this.modal = m)}
onRequestClose={this.props.onRequestClose}
>
- <div
- className={styles.modalCloseButton}
+ <CloseButton
+ className={styles.closeButton}
onClick={this.props.onRequestClose}
- >
- <img
- className={styles.closeIcon}
- src={closeIcon}
- />
- </div>
+ />
<Box
className={styles.modalChildren}
direction="column"
--
GitLab