From ee2c61ce6a69e4b99bddd96d36b810d989f95605 Mon Sep 17 00:00:00 2001
From: Tony Anziano <toanzian@microsoft.com>
Date: Mon, 18 Nov 2019 13:20:13 -0800
Subject: [PATCH] Improved focus indication in split button panel.

---
 CHANGELOG.md                                              | 1 +
 packages/app/client/src/ui/styles/themes/dark.css         | 2 ++
 .../app/client/src/ui/styles/themes/high-contrast.css     | 8 +++++---
 packages/app/client/src/ui/styles/themes/light.css        | 2 ++
 .../splitButton/splitButtonPanel/splitButtonPanel.scss    | 7 +++++--
 .../splitButton/splitButtonPanel/splitButtonPanel.tsx     | 2 +-
 6 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 499582127..89ca19220 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - [1982](https://github.com/microsoft/BotFramework-Emulator/pull/1982)
   - [1983](https://github.com/microsoft/BotFramework-Emulator/pull/1983)
   - [1990](https://github.com/microsoft/BotFramework-Emulator/pull/1990)
+  - [1991](https://github.com/microsoft/BotFramework-Emulator/pull/1991)
 
 ## Removed
 - [main] Removed unused `VersionManager` class in PR [1991](https://github.com/microsoft/BotFramework-Emulator/pull/1991)
diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css
index e16858bef..478e0c108 100644
--- a/packages/app/client/src/ui/styles/themes/dark.css
+++ b/packages/app/client/src/ui/styles/themes/dark.css
@@ -236,8 +236,10 @@ html {
   --split-button-expanded-outline: transparent;
   --split-button-separator-bg-color: #C8C8C8;
   --split-button-panel-color: var(--neutral-16);
+  --split-button-panel-border: 0;
   --split-button-panel-bg-color: var(--neutral-1);
   --split-button-selected-item-bg-color: var(--neutral-3);
+  --split-button-selected-item-border: 1px solid #00BCF2;
 
   /* Icons */
   --cosmos-db-contrast: var(--neutral-1);
diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css
index 892b2ea5c..11fdb75fe 100644
--- a/packages/app/client/src/ui/styles/themes/high-contrast.css
+++ b/packages/app/client/src/ui/styles/themes/high-contrast.css
@@ -234,9 +234,11 @@ html {
   --split-button-selected-outline: 1px solid #F38518;
   --split-button-expanded-outline: 1px solid #F38518;
   --split-button-separator-bg-color: #C8C8C8;
-  --split-button-panel-color: var(--neutral-16);
-  --split-button-panel-bg-color: var(--neutral-1);
-  --split-button-selected-item-bg-color: var(--neutral-3);
+  --split-button-panel-color: var(--neutral-1);
+  --split-button-panel-border: 1px solid #00BCF2;
+  --split-button-panel-bg-color: var(--neutral-16);
+  --split-button-selected-item-bg-color: var(--neutral-16);
+  --split-button-selected-item-border: 1px dashed #F38518;
 
   /* Icons */
   --cosmos-db-contrast: var(--neutral-1);
diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css
index 6389c20ab..6d40f1106 100644
--- a/packages/app/client/src/ui/styles/themes/light.css
+++ b/packages/app/client/src/ui/styles/themes/light.css
@@ -236,8 +236,10 @@ html {
   --split-button-expanded-outline: transparent;
   --split-button-separator-bg-color: #C8C8C8;
   --split-button-panel-color: var(--neutral-16);
+  --split-button-panel-border: 0;
   --split-button-panel-bg-color: var(--neutral-1);
   --split-button-selected-item-bg-color: var(--neutral-3);
+  --split-button-selected-item-border: 1px solid #00BCF2;
 
   /* Icons */
   --cosmos-db-contrast: var(--neutral-16);
diff --git a/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.scss b/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.scss
index a297f38eb..b54e8a18f 100644
--- a/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.scss
+++ b/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.scss
@@ -32,15 +32,16 @@
 //
 
 .panel {
+  box-sizing: border-box;
   position: absolute;
-	background-color: var(--split-button-panel-bg-color);
+  background-color: var(--split-button-panel-bg-color);
+  border: var(--split-button-panel-border);
   box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.3);
   list-style: none;
   margin: 0;
   padding: 0;
   
   &:focus {
-    border: 0;
     outline: 0;
   }
 }
@@ -50,10 +51,12 @@
   padding: 3px 26px;
   border: 0;
   background: none;
+  border: 1px solid transparent;
   color: var(--split-button-panel-color);
   cursor: pointer;
 
   &:hover, &.selected {
     background-color: var(--split-button-selected-item-bg-color);
+    border: var(--split-button-selected-item-border);
   }
 }
diff --git a/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.tsx b/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.tsx
index 4e65d2ef1..f992cf3e2 100644
--- a/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.tsx
+++ b/packages/sdk/ui-react/src/widget/splitButton/splitButtonPanel/splitButtonPanel.tsx
@@ -75,7 +75,7 @@ export class SplitButtonPanel extends React.Component<SplitButtonPanelProps> {
     if (expanded) {
       const caretClientRect = caretRef.getBoundingClientRect();
       const inlineStyle = {
-        left: `${caretClientRect.left}px`,
+        left: `${caretClientRect.left - 1}px`,
         top: `${caretClientRect.bottom}px`,
       };