Fix error message component

the-deep · May 3, 2019 · 39db702 · 39db702
1 parent 632f113
commit 39db702
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -109,7 +109,7 @@
         "@babel/polyfill": "^7.2.5",
         "@timilsinabishal/react-components": "https://github.com/the-deep/react-components",
         "@togglecorp/faram": "^1.0.0",
-        "@togglecorp/fujs": "^1.6.0",
+        "@togglecorp/fujs": "^1.6.1",
         "@togglecorp/ravl": "^1.2.0",
         "@togglecorp/react-rest-request": "1.3.1",
         "body-parser": "^1.18.3",

diff --git a/src/components/error/ErrorMessage/index.js b/src/components/error/ErrorMessage/index.js
@@ -7,15 +7,23 @@ import Message from '#rscv/Message';
 import { handleException, handleReport } from '#config/sentry';
 
 import Cloak from '#components/general/Cloak';
+import _cs from '#cs';
+
 import styles from './styles.scss';
 
 const propTypes = {
     errorText: PropTypes.string.isRequired,
     reportButtonText: PropTypes.string.isRequired,
+    className: PropTypes.string,
+};
+
+const defaultProps = {
+    className: '',
 };
 
 export default class ErrorMessage extends React.PureComponent {
     static propTypes = propTypes;
+    static defaultProps = defaultProps;
 
     static handleException = handleException;
     static shouldHideReport = ({ isDevMode }) => isDevMode;
@@ -24,23 +32,26 @@ export default class ErrorMessage extends React.PureComponent {
         const {
             errorText,
             reportButtonText,
+            className,
         } = this.props;
 
         return (
-            <Message className={styles.messageContainer}>
-                { errorText }
-                <Cloak
-                    hide={ErrorMessage.shouldHideReport}
-                    render={
-                        <PrimaryButton
-                            onClick={handleReport}
-                            className={styles.button}
-                        >
-                            {reportButtonText}
-                        </PrimaryButton>
-                    }
-                />
-            </Message>
+            <div className={_cs(styles.messageContainer, className)}>
+                <Message>
+                    { errorText }
+                    <Cloak
+                        hide={ErrorMessage.shouldHideReport}
+                        render={
+                            <PrimaryButton
+                                onClick={handleReport}
+                                className={styles.button}
+                            >
+                                {reportButtonText}
+                            </PrimaryButton>
+                        }
+                    />
+                </Message>
+            </div>
         );
     }
 }
diff --git a/src/components/error/ErrorMessage/styles.scss b/src/components/error/ErrorMessage/styles.scss
@@ -1,9 +1,9 @@
 @import '~base-scss/base';
 
 .message-container {
-    display: flex;
-    flex-direction: column;
-    color: $color-danger;
+    >div {
+        color: $color-danger;
+    }
 
     .button {
         margin-top: $spacing-medium;