Merge 0470d65 into 04fe2c3

microsoft · Jan 10, 2020 · 8331531 · 8331531
2 parents 04fe2c3 + 0470d65
commit 8331531
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -44,6 +44,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fixes [#2647](https://github.com/microsoft/BotFramework-WebChat/issues/2647). Update the `CroppedImage` component `PropType`, by [@tdurnford](https://github.com/tdurnford) in PR [#2795](https://github.com/microsoft/BotFramework-WebChat/pull/2795)
 - Fixes [#2794](https://github.com/microsoft/BotFramework-WebChat/issues/2794). Fix change locale sample, by [@corinagum](https://github.com/corinagum) in PR [#2798](https://github.com/microsoft/BotFramework-WebChat/pull/2798)
 - Fixes [#2510](https://github.com/microsoft/BotFramework-WebChat/issues/2510). Host hybrid-react and clear-after-idle samples, by [@corinagum](https://github.com/corinagum) in PR [#2798](https://github.com/microsoft/BotFramework-WebChat/pull/2798)
+- Fixes [#2772](https://github.com/microsoft/BotFramework-WebChat/issues/2772). Updated Adaptive Cards HostConfig to include container styles, by [@tdurnford](https://github.com/tdurnford) in PR [#28XX](https://github.com/microsoft/BotFramework-WebChat/pull/28xx)
+- Fixes [#2145](https://github.com/microsoft/BotFramework-WebChat/issues/2145). Updated Adaptive Cards styles to include action styles, by [@tdurnford](https://github.com/tdurnford) in PR [#28XX](https://github.com/microsoft/BotFramework-WebChat/pull/28xx)
 
 ### Changed
 

diff --git a/...__/__image_snapshots__/chrome-docker/adaptive-cards-js-action-styles-1-snap.png b/...__/__image_snapshots__/chrome-docker/adaptive-cards-js-action-styles-1-snap.png
diff --git a/...__image_snapshots__/chrome-docker/adaptive-cards-js-container-styles-1-snap.png b/...__image_snapshots__/chrome-docker/adaptive-cards-js-container-styles-1-snap.png
diff --git a/__tests__/adaptiveCards.js b/__tests__/adaptiveCards.js
@@ -27,6 +27,34 @@ test('breakfast card', async () => {
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
 
+test('container styles', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('card containerstyles', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), timeouts.fetchImage);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
+test('action styles', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('card actionstyles', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), timeouts.fetchImage);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+});
+
 test('breakfast card with custom host config', async () => {
   const adaptiveCardHostConfig = createAdaptiveCardsHostConfig({ ...defaultStyleOptions, bubbleTextColor: '#FF0000' });
 

diff --git a/packages/bundle/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.js b/packages/bundle/src/adaptiveCards/Styles/StyleSet/AdaptiveCardRenderer.js
@@ -1,5 +1,13 @@
 export default function({ accent, paddingRegular, primaryFont }) {
   return {
+    '& .ac-input, & .ac-inlineActionButton, & .ac-quickActionButton': {
+      fontFamily: primaryFont
+    },
+
+    '& .ac-multichoiceInput': {
+      padding: paddingRegular
+    },
+
     '& .ac-pushButton': {
       appearance: 'none',
       backgroundColor: 'White',
@@ -10,12 +18,22 @@ export default function({ accent, paddingRegular, primaryFont }) {
       padding: paddingRegular
     },
 
-    '& .ac-multichoiceInput': {
-      padding: paddingRegular
+    '& .ac-pushButton.style-destructive': {
+      backgroundColor: '#E50000',
+      color: 'white'
     },
 
-    '& .ac-input, & .ac-inlineActionButton, & .ac-quickActionButton': {
-      fontFamily: primaryFont
+    '& .ac-pushButton.style-destructive:hover, & .ac-pushButton.style-destructive:active': {
+      backgroundColor: '#BF0000'
+    },
+
+    '& .ac-pushButton.style-positive': {
+      backgroundColor: '#0078D7',
+      color: 'white'
+    },
+
+    '& .ac-pushButton.style-positive:hover, & .ac-pushButton.style-positive:active': {
+      backgroundColor: '#006ABC'
     }
   };
 }
diff --git a/packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig.js b/packages/bundle/src/adaptiveCards/Styles/adaptiveCardHostConfig.js
@@ -23,9 +23,47 @@ export default ({
     },
     emphasis: {
       backgroundColor: cardEmphasisBackgroundColor,
-      default: {
-        default: bubbleTextColor,
-        subtle
+      foregroundColors: {
+        default: {
+          default: bubbleTextColor,
+          subtle
+        }
+      }
+    },
+    accent: {
+      backgroundColor: '#C7DEF9',
+      foregroundColors: {
+        default: {
+          default: '#333333',
+          subtle: '#EE333333'
+        }
+      }
+    },
+    good: {
+      backgroundColor: '#CCFFCC',
+      foregroundColors: {
+        default: {
+          default: '#333333',
+          subtle: '#EE333333'
+        }
+      }
+    },
+    attention: {
+      backgroundColor: '#FFC5B2',
+      foregroundColors: {
+        default: {
+          default: '#333333',
+          subtle: '#EE333333'
+        }
+      }
+    },
+    warning: {
+      backgroundColor: '#FFE2B2',
+      foregroundColors: {
+        default: {
+          default: '#333333',
+          subtle: '#EE333333'
+        }
       }
     }
   },