Fix vertical spacing of ConnectivityStatus when empty (#1939)

* Fix 1934 - spacing of ConnectivityStatus component when empty * Update CHANGELOG.md * PR suggestion fixes
microsoft · Apr 30, 2019 · 299de61 · 299de61
1 parent 9648239
commit 299de61
Show file tree

Hide file tree

Showing 48 changed files with 16 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1789](https://github.com/Microsoft/BotFramework-WebChat/issues/1789). Focus send box after message is being sent, by [@corinagum](https://github.com/corinagum) in PR [#1915](https://github.com/Microsoft/BotFramework-WebChat/pull/1915)
 - Fix [#1920](https://github.com/Microsoft/BotFramework-WebChat/issues/1920). Added disabled property to send button, by [@tdurnford](https://github.com/tdurnford) in PR [#1922](https://github.com/Microsoft/BotFramework-WebChat/pull/1922)
 - Fix [#1525](https://github.com/Microsoft/BotFramework-WebChat/issues/1525). Add JavaScript error Offline UI, by [@corinagum](https://github.com/corinagum) in PR [#1927](https://github.com/Microsoft/BotFramework-WebChat/pull/1927)
+- Fix [#1934](https://github.com/Microsoft/BotFramework-WebChat/issues/1934). Fix spacing of empty ConnectivityStatus component, by [@corinagum](https://github.com/corinagum) in PR [#1939](https://github.com/Microsoft/BotFramework-WebChat/pull/1939)
 
 ### Changed
 - Deployment: Bumps to [`blobxfer@1.7.1`](https://github.com/azure/blobxfer/), by [@compulim](https://github.com/compulim), in PR [#1897](https://github.com/Microsoft/BotFramework-WebChat/pull/1897)

diff --git a/...__image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-break-all-1-snap.png b/...__image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-break-all-1-snap.png
diff --git a/..._image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-break-word-1-snap.png b/..._image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-break-word-1-snap.png
diff --git a/.../__image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-keep-all-1-snap.png b/.../__image_snapshots__/chrome-docker/basic-js-long-ur-ls-with-keep-all-1-snap.png
diff --git a/__tests__/__image_snapshots__/chrome-docker/basic-js-setup-1-snap.png b/__tests__/__image_snapshots__/chrome-docker/basic-js-setup-1-snap.png
diff --git a/...basic-js-unknown-activities-do-not-render-anything-in-the-transcript-1-snap.png b/...basic-js-unknown-activities-do-not-render-anything-in-the-transcript-1-snap.png
diff --git a/...shots__/chrome-docker/card-action-middleware-js-card-action-open-url-1-snap.png b/...shots__/chrome-docker/card-action-middleware-js-card-action-open-url-1-snap.png
diff --git a/...apshots__/chrome-docker/card-action-middleware-js-card-action-signin-1-snap.png b/...apshots__/chrome-docker/card-action-middleware-js-card-action-signin-1-snap.png
diff --git a/...chrome-docker/carousel-js-carousel-with-avatar-initials-1-attachment-1-snap.png b/...chrome-docker/carousel-js-carousel-with-avatar-initials-1-attachment-1-snap.png
diff --git a/...ousel-js-carousel-with-avatar-initials-1-attachment-with-wide-screen-1-snap.png b/...ousel-js-carousel-with-avatar-initials-1-attachment-with-wide-screen-1-snap.png
diff --git a/...hrome-docker/carousel-js-carousel-with-avatar-initials-2-attachments-1-snap.png b/...hrome-docker/carousel-js-carousel-with-avatar-initials-2-attachments-1-snap.png
diff --git a/...usel-js-carousel-with-avatar-initials-2-attachments-with-wide-screen-1-snap.png b/...usel-js-carousel-with-avatar-initials-2-attachments-with-wide-screen-1-snap.png
diff --git a/.../carousel-js-carousel-with-avatar-initials-4-attachments-and-message-1-snap.png b/.../carousel-js-carousel-with-avatar-initials-4-attachments-and-message-1-snap.png
diff --git a/.../carousel-js-carousel-with-avatar-initials-4-attachments-and-message-2-snap.png b/.../carousel-js-carousel-with-avatar-initials-4-attachments-and-message-2-snap.png
diff --git a/...rousel-js-carousel-with-avatar-initials-4-attachments-and-no-message-1-snap.png b/...rousel-js-carousel-with-avatar-initials-4-attachments-and-no-message-1-snap.png
diff --git a/...rousel-js-carousel-with-avatar-initials-4-attachments-and-no-message-2-snap.png b/...rousel-js-carousel-with-avatar-initials-4-attachments-and-no-message-2-snap.png
diff --git a/...ome-docker/carousel-js-carousel-without-avatar-initials-1-attachment-1-snap.png b/...ome-docker/carousel-js-carousel-without-avatar-initials-1-attachment-1-snap.png
diff --git a/...el-js-carousel-without-avatar-initials-1-attachment-with-wide-screen-1-snap.png b/...el-js-carousel-without-avatar-initials-1-attachment-with-wide-screen-1-snap.png
diff --git a/...me-docker/carousel-js-carousel-without-avatar-initials-2-attachments-1-snap.png b/...me-docker/carousel-js-carousel-without-avatar-initials-2-attachments-1-snap.png
diff --git a/...l-js-carousel-without-avatar-initials-2-attachments-with-wide-screen-1-snap.png b/...l-js-carousel-without-avatar-initials-2-attachments-with-wide-screen-1-snap.png
diff --git a/...rousel-js-carousel-without-avatar-initials-4-attachments-and-message-1-snap.png b/...rousel-js-carousel-without-avatar-initials-4-attachments-and-message-1-snap.png
diff --git a/...rousel-js-carousel-without-avatar-initials-4-attachments-and-message-2-snap.png b/...rousel-js-carousel-without-avatar-initials-4-attachments-and-message-2-snap.png
diff --git a/...sel-js-carousel-without-avatar-initials-4-attachments-and-no-message-1-snap.png b/...sel-js-carousel-without-avatar-initials-4-attachments-and-no-message-1-snap.png
diff --git a/...sel-js-carousel-without-avatar-initials-4-attachments-and-no-message-2-snap.png b/...sel-js-carousel-without-avatar-initials-4-attachments-and-no-message-2-snap.png
diff --git a/...__/__image_snapshots__/chrome-docker/input-js-textarea-send-on-enter-1-snap.png b/...__/__image_snapshots__/chrome-docker/input-js-textarea-send-on-enter-1-snap.png
diff --git a/...i-should-display-send-failed-retry-when-activity-is-not-able-to-send-1-snap.png b/...i-should-display-send-failed-retry-when-activity-is-not-able-to-send-1-snap.png
diff --git a/...display-send-failed-retry-when-activity-is-sent-but-not-acknowledged-1-snap.png b/...display-send-failed-retry-when-activity-is-sent-but-not-acknowledged-1-snap.png
diff --git a/...-show-taking-longer-than-usual-to-connect-ui-when-connection-is-slow-1-snap.png b/...-show-taking-longer-than-usual-to-connect-ui-when-connection-is-slow-1-snap.png
diff --git a/...how-taking-longer-than-usual-to-connect-ui-when-reconnection-is-slow-1-snap.png b/...how-taking-longer-than-usual-to-connect-ui-when-reconnection-is-slow-1-snap.png
diff --git a/...e-ui-should-show-unable-to-connect-ui-when-credentials-are-incorrect-1-snap.png b/...e-ui-should-show-unable-to-connect-ui-when-credentials-are-incorrect-1-snap.png
diff --git a/...-docker/send-box-js-should-focus-send-box-when-message-is-being-sent-1-snap.png b/...-docker/send-box-js-should-focus-send-box-when-message-is-being-sent-1-snap.png
diff --git a/..._/chrome-docker/stacked-js-stacked-with-avatar-initials-1-attachment-1-snap.png b/..._/chrome-docker/stacked-js-stacked-with-avatar-initials-1-attachment-1-snap.png
diff --git a/...tacked-js-stacked-with-avatar-initials-1-attachment-with-wide-screen-1-snap.png b/...tacked-js-stacked-with-avatar-initials-1-attachment-with-wide-screen-1-snap.png
diff --git a/.../chrome-docker/stacked-js-stacked-with-avatar-initials-4-attachments-1-snap.png b/.../chrome-docker/stacked-js-stacked-with-avatar-initials-4-attachments-1-snap.png
diff --git a/...hrome-docker/stacked-js-stacked-without-avatar-initials-1-attachment-1-snap.png b/...hrome-docker/stacked-js-stacked-without-avatar-initials-1-attachment-1-snap.png
diff --git a/...ked-js-stacked-without-avatar-initials-1-attachment-with-wide-screen-1-snap.png b/...ked-js-stacked-without-avatar-initials-1-attachment-with-wide-screen-1-snap.png
diff --git a/...rome-docker/stacked-js-stacked-without-avatar-initials-4-attachments-1-snap.png b/...rome-docker/stacked-js-stacked-without-avatar-initials-4-attachments-1-snap.png
diff --git a/...-command-should-not-show-suggested-actions-not-destined-for-the-user-1-snap.png b/...-command-should-not-show-suggested-actions-not-destined-for-the-user-1-snap.png
diff --git a/...how-correctly-formatted-buttons-when-suggested-actions-are-displayed-1-snap.png b/...how-correctly-formatted-buttons-when-suggested-actions-are-displayed-1-snap.png
diff --git a/...ommand-should-show-response-from-bot-and-no-text-from-user-on-imback-1-snap.png b/...ommand-should-show-response-from-bot-and-no-text-from-user-on-imback-1-snap.png
diff --git a/...d-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png b/...d-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png
diff --git a/...mand-should-show-response-from-bot-and-no-text-from-user-on-postback-1-snap.png b/...mand-should-show-response-from-bot-and-no-text-from-user-on-postback-1-snap.png
diff --git a/...mand-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png b/...mand-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png
diff --git a/...command-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png b/...command-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png
diff --git a/...-suggested-actions-command-should-show-suggested-actions-with-images-1-snap.png b/...-suggested-actions-command-should-show-suggested-actions-with-images-1-snap.png
diff --git a/...ted-actions-command-should-show-suggested-actions-with-larger-images-1-snap.png b/...ted-actions-command-should-show-suggested-actions-with-larger-images-1-snap.png
diff --git a/...mage_snapshots__/chrome-docker/username-js-send-username-in-activity-1-snap.png b/...mage_snapshots__/chrome-docker/username-js-send-username-in-activity-1-snap.png
diff --git a/packages/component/src/SendBox/ConnectivityStatus.js b/packages/component/src/SendBox/ConnectivityStatus.js
@@ -55,51 +55,39 @@ export default connectConnectivityStatus(
   ({ connectivityStatus, language, styleSet }) =>
     <div
       aria-live="polite"
-      className={
-        classNames({
-          [styleSet.errorNotification]:
-            connectivityStatus === 'error'
-            || connectivityStatus === 'notconnected'
-            || connectivityStatus === 'sagaerror',
-          [styleSet.warningNotification]:
-            connectivityStatus === 'connectingslow',
-          [styleSet.connectivityNotification]:
-            connectivityStatus === 'uninitialized'
-            || connectivityStatus === 'connected'
-            || connectivityStatus === 'reconnected'
-            || connectivityStatus === 'reconnecting'
-        })
-      }
       role="status"
     >
       <DebouncedConnectivityStatus
-        interval={ (connectivityStatus === 'uninitialized' || connectivityStatus === 'error') ? 0 : 400 }>
+        interval={ (connectivityStatus === 'uninitialized' || connectivityStatus === 'error') ? 0 : 400 }
+      >
         { () =>
           connectivityStatus === 'connectingslow' ?
-            <React.Fragment>
+            <div className={ styleSet.warningNotification }>
               <WarningNotificationIcon />
               { localize('SLOW_CONNECTION_NOTIFICATION', language) }
-            </React.Fragment>
+            </div>
           : (connectivityStatus === 'error' || connectivityStatus === 'notconnected') ?
-            <React.Fragment>
+            <div className={ styleSet.errorNotification }>
               <ErrorNotificationIcon />
               { localize('FAILED_CONNECTION_NOTIFICATION', language) }
-            </React.Fragment>
+            </div>
           : connectivityStatus === 'uninitialized' ?
-            <React.Fragment>
+            <div className={ styleSet.connectivityNotification }>
               <SpinnerAnimation />
               { localize('INITIAL_CONNECTION_NOTIFICATION', language) }
-            </React.Fragment>
+            </div>
           : connectivityStatus === 'reconnecting' ?
-            <React.Fragment>
+            <div className={ styleSet.connectivityNotification }>
               <SpinnerAnimation />
               { localize('INTERRUPTED_CONNECTION_NOTIFICATION', language) }
-            </React.Fragment>
-          : connectivityStatus === 'sagaerror' &&
-            <React.Fragment>
+            </div>
+          : connectivityStatus === 'sagaerror' ?
+            <div className={ styleSet.errorNotification }>
               <ErrorNotificationIcon />
               { localize('RENDER_ERROR_NOTIFICATION', language) }
-            </React.Fragment>
+            </div>
+          : connectivityStatus === 'reconnected' || connectivityStatus === 'connected' &&
+            false
         }
       </DebouncedConnectivityStatus>
     </div>