Fixed sendBox input/textarea background color issue (#2111)

* Fixed sendBox input/textarea background color issue * Updated CHANGELOG.md * Removed changes to sample
microsoft · Jun 23, 2019 · 4d79436 · 4d79436
1 parent f1f5185
commit 4d79436
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -60,6 +60,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#2001](https://github.com/Microsoft/BotFramework-WebChat/issues/2001). Strip Markdown from ARIA labels, so screen readers do not speak Markdown in text, by [@corinagum](https://github.com/corinagum) in PR [#2096](https://github.com/Microsoft/BotFramework-WebChat/pull/2096)
 -  Fix [#1926](https://github.com/microsoft/BotFramework-WebChat/issues/1926). Fixed scroll stickiness issue when submitting an Adaptive Card form with suggested actions opened, by [@compulim](https://github.com/compulim) in PR [#2107](https://github.com/microsoft/BotFramework-WebChat/pull/2107)
 -  Fix [#2106](https://github.com/Microsoft/BotFramework-WebChat/issues/2016). Fix AdaptiveCardHostConfig warning associated with the CommonCard component, by [@tdurnford](https://github.com/tdurnford) in PR [#2108](https://github.com/Microsoft/BotFramework-WebChat/pull/2108)
+-  Fix [#2110](https://github.com/Microsoft/BotFramework-WebChat/issues/2110). Fixed sendBox input/textarea background color issue, by [@tdurnford](https://github.com/johndoe) in PR [#2111](https://github.com/Microsoft/BotFramework-WebChat/pull/2111)
 
 ### Samples
 

diff --git a/..._snapshots__/chrome-docker/input-js-text-area-input-background-color-1-snap.png b/..._snapshots__/chrome-docker/input-js-text-area-input-background-color-1-snap.png
diff --git a/...e_snapshots__/chrome-docker/input-js-text-box-input-background-color-1-snap.png b/...e_snapshots__/chrome-docker/input-js-text-box-input-background-color-1-snap.png
diff --git a/__tests__/input.js b/__tests__/input.js
@@ -4,6 +4,7 @@ import { imageSnapshotOptions, timeouts } from './constants.json';
 
 import allOutgoingActivitiesSent from './setup/conditions/allOutgoingActivitiesSent';
 import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown.js';
+import uiConnected from './setup/conditions/uiConnected';
 
 // selenium-webdriver API doc:
 // https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
@@ -113,3 +114,42 @@ test('textarea long text', async () => {
 
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
+
+test('text box input background color', async () => {
+  const props = {
+    styleOptions: {
+      sendBoxBackground: '#0063B1',
+      sendBoxTextColor: 'White',
+      sendBoxButtonColor: 'White',
+      sendBoxPlaceholderColor: 'White'
+    }
+  };
+
+  const { driver } = await setupWebDriver({ props });
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('text area input background color', async () => {
+  const props = {
+    styleOptions: {
+      sendBoxBackground: '#0063B1',
+      sendBoxTextColor: 'White',
+      sendBoxButtonColor: 'White',
+      sendBoxPlaceholderColor: 'White',
+      sendBoxTextWrap: true
+    }
+  };
+
+  const { driver } = await setupWebDriver({ props });
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
diff --git a/packages/component/src/Styles/StyleSet/SendBoxTextArea.js b/packages/component/src/Styles/StyleSet/SendBoxTextArea.js
@@ -1,7 +1,9 @@
 export default function createSendBoxTextAreaStyle({
   paddingRegular,
   primaryFont,
+  sendBoxBackground,
   sendBoxMaxHeight,
+  sendBoxPlaceholderColor,
   sendBoxTextColor
 }) {
   return {
@@ -33,6 +35,7 @@ export default function createSendBoxTextAreaStyle({
       },
 
       '& > textarea': {
+        backgroundColor: sendBoxBackground,
         border: 0,
         color: 'inherit',
         fontFamily: 'inherit',
@@ -45,7 +48,11 @@ export default function createSendBoxTextAreaStyle({
         resize: 'none',
         top: 0,
         width: '100%',
-        wordBreak: 'break-word'
+        wordBreak: 'break-word',
+
+        '&::placeholder': {
+          color: sendBoxPlaceholderColor
+        }
       }
     }
   };

diff --git a/packages/component/src/Styles/StyleSet/SendBoxTextBox.js b/packages/component/src/Styles/StyleSet/SendBoxTextBox.js
@@ -1,16 +1,26 @@
-export default function createSendBoxTextBoxStyle({ primaryFont, sendBoxTextColor }) {
+export default function createSendBoxTextBoxStyle({
+  primaryFont,
+  sendBoxBackground,
+  sendBoxPlaceholderColor,
+  sendBoxTextColor
+}) {
   return {
     alignItems: 'center',
     fontFamily: primaryFont,
 
     '& > input': {
+      backgroundColor: sendBoxBackground,
       border: 0,
       color: sendBoxTextColor,
       fontFamily: 'inherit',
       fontSize: 'inherit',
       height: '100%',
       outline: 0,
-      padding: 0
+      padding: 0,
+
+      '&::placeholder': {
+        color: sendBoxPlaceholderColor
+      }
     }
   };
 }
diff --git a/packages/component/src/Styles/defaultStyleOptions.js b/packages/component/src/Styles/defaultStyleOptions.js
@@ -69,6 +69,7 @@ const DEFAULT_OPTIONS = {
   sendBoxBorderLeft: '',
   sendBoxBorderRight: '',
   sendBoxBorderTop: 'solid 1px #E6E6E6',
+  sendBoxPlaceholderColor: '#767676',
   sendBoxTextWrap: false,
 
   // Visually show spoken text