feat(popover): Popover ux changes discussion

positive-js · Jun 3, 2020 · ac415fb · ac415fb
1 parent 6ce9b2a
commit ac415fb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/packages/mosaic-dev/popover/template.html b/packages/mosaic-dev/popover/template.html
@@ -249,4 +249,4 @@ <h3>Configuration:</h3>
         </div>
     </div>
 
-</div>
+</div>
diff --git a/packages/mosaic/popover/popover.component.ts b/packages/mosaic/popover/popover.component.ts
@@ -267,7 +267,8 @@ export function getMcPopoverInvalidPositionError(position: string) {
 }
 
 const VIEWPORT_MARGIN: number = 8;
-const POPOVER_ARROW_BORDER_DISTANCE: number = 20; // tslint:disable-line
+const POPOVER_ARROW_BORDER_DISTANCE: number = 22; // tslint:disable-line
+const ANCHOR_MIN_HEIGHT_WIDTH: number = 40;
 
 @Directive({
     selector: '[mcPopover]',
@@ -576,12 +577,19 @@ export class McPopover implements OnInit, OnDestroy {
         const offsets: { [key: string]: number} = {
             top: verticalOffset,
             bottom: verticalOffset,
-            right: horizontalOffset,
-            left: horizontalOffset
+            right: horizontalOffset + 8,
+            left: horizontalOffset + 8
         };
 
         const styleProperty = updatedPlacement.split(/(?=[A-Z])/)[1].toLowerCase();
 
+        if (((styleProperty === 'top' || styleProperty === 'bottom') &&
+            elementHeight > ANCHOR_MIN_HEIGHT_WIDTH) ||
+            ((styleProperty === 'left' || styleProperty === 'right') &&
+            elementWidth > ANCHOR_MIN_HEIGHT_WIDTH)) {
+            return;
+        }
+
         if (!this.overlayRef.overlayElement.style[styleProperty]) {
             this.overlayRef.overlayElement.style[styleProperty] = '0px';
         }

diff --git a/packages/mosaic/popover/popover.scss b/packages/mosaic/popover/popover.scss
@@ -7,7 +7,7 @@
 $z-index-popover: 1060;
 $popover-max-width: 240px;
 $border-radius-base: 4px;
-$popover-arrow-width: 6px;
+$popover-arrow-width: 4px;
 $popover-distance: $popover-arrow-width * 2;
 $popover-arrow-distance: -($popover-arrow-width + 2px);
 $border-size: 1px;
@@ -133,13 +133,13 @@ $mc-popover-large-width: 640px;
 
 .mc-popover_placement-top-left .mc-popover__arrow {
     bottom: $popover-arrow-distance;
-    left: 20px;
+    left: 12px;
     margin-left: 0;
 }
 
 .mc-popover_placement-top-right .mc-popover__arrow {
     bottom: $popover-arrow-distance;
-    right: 20px;
+    right: 12px;
     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: 20px;
+    top: 17px;
     margin-top: -$popover-arrow-width;
 }
 
 .mc-popover_placement-right-bottom .mc-popover__arrow {
     left: $popover-arrow-distance;
-    bottom: 14px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px
+    bottom: 17px; // 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: 20px;
+    top: 17px;
     margin-top: -$popover-arrow-width;
 }
 
 .mc-popover_placement-left-bottom .mc-popover__arrow {
     right: $popover-arrow-distance;
-    bottom: 14px; // same as top placement = element.style.top + element.style.margin-top = 20px -6px
+    bottom: 17px; // 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: 20px;
+    left: 12px;
     margin-left: 0;
 }
 
 .mc-popover_placement-bottom-right .mc-popover__arrow {
     top: $popover-arrow-distance;
-    right: 20px;
+    right: 12px;
     margin-left: 0;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -249,4 +249,4 @@ <h3>Configuration:</h3> @@
             </div>
         </div>
-    </div>
+    </div>