Fix vertical spacing of ConnectivityStatus when empty (#1939)

* Fix 1934 - spacing of ConnectivityStatus component when empty

* Update CHANGELOG.md

* PR suggestion fixes

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 [`[email protected]`](https://github.com/azure/blobxfer/), by [@compulim](https://github.com/compulim), in PR [#1897](https://github.com/Microsoft/BotFramework-WebChat/pull/1897)

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>