Added customizable height and width style options to root.

CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `component`: Allow font family and adaptive cards text color to be set via styleOptions, by [@a-b-r-o-w-n](https://github.com/a-b-r-o-w-n), in PR [#1670](https://github.com/Microsoft/BotFramework-WebChat/pull/1670)
 - `component`: Add fallback logic to browser which do not support `window.Intl`, by [@compulim](https://github.com/compulim), in PR [#1696](https://github.com/Microsoft/BotFramework-WebChat/pull/1696)
 - `*`: Added `username` back to activity, fixed [#1321](https://github.com/Microsoft/BotFramework-WebChat/issues/1321), by [@compulim](https://github.com/compulim), in PR [#1682](https://github.com/Microsoft/BotFramework-DirectLineJS/pull/1682)
+- `component`: Allow root component height & width customization  via `styleOptions.rootHeight` and `styleOptions.rootWidth`, by [@tonyanziano](https://github.com/tonyanziano), in PR [#1702](https://github.com/Microsoft/BotFramework-WebChat/pull/1702)
 
 ### Changed
 - Moved `botAvatarImage` and `userAvatarImage` to `styleOptions.botAvatarImage` and `styleOptions.userAvatarImage` respectively, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)

packages/component/src/Styles/StyleSet/Root.js

@@ -1,5 +1,11 @@
-export default function ({ backgroundColor }) {
+export default function ({
+  backgroundColor,
+  rootHeight,
+  rootWidth
+}) {
   return {
-    backgroundColor
+    backgroundColor,
+    height: rootHeight,
+    width: rootWidth
   };
 }

packages/component/src/Styles/defaultStyleSetOptions.js

@@ -40,6 +40,10 @@ const DEFAULT_OPTIONS = {
   bubbleMinWidth: 250, // min screen width = 300px, Edge requires 372px (https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/13621468/)
   bubbleTextColor: 'Black',
 
+  // Root
+  rootHeight: '100%',
+  rootWidth: '100%',
+
   // Send box
   hideSendBox: false,
   hideUploadButton: false,

samples/01.a.getting-started-full-bundle/README.md

@@ -89,7 +89,7 @@ Finally, add desired styling.
 + html, body { height: 100% }
 + body { margin: 0 }
 
-+ #webchat, #webchat > * {
++ #webchat {
 +   height: 100%;
 +   width: 100%;
 + }

samples/01.a.getting-started-full-bundle/index.html

@@ -12,8 +12,7 @@
       html, body { height: 100% }
       body { margin: 0 }
 
-      #webchat,
-      #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }