fix(Popover): adjust popover content placement (#10539)

* fix(Popover): adjust popover content placement * fix(popover): revert changes * fix(Popover): add right and left popover caret offset stlyling * fix(popover): update offset styling * fix(popover): adjust left/right top and bottom calc Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 16, 2022 · 9bc8ad8 · 9bc8ad8
1 parent 8a8a8f8
commit 9bc8ad8
Showing 1 changed file with 27 additions and 12 deletions.
diff --git a/packages/styles/scss/components/popover/_popover.scss b/packages/styles/scss/components/popover/_popover.scss
@@ -185,13 +185,16 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
     bottom: 0;
     left: 0;
-    transform: translate(0, calc(100% + $popover-offset));
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(100% + $popover-offset)
+    );
   }
 
   .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
     right: 0;
     bottom: 0;
-    transform: translate(0, calc(100% + $popover-offset));
+    transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 
   // Popover hover area placement
@@ -231,13 +234,16 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover--top-left .#{$prefix}--popover-content {
     top: 0;
     left: 0;
-    transform: translate(0, calc(-100% - $popover-offset));
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-100% - $popover-offset)
+    );
   }
 
   .#{$prefix}--popover--top-right .#{$prefix}--popover-content {
     top: 0;
     right: 0;
-    transform: translate(0, calc(-100% - $popover-offset));
+    transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 
   // Popover hover area placement
@@ -277,15 +283,18 @@ $popover-caret-height: custom-property.get-var(
   }
 
   .#{$prefix}--popover--right-top .#{$prefix}--popover-content {
-    top: 0;
+    top: 50%;
     left: 100%;
-    transform: translate($popover-offset, 0);
+    transform: translate(
+      $popover-offset,
+      calc(0.5 * $popover-offset * -1 - 16px)
+    );
   }
 
   .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
-    bottom: 0;
+    bottom: 50%;
     left: 100%;
-    transform: translate($popover-offset, 0);
+    transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
   }
 
   // Popover hover area placement
@@ -325,19 +334,25 @@ $popover-caret-height: custom-property.get-var(
   }
 
   .#{$prefix}--popover--left-top .#{$prefix}--popover-content {
-    top: 0;
+    top: -50%;
     right: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
-    transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-1 * 0.5 * $popover-offset + 16px)
+    );
   }
 
   .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
     right: 100%;
-    bottom: 0;
+    bottom: -50%;
     // Add in 0.1px to prevent rounding errors where the content is
     // moved farther than the caret
-    transform: translate(calc(-1 * $popover-offset + 0.1px), 0);
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(0.5 * $popover-offset - 16px)
+    );
   }
 
   // Popover hover area placement