[Hotfixes] - Verification messages animation and modal (#437)

* hotfixes * update snapshot * udpate default transitiongroup children
curology · Oct 22, 2020 · 7e1227e · 7e1227e
1 parent 84f9e62
commit 7e1227e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 34 deletions.
diff --git a/src/shared-components/field/__snapshots__/test.tsx.snap b/src/shared-components/field/__snapshots__/test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Field /> UI Snapshot renders with default props 1`] = `
-.emotion-4 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -12,11 +12,11 @@ exports[`<Field /> UI Snapshot renders with default props 1`] = `
   margin-bottom: 22px;
 }
 
-.emotion-2 {
+.emotion-4 {
   position: relative;
 }
 
-.emotion-2 svg.radiance-field-input-icon {
+.emotion-4 svg.radiance-field-input-icon {
   opacity: 0;
   position: absolute;
   top: 20px;
@@ -82,11 +82,16 @@ exports[`<Field /> UI Snapshot renders with default props 1`] = `
   box-shadow: none;
 }
 
+.emotion-2 {
+  list-style-type: none;
+  margin: 0;
+}
+
 <div
-  className="emotion-4 emotion-5"
+  className="emotion-6 emotion-7"
 >
   <div
-    className="emotion-2 emotion-3"
+    className="emotion-4 emotion-5"
   >
     <svg
       className="radiance-field-input-icon"
@@ -96,6 +101,9 @@ exports[`<Field /> UI Snapshot renders with default props 1`] = `
       className="emotion-0 emotion-1"
       disabled={false}
     />
+    <ul
+      className="emotion-2 emotion-3"
+    />
   </div>
 </div>
 `;
@@ -169,6 +177,11 @@ exports[`<Field /> UI Snapshot renders with errorMessage, hintMessage and hideMe
   box-shadow: none;
 }
 
+.emotion-6 {
+  list-style-type: none;
+  margin: 0;
+}
+
 .emotion-8 {
   position: relative;
 }
@@ -209,11 +222,6 @@ exports[`<Field /> UI Snapshot renders with errorMessage, hintMessage and hideMe
   max-height: 0;
 }
 
-.emotion-6 {
-  list-style-type: none;
-  margin: 0;
-}
-
 .emotion-4 {
   color: #706D87;
   font-size: 0.875rem;
@@ -268,7 +276,7 @@ exports[`<Field /> UI Snapshot renders with errorMessage, hintMessage and hideMe
 `;
 
 exports[`<Field /> UI Snapshot renders with label and labelFor props 1`] = `
-.emotion-6 {
+.emotion-8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -279,11 +287,11 @@ exports[`<Field /> UI Snapshot renders with label and labelFor props 1`] = `
   margin-bottom: 22px;
 }
 
-.emotion-4 {
+.emotion-6 {
   position: relative;
 }
 
-.emotion-4 svg.radiance-field-input-icon {
+.emotion-6 svg.radiance-field-input-icon {
   opacity: 0;
   position: absolute;
   top: 20px;
@@ -349,14 +357,19 @@ exports[`<Field /> UI Snapshot renders with label and labelFor props 1`] = `
   box-shadow: none;
 }
 
+.emotion-4 {
+  list-style-type: none;
+  margin: 0;
+}
+
 .emotion-0 {
   color: #524D6E;
   font-size: 0.75rem;
   line-height: 1.67;
 }
 
 <div
-  className="emotion-6 emotion-7"
+  className="emotion-8 emotion-9"
 >
   <label
     className="emotion-0 emotion-1"
@@ -366,7 +379,7 @@ exports[`<Field /> UI Snapshot renders with label and labelFor props 1`] = `
     Test Label
   </label>
   <div
-    className="emotion-4 emotion-5"
+    className="emotion-6 emotion-7"
   >
     <svg
       className="radiance-field-input-icon"
@@ -376,6 +389,9 @@ exports[`<Field /> UI Snapshot renders with label and labelFor props 1`] = `
       className="emotion-2 emotion-3"
       disabled={false}
     />
+    <ul
+      className="emotion-4 emotion-5"
+    />
   </div>
 </div>
 `;
diff --git a/src/shared-components/immersiveModal/index.tsx b/src/shared-components/immersiveModal/index.tsx
@@ -106,6 +106,10 @@ export const ImmersiveModal = ({
   }, 100);
 
   const handleCloseIntent = () => {
+    if (isClosing) {
+      return;
+    }
+
     setIsClosing(true);
     setShowMobileHeaderBar(false);
     setTimeout(onClose, 450);

diff --git a/src/shared-components/verificationMessages/index.tsx b/src/shared-components/verificationMessages/index.tsx
@@ -38,28 +38,29 @@ export const VerificationMessages = ({
   type = 'error',
 }: VerificationMessagesProps) => {
   const messageKeys = Object.keys(messages);
-
-  if (messageKeys.length === 0) {
-    return null;
-  }
+  const showMessages = messageKeys.length > 0;
 
   return (
     <TransitionGroup component={centered ? CenteredMessageList : MessageList}>
-      {messageKeys
-        .filter((key) => {
-          const message = messages[key];
-          if (!Array.isArray(message)) {
-            return true;
-          }
-          return message.length > 0;
-        })
-        .map((key) => (
-          <HelperTransition key={key}>
-            <MessageItem type={type}>
-              {formatMessage(messages[key])}
-            </MessageItem>
-          </HelperTransition>
-        ))}
+      {showMessages ? (
+        messageKeys
+          .filter((key) => {
+            const message = messages[key];
+            if (!Array.isArray(message)) {
+              return true;
+            }
+            return message.length > 0;
+          })
+          .map((key) => (
+            <HelperTransition key={key}>
+              <MessageItem type={type}>
+                {formatMessage(messages[key])}
+              </MessageItem>
+            </HelperTransition>
+          ))
+      ) : (
+        <React.Fragment />
+      )}
     </TransitionGroup>
   );
 };