Added botAvatarBackgroundColor and userAvatarBackgroundColor to the default style options

CHANGELOG.md

@@ -99,6 +99,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
       - Specifically [`OffscreenCanvas.getContext('2d')`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/getContext)
 -  Added `timestampFormat` option to the default style options and created `AbsoluteTime` component, by [@tdurnford](https://github.com/tdurnford), in PR [#2295](https://github.com/microsoft/BotFramework-WebChat/pull/2295)
 -  `embed`: Added ES5 polyfills and dev server, by [@compulim](https://github.com/compulim), in PR [#2315](https://github.com/microsoft/BotFramework-WebChat/pull/2315)
+-  Fix [#2380](https://github.com/microsoft/BotFramework-WebChat/issues/2380). Added `botAvatarBackgroundColor` and `userAvatarBackgroundColor` to the default style options, by [@tdurnford](https://github.com/tdurnford) in PR [#2384](https://github.com/microsoft/BotFramework-WebChat/pull/2384)
 
 ### Samples
 

__tests__/basic.js

@@ -192,3 +192,23 @@ test('absolute timestamp', async () => {
 
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
+
+test('avatar background color', async () => {
+  const styleOptions = {
+    botAvatarBackgroundColor: 'red',
+    botAvatarInitials: 'B',
+    userAvatarBackgroundColor: 'blue',
+    userAvatarInitials: 'TJ'
+  };
+
+  const { driver, pageObjects } = await setupWebDriver({ props: { styleOptions } });
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('echo "Hello, World!"', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});

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

@@ -1,7 +1,12 @@
-export default function createAvatarStyle({ accent, avatarSize, primaryFont }) {
+export default function createAvatarStyle({
+  accent,
+  avatarSize,
+  botAvatarBackgroundColor,
+  primaryFont,
+  userAvatarBackgroundColor
+}) {
   return {
     alignItems: 'center',
-    backgroundColor: accent,
     borderRadius: '50%',
     color: 'White',
     // TODO: [P2] We should not set "display" in styleSet, this will allow the user to break the layout for no good reasons.
@@ -13,6 +18,14 @@ export default function createAvatarStyle({ accent, avatarSize, primaryFont }) {
     position: 'relative',
     width: avatarSize,
 
+    '&.from-user': {
+      backgroundColor: userAvatarBackgroundColor || accent
+    },
+
+    '&:not(.from-user)': {
+      backgroundColor: botAvatarBackgroundColor || accent
+    },
+
     '& > .image': {
       left: 0,
       position: 'absolute',

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

@@ -22,12 +22,12 @@ export default function CarouselFlipper({
 
     '&:focus > div.slider > div.button': {
       backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
-      color: transcriptOverlayButtonColorOnFocus
+      color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor
     },
 
     '&:hover > div.slider > div.button': {
       backgroundColor: transcriptOverlayButtonBackgroundOnHover,
-      color: transcriptOverlayButtonColorOnHover
+      color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor
     }
   };
 }

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

@@ -26,12 +26,12 @@ export default function createScrollToEndButtonStyle({
 
     '&:hover': {
       backgroundColor: transcriptOverlayButtonBackgroundOnHover,
-      color: transcriptOverlayButtonColorOnHover
+      color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor
     },
 
     '&:focus': {
       backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
-      color: transcriptOverlayButtonColorOnFocus
+      color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor
     }
   };
 }

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

@@ -3,7 +3,8 @@ export default function createSendBoxButtonStyle({
   sendBoxButtonColorOnDisabled,
   sendBoxButtonColorOnFocus,
   sendBoxButtonColorOnHover,
-  sendBoxHeight
+  sendBoxHeight,
+  subtle
 }) {
   return {
     backgroundColor: 'Transparent',
@@ -26,7 +27,7 @@ export default function createSendBoxButtonStyle({
     },
 
     '& svg': {
-      fill: sendBoxButtonColor
+      fill: sendBoxButtonColor || subtle
     },
 
     '&:disabled svg': {

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

@@ -4,7 +4,8 @@ export default function createSendBoxTextAreaStyle({
   sendBoxBackground,
   sendBoxMaxHeight,
   sendBoxPlaceholderColor,
-  sendBoxTextColor
+  sendBoxTextColor,
+  subtle
 }) {
   return {
     alignItems: 'center',
@@ -51,7 +52,7 @@ export default function createSendBoxTextAreaStyle({
         wordBreak: 'break-word',
 
         '&::placeholder': {
-          color: sendBoxPlaceholderColor
+          color: sendBoxPlaceholderColor || subtle
         }
       }
     }

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

@@ -1,8 +1,10 @@
 export default function createSendBoxTextBoxStyle({
   primaryFont,
   sendBoxBackground,
+  sendBoxDisabledTextColor,
   sendBoxPlaceholderColor,
-  sendBoxTextColor
+  sendBoxTextColor,
+  subtle
 }) {
   return {
     alignItems: 'center',
@@ -11,15 +13,22 @@ export default function createSendBoxTextBoxStyle({
     '& > input': {
       backgroundColor: sendBoxBackground,
       border: 0,
-      color: sendBoxTextColor,
       fontFamily: 'inherit',
       fontSize: 'inherit',
       height: '100%',
       outline: 0,
       padding: 0,
 
+      '&:not(:disabled)': {
+        color: sendBoxTextColor
+      },
+
+      '&:disabled': {
+        color: sendBoxDisabledTextColor || subtle
+      },
+
       '&::placeholder': {
-        color: sendBoxPlaceholderColor
+        color: sendBoxPlaceholderColor || subtle
       }
     }
   };

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

@@ -1,6 +1,6 @@
-export default function createSendStatusStyle({ accent, fontSizeSmall, primaryFont, timestampColor }) {
+export default function createSendStatusStyle({ accent, fontSizeSmall, primaryFont, subtle, timestampColor }) {
   return {
-    color: timestampColor,
+    color: timestampColor || subtle,
     fontFamily: primaryFont,
     fontSize: fontSizeSmall,
     paddingTop: 5,

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

@@ -1,18 +1,24 @@
 /* eslint no-magic-numbers: "off" */
 
 export default function createSuggestedActionStyle({
+  accent,
   paddingRegular,
   paddingWide,
   primaryFont,
   suggestedActionBackground,
-  suggestedActionBorder,
+  suggestedActionBorderColor,
+  suggestedActionBorderStyle,
+  suggestedActionBorderWidth,
   suggestedActionBorderRadius,
   suggestedActionImageHeight,
   suggestedActionTextColor,
   suggestedActionDisabledBackground,
-  suggestedActionDisabledBorder,
+  suggestedActionDisabledBorderColor,
+  suggestedActionDisabledBorderStyle,
+  suggestedActionDisabledBorderWidth,
   suggestedActionDisabledTextColor,
-  suggestedActionHeight
+  suggestedActionHeight,
+  subtle
 }) {
   return {
     paddingBottom: paddingRegular,
@@ -30,15 +36,19 @@ export default function createSuggestedActionStyle({
       paddingRight: paddingWide,
 
       '&:disabled': {
-        background: suggestedActionDisabledBackground,
-        border: suggestedActionDisabledBorder,
-        color: suggestedActionDisabledTextColor
+        background: suggestedActionDisabledBackground || suggestedActionBackground,
+        borderColor: suggestedActionDisabledBorderColor,
+        borderStyle: suggestedActionDisabledBorderStyle,
+        borderWidth: suggestedActionDisabledBorderWidth,
+        color: suggestedActionDisabledTextColor || subtle
       },
 
       '&:not(:disabled)': {
         background: suggestedActionBackground,
-        border: suggestedActionBorder,
-        color: suggestedActionTextColor
+        borderColor: suggestedActionBorderColor || accent,
+        borderStyle: suggestedActionBorderStyle,
+        borderWidth: suggestedActionBorderWidth,
+        color: suggestedActionTextColor || accent
       },
 
       '& > img': {

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

@@ -36,12 +36,12 @@ export default function createSuggestedActionsStyleSet({
 
     '&:focus > div.slider > div': {
       backgroundColor: transcriptOverlayButtonBackgroundOnFocus,
-      color: transcriptOverlayButtonColorOnFocus
+      color: transcriptOverlayButtonColorOnFocus || transcriptOverlayButtonColor
     },
 
     '&:hover > div.slider > div': {
       backgroundColor: transcriptOverlayButtonBackgroundOnHover,
-      color: transcriptOverlayButtonColorOnHover
+      color: transcriptOverlayButtonColorOnHover || transcriptOverlayButtonColor
     }
   });
 

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

@@ -1,6 +1,6 @@
-export default function createTimestampStyle({ timestampColor, primaryFont, fontSizeSmall }) {
+export default function createTimestampStyle({ fontSizeSmall, primaryFont, subtle, timestampColor }) {
   return {
-    color: timestampColor,
+    color: timestampColor || subtle,
     fontFamily: primaryFont,
     fontSize: fontSizeSmall,
     paddingTop: 5

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

@@ -2,14 +2,15 @@ export default function createUploadButtonStyle({
   sendBoxButtonColor,
   sendBoxButtonColorOnFocus,
   sendBoxButtonColorOnHover,
-  sendBoxHeight
+  sendBoxHeight,
+  subtle
 }) {
   return {
     // We use the sendBoxHeight, so the button looks square
     width: sendBoxHeight,
 
     '& > .icon > svg': {
-      fill: sendBoxButtonColor
+      fill: sendBoxButtonColor || subtle
     },
 
     '& > input:hover + .icon > svg': {

packages/component/src/Styles/createStyleSet.js

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import createActivitiesStyle from './StyleSet/Activities';
 import createActivityStyle from './StyleSet/Activity';
 import createAudioAttachmentStyle from './StyleSet/AudioAttachment';
@@ -67,7 +68,7 @@ export default function createStyleSet(options) {
   // Keep this list flat (no nested style) and serializable (no functions)
 
   // TODO: [P4] Deprecate this code after bump to v5
-  const { bubbleBorder, bubbleFromUserBorder } = options;
+  const { bubbleBorder, bubbleFromUserBorder, suggestedActionBorder, suggestedActionDisabledBorder } = options;
 
   if (bubbleBorder) {
     console.warn(
@@ -109,6 +110,46 @@ export default function createStyleSet(options) {
     }
   }
 
+  if (suggestedActionBorder) {
+    console.warn(
+      'Web Chat: styleSet.suggestedActionBorder is being deprecated. Please use suggestedActionBorderColor, suggestedActionBorderStyle, and, suggestedActionBorderWidth.'
+    );
+
+    const { color, style, width } = parseBorder(suggestedActionBorder);
+
+    if (color && color !== 'initial') {
+      options.suggestedActionBorderColor = color;
+    }
+
+    if (style && style !== 'initial') {
+      options.suggestedActionBorderStyle = style;
+    }
+
+    if (PIXEL_UNIT_PATTERN.test(width)) {
+      options.suggestedActionBorderWidth = parseInt(width, 10);
+    }
+  }
+
+  if (suggestedActionDisabledBorder) {
+    console.warn(
+      'Web Chat: styleSet.suggestedActionDisabledBorder is being deprecated. Please use suggestedActionDisabledBorderColor, suggestedActionDisabledBorderStyle, and, suggestedActionDisabledBorderWidth.'
+    );
+
+    const { color, style, width } = parseBorder(suggestedActionDisabledBorder);
+
+    if (color && color !== 'initial') {
+      options.suggestedActionDisabledBorderColor = color;
+    }
+
+    if (style && style !== 'initial') {
+      options.suggestedActionDisabledBorderStyle = style;
+    }
+
+    if (PIXEL_UNIT_PATTERN.test(width)) {
+      options.suggestedActionDisabledBorderWidth = parseInt(width, 10);
+    }
+  }
+
   return {
     activities: createActivitiesStyle(options),
     activity: createActivityStyle(options),