From 36be0e634ce32ccccf0589201cbbe83154041d43 Mon Sep 17 00:00:00 2001
From: LeonVay <leon.vay@gmail.com>
Date: Wed, 3 Jun 2020 15:05:58 +0300
Subject: [PATCH] feat(popover): Popover ux changes discussion

---
 packages/mosaic/popover/popover.component.ts |  6 +++---
 packages/mosaic/popover/popover.scss         | 16 ++++++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/mosaic/popover/popover.component.ts b/packages/mosaic/popover/popover.component.ts
index 83cf3e4ff..bf5ce5c73 100644
--- a/packages/mosaic/popover/popover.component.ts
+++ b/packages/mosaic/popover/popover.component.ts
@@ -267,7 +267,7 @@ export function getMcPopoverInvalidPositionError(position: string) {
 }
 
 const VIEWPORT_MARGIN: number = 8;
-const POPOVER_ARROW_BORDER_DISTANCE: number = 22; // tslint:disable-line
+const POPOVER_ARROW_BORDER_DISTANCE: number = 20; // tslint:disable-line
 const ANCHOR_MIN_HEIGHT_WIDTH: number = 40;
 
 @Directive({
@@ -577,8 +577,8 @@ export class McPopover implements OnInit, OnDestroy {
         const offsets: { [key: string]: number} = {
             top: verticalOffset,
             bottom: verticalOffset,
-            right: horizontalOffset + 8,
-            left: horizontalOffset + 8
+            right: horizontalOffset,
+            left: horizontalOffset
         };
 
         const styleProperty = updatedPlacement.split(/(?=[A-Z])/)[1].toLowerCase();
diff --git a/packages/mosaic/popover/popover.scss b/packages/mosaic/popover/popover.scss
index 6b31c06b3..122493d16 100644
--- a/packages/mosaic/popover/popover.scss
+++ b/packages/mosaic/popover/popover.scss
@@ -133,13 +133,13 @@ $mc-popover-large-width: 640px;
 
 .mc-popover_placement-top-left .mc-popover__arrow {
     bottom: $popover-arrow-distance;
-    left: 12px;
+    left: 20px;
     margin-left: 0;
 }
 
 .mc-popover_placement-top-right .mc-popover__arrow {
     bottom: $popover-arrow-distance;
-    right: 12px;
+    right: 20px;
     margin-left: 0;
 }
 
@@ -151,13 +151,13 @@ $mc-popover-large-width: 640px;
 
 .mc-popover_placement-right-top .mc-popover__arrow {
     left: $popover-arrow-distance;
-    top: 17px;
+    top: 20px;
     margin-top: -$popover-arrow-width;
 }
 
 .mc-popover_placement-right-bottom .mc-popover__arrow {
     left: $popover-arrow-distance;
-    bottom: 17px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px
+    bottom: 14px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px
     margin-top: -$popover-arrow-width;
 }
 
@@ -169,13 +169,13 @@ $mc-popover-large-width: 640px;
 
 .mc-popover_placement-left-top .mc-popover__arrow {
     right: $popover-arrow-distance;
-    top: 17px;
+    top: 20px;
     margin-top: -$popover-arrow-width;
 }
 
 .mc-popover_placement-left-bottom .mc-popover__arrow {
     right: $popover-arrow-distance;
-    bottom: 17px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px
+    bottom: 14px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px
     margin-top: -$popover-arrow-width;
 }
 
@@ -187,12 +187,12 @@ $mc-popover-large-width: 640px;
 
 .mc-popover_placement-bottom-left .mc-popover__arrow {
     top: $popover-arrow-distance;
-    left: 12px;
+    left: 20px;
     margin-left: 0;
 }
 
 .mc-popover_placement-bottom-right .mc-popover__arrow {
     top: $popover-arrow-distance;
-    right: 12px;
+    right: 20px;
     margin-left: 0;
 }