Fixed Web Chat suggestedActionBorder deprecation warning. (#2070)

tonyanziano · web-flow · commit 8201114d0557 · 2020-01-31T10:52:02.000-08:00
* Fixed Web Chat suggestedActionBorder deprecation warning.

* Fixed typo.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [client] Fixed an issue where trying to add a QnA KB manually after signing into Azure was causing the app to crash in PR [2066](https://github.com/microsoft/BotFramework-Emulator/pull/2066)
 - [client] Removed buble background on attachments [2067](https://github.com/microsoft/BotFramework-Emulator/pull/2067)
 - [client] Fixed an issue where the themes menu was empty on Windows & Linux in PR [2069](https://github.com/microsoft/BotFramework-Emulator/pull/2069)
+- [client] Fixed Web Chat suggestedActionBorder deprecation warning in PR [2070](https://github.com/microsoft/BotFramework-Emulator/pull/2070)
 
 ## Removed
 - [client/main] Removed legacy payments code in PR [2058](https://github.com/microsoft/BotFramework-Emulator/pull/2058)
diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/webChatTheme.ts b/packages/app/client/src/ui/editor/emulator/parts/chat/webChatTheme.ts
@@ -53,7 +53,9 @@ export default {
   timestampColor: 'var(--webchat-timestamp-text)',
 
   suggestedActionBackground: 'var(--webchat-sa-bg)',
-  suggestedActionBorder: 'var(--webchat-sa-border)',
+  suggestedActionBorderColor: 'var(--webchat-sa-border-color)',
+  suggestedActionBorderStyle: 'var(--webchat-sa-border-style)',
+  suggestedActionBorderWidth: 'var(--webchat-sa-border-width)',
   suggestedActionTextColor: 'var(--webchat-sa-text)',
 
   transcriptOverlayButtonBackground: 'var(--webchat-transcript-overlay-bg)',
diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css
@@ -57,7 +57,9 @@ html {
 
   /* suggested actions */
   --webchat-sa-bg: var(--webchat-bubble-bg);
-  --webchat-sa-border: solid 1px var(--neutral-4);
+  --webchat-sa-border-color: var(--neutral-4);
+  --webchat-sa-border-style: solid;
+  --webchat-sa-border-width: 1px;
   --webchat-sa-text: #3794FF;
 
   /* bot state button */
diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css
@@ -56,7 +56,9 @@ html {
 
   /* suggested actions */
   --webchat-sa-bg: var(--webchat-bubble-bg);
-  --webchat-sa-border: solid 1px var(--neutral-4);
+  --webchat-sa-border-color: var(--neutral-4);
+  --webchat-sa-border-style: solid;
+  --webchat-sa-border-width: 1px;
   --webchat-sa-text: #3794FF;
 
   /* bot state button */
diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css
@@ -55,7 +55,9 @@ html {
 
   /* suggested actions */
   --webchat-sa-bg: var(--webchat-bubble-bg);
-  --webchat-sa-border: none;
+  --webchat-sa-border-color: transparent;
+  --webchat-sa-border-style: solid;
+  --webchat-sa-border-width: 0;
   --webchat-sa-text: #3794FF;
 
   /* bot state button */
