Honoring className prop (#3300)

compulim · web-flow · commit 415cee877045 · 2020-07-13T05:09:12.000-07:00
* Honoring className prop

* Update entry

* Add snapshot
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -40,6 +40,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  Remove `tabindex="-1"` from Adaptive Cards container
    -  Hide activities of type `invoke`
 -  Fixes [#3294](https://github.com/microsoft/BotFramework-WebChat/issues/3294). Fix blank screen on missing middlewares, by [@compulim](https://github.com/compulim) in PR [#3295](https://github.com/microsoft/BotFramework-WebChat/pull/3295)
+-  Fixes [#3297](https://github.com/microsoft/BotFramework-WebChat/issues/3297). Fix `className` prop is not honored in `<ReactWebChat>`, by [@compulim](https://github.com/compulim) in PR [#3300](https://github.com/microsoft/BotFramework-WebChat/pull/3300)
 
 ### Samples
 
diff --git a/__tests__/__image_snapshots__/html/simple-root-class-name-js-simple-should-apply-class-name-prop-1-snap.png b/__tests__/__image_snapshots__/html/simple-root-class-name-js-simple-should-apply-class-name-prop-1-snap.png
diff --git a/__tests__/html/simple.rootClassName.html b/__tests__/html/simple.rootClassName.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <style type="text/css">
+      .app__webchat {
+        background-color: palegoldenrod;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const { conditions, createStore, expect, host, pageObjects, timeouts, token } = window.WebChatTest;
+
+      (async function() {
+        window.WebChat.renderWebChat(
+          {
+            className: 'app__webchat',
+            directLine: window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() }),
+            store: createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/simple.rootClassName.js b/__tests__/html/simple.rootClassName.js
@@ -0,0 +1,7 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('simple', () => {
+  test('should apply "className" prop.', () => runHTMLTest('simple.rootClassName.html'));
+});
diff --git a/packages/component/src/BasicWebChat.js b/packages/component/src/BasicWebChat.js
@@ -10,7 +10,6 @@ import BasicConnectivityStatus from './BasicConnectivityStatus';
 import BasicSendBox from './BasicSendBox';
 import BasicToaster from './BasicToaster';
 import BasicTranscript from './BasicTranscript';
-import Composer from './Composer';
 import TypeFocusSinkBox from './Utils/TypeFocusSink';
 import useDisabled from './hooks/useDisabled';
 import useSendBoxFocusRef from './hooks/internal/useSendBoxFocusRef';
@@ -65,11 +64,9 @@ const BasicWebChat = ({ className }) => {
 export default BasicWebChat;
 
 BasicWebChat.defaultProps = {
-  ...Composer.defaultProps,
   className: ''
 };
 
 BasicWebChat.propTypes = {
-  ...Composer.propTypes,
   className: PropTypes.string
 };
diff --git a/packages/component/src/ReactWebChat.js b/packages/component/src/ReactWebChat.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import BasicWebChat from './BasicWebChat';
@@ -11,18 +12,20 @@ import Composer from './Composer';
 // - They can run hooks outside of activity/attachment middleware
 //   - They will put <Composer> as very top of their page, and allow buttons on their existing page to send message to bot
 
-const ReactWebChat = props => (
-  <Composer {...props}>
-    <BasicWebChat />
+const ReactWebChat = ({ className, ...composerProps }) => (
+  <Composer {...composerProps}>
+    <BasicWebChat className={className} />
   </Composer>
 );
 
 export default ReactWebChat;
 
 ReactWebChat.defaultProps = {
+  className: undefined,
   ...Composer.defaultProps
 };
 
 ReactWebChat.propTypes = {
+  className: PropTypes.string,
   ...Composer.propTypes
 };
