feat(popover): Popover ux changes discussion

positive-js · Jun 3, 2020 · 36be0e6 · 36be0e6
1 parent ac415fb
commit 36be0e6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git 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
@@ -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;
 }