Improved focus indication in split button panel.

microsoft · Nov 18, 2019 · b84c941 · b84c941
1 parent e3ea45b
commit b84c941
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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`,
       };