fix: correct overflow caused by carbon-design-system#7309

lee-chase · Dec 8, 2020 · 6257c41 · 6257c41
1 parent f9ddb7d
commit 6257c41
Showing 1 changed file with 54 additions and 44 deletions.
diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
@@ -368,6 +368,7 @@
   }
 
   .#{$prefix}--tooltip {
+    @include box-shadow;
     @include reset;
 
     position: absolute;
@@ -379,6 +380,7 @@
     padding: $carbon--spacing-05;
     color: $inverse-01;
     word-wrap: break-word;
+    background: $inverse-02;
     border-radius: rem(2px);
 
     // Windows, Firefox HCM Fix
@@ -394,6 +396,58 @@
       box-shadow: inset 0 0 0 1px $inverse-02, inset 0 0 0 2px $ui-background;
     }
 
+    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start,
+    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start {
+      transform: translate(calc(50% - 22px), 0);
+
+      .#{$prefix}--tooltip__caret {
+        margin-left: 15px;
+      }
+    }
+
+    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end,
+    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end {
+      transform: translate(calc(22px - 50%), 0);
+
+      .#{$prefix}--tooltip__caret {
+        margin-right: 15px;
+      }
+    }
+
+    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start {
+      transform: translate(0, calc(-15px + 50%));
+
+      .#{$prefix}--tooltip__caret {
+        top: 14px;
+      }
+    }
+
+    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end {
+      transform: translate(0, calc(31px - 50%));
+
+      .#{$prefix}--tooltip__caret {
+        top: initial;
+        bottom: 25px;
+      }
+    }
+
+    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start {
+      transform: translate(0, calc(-26px + 50%));
+
+      .#{$prefix}--tooltip__caret {
+        top: 26px;
+      }
+    }
+
+    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end {
+      transform: translate(0, calc(20px - 50%));
+
+      .#{$prefix}--tooltip__caret {
+        top: initial;
+        bottom: 12px;
+      }
+    }
+
     p {
       @include type-style('body-short-01');
     }
@@ -427,12 +481,6 @@
       }
     }
 
-    .#{$prefix}--tooltip__content {
-      background-color: $inverse-02;
-      box-shadow: 0 0 0 $spacing-05 $inverse-02,
-        0 2px 6px $spacing-05 rgba(0, 0, 0, 0.2);
-    }
-
     // Tooltips need to be click focusable but not sequentially focusable so the user can click within
     // the tooltip and not have it close. Because the element is not actionable it does not need
     // to have a visible focus indicator (OK'd by IBMa)
@@ -454,44 +502,6 @@
       content: '';
     }
 
-    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-start,
-    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-start {
-      .#{$prefix}--tooltip__content {
-        transform: translate(calc(50% - 6px), 0);
-      }
-    }
-
-    &.#{$prefix}--tooltip--top.#{$prefix}--tooltip--align-end,
-    &.#{$prefix}--tooltip--bottom.#{$prefix}--tooltip--align-end {
-      .#{$prefix}--tooltip__content {
-        transform: translate(calc(6px - 50%), 0);
-      }
-    }
-
-    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start {
-      .#{$prefix}--tooltip__content {
-        transform: translate(0, calc(9px + 50% - #{$spacing-03}));
-      }
-    }
-
-    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start {
-      .#{$prefix}--tooltip__content {
-        transform: translate(0, calc(-3px + 50% - #{$spacing-03}));
-      }
-    }
-
-    &.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end {
-      .#{$prefix}--tooltip__content {
-        transform: translate(0, calc(9px - 50% + #{$spacing-03}));
-      }
-    }
-
-    &.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end {
-      .#{$prefix}--tooltip__content {
-        transform: translate(0, calc(-3px - 50% + #{$spacing-03}));
-      }
-    }
-
     .#{$prefix}--tooltip__footer {
       display: flex;
       align-items: center;